Volver a la wiki

Design Toolkit · agente + 14 skills design-*

Design Toolkit · agente + 14 skills design-*

Quién lo tiene: los 3 miembros del staff (Edu, Dani, Txell) tras correr setup-claude-code.ps1 (bootstrap inicial) o automáticamente en cada sesión Claude Code via el 4º hook SessionStart claude-method auto-sync (s60, 13-05-2026 — cierra Gap 1 del propagador). Para añadir un agente o skill nuevo al toolkit: claude-method-promote.ps1 (s60, cierra Gap 2). Para qué sirve: tareas de diseño, redesign UI, frontend, slides, prototipos clickables, extracción de design systems, auditorías de accesibilidad y “AI-slop”. Origen: reverse engineering de Claude Design (Anthropic) por Trystan-SA — repo upstream MIT. Filosofía: rechaza explícitamente las defaults genéricas que delatan “AI-template” — gradientes agresivos, emoji decorativo, cards border-radius+border-left, Inter en todo, #FFF sobre #000.

1. ¿Qué es y por qué nos interesa?

Un colaborador de diseño con opinión basado en un system prompt de 20 capítulos que cubre:

Nos interesa porque:

2. Las dos formas: agente + skills

Agente design-collaborator (model: opus)

Para tareas grandes donde el contexto justifica spawneear un subagente especializado:

Lo invoca el Claude principal cuando ve que la tarea encaja. Tú no tienes que pedirlo explícitamente — basta con que la tarea sea claramente de diseño.

14 skills design-*

Para procedimientos concretos que se auto-disparan cuando matcheas su descripción, o que puedes invocar tú con /design-<nombre>.

Producción — construir algo

SkillCuándo
design-discovery-questionsBrief nuevo o ambiguo, te pregunta antes de empezar
design-frontend-aesthetic-directionSin brand existente, te obliga a comprometerte con un look antes de hi-fi
design-wireframe“Explora opciones” — 3+ wireframes greyscale en single file
design-make-a-deck“Hazme una presentación” — single HTML 16:9 con scaling
design-make-a-prototype“Quiero algo clickable” — state, validación, loading, feedback
design-make-tweakable“Que pueda jugar con opciones live” — panel flotante con localStorage
design-generate-variations“Dame 3 variantes hi-fi” — single file basic→bold

Sistema — extraer estructura

SkillCuándo
design-system-extract“Sácame los tokens (color, type, spacing, radii, shadow) de este codebase/screenshot”
design-component-extract“Identifícame componentes reusables” — atoms/molecules/organisms

Revisión — auditar y arreglar

SkillCuándo
design-accessibility-auditAntes de shippear, lanza 4 reviews paralelos WCAG
design-ai-slop-check“Esto huele a AI-template” — detecta gradientes, emoji, Inter, cards genéricas
design-hierarchy-rhythm-review“El espaciado va raro” — escalas, repetición, jerarquía
design-interaction-states-passVerifica que cada interactivo tiene los 6 estados + transiciones
design-polish-passFinal gate — lanza los 4 reviews en paralelo, dedupe, prioriza, arregla

3. Flujos típicos

Greenfield (nada existente)

design-discovery-questions → design-frontend-aesthetic-direction
         ↓
design-wireframe (3 variantes greyscale)
         ↓
[user picks one]
         ↓
design-make-a-prototype → design-polish-pass

Brand-aware (tienes design system / codebase)

design-system-extract (tokens del codebase)
         ↓
design-generate-variations (3 hi-fi variantes usando tokens)
         ↓
design-make-tweakable → design-polish-pass

Auditoría rápida

design-polish-pass     (lanza accessibility + ai-slop + hierarchy + interaction states en paralelo)

4. Cómo se instala / actualiza

Vive en claude-method y se propaga al ~/.claude/ de cada miembro del staff via los scripts de onboarding y sync.

Primera vez (onboarding inicial)

