コンテンツにスキップ
非エンジニアのためのVibeCoding入門

AI×デザインシステム ハンズオン

この章でわかること: 前章の3層——トークン・コンポーネント・ AI用ルール——が「揃っているかどうか」で、AIの出力がどれだけ変わるかを、 4段階のレベルで順に体験します。何もない「野生の現場」から、AI用の指示書まで 揃った「無敵の状態」まで、疑似的に登っていきましょう。

このハンズオンの狙い

Section titled “このハンズオンの狙い”
  1. 「デザインシステムの有無」がAIの出力精度に与える影響を体感する
  2. AIにデザインの制約(トークンやコンポーネント)を正しく認識させるプロンプト手法を身につける
  3. AI用の共通ルール(SKILL.md)を構築・運用するメリットを理解する

題材はデジタル庁デザインシステム(DADS)。アセットが何もない状態から段階的に整えていきます。

Lv.1:Figmaしかない(野生の現場)

Section titled “Lv.1:Figmaしかない(野生の現場)”

「デザインの見た目」しか情報がなく、開発者が目分量でコードを起こしている—— 多くの現場のスタートラインです。トークンもコンポーネントもAI用ルールも無い状態。

  1. 画像からコード化する(Vision)

    Vision とは、スクリーンショット画像を読み取ってコードに起こす機能のこと。 ボタンやフォームのスクリーンショット(または Figma Dev Mode の生CSS)を AIに貼り付け、Reactコンポーネント(生Tailwind / CSS)を生成させます。

  2. 課題を発見する

    生成コードを見ると、#0055FF のようなカラーのハードコード、余白(px)の ばらつきが見つかります。再利用性・一貫性が無いことを認識します。

  3. AI自身にルール(SKILL.md)を抽出させる

    「今のコードの反省点」をAIにまとめさせ、プロジェクト独自の簡易コーディングルールを 作らせます。ここで初めてAI用ルール層の芽が生まれます。

プロンプト例(ルール抽出)
今作ったボタンコンポーネントは、マジックナンバー(生の数値)が多くて再利用性が
低いです。今後、他のエンジニアやAI(あなた)が迷わず一貫したUIを作れるよう、
以下のルールを定義した SKILL.md を作成してください。
・カラーは16進数を直接書かず変数化すること
・余白は rem 単位、または4の倍数で固定すること
・アクセシビリティ(hover時の挙動など)を明記すること

Lv.2:デザイントークンはある(ちょっと進んだ現場)

Section titled “Lv.2:デザイントークンはある(ちょっと進んだ現場)”

色や余白の**共通言語(トークン)**が最低限用意された状態。まだ共通コンポーネントは無い、 という段階です。

  1. コンテキストを共有する

    tailwind.config.js(またはトークンのJSON)をAIに読み込ませます (Claude Code なら、そのファイルを開くか「このファイルを見て」と渡します)。

  2. 制約付きでUIを生成させる

    デフォルトのスタイルを禁止し、定義済みトークンのみを使うよう縛って生成させます。

  3. カンプチェック

    AIが「野良CSS(勝手な16進数)」を混ぜていないかレビューします。

プロンプト例(制約付き生成)
添付した tailwind.config.js に含まれるデジタル庁専用のデザイントークン
(dt- から始まるカスタムクラスや変数)だけを使用して、シンプルなお知らせカード
(タイトル、日付、本文、詳細ボタン)を1つ作ってください。
デフォルトのTailwindのカラー(bg-blue-500 など)や、任意の16進数(#ffffff)を
直接Styleに書くことは厳禁とします。

Lv.3:コンポーネントはある(よくある開発現場)

Section titled “Lv.3:コンポーネントはある(よくある開発現場)”

ボタンや入力フォームといった再利用可能なコード資産が用意された状態。 これらを組み合わせて画面を作ります。

  1. コード資産をインデックスする

    コンポーネントのフォルダ(例 /components/*)をAIに把握させます (Claude Code なら「src/components/ 配下を読んで」と伝えます)。

  2. 画面の組み立てを指示する

    生のHTMLタグ(<button> <input>)を使わせず、既存コンポーネントのみを import して画面(ログイン画面など)を組ませます。

  3. リファクタリングで修正する

    AIが既存を無視して「オレオレタグ」を作ったら、検知して既存資産へ置き換えさせます。

プロンプト例(コンポーネントの再利用)
src/components/ 配下にある既存のデジタル庁デザインシステムのコンポーネント
(Button, Input, Checkbox など)を完全に理解してください。
これらを適切に import・組み合わせて『ユーザーログイン画面』を実装してください。
新規に独自のUIタグ(生の <button> や <input>)を書いてはいけません。

Lv.4:全部揃ってる(デジタル庁フルコンボ)

Section titled “Lv.4:全部揃ってる(デジタル庁フルコンボ)”

データ(トークン)・コード(コンポーネント)・**AI用指示書(SKILL.md)**まで すべて揃った、AI駆動開発の理想形を体験します。

  1. 「スキル」を有効化する

    デジタル庁公式の SKILL.md の中身を、プロジェクトの CLAUDE.md(や SKILL.md)に丸ごと配置し、 AIを「デジタル庁専属エージェント」に変身させます。

  2. ワンフレーズで生成する

    「給付金の申請フォーム画面を作って」といった抽象度の高い指示を投げ、 裏側のルール(縦積み・コントラスト・アクセシビリティ仕様)が自動適用される様子を見ます。

  3. AIにアクセシビリティ監査をさせる

    完成コードを、SKILL.md のチェックリストに照らしてAI自身に厳格に監査させます。

プロンプト例(アクセシビリティ監査)
今生成したコードについて、プロジェクトのルートにある SKILL.md の
『アクセシビリティ・チェックリスト』と照らし合わせ、本当に適合しているかを監査してください。
1. 満たしている点
2. 懸念が残る点、修正すべきコード
を箇条書きで報告し、必要であれば修正コードを提示してください。

レベルごとの違いを振り返る

Section titled “レベルごとの違いを振り返る”
Lv揃っているものAIへの指示出力の安定度
1(なし)スクショから生成バラつく・ハードコード多発
2トークン「トークンだけ使え」色・余白が揃う
3+コンポーネント「既存パーツを使え」パーツ単位で一貫
4+AI用ルール(SKILL.md)抽象的な一言でOKルールが自動適用される

まとめ

Section titled “まとめ”

デザインシステムを単なる「見た目の定義」で終わらせず、トークン・コンポーネント・ SKILL.md として構造化するほど、AIへの指示は短く・抽象的になり、出力の品質と速度は 上がります。自社の現場が今どのレベルかを見極め、一歩ずつ「AIが働きやすい制約」を 足していきましょう。考え方の全体像は前章の解説へ。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”