スキルファイル1つで、ディレクターがデザインを動かせるようになる話

スキル（主に SKILL.md＋references/）にルールを閉じ込めると、毎回の口頭説明が減り、再現性が上がりやすいです。Storybookの代わりではなく、方針とトークンを固める前工程として使い、実装が固まったらStorybookで人間向けに見せる、という併用が現実的です。

スキルは品質を保証する魔法ではなく、解釈の余地を減らす拘束条件です。美的判断やAccessibility・性能の最終責任は、引き続き人間側に残ります。

はじめに

Web担当者の方のなかには、AIをどの業務から入れるか分からない、ツールが多く整理できないといった悩みも多いでしょう。私も、生成AIにUIを作らせるときは、だいたい同じ壁に当たります。指示が毎回ちがい、出力も毎回ちがう。

この記事では、ルールをファイル化し、必要なときだけ読み込ませるというスキルの考え方と、Nothing Design Skillから学べる設計、私の進め方を短くまとめます。

Claude Codeの「スキル」とは

必要なのはフォルダ1つ：手順書＋参照資料で、中心は SKILL.md です。YAMLで名前と「いつ使うか」を書き、本文に原則・手順・禁止事項。詳細は references/ に分けるのが一般的です。

読み込みは段階的です。まず名前と説明だけ、タスクが合致したら本文、必要なら tokens.md や components.md を開く。巨大ガイドを毎回コンテキストに載せ続けにくい設計です。

Storybookは「できたコンポーネントを人が見る」ツール。スキルは「まだ形が薄い段階で、AIに守らせるルールを先に固定する」道具です。スキルで固める → 生成した実装をStorybookに載せる順が強いことが多いです。

トリガーを「Nothing style」のように明示的に絞ると、汎用UIで誤爆しにくくなります。チームでは依頼文の型を短く共通化すると安定しやすいです。

Nothing Design Skillから読み取れる設計

公開構成のイメージは、SKILL.md（トリガー・ワークフロー・禁止に近い記述）、references/components.md、references/tokens.md です。

私が強く感じるのは三層です。哲学（なぜそう見せるか）、禁止事項（やるな）、数値（トークン・コンポーネント仕様）。生成AIは装飾で余白を埋めやすいので、禁止の列挙がガードレールになります。「破るのは1箇所だけ」のように逸脱を一点に限定するルールも、再現性と署名の両立に効きます。

禁止事項は、最初から完璧な理想ではなく、生成が外れたログを1行ずつ足していくイメージで十分です。最新の文言は必ず原典のリポジトリで確認してください（本稿は要約です）。

なぜ「きれい」に見えやすいか

色を減らす、タイポで階層を作る、破る所を1つに限定する——この三つが揃うと、画面がすっきり見えやすい、という理解で足ります。

自分でスキルを育てるとき

最初は雑でよい（背景・フォント方針・禁止3つ程度）。動かしてブレたら禁止か数値を1行足すのが最短ループです。

スクリーンショットについて

スクリーンショットはAIに渡して、生成や逆生成（トークン案の書き出しなど）までそのまま回しています。 ただし「参考にして」一言だけだと解釈のブレは残りやすいので、出力を見たうえでズレを数値と禁止事項に言語化し、tokens.md や SKILL.md に書き戻す、という二段構えにしています。スクショは入口、資産になるのはファイルに残ったルール、という整理です。

数値には短い理由を添えると、次の判断のブレが減ります。コードを細かくいじるループより、言語化してスキルに返すループに時間を寄せた方が、トータルでは速くなりやすいです。待ち時間は、次の禁止案を書く時間に回せます。

サイトリニューアルでの使い方

既存画面を材料にトークン初稿を出すのは有効ですが、数値の最終責任は人間に置くのが安全です。生成 → 違和感 → 言語化 → スキルへ書き戻しを回さないと、次のページで同じズレが再発します。トークンと禁止が安定したら、同じルールでページを量産しやすくなります。

初月の型としては、画面を数枚切り取り嫌い／残したいを各3つに言語化 → トークン案を出して検算 → 一覧など別テンプレでも同じスキルで試し、破綻を禁止に戻す、程度で十分です。

ワークフローが変わりうる点

従来の「要件 → デザイン → 承認 → 実装」に対し、ディレクターがスキルと生成で方向・バリエーションを先に出し、デザイナーがブランドとUXを精査し、コーダーが基盤・性能・A11y・CMSを担う形が現実味を帯びます。変わるのは肩書きより誰が最初に「こうする」と決めるかだと私は考えます。万能ではなく、スキル＋Storybook＋人間レビューの三段が現実解です。

おわりに

減るのは、毎回ゼロから説明して毎回ちがうUIになる作業の比重です。残るのは美しさと迷いの判断、本番水準へのレビュー眼です。スキルは道具です。

まず SKILL.md に10行、同じ画面を2回生成して差分に1行足す——そこからで十分始められます。記述は最初のものと照合し、検証の癖を付けてください。✍️

これで、会社概要やお問い合わせページなどをテキストで伝えるだけで、スキルで固めたデザインルールに準拠したページが、AIによって自動生成されます。

参考URL（出典明記用）