A 010 define design system

DefineDesignSystem (a-010)

目的

• プロジェクト全体で一貫したビジュアルデザインを実現するデザインシステムを定義する。
• カラーパレット、タイポグラフィ、スペーシング、コンポーネントスタイルを標準化する。
• デザイナーと開発者が共通言語として使える仕様書を作成する。

前提

• docs/project/04-design/03-screen-design.md が作成されている（画面設計完了）
• docs/project/04-design/01-tech-stack.md が作成されている（UI フレームワーク決定）

手順

1. 既存ドキュメントの確認

• docs/project/04-design/01-tech-stack.md — 使用する CSS フレームワーク（Tailwind, MUI 等）
• docs/project/04-design/03-screen-design.md — 画面設計とレスポンシブポリシー
• ブランドガイドラインがあれば参照

2. テンプレートの準備

このスキルの配置ディレクトリ（skills/a-010-define-design-system/）を起点に、相対パス ../../templates/project/04-design/04-design-system.md を Read で読み込み、その内容を docs/project/04-design/04-design-system.md へ Write する。出力先が既に存在する場合は上書きせずスキップして報告する（冪等）。出力先ディレクトリ（docs/project/04-design/）が無ければ作成する。

コピー直後に、ドキュメント冒頭のメタヘッダを記入する（Owner は文書責任者。未確認ならユーザーに確認し、既存 docs があればその Owner を引き継ぐ / Status は draft / Last-updated は当日日付）。

3. カラーパレットの定義

• Primary Colors: ブランドカラー（1〜2色）
• Secondary Colors: アクセントカラー
• Semantic Colors: Success, Warning, Error, Info
• Neutral Colors: グレースケール（背景、テキスト、ボーダー）
• Dark Mode 対応: 必要に応じてダークテーマも定義

CSS 変数のサンプルは examples/css-tokens.md を参照。

4. タイポグラフィの定義

• フォントファミリー: 見出し用、本文用、コード用
• フォントサイズスケール: xs, sm, base, lg, xl, 2xl, 3xl, 4xl
• 行間: tight, normal, relaxed
• フォントウェイト: normal, medium, semibold, bold

サンプル: examples/css-tokens.md

5. スペーシングシステムの定義

基本単位は 4px または 8px ベース。スケール・用途・サンプルは examples/css-tokens.md と reference/component-catalog.md を参照。

6. コンポーネントスタイルの定義

以下のコンポーネントについて、バリアントとステートを定義:

• ボタン
• フォーム要素（Input, Textarea, Select, Checkbox, Radio）
• カード / コンテナ
• その他（Badge, Tag, Avatar, Tooltip, Modal）

詳細なバリアント・ステート一覧は reference/component-catalog.md を参照。

7. アイコン・イラストガイドライン

• アイコンライブラリ（Lucide / Heroicons / Material Icons 等）の選定
• サイズ規定とスタイル統一（Outline / Filled のいずれか）

詳細: reference/component-catalog.md

8. アニメーション・トランジション

• Duration: fast(150ms), normal(300ms), slow(500ms)
• Easing: ease-in-out をデフォルトに

サンプル: examples/css-tokens.md

9. ドキュメント作成

docs/project/04-design/04-design-system.md に以下を必須セクションとして記入:

• カラーパレット
• タイポグラフィ
• スペーシング
• コンポーネントスタイル（主要なもの）

10. 完了条件の確認

• 04-design-system.md が作成されている
• カラーパレットが定義されている
• タイポグラフィスケールが定義されている
• スペーシングシステムが定義されている
• 主要コンポーネント（ボタン、フォーム）のスタイルが定義されている

11. Git への追加（オプション）

git add docs/project/04-design/04-design-system.md
git status

推奨コミットメッセージ:

docs: デザインシステムの定義

- カラーパレット、タイポグラフィ、スペーシングを定義
- 主要コンポーネントのスタイルガイドを追加

完了条件

• docs/project/04-design/04-design-system.md が作成されている
• カラー・タイポグラフィ・スペーシングが定義されている
• 主要コンポーネントのスタイルが定義されている
• ユーザーが内容を承認している

エスカレーション

• ブランドガイドラインなし: 「ブランドカラーやフォントの指定がありますか？なければ汎用的なパレットを提案します。」
• CSS フレームワーク未定: 「/a-007-define-tech-stack で技術スタックを先に決定しましょう。」
• コンポーネントが多すぎる: 「まずはボタン・フォーム・カードから始め、必要に応じて拡張しましょう。」

参考

• examples/css-tokens.md — カラー/タイポ/スペーシング/アニメーションの CSS サンプル
• reference/component-catalog.md — コンポーネント・アイコン・アニメーションの標準仕様