Design System

アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。

293,665 stars 43,456 forksFrontend & Design Plugin marketplace

Install

Claude Code plugin
/plugin marketplace add affaan-m/ECC

The repo is a Claude Code plugin marketplace. Run /plugin afterwards to pick the plugin that includes this skill.

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add affaan-m/ECC --skill design-system
Manual install
git clone --depth 1 https://github.com/affaan-m/ECC.git /tmp/ECC
mkdir -p ~/.claude/skills
cp -r /tmp/ECC/docs/ja-JP/skills/design-system ~/.claude/skills/design-system

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# デザイン システム

スケーラブルで保守可能なデザインシステムの構築。

## 使用時期

- デザインシステムを初期化
- コンポーネントライブラリを拡張
- デザインと実装の間の同期を保つ
- アクセシビリティ標準を強制
- テーマング実装

## コア要素

### 1. デザイントークン

色、タイポグラフィ、スペーシング、シャドウの中央コレクション。

### 2. コンポーネント

ボタン、入力、カード、など基本的なUIの再利用可能なビルディングブロック。

### 3. レイアウトパターン

ページレイアウト、フォーム、グリッド。

### 4. アイコン

SVGベースのアイコンライブラリ。

## ツール

- **Figma** 設計ツール
- **Storybook** コンポーネント展示
- **Chromatic** ビジュアルテスト
- **Design tokens** JSON管理

## チェックリスト

- [ ] トークン定義（色、スペーシング、タイプ）
- [ ] 基本コンポーネント実装
- [ ] Storybook設定
- [ ] アクセシビリティテスト
- [ ] ドキュメント作成
- [ ] チーム採用

詳細については、ドキュメントを参照してください。
Read the full skill on GitHub

Details

Skill name
design-system
Repository
affaan-m/ECC
Path
docs/ja-JP/skills/design-system/SKILL.md
License
MIT
Repo updated
30 October 2026
Listed in
hesreallyhim/awesome-claude-code

FAQ

What does the Design System skill do?

アクセシビリティ、レスポンシブネス、テーマ設定、コンポーネント群、トークンを備えた本番環境対応デザインシステムの構築。Figma、Storybook、コンポーネントライブラリ統合。

How do I install the Design System skill?

Claude Code plugin: /plugin marketplace add affaan-m/ECC. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Design System popular?

It lives in affaan-m/ECC, which has 293,665 GitHub stars and 43,456 forks, and is included in 1 curated skill list.

Related skills

Accessibility

294k

affaan-m/ECC

WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム（iOS/Android）のアクセシビリティトレイトを生成するために使用します。

Frontend & DesignIn 1 list43k

Agent Architecture Audit

294k

affaan-m/ECC

エージェントおよび LLM アプリケーション向けのフルスタック診断。12 層のエージェントスタックにおけるラッパーリグレッション、メモリ汚染、ツール規律の失敗、隠れた修復ループ、レンダリング破損を監査します。重要度順の発見事項とコードファーストの修正を生成します。エージェントアプリケーション、自律ループ、または LLM を活用した機能を構築する開発者に必須です。

AI, LLMs & AgentsIn 1 list43k

Agent Eval

294k

affaan-m/ECC

カスタムタスクでコーディングエージェント（Claude Code、Aider、Codex など）をヘッドツーヘッドで比較し、合格率、コスト、時間、一貫性のメトリクスを測定します

AI, LLMs & AgentsIn 1 list43k

Frontend Patterns

294k

affaan-m/ECC

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.

Frontend & DesignIn 1 list43k

Compose Multiplatform Patterns

294k

affaan-m/ECC

KMPプロジェクト向けのCompose MultiplatformおよびJetpack Composeパターン — 状態管理、ナビゲーション、テーマ設定、パフォーマンス、プラットフォーム固有のUI。

Frontend & DesignIn 1 list43k

Frontend Patterns

294k

affaan-m/ECC

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Frontend & DesignIn 1 list43k

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.