rex0220 印刷屋プラグイン - AI(Claude Code)に帳票を作らせる（画像から見積書を再現）

Posted at 2026-10-08

前回の記事（Claude Code 用のしくみで請求書を作成）では、Codex に請求書を作らせました。今回はその続編で、Claude Code に戻ります。

今回試したのは、見積書の画像を 1 枚渡して、同じ見積書を作らせることです。元の画像は、印刷屋プラグインで作った見積書の PDF を、PC で開いてスクリーンショットしたものです。元の帳票の HTML・CSS・設定ファイルは渡さずに、画像から、どのくらい再現できるかを見ました。アプリの項目定義とレコード、テンプレートにある帳票作成の資料（レシピ集、共通 CSS など）は、いつもどおり AI が参照しています。

AI に送ったのは、画像と次の 1 行だけです。

アプリ 3740 で、画像の見積書を作成して

結果は、二重の枠、紺と金の配色、金額の欄、社印、明細の表まで、元の画像にかなり近い見積書になりました。AI の作業時間は約 6 分で、1 回の依頼でここまで作れました。

元の画像と見比べて残った違い（品名の列幅、文字の大きさ）は、2 通目の依頼で直し、元の画像とほぼ同じ見た目になりました。2 回の依頼で、AI の作業時間は合わせて約 8 分です。

元画像（元の見積書）、初回（1 通目で AI が作った見積書）、修正後（2 通目で直した見積書）。どれも印刷屋で作った PDF

環境の用意（テンプレートリポジトリ、kintone への接続、印刷屋プラグインの zip）は、rex0220 印刷屋プラグイン - AI(Claude Code)に帳票を作らせるの「環境構築（初回だけ）」のとおりです。本記事は、その環境ができている前提で「頼んでから PDF になるまで」を紹介します。

全体の流れ

スクリーンショットを貼ってから、印刷屋プラグインで PDF になるまでの流れです。①〜⑤ は AI、⑥〜⑧ は人が行います。

② AI は kintone を読むだけで、書き込みはしません
⑤ AI が確かめるのは、書き出した HTML の中の値（金額・日付・明細）までです。位置や大きさがどれだけ近いかは、⑧ で人が PDF を見て比べます
⑧ で見つけた違い（品名の列幅、文字の大きさ）は、2 通目の依頼で直しました。③ からもう一度進め、⑥ は「一部置換」で取り込みます

使ったアプリ

最初の記事と同じ見積書アプリ（アプリ番号 3740）です。

項目	種類	内容
宛名	文字列（1 行）
見積番号	文字列（1 行）
見積日	日付
担当者	ユーザー選択
見積明細	テーブル	型番（ルックアップ）、商品名、数量、単価、金額（計算）
小計 / 消費税 / 合計	計算
備考	文字列（複数行）
見積ファイル	添付ファイル	PDF の保存先

金額の項目（単価・金額・小計・消費税・合計）の単位は、半角の「\」です。

プレビューには、レコード 3（明細 5 行、備考 2 行）を使いました。元の画像に写っている値（見積番号 S-0000003、明細 5 行など）は、このレコードの値です。

頼んだこと

PDF のスクリーンショットを Claude Code のチャットに貼り、1 行を添えて送りました。

アプリ 3740 で、画像の見積書を作成して

スクリーンショットは 794 × 1123 px で、印刷屋の A4 縦（96 dpi）の 1 ページとちょうど同じ大きさでした。用紙は伝えていませんが、AI は A4 縦とみなして作りました。

AI は、おおむね次の順に進めました。

fields --app 3740 --summary で、項目のコードと型を確かめる
帳票レシピ集の既定の形、共通 CSS、TABLE_HTML が作る表の class を読む
金額の単位が半角の「\」だと気づき、円記号の出し方を調べる
画像を読んで、配置・大きさ・色と帳票の作りを決める
settings/APP3740-見積書-御見積書.json に設定を書く
normalize → record → preview で、検査して帳票を HTML に書き出す
書き出した HTML から、金額・日付・明細の値を確かめる

途中で 1 回止めた

