コンテンツ制作
#design
design-system
Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. Use when generating or auditing a design system, checking visual consistency, or reviewing a PR that touches styling.
DeepseekModel
キュレーション済みスキル
品質 優秀 · 90
v1.0.0
取得
https://deepseekmodel.com/api/download.php?id=affaan-m-ecc-skills-design-system-skill-md&format=skill
ダウンロード .skill
標準形式。system_prompt と model_config を収録し、任意の Agent で利用可能
.skill ファイルの system_prompt フィールドの実際の内容。
name design-system description Use this skill to generate or audit design systems, check visual consistency, and review PRs that touch styling. Use when generating or auditing a design system, checking visual consistency, or reviewing a PR that touches styling. metadata {"origin":"ECC"} 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
このスキルを起動するキーワード。クリックでコピーできます。
このスキルにはトリガーワードがありません。
ダウンロードした .skill に含まれるフィールド。
| フィールド | 説明 |
|---|---|
| format | フォーマット識別子（skill/v1） |
| skill_id | スキル固有 ID |
| name | スキル名 |
| version | バージョン |
| description | 説明 |
| category | カテゴリ（配列） |
| trigger_words | トリガーワード |
| tags | タグ |
| source | ソース |
| source_url | ソース URL（本ページ） |
| exported_at | エクスポート日時（ダウンロード毎） |
| system_prompt | システムプロンプト本文 |
| model_config | モデル設定：provider / model / temperature / max_tokens / top_p |
| examples | サンプル |
| install_guide | 各プラットフォームの導入説明（Coze / Dify / Claude / カスタム） |
