design-system

Value: Communication -- a documented design system creates shared vocabulary for every visual decision. When philosophy is explicit and tokens are named, contributors extend the system consistently without guessing at intent.

Facilitates collaborative creation of a design system specification. Produces an artifact at docs/design-system.pen (if Pencil MCP is available) or docs/design-system.html (single-file fallback) that documents philosophy, tokens, and the full component hierarchy from atoms through templates.

Decide the format before starting any design work. Do not switch formats mid-process.

Atomic Design 手法を使用した共同設計システムの作成。哲学、トークン、コンポーネント階層を含む仕様成果物を生成します。デザイン システムの作成時、ビジュアル言語の定義時、UI トークンの指定時、または実装開始前のコンポーネント アーキテクチャの計画時にアクティブ化します。 ソース: jwilger/agent-skills。