作業フォルダーには、このアプリの印刷屋の設定をダウンロードしたファイルも置いてありました。この設定には、元の見積書のボタンも入っています。AI は項目を調べた直後に、このファイルのボタンの一覧を見ようとしました（AI としては、アプリにすでにあるボタンを確かめるつもりでした）。そこから元の見積書の HTML や CSS を読まれると、画像からの再現を試すことになりません。そこでこの操作は断り、「続けて」とだけ送りました。

AI は、その設定を開かずに、新しいボタンだけの設定ファイルを作る方針で続けました。

項目は確認できました。既存の設定ファイルの中は見ずに、新しいボタンだけのファイルを作ります。

AI が画像から読み取ったこと

AI は、画像を A4 縦 96 dpi の 1 ページとみなし、画像の中の位置をそのままページの px として読みました。読み取った位置や大きさを、帳票の CSS の数値にしています。

画像の部分	AI が書いたもの
二重の金の枠	外側 2px、内側 1px の線。div を 2 つ重ねて描く
題	「御見積書」は 32px の太字で字間 0.35em。「QUOTATION」は 11px。その下に幅 120px の金の線
色	紺 `#1f2b48`、金 `#a7884f`（画像から推定）
左右の欄	左に宛名・あいさつ・金額・有効期限（幅 360px）、右に自社の情報（右寄せ）
御見積金額	上下に 3px の紺の線。金額は 26px の太字
社印	赤い角丸の四角に「サンプル / 株式会社」。SVG で描き直して埋め込む
明細の列幅	No. 52px、品番 75px、品名は残り（約 235px）、数量 80px、単価 108px、金額 116px
備考と合計	備考の枠は幅 385px、合計の欄は幅 260px。合計の行は 16px の太字で、下に 3px の紺の線
下の社名	ページの下から 40px。上に金の線、字間を空けて中央に

表の大きさは 1 通目の値です。題や宛名などの文字の大きさは、2 通目で少し大きくしました。

細かいところにも、頼んでいない工夫がありました。

字間を空けた題の中央寄せ: 字間（letter-spacing）は最後の文字の右にも付くので、そのままでは題が中央から少し左にずれます。AI は、同じ幅の左の余白（padding-left: 0.35em）を足して打ち消していました。帳票の CSS でよく使う小技です
社印: スクリーンショットから切り抜いたのではなく、赤い角丸の四角と 2 行の文字を AI が SVG で書いて似せ、data URL で HTML に埋め込みました。元の印影そのものではないので、実際の社印を使うなら、添付ファイルの画像などに差し替えます

画像の表示とアプリの項目は、次のように対応させました。

画像の表示	AI が対応させた項目
No. / 発行日	見積番号 / 見積日
宛名（御中）	宛名
御見積金額（税込）	合計
有効期限	見積日の 1 か月後（AI の仮定。下で説明）
担当	担当者（ユーザー選択の表示名）
品番 / 品名 / 数量 / 単価 / 金額	見積明細の型番 / 商品名 / 数量 / 単価 / 金額
小計 / 消費税（10%）/ 合計	小計 / 消費税 / 合計
備考	備考

画像の見出しは「品番」「品名」で、項目名の「型番」「商品名」とは違います。AI はテーブルの列に対応させ、表の見出しは画像のとおり「品番」「品名」にしました。

有効期限は、アプリに項目がありません。画像から分かるのは「発行日 2026年2月12日、有効期限 2026年3月12日」という値だけで、決め方（1 か月後、28 日後、決まった日など）までは分かりません。AI は、帳票レシピ集の見積書の例と同じ「見積日の 1 か月後」にし、画像の日付と合うことを確かめました。業務の決め方として正しいかは、人が確かめます。

自社名・住所・電話番号・あいさつ文・下の社名・社印は、項目に無いので、画像の文字のまま固定で書いています。

AI が先回りしたこと

返答や作業の途中で、頼んでいない点にも気を配っていました。

画像のとおりに出すための工夫

