awesome-design-md で見た目を選び、公式 shadcn スキルでデザインシステムページまで作る

どんな問題を解決するか / いつ使うか

Claude Code などで作った画面が、いつもデフォルトの shadcn っぽい見た目になるとき。Stripe / Linear / Vercel 風など、狙ったブランド感のトークンとコンポーネント見本を先に手元に置きたいとき。「◯◯のサイトっぽく」と頼むより、イメージに近い既製のDESIGN.mdを選んで渡す の続きとして使う。

やり方

1. awesome-design-md から、作りたい印象に近い製品風の DESIGN.md を1つ選ぶ（コミュニティが書いた解釈。色・書体・余白・角丸・影、Do/Don't がエージェント向けにまとまっている）。
2. 公式 shadcn スキルを入れる。例: npx skills add shadcn/ui
3. GitHub 上で選んだ DESIGN.md の Raw リンクをコピーし、Claude Code に次のように頼む（自分の言葉で再構成してよい）:

shadcn スキルを使い、新規 Next.js プロジェクトを作って。
この DESIGN.md からデザインシステムを組み立て、最後にデザインシステムページまで出して。
読む前にファイルをプロジェクトへダウンロードして: <RawのURL>
既存の本番コードは触らないで。

4. スキルは既存コードに触れず新規プロジェクトを立て、コンポーネントを入れ、DESIGN.md に合わせてリスタイルする、というのが投稿の流れ。できあがりのページではコントラスト確認・各コンポーネントの各状態・Do/Don't が並ぶ、と説明されている。
5. 気に入らなければ別の DESIGN.md でやり直す。合うものが見つかったら、テーマとコンポーネントを本プロジェクトへ移し、自分のブランドに差し替える。

注意点・対応状況

• 他社ブランドの見た目の「解釈」をそのまま製品に載せない。トークンと文言は自社のものに置き換える。
• スキル名・インストール手順は更新されうる。導入前に公式の README を確認する。
• 本リポジトリへの反映は、人が差分を見てから行う（新規サンドボックスで試してから移す）。

出典

• 投稿者: @Voxyz_ai
• 投稿: @Voxyz_ai · 2026-10-12
• 収集日: 2026-10-12（JST）