スキル自身の言葉で
このスキルはフロントエンドのコードベースを読み取り、アプリをビルドしたりレンダリングしたりせずに、その視覚言語を捉えた DESIGN.md を書き出します。package.json や設定ファイル（React、Vue、Svelte、Angular、Tailwind、CSS-in-JS、プレーンCSS）からフレームワークを検出し、雰囲気、カラーパレットと役割、タイポグラフィ、コンポーネントのスタイリング、レイアウトの原則、Stitch生成のための注記を順に処理します。
出力は .stitch/DESIGN.md に生成され、他のスキルがこれを解析するため、先頭には name と colors のマッピングを含む YAML フロントマターブロックが必要です。既存プロジェクトの設計システムをリバースエンジニアリングしたり、監査したり、移行したりするデザイナーおよび開発者を対象としています。
生成されるもの
- 標準的な設計システム形式で組み立てられた DESIGN.md ドキュメントです。
- そのファイルの先頭にある、name と colors のマッピングを含む YAML フロントマターブロックと、それに続くMarkdownセクションです。
- 言語、カラー参照、コンポーネントのプロンプトを扱う、Stitch生成のための設計システム注記の最終セクションです。
仕組み
- 01フレームワークとスタックの検出
プロジェクトのルートを走査し、package.json、tailwind.config.js、postcss.config.js、theme.js、tokens.js といった特徴的なファイルを探し、続けて package.json を読み込んでフレームワーク、CSSツール、design-token ライブラリの有無を把握します。
- 02対応するフレームワークリファレンスの読み込み
React/Next/Tailwind、Vue/Nuxt、Svelte、Angular、プレーンCSSにはそれぞれ、カラー、タイポグラフィ、スペーシングの特定方法に関するフレームワーク固有のパターンをまとめたリファレンスファイルがあります。
- 03カラーパレットの抽出と役割の割り当て
カラーはCSSカスタムプロパティ、Tailwind設定、テーマファイル、コンポーネントのスタイル、スコープ付きクラス、CSS-in-JSオブジェクトから取得され、色相ではなく機能によってグループ化されます。
- 04コンポーネントとレイアウトの解析
このスキルは、ボタン、カード、ナビゲーション、入力欄、ドメイン固有のコンポーネントに加え、グリッド、余白、配置、レスポンシブな挙動を検証します。
- 05DESIGN.md の作成
すべての内容が標準的な DESIGN.md 形式にまとめられ、存在しない場合は作成される .stitch ディレクトリに書き込まれます。
- 06任意で Stitch への引き渡し
ユーザーがデザインシステムを Stitch に反映させたい場合、作成された DESIGN.md が manage-design-system スキルへの入力になります。