デジタル庁デザインシステム（DADS）を Claude Code / Codex のスキルとして入れ、公共サービス向けの画面を作る・見直す

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

申請フォーム・お知らせページ・管理画面など、読みやすさとアクセシビリティを優先したいWebサイトをAIに作らせるとき。「見やすく」と頼むより、DADSのルール（色・文字・余白・部品の大きさや状態、黄色と黒の2重のフォーカス）を丸ごと渡すほうがぶれない。

関連: ベースのデザインシステムは「そのまま使わず」、組織向けのローカルデザインシステムに落としてから使う、AIっぽい資料を再編集するときは、先に全体の構成案を文章で出させ、1枚ずつ生成させる、ガイド：AIエージェントに守らせるデザインシステム・DESIGN.md

手順

1. スキルのフォルダに入れる
   • Claude Code：git clone https://github.com/capsrock/digital-go-design-skill.git ~/.claude/skills/digital-go-design-skill
   • Codex：git clone https://github.com/capsrock/digital-go-design-skill.git ~/.agents/skills/digital-go-design-skill
2. 「デジタル庁のデザインで申請フォームを作って」「DADSに合わせてこの画面を見直して」のように頼む。
3. スキルは部品ごとに同梱の公式ドキュメント（Markdown）を読み、色や文字サイズの値は同梱の tokens.css から取る。コントラスト比・文字の大きさ・押しやすさ・キーボード操作を点検リストで確認する。データテーブルのような情報量の多い画面向けの文字の決まりも参照する。

注意点

• 非公式（デジタル庁の作成・承認ではない）。デジタル庁の公式サイトに見える画面は作らず、ロゴや名称は使わない。
• Web専用。iOSなどのネイティブアプリには使わない。
• 同梱ドキュメントに図版はない。図が判断に関わるときは各ページ冒頭の source_url から公式ページを見る。
• ドキュメントとトークンの値が食い違うとき（角丸など）は、実装ではトークンの値を使う。
• Figmaデータ・HTML/Reactのコード・イラストやアイコン素材は含まれない（それぞれ別配布）。
• 自社ブランドに合わせるなら、ベースのデザインシステムは「そのまま使わず」、組織向けのローカルデザインシステムに落としてから使うの考え方で色や角丸を置き換える。

出典

• @Caps_Rock · 2026-11-11
• リポジトリ：github.com