ダブルクリックで英日反転
Applied Sciences · Design
A Workflow for More Beautiful UI/UX with Claude Code
A 7-step process — from pinning your references and adjectives up front, through parallel exploration, local self-verification, and a visual quality gate — that consistently pulls Claude Code output above generic AI slop.
Specify first (steps 1–2)
- List 3–5 reference sites and 2–3 adjectives before writing a single line
- Add Anthropic's Frontend Aesthetics Cookbook to CLAUDE.md to block Inter, purple gradients, emoji flood
- Enable the official frontend-design skill to auto-inject design philosophy per project
- Spin up 3–5 worktrees in parallel; pick one, discard two — faster than polishing a single draft
Explore with the right MCP (step 2)
- shadcn MCP — installs components from multiple registries; the de facto standard
- 21st.dev Magic MCP — generates several variations at once; suits compare-and-pick
- v0 MCP — image → React code conversion
Self-verify locally, then iterate (steps 3–4)
- Playwright MCP: navigate → screenshot → check console → self-correct loop (CI / testing)
- Chrome DevTools MCP: debug and perf profiling — using both together is standard in 2026
- Hand a screenshot to Claude, state one gripe, fix, re-screenshot — repeat 3–5 times
- Figma Dev Mode MCP gives two-way design-dev sync if Figma is in the loop
Quality gate + failure patterns (steps 5–7)
- Design Review sub-agent: Playwright capture → WCAG 2.1 AA + heuristic audit → suggested fixes
- Argos for PR screenshot diffs; Applitools Visual AI for semantic diffs (does a 3 px shift matter?)
- Storybook addon-mcp for design-system projects only — overkill for one-off repos
- Common failures: 'make it nice' prompt, single-option tunnel, skipping the cookbook, no visual MCP
→ Spec → parallel options → local visual loop → quality gate beats any single clever prompt.
Applied Sciences · Design
Claude Code で美しい UI/UX を引き出すワークフロー
参照サイトと形容詞を言語化する仕様固めから始まり、並列探索・ローカル自己検証・ビジュアル品質ゲートまで7ステップで構成した、AI凡庸出力を脱するための再現性ある設計プロセス。
先に仕様を固める（ステップ1–2）
- 参照サイト3–5件・避けるサイト1–2件・形容詞3語をコードより先に決める
- Anthropic公式 Frontend Aesthetics Cookbook を CLAUDE.md に追加し、Inter／紫グラデ／絵文字氾濫をブロック
- 公式 frontend-design スキルを有効化するとデザイン哲学がプロジェクト単位で自動注入される
- worktree（独立作業ブランチ）を3–5本立ち上げて並列に実装し、2本捨てる方が速い
適切な MCP で探索する（ステップ2）
- shadcn MCP — 複数レジストリからコンポーネントを導入するデファクトスタンダード
- 21st.dev Magic MCP — 1プロンプトで複数バリエーションを一括生成、比較選択向き
- v0 MCP — 画像→Reactコード変換に特化
ローカル自己検証とイテレーション（ステップ3–4）
- Playwright MCP：ナビゲート→スクショ→コンソール確認→自己修正ループ（CI・テスト用途）
- Chrome DevTools MCP：デバッグ・パフォーマンス計測。2026年時点では両方併用が標準
- スクショを渡して不満を1文で伝え→CSS/マークアップ修正→再スクショを3–5回繰り返す
- Figmaを使うなら Figma Dev Mode MCP でデザイン⇄実装の双方向同期が可能
品質ゲートと失敗パターン（ステップ5–7）
- Design Review サブエージェント：Playwrightキャプチャ→WCAG 2.1 AA＋ヒューリスティック監査→修正提案
- Argos でPRレベルのスクショ差分、Applitools Visual AI で意味的差分（3pxのズレが問題かを判断）
- Storybook addon-mcp はデザインシステムを持つ本格プロジェクト専用——一発レポには不要
- 典型的失敗：「いい感じに」指示・一案のみ検討・Cookbook省略・ビジュアルMCP未使用
→ 仕様固め→並列選択肢→ローカル視覚ループ→品質ゲートの流れが、どんな単発プロンプトより確実。
Applied Sciences · Design
A Workflow for More Beautiful UI/UX with Claude Code
A 7-step process — from pinning your references and adjectives up front, through parallel exploration, local self-verification, and a visual quality gate — that consistently pulls Claude Code output above generic AI slop.
Specify first (steps 1–2)
- List 3–5 reference sites and 2–3 adjectives before writing a single line
- Add Anthropic's Frontend Aesthetics Cookbook to CLAUDE.md to block Inter, purple gradients, emoji flood
- Enable the official frontend-design skill to auto-inject design philosophy per project
- Spin up 3–5 worktrees in parallel; pick one, discard two — faster than polishing a single draft
Explore with the right MCP (step 2)
- shadcn MCP — installs components from multiple registries; the de facto standard
- 21st.dev Magic MCP — generates several variations at once; suits compare-and-pick
- v0 MCP — image → React code conversion
Self-verify locally, then iterate (steps 3–4)
- Playwright MCP: navigate → screenshot → check console → self-correct loop (CI / testing)
- Chrome DevTools MCP: debug and perf profiling — using both together is standard in 2026
- Hand a screenshot to Claude, state one gripe, fix, re-screenshot — repeat 3–5 times
- Figma Dev Mode MCP gives two-way design-dev sync if Figma is in the loop
Quality gate + failure patterns (steps 5–7)
- Design Review sub-agent: Playwright capture → WCAG 2.1 AA + heuristic audit → suggested fixes
- Argos for PR screenshot diffs; Applitools Visual AI for semantic diffs (does a 3 px shift matter?)
- Storybook addon-mcp for design-system projects only — overkill for one-off repos
- Common failures: 'make it nice' prompt, single-option tunnel, skipping the cookbook, no visual MCP
→ Spec → parallel options → local visual loop → quality gate beats any single clever prompt.
Applied Sciences · Design
Claude Code で美しい UI/UX を引き出すワークフロー
参照サイトと形容詞を言語化する仕様固めから始まり、並列探索・ローカル自己検証・ビジュアル品質ゲートまで7ステップで構成した、AI凡庸出力を脱するための再現性ある設計プロセス。
先に仕様を固める（ステップ1–2）
- 参照サイト3–5件・避けるサイト1–2件・形容詞3語をコードより先に決める
- Anthropic公式 Frontend Aesthetics Cookbook を CLAUDE.md に追加し、Inter／紫グラデ／絵文字氾濫をブロック
- 公式 frontend-design スキルを有効化するとデザイン哲学がプロジェクト単位で自動注入される
- worktree（独立作業ブランチ）を3–5本立ち上げて並列に実装し、2本捨てる方が速い
適切な MCP で探索する（ステップ2）
- shadcn MCP — 複数レジストリからコンポーネントを導入するデファクトスタンダード
- 21st.dev Magic MCP — 1プロンプトで複数バリエーションを一括生成、比較選択向き
- v0 MCP — 画像→Reactコード変換に特化
ローカル自己検証とイテレーション（ステップ3–4）
- Playwright MCP：ナビゲート→スクショ→コンソール確認→自己修正ループ（CI・テスト用途）
- Chrome DevTools MCP：デバッグ・パフォーマンス計測。2026年時点では両方併用が標準
- スクショを渡して不満を1文で伝え→CSS/マークアップ修正→再スクショを3–5回繰り返す
- Figmaを使うなら Figma Dev Mode MCP でデザイン⇄実装の双方向同期が可能
品質ゲートと失敗パターン（ステップ5–7）
- Design Review サブエージェント：Playwrightキャプチャ→WCAG 2.1 AA＋ヒューリスティック監査→修正提案
- Argos でPRレベルのスクショ差分、Applitools Visual AI で意味的差分（3pxのズレが問題かを判断）
- Storybook addon-mcp はデザインシステムを持つ本格プロジェクト専用——一発レポには不要
- 典型的失敗：「いい感じに」指示・一案のみ検討・Cookbook省略・ビジュアルMCP未使用
→ 仕様固め→並列選択肢→ローカル視覚ループ→品質ゲートの流れが、どんな単発プロンプトより確実。