Design System
- 1.6k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of design-system by affaan-m - installs and ranking accrue to the original listing.
design-system is an ECC agent skill that generates a complete production-ready design system—with tokens, components, theming, and accessibility—from an existing codebase or audits visual consistency for developers shipp
About
design-system is a Design & UI/UX skill from affaan-m/ecc (origin: ECC) for building scalable, maintainable design systems with accessibility, responsive layouts, and theme configuration. Core elements include centralized design tokens for color, typography, spacing, and shadows; reusable button, input, and card components; layout patterns for pages, forms, and grids; and SVG icon libraries. The skill integrates Figma for design, Storybook for component showcase, Chromatic for visual testing, and JSON-managed design tokens. Its checklist covers token definition, base component implementation, Storybook setup, accessibility testing, documentation, and team adoption. Developers reach for design-system when initializing a component library or syncing design and implementation before release.
- Generates design tokens, DESIGN.md rationale document, and self-contained HTML preview page
- Performs visual audit scoring UI on 10 distinct dimensions with 0-10 ratings
- Scans CSS, Tailwind, and styled-components to extract colors, typography, spacing, shadows and breakpoints
- Researches 3 competitor sites via browser MCP for inspiration during generation
- Supports both generation from scratch and audit of existing styling in PRs
Design System by the numbers
- 1,616 all-time installs (skills.sh)
- +109 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Security screen: MEDIUM risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill design-systemAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.6k |
|---|---|
| repo stars | ★ 238k |
| Security audit | 2 / 3 scanners passed |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you generate a design system from a codebase?
Generate a complete design system from an existing codebase or to audit visual consistency before shipping UI changes.
Who is it for?
Frontend teams standardizing UI tokens, components, and Storybook docs before scaling a product interface.
Skip if: Backend-only services with no user interface or teams that already maintain a locked enterprise design system requiring no audit.
When should I use this skill?
The user asks to build, audit, or extend a design system with tokens, Storybook, Figma sync, or accessibility enforcement.
What you get
Design token JSON, reusable UI components, Storybook catalog, accessibility-tested patterns, and Figma-aligned documentation.
- Design token JSON
- Component library scaffold
- Storybook configuration
Files
デザイン システム
スケーラブルで保守可能なデザインシステムの構築。
使用時期
- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装
コア要素
1. デザイントークン
色、タイポグラフィ、スペーシング、シャドウの中央コレクション。
2. コンポーネント
ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。
3. レイアウトパターン
ページレイアウト、フォーム、グリッド。
4. アイコン
SVGベースのアイコンライブラリ。
ツール
- Figma 設計ツール
- Storybook コンポーネント展示
- Chromatic ビジュアルテスト
- Design tokens JSON管理
チェックリスト
- [ ] トークン定義（色、スペーシング、タイプ）
- [ ] 基本コンポーネント実装
- [ ] Storybook設定
- [ ] アクセシビリティテスト
- [ ] ドキュメント作成
- [ ] チーム採用
詳細については、ドキュメントを参照してください。
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What tools does design-system integrate?
design-system references Figma for design files, Storybook for component documentation, Chromatic for visual regression testing, and JSON files for centralized design token management.
What core elements does design-system define?
design-system covers design tokens, reusable UI components (buttons, inputs, cards), layout patterns for pages and forms, SVG icon libraries, plus accessibility and responsive theme configuration.
Is Design System safe to install?
skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.