AI に UI を作らせる前に、文字・余白・角丸・影・色を5ステップで自分で決める（pre-design-md）
pre-design-md は、デザインの土台（トークン）を5つの画面で順に選び、DESIGN.md などの形で書き出すツール。AI にはそのファイルを渡して UI を作らせる。決めるのは人、作るのは AI という分担にする。
解決する問題
- 「いい感じの UI を作って」と頼むと、毎回それっぽいが方向の違う画面が出てくる
- 色やフォントを文章で伝えても、細かい数値（余白の刻み、角丸の大きさ、影の強さ）がぶれる
- デザインを AI に丸投げすると、自分のサービスらしさが出ない
やり方
- 5つのステップを順に決める: Typography → Spacing → Radius → Shadow → Color
- 結果を次のどれかの形で書き出す
- Google の DESIGN.md 形式
- Rich Prompt（値に加えて「なぜその値か」の理由まで書いた文章）
- CSS Variables
- Figma Tokens
- 書き出したファイルをリポジトリに置き、エージェントに「このファイルに従って画面を作って」と渡す
どの形式を渡すか（作者の比較）
- DESIGN.md: 何度作らせても出力が安定し、再現しやすい。チームで同じ見た目を保ちたいとき向き
- Rich Prompt: 理由まで伝わるので、要望の雰囲気はよく反映されるが、出力のばらつきは大きい。最初の案出し向き
- 迷ったら、まず Rich Prompt で方向を探し、決まったら DESIGN.md に固めて使い回す
注意点
- トークンを決めても、画面の構成や情報の優先度は別に伝える必要がある
- 日本語のフォントや行間は欧文前提の既定値だと崩れやすい。日本語 UI 向け DESIGN.md: 和文フォント・行間・字間を先に書く を参照
- 関連: AI 向け DESIGN.md は「値」ではなく「なぜ・いつ」を書き、守らせる部分は lint にする、デザインシステムを MCP サーバーではなくスキルにする: package.json の版のリポジトリを手元に取り、README を順にたどらせる
出典
- @dumblepytech1 · 2026-07-16
- Zenn「AIにUIを作らせる前に、デザインの土台を自分で決めるツールを作った」（Sangun, GMOペパボ, 2026-05-07）: zenn.dev