Content Creation
#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
Curated skill
Quality Excellent · 90
v1.0.0
Get
https://deepseekmodel.com/api/download.php?id=affaan-m-ecc-skills-design-system-skill-md&format=skill
Download .skill
Standard format with system_prompt and model_config, ready for any agent framework
The actual content of the system_prompt field in the .skill file.
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
Keywords that activate this skill. Click one to copy it.
This skill does not provide trigger words.
The downloaded .skill package contains the following fields.
| Field | Description |
|---|---|
| format | Format tag (skill/v1) |
| skill_id | Unique skill ID |
| name | Skill name |
| version | Version |
| description | Description |
| category | Categories (array) |
| trigger_words | Trigger words |
| tags | Tags |
| source | Source |
| source_url | Source URL (this page) |
| exported_at | Exported at (set per download) |
| system_prompt | System prompt body |
| model_config | Model config: provider / model / temperature / max_tokens / top_p |
| examples | Examples |
| install_guide | Import guide for Coze / Dify / Claude / custom frameworks |
The same skill can be exported in different platform formats.
