好きなサイトのスクショ3〜5枚をエージェントに分析させ、選んだ要素だけをDESIGN.mdにする
エージェントに「良いデザイン」を先に見せる。参考スクショから特徴を言語化させ、自分が選んだ部分だけを実際の値つきのDESIGN.mdにする。
どんな問題を解決するか / いつ使うか
エージェントが作るページが一目でAI製と分かるとき。好みのトーンはあるのに、言葉でうまく説明できないとき。
やり方
- Godly、Refero、One Page Love などのギャラリーから、好きなサイトを3〜5個選んでスクショを撮る。
- スクショをClaude Code等に渡し、まだコードは触らせない。指示の例（再構成）：
これは私が好きなサイトのスクリーンショットです。まだコードは変更しないで。
1. 各サイトの良い点を、レイアウト・タイポグラフィ・配色・余白の観点で挙げて。
2. 共通点を整理して、どれを採用したいか私に質問し、答えるまで待って。
3. 私が選んだ要素をもとに、実際の値（フォントサイズ・ウェイト・カラーコード・余白・角丸）で
DESIGN.md をルートに作って。スクショから読み取れない値は「推定」と明記し、作り話はしないこと。
1画面に収まる長さで。
4. ルートの CLAUDE.md に @DESIGN.md でインポートして。- 以降のページはDESIGN.mdに従って作られる。仕上げにデザイン用スキル（例：taste-skill、Impeccableの
/impeccable polish）を毎ページ実行する、というルールも投稿では推奨されていた。
注意点・対応状況
- 参考サイトをそのまま再現するのは避ける（ブランドやレイアウトのコピーになる）。「要素を抽出して組み合わせる」使い方にする。
- 「推定」と書かれた値は、Figmaや実サイトで確認してから確定する。
出典
- 投稿者: @Voxyz_ai (Vox)
- 投稿: @Voxyz_ai · 2026-10-04
- 収集日: 2026-10-09（JST）