無料GitHub で公開日本語紹介

design-system

既存コードから色・文字・余白などの共通ルールを抽出し、デザインの仕様書とプレビューを作るスキル。画面の統一感を10項目で評価し、修正箇所も示します。

原文原文の説明を見る

Generate a design system from an existing codebase or audit one for visual consistency: extract tokens (colors, typography, spacing, shadows) into design-tokens.json and CSS custom properties with DESIGN.md rationale and an interactive HTML preview, score the UI across 10 dimensions, and flag AI-slop patterns. Use when starting a design system, auditing visual consistency before a redesign, or reviewing a PR that touches styling.

affaan-m/ECC

インストール方法を見る

こんなときに便利

既存コードからデザイン規則を作りたいとき
リニューアル前の見た目の統一感確認
スタイルを変更するPRのレビュー
定型的なAI生成デザインの検出

日本語での紹介

できること

既存の画面コードからデザインの共通ルールを作り、見た目のばらつきを点検します。CSS、Tailwind、styled-componentsを調べ、色、文字、余白、角丸、影、画面幅による切り替え条件を抽出します。デザイントークン（見た目をそろえる共通の値）をJSONとCSSカスタムプロパティにまとめ、判断理由を記したDESIGN.mdと、操作できるHTMLプレビューを生成します。

こんなときに便利

デザインシステムを整えたいときや、リニューアル前に現状を把握したいときに向いています。画面の評価では、色や文字の統一感、レスポンシブ対応、アクセシビリティなど10項目を採点し、具体例とファイル・行番号付きの修正案を示します。過剰なグラデーションなど、定型的なAI生成デザインの検出にも使えます。

使い方の例

「既存コードから色と余白の共通ルールを抽出して」
「トップ、料金、ドキュメントの各画面を監査して」
「スタイルを変更するPRで、見た目の不統一を確認して」

注意点

生成手順にはbrowser MCPで競合サイト3件を調べる工程があります。HTMLプレビューは単体で動作し、追加の依存関係は不要です。

この紹介文は、公開されている SKILL.md をもとに AI（Claude Haiku）が作成しました。正確な仕様は下の原文を確認してください。

含まれるファイル（1）

SKILL.md2.7 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Design System — Generate & Audit Visual Systems

When to Use

Starting a new project that needs a design system
Auditing an existing codebase for visual consistency
Before a redesign — understand what you have
When the UI looks "off" but you can't pinpoint why
Reviewing PRs that touch styling

How It Works

Mode 1: Generate Design System

Analyzes your codebase and generates a cohesive design system:

1. Scan CSS/Tailwind/styled-components for existing patterns
2. Extract: colors, typography, spacing, border-radius, shadows, breakpoints
3. Research 3 competitor sites for inspiration (via browser MCP)
4. Propose a design token set (JSON + CSS custom properties)
5. Generate DESIGN.md with rationale for each decision
6. Create an interactive HTML preview page (self-contained, no deps)

Output: DESIGN.md + design-tokens.json + design-preview.html

Mode 2: Visual Audit

Scores your UI across 10 dimensions (0-10 each):

1. Color consistency — are you using your palette or random hex values?
2. Typography hierarchy — clear h1 > h2 > h3 > body > caption?
3. Spacing rhythm — consistent scale (4px/8px/16px) or arbitrary?
4. Component consistency — do similar elements look similar?
5. Responsive behavior — fluid or broken at breakpoints?
6. Dark mode — complete or half-done?
7. Animation — purposeful or gratuitous?
8. Accessibility — contrast ratios, focus states, touch targets
9. Information density — cluttered or clean?
10. Polish — hover states, transitions, loading states, empty states

Each dimension gets a score, specific examples, and a fix with exact file:line.

Mode 3: AI Slop Detection

Identifies generic AI-generated design patterns:

- Gratuitous gradients on everything
- Purple-to-blue defaults
- "Glass morphism" cards with no purpose
- Rounded corners on things that shouldn't be rounded
- Excessive animations on scroll
- Generic hero with centered text over stock gradient
- Sans-serif font stack with no personality

Examples

Generate for a SaaS app:

/design-system generate --style minimal --palette earth-tones

Audit existing UI:

/design-system audit --url http://localhost:3000 --pages / /pricing /docs

Check for AI slop:

/design-system slop-check

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