円記号: 単位が半角の「\」なので、そのまま出すと、フォントによってはバックスラッシュで表示されます。そこで金額は、計算式で "¥" & FIXED(金額) として「¥」を付けました。前回の Claude Code の記事では YEN() を使いましたが、今回は資料によって YEN() の出力の書き方（¥ か全角の「￥」か）が違ったので、FIXED() に「¥」を足し、書き出した HTML で「¥3,000,000」の形になったことを確かめています
class 名: 既定の見積書の class（pcraft-inv-…）には、共通 CSS で罫線などの指定が付いています。デザインが大きく違うので、class 名を pcraft-qt-… に付け替え、帳票の CSS だけで見た目を決めました
品番と品名のエスケープ: TABLE_HTML はセルの値をエスケープしないので、型番と商品名は ESC_HTML() で囲み、< や & が入っていても文字として出るようにしました
フォント: AI にはフォントを伝えていませんが、画像の字形が Noto Sans JP に近いと見て、帳票の CSS で Noto Sans JP を優先し、無ければヒラギノ角ゴ、游ゴシック、メイリオで表示するようにしました。あわせて、どの PC でも Noto Sans JP で出すには、アプリの設定で Web フォント（Noto Sans JP）を有効にするよう勧めてきました。実は元の見積書も、アプリ全体の Web フォントの設定（設定画面で人が指定）で Noto Sans JP にして印刷したものです。このアプリの Web フォントはすでに有効でしたが、AI は既存の設定を見ていないので、そのことは知りませんでした

画像からは決まらないこと（AI が決めて、返答で示したこと）

画像に写っているのは帳票の見た目だけで、ボタンの動きや保存先は分かりません。AI は次のように決め、返答で「変えたければ言ってください」と示しました。

保存先: PDF は見積ファイルに保存する（帳票レシピ集の見積書の例と同じ）
ボタンを出す条件: 見積ファイルがまだ無いレコードにだけ出す（同じ）
押したときの動き: まずプレビューを表示する（レシピ集の例は「確認してから作る」。画像と見比べやすいようにプレビューにした）

AI が自分で確かめたこと

設定の検査（normalize）はエラー 0、警告 1 件でした。警告は、TABLE_HTML が値を HTML として入れる関数であることの知らせで、想定どおりです。

次に、帳票を HTML に書き出しました（preview）。確かめられたのは次の 2 つです。

1 ページ分の HTML が書き出された
設定のファイル名の式から作られる PDF のファイル名 が「御見積書-S-0000003.pdf」になる

実際に PDF ができるか、1 ページに収まるかは、印刷屋で確かめます。AI は、書き出した HTML の中の値を、元の画像と照らし合わせています。

確かめたこと	書き出した値
No. / 発行日	S-0000003 / 2026年2月12日
御見積金額	¥8,793,400
有効期限	2026年3月12日
担当	営業太郎A
明細	5 行。1 行目は「A003」「kintone ワイドコース（1,000ユーザー）」「1」「¥3,000,000」「¥3,000,000」
小計 / 消費税 / 合計	¥7,994,000 / ¥799,400 / ¥8,793,400

どれも元の画像と同じ値です。

ただし、AI が確かめたのは文字として出た値までです。このテンプレートでは AI はブラウザーを開かない決まりなので、位置や大きさがどれだけ画像に近いかは、人が PDF を見て比べます。

kintone に取り込む

設定ファイル（settings/APP3740-見積書-御見積書.json）を、印刷屋プラグインの設定画面で取り込みます。

アプリの設定 → プラグイン → 印刷屋プラグインの設定
設定をアップロード で設定ファイルを選ぶ
取り込み方は「追加」（このアプリには印刷屋の設定がすでにあるため）
保存する → 運用環境に反映

このアプリには、すでに同じ名前の「御見積書」ボタンがあったので、取り込んだボタンは「御見積書 (2)」になりました。

設定のアップロード — 「追加」で取り込む（同じ名前があるので「御見積書 (2)」になる）

詳細画面の「御見積書 (2)」ボタンを押すと、プレビューが表示され、PDF を見積ファイルに保存できます。プレビューの見出しの「御見積書の PDF を作ります」は、AI がボタンの説明に書いた文です。

