bokuwalily site-ttp-from-reference
参照サイトを「見た気」で作るとテンプレ（ダーク＋1色＋カードグリッド）に戻る。実測してから写す。
手順
- viewport 連続スクショ（fullPage は縮んで読めない）：Playwright 1440x900 で 900px ずつスクロールして
home_00..N.png。サブページ（製品・顧客）も。 - 計算済みスタイルを抜く：
getComputedStyleで h1/h2/h3/p/button/nav の font-family・size・weight・letter-spacing・line-height・color・bg・radius を JSON に。 - CSS を落として grep：
font-familyの実体（@font-face）、#hexの頻度上位25、border-radius、box-shadow、@media。頻出色＝面の色、彩度の低さを確認。 - Google Fonts の代替を
next/font/googleの font-data.json で在庫確認（例：ES Allianz → Inter Tight）。 - トークンを
globals.cssの@themeに写す。自作の.btn等は必ず@layer components（外すと Tailwind のhiddenが負ける）。 - 写真が無いなら **
codex execの内蔵画像生成（無料・人物なし）**で「同じグレーディング」の画像を必要枚数（ヒーロー3＋カテゴリ8など）。プロンプト末尾にスタイル文を共通化して統一する。 - 実データで全ページを撮り、自分の目で見る。スマホは
document.documentElement.scrollWidthを測り、はみ出しはgetBoundingClientRect().right > vwで犯人を特定。 - 日本語見出しは
text-wrap: pretty; word-break: keep-all; overflow-wrap: anywhere、器は ch でなく px。
罠
- 調査エージェントに古いスクショを渡すと「もう直っている点」を指摘して帰ってくる。撮り直してから投げる。
- 参照の「顔写真」は第三者の商品に付けると誤認誘導＝人物なしの静物で代替。
- 数字は実物（DB実数・料率・日数）だけ。統計風の飾り数字はAI味の元。