Design System
- 4.8k installs
- 236k repo stars
- Updated July 29, 2026
- affaan-m/everything-claude-code
design-system is an agent skill for アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
About
The design-system skill provides agent guidance for design system tasks documented in ECC everything-claude-code. It defines activation triggers, role context, step-by-step workflows, examples, and domain checklists agents should follow instead of improvising APIs or business rules. Use it when users ask for design system implementation, review, negotiation, testing, or orchestration patterns that match the skill name and upstream documentation. The skill encodes operational expertise, required tooling, decision frameworks, and quality gates so agents produce consistent outputs aligned with the source playbook. Refer to SKILL.md for prerequisites, command examples, and edge cases before running production workflows. Refer to SKILL.md for prerequisites, examples, and guardrails before production use. Refer to SKILL.md for prerequisites, examples, and guardrails before production use. Refer to SKILL.md for prerequisites, examples, and guardrails before production use.
- アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
Design System by the numbers
- 4,790 all-time installs (skills.sh)
- +303 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #103 of 2,244 Frontend Development skills by installs in the Skillselion catalog
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
design-system capabilities & compatibility
- Capabilities
- アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デ · デザインシステムを初期化 · コンポーネントライブラリを拡張
What design-system says it does
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
npx skills add https://github.com/affaan-m/everything-claude-code --skill design-systemAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 4.8k |
|---|---|
| repo stars | ★ 236k |
| Security audit | 2 / 3 scanners passed |
| Last updated | July 29, 2026 |
| Repository | affaan-m/everything-claude-code ↗ |
How do I run design-system tasks with correct setup and documented commands?
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
Who is it for?
Developers automating design system via agent-guided SKILL.md workflows.
Skip if: Skip when unrelated tooling already covers the task without this skill's documented flow.
When should I use this skill?
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
What you get
Repeatable design-system workflows with grounded commands and expected outputs.
- DESIGN.md
- design-tokens.json
- design-preview.html
By the numbers
- 3 operational modes: generate, visual audit, and AI slop check
- 10 scored UI audit dimensions from color through polish
- Outputs 3 artifacts: DESIGN.md, design-tokens.json, design-preview.html
Files
デザイン システム
スケーラブルで保守可能なデザインシステムの構築。
使用時期
- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装
コア要素
1. デザイントークン
色、タイポグラフィ、スペーシング、シャドウの中央コレクション。
2. コンポーネント
ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。
3. レイアウトパターン
ページレイアウト、フォーム、グリッド。
4. アイコン
SVGベースのアイコンライブラリ。
ツール
- Figma 設計ツール
- Storybook コンポーネント展示
- Chromatic ビジュアルテスト
- Design tokens JSON管理
チェックリスト
- [ ] トークン定義（色、スペーシング、タイプ）
- [ ] 基本コンポーネント実装
- [ ] Storybook設定
- [ ] アクセシビリティテスト
- [ ] ドキュメント作成
- [ ] チーム採用
詳細については、ドキュメントを参照してください。
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.576k29.4kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.261k29.4k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.249k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita201k66.9kVercel React Native SkillsEnsure AI agents generate and refactor React Native code that follows performance best practices without common rendering and list pitfalls.173k29.4kForks & variants (1)
Design System has 1 known copy in the catalog totaling 1.5k installs. They canonicalize to this original listing.
- affaan-m - 1.5k installs
How it compares
Pick design-system to document and audit tokens from existing code; use component CLI skills when only adding prebuilt UI primitives.
FAQ
Who is design-system for?
Developers using agents to execute design system workflows from SKILL.md.
When should I use design-system?
アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。
Is design-system safe to install?
Review the Security Audits panel on this page before installing in production.