詳細画面の「御見積書 (2)」ボタンとプレビュー

どのくらい再現できたか

印刷屋で PDF を作り、元の画像と同じ縮尺で並べて見比べました。二重の枠、題、宛名と金額の欄、社印、明細の表、備考と合計、下の社名まで、同じ配置・同じ配色で並び、再現度は高いと感じました。一方で、文字の大きさや列幅などは、さらに調整が要ります。

元の見積書（左）と、1 通目で AI が作った見積書（右）

この比較画像は、AI にも見せています（記事に入れた画像を、AI が記事を直すときに見ました）。AI が挙げた違いは次のとおりです。

部分	元と比べた AI の再現
品名の列	狭い。元は 2 行までで収まる（4・5 行目は 1 行）が、再現は 2〜3 行に折り返す。そのぶん表が縦に伸び、備考と合計の欄が下にずれる
数量・単価・金額の列	少し広い
題・宛名	少し小さい（1 割ほど）
合計の欄の見出し（小計・消費税）	小さい
あいさつ文、金額、自社の情報、備考、社印	ほぼ同じ大きさ・位置

AI は、品名の列が狭い原因も見つけました。読み取りの誤りではなく、CSS の書き方の誤りです。画像から読んだ列幅（No. 52px、品番 75px、数量 80px、単価 108px、金額 116px）は、ほぼ合っていました。ところが CSS の width は文字の部分の幅で、セルの左右の余白（10px ずつ）が足されます。幅を決めた 5 つの列が 20px ずつ広がり、残りの品名の列が約 100px 狭くなっていました。

文字の大きさの違いは、AI が画像を目で読んだ値（推定）のずれです。フォントは元と同じ Noto Sans JP（アプリの Web フォント）なので、字形の違いではありません。

2 通目: 「実際に設定ファイルで直す」

違いと原因が分かったので、そのまま AI に直させました。送ったのは次の 1 行です（実際のメッセージには、前の質問への答えも 1 行添えています）。

実際に設定ファイルで直す

AI は、比較画像（同じ縮尺）で元と再現の文字の幅を測り、その比から直す値を決めました。

部分	1 通目	2 通目	根拠（元 ÷ 再現の幅）
明細の見出しのセル	幅に余白が足される	`box-sizing: border-box`	品名の列が約 100px 狭い
明細の見出しの文字	13px	14px	約 1.07
題	32px	34px	約 1.08
QUOTATION	11px、字間 0.4em	12px、字間 0.45em	約 1.15
宛名 / 御中	18px / 14px	20px / 15px	約 1.11 / 1.13
有効期限	12px	13px	約 1.08
小計・消費税の行	13px	15px	約 1.17〜1.19

合計の行、あいさつ文、金額、自社の情報、備考は、元とほぼ同じ大きさだったので変えていません。