powershell -ExecutionPolicy Bypass -File C:/dev/claude-method/onboarding/setup-claude-code.ps1 `
    -DevName "TuNombre" `
    -ProjectDir "C:/dev/CreaRack-Pro" `
    -WorkspaceDir "C:/dev/CreaRackSL-workspace"

El paso [4c] copia:

Mejoras posteriores · automatizadas desde s60

Desde la sesión 60 (13-05-2026) el sync se dispara solo. El 4º hook SessionStart ejecuta claude-method-sync.ps1 -SkipHook -SkipMemory al arrancar cada sesión Claude Code: pulea claude-method y propaga global-agents/ + global-skills/ a ~/.claude/. Coste ~2-3s/arranque. Cierra Gap 1 del propagador. Si Edu o Dani suben un agente/skill nuevo via claude-method-promote.ps1, lo recibes automáticamente la próxima vez que abras Claude.

Si necesitas forzar el sync fuera de una sesión Claude Code (ej. tras editar claude-method directamente):

powershell -ExecutionPolicy Bypass -File C:/dev/claude-method/harness/claude-method-sync.ps1

Output cuando hay cambios:

============================================================
  CHANGELOG sync ab12cd → ef34gh
============================================================
  · Agentes nuevos/actualizados:
      - design-collaborator
  · Skills nuevas/actualizadas:
      - design-polish-pass
      - design-ai-slop-check

Ascender un agente o skill local al toolkit (s60)

Si creas un agente o skill local en ~/.claude/{agents,skills} y lo quieres compartir con el staff (cierra Gap 2 del propagador):

pwsh -NoProfile -File C:/dev/claude-method/harness/claude-method-promote.ps1 `
    -Type {agent|skill} -Name <slug>

Detecta CREATE / UPDATE (-Force requerido) / IDENTICAL / ERROR. Valida name: + description: en frontmatter (obligatorios — sin description Claude nunca lo invoca). Copia al central + commit + push directo a claude-method/main. Los demás miembros lo reciben automáticamente en su próxima sesión via el 4º hook auto-sync.

Modos: -DryRun (simula sin tocar), -NoCommit, -NoPush, -Force (UPDATE).

Convención humana — el script no automatiza la decisión: antes de promover, pregúntate “¿esto es transversal — útil para los 3 miembros en cualquier proyecto — o solo del proyecto X?”. Si es del proyecto, vive en <repo>/.claude/skills/, NO en el toolkit central.

Política de overwrites

A diferencia de las memorias (que respetan divergencias locales para no pisar tus notas personales), los agentes y skills se sobrescriben siempre. Razón: son contrato del equipo, no notas personales. Si quieres una versión personal modificada de un skill, copíala con otro nombre fuera del namespace design-*. El claude-method-promote.ps1 también respeta esto — si el destino existe y diverge, exige -Force para evitar sobrescrituras accidentales.

5. Cómo lo invoco yo

Auto-invocación

Invocación manual

/design-polish-pass
/design-discovery-questions

Para forzar el agente:

"lanza el agente design-collaborator para rediseñar el dashboard X"

6. Adaptaciones a Claude Code

El system prompt original venía pensado para “Claude Design” (Anthropic) que tiene tools propias. Equivalencias documentadas en el preámbulo del agente:

Original (Claude Design)En Claude Code (nosotros)
questions_v2 (form tool)Lista numerada en markdown + termina turno
copy_starter_component (deck_stage.js, ios_frame.jsx, …)Construir desde cero (son pocos divs)
${AGENT_TOOL_NAME} para verificaciónTool Agent con subagent_type: general-purpose, model opus
Protocolo __edit_mode_* postMessageFallback a localStorage

7. Cuándo NO usarlo

Para diseño / frontend / UI / decks / prototipos / audits visuales: úsalo siempre.

8. Reglas del proyecto que el toolkit debe respetar

Cuando el toolkit trabaje dentro de CreaRack-Pro, debe respetar:

Cuando trabaje en workspace (Astro), debe:

9. Créditos y licencia

Sistema reverse-engineered de Claude Design (Anthropic) por Trystan-SA, MIT. Repo upstream: https://github.com/Trystan-SA/claude-design-system-prompt

Las adaptaciones a Claude Code (preámbulo del agente, equivalencias de tools, prefijo design- en skills, descripciones en frontmatter) son nuestras y se mantienen en claude-method/global-agents/ y claude-method/global-skills/.

Véase también

Subir