# Design System Creator Skill
<!--
Created by: winterkpital
Purpose: Interview-based design system creation for any project
Use: /design-system
-->
## Purpose
Guides creation of a custom `design.md` and local skill for any project. Ensures AI-generated UI looks **hand-crafted**, not generic AI-slop.
## Philosophy
> "We direct, AI executes. But without a design system, AI defaults to: blue buttons, gray backgrounds, rounded-full, Inter font — every app looks the same."
This skill prevents that by forcing explicit decisions BEFORE any code is written.
---
## Process Overview
**8 Questions → design.md + project skill**
| Step | Question | Builds |
|------|----------|--------|
| 1 | Industry/Context | Color mood |
| 2 | Primary color | `--primary` |
| 3 | Accent color | `--accent` |
| 4 | Background | `--background` |
| 5 | Typography | Font tokens |
| 6 | Spacing density | Spacing scale |
| 7 | Component style | Radius, shadows |
| 8 | Anti-patterns | DON'Ts list |
---
## Interview Script
When user invokes `/design-system` or asks to create a design system:
### Step 1: Open
```
# Design System Creator
Vamos a definir el sistema de diseño para este proyecto. Te haré 8 preguntas — respondé con lo que se te venga primero, no hay respuestas correctas o incorrectas.
Al final vamos a tener:
- `design.md` — especificación completa
- `.claude/skills/{project}/SKILL.md` — skill local que se activa automáticamente
**Primera pregunta:**
¿En qué industria o contexto vive esta app?
(estudio jurídico, fintech, healthtech, e-commerce, SaaS general, etc.)
```
Wait for answer.
---
### Step 2: Mood & Trust
```
**Segunda pregunta:**
¿Qué sensación querés que transmita la app?
Opciones para inspirarte:
- Formal / Profesional (banco, estudio jurídico, consultoría)
- Accesible / Cercano (educación, salud, comunidad)
- Moderno / Innovador (tech startup, producto nuevo)
- Minimalista / Premium (lujo, diseño puro)
- Cercano / Humano (startup stage, equipo pequeño)
¿O tenés algo diferente en mente?
```
Wait for answer.
---
### Step 3: Primary Color
```
**Tercera pregunta — Primary Color:**
¿Cuál es el color PRINCIPAL de la marca/app?
Ejemplos de diferentes industrias:
- Jurídico: azul marino (#1E2533), verde oscuro (#1B4332)
- Fintech: azul profundo (#0F172A), verde (#059669)
- Health: azul calmado (#0369A1), verde salvia (#4D7C0F)
- Tech/SaaS: indigo (#4338CA), púrpura (#7C3AED)
- Minimalista: negro (#171717), gris (#374151)
NO digas "azul" genérico — decime un tono específico o compartime un color de marca si tenés uno.
¿Color principal?
```
Wait for answer.
---
### Step 4: Accent Color
```
**Cuarta pregunta — Accent Color:**
¿Cuál es el color de ACENTO? (botones secundarios, links, highlights)
Este color se usa en:
- Links
- Acentos en headers
- Iconos destacados
- Estados activos
El contraste con el primary debe ser claro.
Ejemplos:
- Dorado: #B8860B (luxury, premium)
- Coral/naranja: #EA580C (energetic, fintech)
- Verde: #16A34A (success, growth)
- Azul claro: #0EA5E9 (tech, modern)
- Rosa: #DB2777 (beauty, wellness)
¿Color acento?
```
Wait for answer.
---
### Step 5: Background
```
**Quinta pregunta — Background:**
¿Cuál es el color de FONDO principal de la app?
Opciones:
- Blanco puro #FFFFFF (limpio, pero frío)
- Blanco cálido #FAFAF8 (profesional, menos genérico)
- Gris ultra claro #F8FAFC (neutro, SaaS)
- Gris medio #F1F5F9 (cards, distinción)
- Crema #FFFBF5 (tierno, accesible)
¿O tenés otro preference?
```
Wait for answer.
---
### Step 6: Typography
```
**Sexta pregunta — Tipografía:**
¿Qué tipografía querés?
El proyecto ya tiene Geist instalada (fuente sans-serif moderna). Podemos:
- Usar SOLO Geist (recomendado para proyectos nuevos)
- Agregar una serif para títulos (profesional, editorial)
- Usar monospace para datos/código
Si ya tenés una tipografía de marca, decime cuál.
¿Qué tipografía principal?
```
Wait for answer.
---
### Step 7: Component Style
```
**Séptima pregunta — Estilo de componentes:**
¿Cómo querés que se vean los componentes?
**Border Radius:**
- `rounded-md` (6px) — profesional, no genérico → RECOMENDADO
- `rounded-lg` (8px) — friendly, moderno
- `rounded-full` — NO, parece app móvil genérica
**Sombras vs Bordes:**
- Sombras sutiles — elegante, floating
- Bordes — profesional, definido
- Mezcla — cards con borde + shadow en dialogs
**Densidad:**
- Espacioso (16-24px padding) — premium, minimalista
- Compacto (8-12px padding) — dense, data-heavy
- Equilibrado (12-16px) — estándar
¿Qué estilo?
```
Wait for answer.
---
### Step 8: Anti-patterns
```
**Octava pregunta — Qué EVITAR:**
¿Qué querés que el agente NO haga nunca en este proyecto?
Ejemplos de cosas que hacen que una app "parezca IA":
- Usar Inter/Roboto/Arial (fuente default)
- Botones `rounded-full`
- Azul #0077B6 como color principal
- Sombras `shadow-xl` o `shadow-2xl`
- Gradientes en backgrounds
- Emojis en vez de iconos
¿Hay algo específico que querés evitar por tu industria o preferencia?
```
Wait for answer.
---
## Output Generation
After all 8 answers, generate:
### 1. `design.md` in project root
Structure:
```markdown
---
name: {project-name}
description: Design system for {project description}
---
## 1. Concept & Vision
{industry} app focused on {mood}. Target: {users}.
## 2. Color Palette
{...table with tokens, hex, usage, NEVER USE}
## 3. Typography
{font stack, scale, weights}
## 4. Component Styling
{buttons, inputs, cards, tables, badges — with actual Tailwind classes}
## 5. Layout & Spacing
{page structure, sidebar width, grid}
## 6. Motion & Animation
{principles, durations, what NOT to animate}
## 7. Visual Assets
{icons, images, decorative rules}
## 8. Do's and Don'ts
{anti-patterns from interview + generic AI slop to avoid}
## 9. Agent Prompt Guide
{how to use this file}
```
### 2. `src/app/globals.css` tokens
Create CSS variables matching the design decisions.
### 3. Project skill: `.claude/skills/{project}/SKILL.md`
Simple skill pointing to `design.md`, with quick reference.
---
## Activation
- User types `/design-system`
- User asks "create a design system"
- User says "let's define our design before building"
## Rules
1. ONE question at a time
2. Wait for answer before next question
3. If answer is vague, probe with specific options
4. At the end, confirm before generating files
5. Always use `var(--token)` syntax, never hardcoded hex in components
