テック技報最新号へ →
デザイン

既存のサイトや素材から、Skillsを使ってデザインシステムを「抽出」させ、AI用のJSONにする

ゼロから作らず、既存のWebサイト・ブランド資料・PRDをエージェントに渡して「この素材からデザインシステムを作って」と頼む。完成したものをJSONやWebページにして、以降の開発で参照させる。

@kenfjt · 投稿 2026-02-03
#AIデザイン#デザインシステム#Skills#ClaudeCode

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

自社サイトやブランドはあるが、デザインシステムが文書化されていないとき。トンマナがそろったアプリをAIで作りたいとき。

やり方

  1. 元になる素材を用意する（自社のWebサイトURL、ブランドガイド、PRDなど）。
  2. Claude Code にデザインシステム作成用のSkillを入れる（公開されているものを使うか、デザインの知識がまとまったサイトを元に自作する）。
  3. 「この素材でデザインシステムを作って」と指示する。サイトから色・文字・余白・コンポーネントをまるごと抜き出すようにさせる。
  4. 出来上がったものを、人が見るWebページと、AIが読むJSON（トークン）の2つの形にする。
  5. 以降の開発では、そのデザインシステムを参照させて画面を作る。

注意点・対応状況

  • 他社サイトから抽出する場合は、学習・参考用にとどめる。
  • 抽出結果は細部が間違っていることがあるので、主要な値は人が確認する。
  • デザインシステムをそのまま他プロジェクトに丸コピしてもうまくいかない、という指摘もある（@nobsato）。土台にして調整する。

出典

X の元の投稿を開く