AI は、変える前の設定ファイルを控えに取ってから CSS の 7 か所を書き換え、検査（エラー 0）、変更前との差分、プレビューの書き出しまで進めました。差分は、たとえば明細の見出しのセルならこうです。

  table.pcraft-qt-item-table th {
+   box-sizing: border-box; /* width に左右の余白を含める */
    padding: 8px 10px;
    border-bottom: 1px solid #1f2b48;
+   font-size: 14px;
    font-weight: bold;

取り込みは「一部置換」で、置き換え先に「御見積書 (2)」を選びます。「御見積書」は元の見積書のボタンなので、選ばないよう AI も念を押していました。

結果は、冒頭の画像の「修正後」のとおりです。

品名の折り返しが、元の画像と同じになった（1〜3 行目は 2 行、4・5 行目は 1 行。折り返す位置も同じ）
題・宛名・合計の欄の文字の大きさも、元とそろった
残った違いは、表から下が元より数 px 下にある程度

かかった時間と費用

回	依頼	AI の作業時間	API 料金に換算
1 通目	画像の見積書を作成して（途中で 1 回止めて「続けて」）	5 分 41 秒	$1.72
2 通目	実際に設定ファイルで直す	2 分 23 秒	$0.84
計		8 分 04 秒（約 8 分）	$2.56（約 2.6 ドル）

Claude Code は定額プラン（Max）で使っています。プランの利用枠の中で使ったので、この作業のための別の支払いはありません。表の金額は、同じ量を API で使った場合の目安です（Claude Opus 5.5）
作業時間は、メッセージを送ってから AI の返答が終わるまでです。止めてから「続けて」を送るまでの時間は含みません。結果を読む時間や、kintone で取り込んで PDF を確かめる時間も含みません
比較画像から違いと原因を見つけたのは、記事を直す作業の中でした。記事の作業と分けられないので、表には入れていません
同じ依頼でも、毎回同じ時間・金額になるとは限りません

単価、トークン数、時間の内訳

単価（Claude Opus 5.5、100 万トークンあたり。2026-10-08 に公式の料金ページで確かめた値）

種類	単価	1 通目のトークン数	金額	2 通目のトークン数	金額
入力（キャッシュを使わない分）	$4	50	$0.000	16	$0.000
キャッシュの書き込み（1 時間）	$8	75,510	$0.604	12,371	$0.099
キャッシュの読み込み	$0.20	2,089,870	$0.418	2,642,695	$0.529
出力	$20	34,701	$0.694	10,655	$0.213
計			$1.716		$0.841

キャッシュの書き込みは、どちらもすべて 1 時間キャッシュでした（5 分キャッシュなら $5）
1 通目は、換算額の約 4 割が出力トークン（AI が考えて書いた分）、約 6 割が入力トークン（会話・資料・画像の読み込み。キャッシュの読み書きを含む）でした
2 通目は、換算額の 6 割強がキャッシュの読み込みです。同じ会話で記事の作業を続けた後だったので、1 回のやり取りで読み込む会話が長くなっていました（2 通目の作業には、記事の 1 か所を直す作業も含みます）

1 通目の時間の内訳

部分	時間
画像を読んで、配置・大きさ・色と帳票の作りを決める（AI が考えている時間）	約 2 分 35 秒
設定ファイルを書く	約 36 秒
kintone からの取得や設定の検査などのツールの実行（合わせて）	約 30 秒
そのほか（資料を読む、値を確かめる、返答を書く）	残り

止めてから「続けて」を送るまでの約 17 秒は、作業時間に含めていません。

頼み方のコツ

ページ全体を写した画像を貼り、用紙も伝える: 配置・色・線の太さ・列幅まで、AI が CSS の数値に起こします。今回のスクリーンショットは、ページ全体が A4 縦 96 dpi の 1 ページと同じ大きさ（794 × 1123 px）で写っていたので、AI は画像の px をそのまま帳票の px として読めました。ふつうのスクリーンショットは、表示の倍率や周りの余白で大きさが変わります。ページの端で切り出し、「A4 縦」のように用紙も添えると、縮尺を取り違えにくくなります（大きさの違う画像では試していません）
アプリは番号で: 同じ名前のアプリの取り違えを防ぎます
画像と同じレコードで確かめる: 画像に写っているのと同じレコードをプレビューに使うと、金額や日付が画像と一致するかを AI が照合できます
項目の対応を見る: 画像の見出しと項目名が違っても（「品名」と「商品名」など）、AI は対応を付けて表で示します。違っていれば、その場で言葉で直します
画像だけで試すなら、元の設定は見せない: 作業フォルダーに元の設定があると、AI が参考にしようとすることがあります。今回のように操作を断るか、作業フォルダーに置かないようにします
元と再現の PDF を並べた画像を見せる: AI は自分で描画した結果を見られません。同じ縮尺で並べた画像を見せると、違いを挙げ、原因（今回は CSS の列幅の書き方）まで見つけます
違いが分かった会話のまま直させる: 違いと原因を話した後なら、「実際に設定ファイルで直す」の 1 行で直りました。違いを自分で言葉にするなら、「〇〇を少し大きく」「〇〇の列を広く」のように頼みます

使う前に確かめること

AI の返答の注意と、AI が仮に決めたことのうち、人が確かめる点です。

確かめること	内容
有効期限の決め方	AI の仮定は「見積日の 1 か月後」。業務の決め方と合っているか
ボタンの表示と保存先	見積ファイルがすでにあるレコードでは、ボタンが出ない。PDF は見積ファイルに保存される。運用に合っているか
明細の行数	AI の見積もりでは、1 行で収まる明細なら 10 行前後で 1 ページがいっぱい。超えると下が切れる（複数ページにもできる）。明細の多いレコードでも PDF を確かめる
フォント	どの PC でも Noto Sans JP で印刷するには、アプリ全体の Web フォント（Noto Sans JP）を有効にする（今回のアプリは有効にしてあった）。無効だと、PC にあるフォント（Noto Sans JP、ヒラギノ角ゴ、游ゴシック、メイリオの順）で出る。「追加」の取り込みでは、アプリの Web フォントの設定は変わらない
仮の値	自社名・住所・電話番号は画像の文字のまま。社印は SVG で似せて描いたもので、本物の印影ではない
印刷屋の版	設定ファイルは、手元の印刷屋の zip に合わせて版 7 で書き出された。アプリの印刷屋と版がそろっているか（今回はどちらも v7）

中身を見たい人へ

AI が書いた計算式と HTML、CSS の要所です。読まなくても使えますが、自分で手を入れたい人のために載せておきます。

計算式（明細の表）

LET(
  table, TABLE_HTML(見積明細,
    OPT("pref", "pcraft-qt-item-"),
    ARRAY("No.", ROWNO(見積明細) + 1),
    ARRAY("品番", ESC_HTML(型番)),
    ARRAY("品名", ESC_HTML(商品名)),
    ARRAY("数量", FIXED(数量)),
    ARRAY("単価", "¥" & FIXED(単価)),
    ARRAY("金額", "¥" & FIXED(金額))
  ),
  REPLACE($html, "##table##", table) // テンプレートの目印をテーブルに
)

OPT("pref", "pcraft-qt-item-") で、表の class 名を pcraft-qt-item-… にそろえます
列の見出しは ARRAY("見出し", 値) で画像のとおりに付け、型番と商品名は ESC_HTML() で囲みます
単価と金額は "¥" & FIXED(…) で「¥」付きの桁区切りにします
HTML 欄の ##table## の目印を、できた表に置き換えます

HTML（社印の SVG は省略）

<div class="rex0220-pcraft-page pcraft-qt-page">
  <div class="pcraft-qt-frame"><div></div></div>
  <div class="pcraft-qt-title">
    <div class="pcraft-qt-title-ja">御見積書</div>
    <div class="pcraft-qt-title-en">QUOTATION</div>
    <div class="pcraft-qt-title-line"></div>
  </div>
  <div class="pcraft-qt-meta"><span>No. ${ESC_HTML(見積番号)}</span><span>発行日 ${DATE_FORMAT(見積日, "YYYY年M月D日")}</span></div>
  <div class="pcraft-qt-info">
    <div class="pcraft-qt-left">
      <div class="pcraft-qt-to">${ESC_HTML(宛名)}<span>御中</span></div>
      <div class="pcraft-qt-greet">平素より格別のお引き立てを賜り、厚く御礼申し上げます。<br>下記のとおり御見積申し上げます。</div>
      <div class="pcraft-qt-amount"><span class="pcraft-qt-amount-label">御見積金額</span><span class="pcraft-qt-amount-value">¥${FIXED(合計)}</span><span class="pcraft-qt-amount-tax">（税込）</span></div>
      <div class="pcraft-qt-valid">有効期限　${DATE_ADD(見積日, 1, "month", "YYYY年M月D日")}</div>
    </div>
    <div class="pcraft-qt-right">
      <div class="pcraft-qt-company">株式会社サンプル</div>
      <div>〒000-0000</div>
      <div>〇〇県〇〇市〇〇〇〇〇-〇-〇</div>
      <div>TEL 00-0000-0000</div>
      <div>担当　${ESC_HTML(担当者)}</div>
    </div>
    <img class="pcraft-qt-seal" width="68" height="68" alt="社印" src="data:image/svg+xml;charset=utf8,…">
  </div>
  ##table##
  <div class="pcraft-qt-summary">
    <div class="pcraft-qt-remarks">
      <div class="pcraft-qt-remarks-title">備考</div>
      <div class="pcraft-qt-remarks-body">${REPLACE(ESC_HTML(備考), NEWLINE(), "<br>")}</div>
    </div>
    <table class="pcraft-qt-total"><tbody>
      <tr><th>小計</th><td>¥${FIXED(小計)}</td></tr>
      <tr><th>消費税（10%）</th><td>¥${FIXED(消費税)}</td></tr>
      <tr class="pcraft-qt-grand"><th>合計</th><td>¥${FIXED(合計)}</td></tr>
    </tbody></table>
  </div>
  <div class="pcraft-qt-footer">株式会社サンプル</div>
</div>

文字列は ${ESC_HTML(項目)}、日付は DATE_FORMAT / DATE_ADD、備考の改行は REPLACE(ESC_HTML(備考), NEWLINE(), "<br>") で出します
枠（pcraft-qt-frame）と下の社名（pcraft-qt-footer）は、ページに対して絶対位置で置きます

CSS（二重の枠、題、明細の列幅。2 通目で直した後）

.rex0220-pcraft-page.pcraft-qt-page {
  padding: 66px 64px 40px;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  font-size: 13px;
  color: #333;
}
/* 二重の金の枠 */
.pcraft-qt-frame {
  position: absolute;
  top: 22px;
  right: 22px;
  bottom: 22px;
  left: 22px;
  border: 2px solid #a7884f;
}
.pcraft-qt-frame div {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  left: 3px;
  border: 1px solid #a7884f;
}
/* 題 */
.pcraft-qt-title-ja {
  font-size: 34px;
  font-weight: bold;
  line-height: 44px;
  letter-spacing: 0.35em;
  padding-left: 0.35em;
  color: #1f2b48;
}
/* 明細 */
table.pcraft-qt-item-table {
  width: 100%;
  margin-top: 32px;
  border-collapse: collapse;
  table-layout: fixed;
  border-top: 2px solid #1f2b48;
  border-bottom: 2px solid #1f2b48;
}
table.pcraft-qt-item-table th {
  box-sizing: border-box; /* width に左右の余白を含める */
  padding: 8px 10px;
  border-bottom: 1px solid #1f2b48;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-align: center;
  color: #1f2b48;
}
table.pcraft-qt-item-table th:nth-child(1) { width: 52px; }
table.pcraft-qt-item-table th:nth-child(2) { width: 75px; }
table.pcraft-qt-item-table th:nth-child(4) { width: 80px; }
table.pcraft-qt-item-table th:nth-child(5) { width: 108px; }
table.pcraft-qt-item-table th:nth-child(6) { width: 116px; }

字間（letter-spacing）を空けた題は、右端にも字間が付いて中央からずれるので、同じ幅の padding-left で戻しています
列幅は table-layout: fixed で固定し、品名の列だけ残りの幅にしています
1 通目には box-sizing: border-box が無く、width に左右の余白（padding の 10px ずつ）が足されて、品名の列が約 100px 狭くなっていました。2 通目でこの 1 行を足し、指定した幅のとおりになりました

まとめ

見積書の画像 1 枚と 1 行の依頼で、元の画像にかなり近い見積書の設定ができました。残った違いを2 通目の 1 行で直し、元の画像とほぼ同じ見た目になりました。AI の作業時間は 2 回で約 8 分、API 料金に換算すると約 2.6 ドルでした（定額プランなら利用枠の中）
AI は、画像の位置をページの px として読み、配置・色・線・列幅・文字の大きさを CSS の数値にしました。画像の見出しとアプリの項目の対応も付け、表で示しました。有効期限の決め方のように画像から分からないことは、仮に決めて示すので、人が確かめます
値が合っているかは AI が書き出した HTML で照合し、見た目は人が PDF で比べます。品名の列が狭くなる CSS の誤りは、元と再現の PDF を並べた画像を AI に見せて分かりました。AI は自分で描画した結果を見られないので、比べた画像を渡すのが近道です

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up