← 一覧へ
🎨 デザインCC / Codex 両対応難易度: 中級
デザインシステム design-system
デザインの一貫性を簡単に管理！
これは何？
デザインシステムは、色やフォントなどのデザイン要素を体系化するためのツールです。CSS変数を使ってデザイントークンを管理したり、コンポーネントの状態を定義したりできます。さらに、ブランドガイドラインに沿った美しいプレゼンスライドも自動生成できるんですよ！
これでできること
- デザイントークンを3層構造（基本→意味→コンポーネント）で管理できる
- 一貫性のあるCSS変数システムを構築できる
- コンポーネントの状態（通常・ホバー・無効など）を定義できる
- ブランドに準拠したプレゼンスライドを自動生成できる
- Tailwindテーマの設定を簡単に行える
こんな時に便利
新しいプロジェクトでデザインシステムを一から構築したい時
既存のデザインに一貫性を持たせたい時
ブランドカラーを使ったプレゼン資料を作成したい時
デザイナーと開発者の間で仕様を共有したい時
使い方
まずはJSON形式でデザイントークンを定義しましょう。その後、提供されているスクリプトを使ってCSS変数を生成します。スライドを作成する時は、検索機能を使って適切なレイアウトを探し、デザイントークンを使ってスタイルを適用します。
使用例（こう頼んでみよう）
デザイントークンを3層構造で定義するJSONの例を見せてプライマリカラーを使ったボタンコンポーネントの仕様を作成して投資家向けピッチデッキのスライドを自動生成して必要なもの
- 特になし
導入方法
いちばん簡単（AIに頼む）
次のスキルを入れて: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/tree/main/.claude/skills/design-system手動で置く
Claude Code →
~/.claude/skills/design-system/Codex →
~/.agents/skills/design-system/使いこなしのコツ
- トークンは基本→意味→コンポーネントの順で段階的に定義すると管理しやすいです
- スライド作成時は感情の起伏を考慮すると説得力が増します
- ハードコーディングを避け、常にデザイントークンを使いましょう