機能ごとに「強いデザイン参照を1つ」渡し、エージェントに10点満点で自己採点させる
「〇〇はFigmaのように、ランディングはLinearのように」と機能ごとに参照を1つ指定し、完成後に自己採点させ、ミスをスクショで見つけて直させる。
どんな問題を解決するか / いつ使うか
Claude Code / Codex でWebアプリを一から作るとき。最初の一発生成は誰でも真似できるので、そこから品質を上げたいとき。
やり方
Meng To（@MengTo）のプレイブックから、デザインに関わる部分：
- まず一発で土台を作り、その後は部品ごとに分けて作り込む。
- 使う技術と今後の要件を最初に伝える（例：React + Vite、Supabase、Stripe）。
- 機能ごとに質の高い参照を1つだけ指定する。例：
参照：2D編集ツールはFigma、3DはSpline、ライブラリ画面はFigma Community、ランディングページはLinear - 完成後に 「10点満点で自己採点し、自分のミスをスクショで撮って直す」 ように指示する（例：
Self-verify until it's perfect.）。 - デモを公開し、ユーザーのフィードバックをそのままエージェントに貼って改善する。
- 投稿者は、フロントエンドとハーネス（実行・検証の仕組み）で使うモデルやツールを分けている。
注意点・対応状況
- 参照は「雰囲気の手本」であり、UIをそのまま真似させない。
- 自己採点は甘くなりがち。採点の観点（余白、階層、状態の網羅など）を指定すると効果が上がる。
出典
- 投稿者: @MengTo (Meng To)
- 投稿: @MengTo · 2026-10-08
- 収集日: 2026-10-09（JST）