Diseño con método: wireframe aprobado y después código.
Pipeline fijo de referencia visual, wireframe.json, wireframe.svg, aprobación, código y auditoría. La skill se ocupa de lo visual y del criterio; la ingeniería de front es de schematize-web.
$ schematize install designPisos innegociables
Nunca se desactivan "para ir más rápido". Lista completa en la skill.
Wireframe aprobado antes del código
El JSON es la fuente de verdad y el SVG es la figura; la página completa se detiene y pregunta la stack antes de construir, y el builder lee el JSON, nunca el SVG.
Medios generados nunca por Claude
Detecta Codex y Gemini, pregunta cuál usar y delega en schematize-models; si no hay ninguno, lo dice sin rodeos y ofrece banco de imágenes o un asset del cliente.
Los iconos son SVG, nunca emoji
SVG en línea (incluye un sprite de 22 símbolos); el SVG estructural como un diagrama es código, pero la ilustración figurativa cuenta como visual generado.
Contraste y DOM medidos, no supuestos
Las razones de contraste, escalas y duraciones salen de los archivos de referencia y de los auditores en scripts/, con pruebas de rojo plantado; no se trabaja de memoria.
Rechazos anti-AI-slop
Una lista unificada de rechazos, con contraprueba y conflictos entre fuentes ya resueltos, frena el visual genérico de generador.
Pregunta solo lo que cambia el trabajo
Descubre el modo (Persuadir, Operar, Leer, Experimentar) y cuánto inventar; decide el resto y lo registra en meta.suposicoes. Sin argumento, un comando pregunta y nunca corre solo.
Comandos
Instalados en .claude/commands/. Usa /design-help en cualquier momento.
/design-animateMovimiento con intención: un momento de autor, GSAP solo cuando vale la pena. Argumentos: momento, delight, overdrive, revisar./design-auditPaso 5: audita contraste, DOM renderizado, imágenes provisionales y antipatrones en una página terminada, en tabla Before / After / Why./design-buildPaso 4: construye la página desde un wireframe.json ya aprobado, en HTML único, Next.js o sección Shopify Liquid./design-ccContext compact: guarda el handoff en el archive y ejecuta /compact./design-claudeCrea o fusiona el CLAUDE.md siempre activo de diseño (pisos, regla de medios, frontera con schematize-web) en la raíz del repo./design-critiqueCrítica de UX y UI por heurística (jerarquía, claridad, carga cognitiva, consistencia, accesibilidad), con hallazgos priorizados en tabla Before / After / Why./design-handoffGenera el handoff (context.md + checklist.md) en el archive, sin compactar./design-hardenDeja la UI lista para producción: estados, i18n, onboarding, adaptación a pantallas y rendimiento de UI. Argumentos: estados, i18n, onboard, adapt, optimize./design-helpMuestra el menú de comandos de la skill de diseño; solo lista y no ejecuta nada./design-loadCarga a la fuerza todo el cuerpo normativo y lo aplica en la sesión./design-polishPasada final de calidad antes de publicar: piso de calidad, animación, rechazos y checklist en una sola ronda./design-shapePlanifica UX y UI antes de construir (objetivo, público, contenido, flujo, estados); init, document y extract registran PRODUCT.md, DESIGN.md y tokens./design-tuneAjuste dirigido de un eje, preservando la identidad. Argumentos: bolder, quieter, distill, colorize, typeset, layout, clarify./design-variantsGenera variantes lado a lado de un elemento para elegir: generate (archivo autocontenido) o live (servidor local en 127.0.0.1)./design-visualPasada de revisión visual en una página terminada: mide el DOM en 5 anchos, toma captura y señala lo que aún puede mejorar./design-wirePasos 0 a 3: lee la referencia visual (imagen, URL o briefing), genera ./wireframe.json y ./wireframe.svg en el directorio actual y se detiene a preguntar la stack.Para agentes de IA
Instala sin intervención humana. Metadatos en llms.txt.
- Ejecuta: git clone https://github.com/schematizeme/skill-design.git && ./skill-design/install.sh
- O descarga: https://github.com/schematizeme/skill-design/releases/latest/download/skill-design.zip y descomprime en .claude/skills/
- Copia assets/CLAUDE.md a la raíz del repo (regla siempre activa).
- Confirma con /design-help.
Discusión
Cargando…