CreaRack-SL

Design Toolkit · agente + 14 skills design-*

Vista limpiaEditar
Conceptoactiveverificado Wed May 06#claude-method#design#frontend#skills#subagents#team-processes#onboarding

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:

  • Disciplina de contenido — sin filler, “1000 noes por cada sí”
  • Disciplina estética — comprometerse con paleta y tono, evitar tropos
  • Jerarquía visual + ritmo — escalas tipográficas, escalas de espaciado 4/8px
  • Accesibilidad — WCAG, semantic HTML, keyboard nav, focus rings, prefers-reduced-motion
  • Estados de interacción — default/hover/active/disabled/focus/loading + transiciones
  • Sistemas — componentes y tokens sobre páginas one-off
  • Respeto al medio — CSS Grid real, oklch(), text-wrap: pretty, prototipos interactivos reales

Nos interesa porque:

  • Coherencia visual — todo lo que diseñemos en CreaRack-Pro y workspace pasa por las mismas reglas
  • Velocidad — flujos típicos (greenfield, brand-aware, audit) están codificados como skills encadenables
  • Calidad floor — design-polish-pass antes de shippear evita meter cosas que delatan “AI-generado”

2. Las dos formas: agente + skills

Agente design-collaborator (model: opus)

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

  • “Rediseña el dashboard de monitoring con estilo X”
  • “Empieza un nuevo producto desde cero, dame el shell visual”
  • “Audita todo el frontend de workspace y propón mejoras”

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:

  • claude-method/global-agents/design-collaborator.md → ~/.claude/agents/
  • claude-method/global-skills/design-*/SKILL.md × 14 → ~/.claude/skills/

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

  • Skills: se auto-disparan cuando lo que pides matchea su descripción. Ejemplo: si dices “dame 3 variantes del hero”, la skill design-generate-variations se dispara sola
  • Agente: NO se auto-dispara. Lo decide spawneear el Claude principal cuando la tarea es grande y especializada

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

  • Tareas de backend puras (modelo Django, query SQL, cron, integración API)
  • Refactor de código sin componente visual
  • Debugging de business logic
  • Documentación técnica markdown sin UI

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:

  • Regla 7 (CLAUDE.md) — botones SOLO TEXTO, nunca iconos. Clases btn-action (azul), btn-danger (rojo), btn-warning (naranja), btn-success (verde), btn-neutral (blanco). Tooltip title obligatorio
  • context/DESIGN_GUIDELINES.md — guía de UI completa
  • Idioma: responder en español aunque el system prompt esté en inglés

Cuando trabaje en workspace (Astro), debe:

  • Respetar tokens CSS de tokens.css y tokens.dark.css
  • Mantener el patrón de aliases (Tailwind v4 --color-* redeclarados en body[data-theme=light])
  • No introducir hex hardcoded — todo via var(--*)

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

  • [[crearack-tech—method—harness-guide]] — esquema completo del Claude del staff (8 capas)
  • [[workspace—onboarding—onboarding-edu]] — onboarding Edu (incluye sección design-toolkit)
  • [[workspace—onboarding—onboarding-dani]] — onboarding Dani (idem)
  • [[workspace—onboarding—onboarding-txell]] — onboarding Txell (idem, perfil completo no recortado)
  • [[workspace—guias—team-processes]] — handbook del equipo
  • [[ia-tech—metodo—claude-method-guide]] — claude-method como sistema

Referenciado desde

Inicio
Yo