Agent skill · design visual · affaan-m
design-system
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
Why this skill is useful
Provides specific guidelines and tools for building a scalable design system that the AI wouldn't reliably generate on its own.
What it needs
Requires chromatic, figma, storybook installed locally. About 1k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
デザイン システム スケーラブルで保守可能なデザインシステムの構築。 使用時期 デザインシステムを初期化 コンポーネントライブラリを拡張 デザインと実装の間の同期を保つ アクセシビリティ標準を強制 テーマング実装 コア要素 1. デザイントークン 色、タイポグラフィ、スペーシング、シャドウの中央コレクション。 2. コンポーネント ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。 3. レイアウトパターン ページレイアウト、フォーム、グリッド。 4. アイコン SVGベースのアイコンライブラリ。 ツール Figma 設計ツール Storybook コンポーネント展示 Chromatic ビジュアルテスト Design tokens JSON管理 チェックリスト [ ] トークン定義（色、スペーシング、タイプ） [ ] 基本コンポーネント実装 [ ] Storybook設定 [ ] アクセシビリティテスト [ ] ドキュメント作成 [ ] チーム採用 詳細については、ドキュメントを参照してください。
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/design-system