Communitygithub.com

vinay-v-7/design-studio

Sistema de diseño unificado para construir y revisar interfaces limpias, distintivas y no genéricas: sitios web, landing pages, UI de productos, paneles, formularios, pantallas web y nativas, diapositivas HTML y diagramas.

¿Qué es design-studio?

Design Studio es un skill integral para agentes de IA (como Claude Code, Cursor o Codex) que centraliza capacidades de dirección de arte, calidad de ejecución, revisión de patrones de IA y generación de diapositivas y diagramas en un solo flujo de trabajo. Su objetivo es eliminar la 'slop' (diseño genérico, con apariencia de plantilla o generado por IA) mediante un 'doctrina' anticopia y un 'gate' de calidad que verifica desde tamaños de envío hasta la ausencia de invenciones. Soporta módulos especializados para construcción (taste + impeccable), aplicación (product UI), dirección de estilo (paletas, tipografías), revisión/auditoría (ai-design-review), presentaciones HTML (slides) y diagramas (Mermaid, Drawio, Excalidraw). El skill enruta automáticamente la petición del usuario al módulo adecuado, mantiene archivos de trabajo en `.taste-skill/` y genera un resumen en `DESIGN.md` para que todos los módulos lean un solo archivo. Incluye una política de hooks opcional para escaneo por edición en Claude Code o Cursor, y un mapa de dependencias de entorno (Node, Python, Chrome/Edge, Playwright).

Compatible con✓Claude Code~Codex CLI✓Cursor
npx skills add vinay-v-7/design-studio-skill

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace design-studio?

<studio> es la carpeta que contiene este SKILL.md. En Windows usa python si falta python3, y modules/impeccable/scripts/impeccable.cmd en lugar del lanzador sin cocinar.

Carga

  1. Este archivo.
  2. Doctrina para la ruta: doctrine/workflow.md, doctrine/principles.md, doctrine/gate.md; doctrine/conflicts.md cuando los módulos discrepan.
  3. Solo el/los archivo(s) MODULE.md enrutado(s) a continuación, luego las referencias a las que apuntan.

Nunca cargues cada módulo. Los archivos MODULE.md incluidos no son skills independientes.

Prioridad

  1. La instrucción explícita del usuario y los activos reales de la marca
  2. El DESIGN.md / PRODUCT.md del proyecto
  3. La doctrina de design-studio
  4. Las reglas del módulo activo
  5. Las selecciones de la base de datos ui-ux-pro-max — entradas, nunca decisiones; cada selección debe pasar el filtro de slop

Enrutamiento

/design-studio <ruta> [destino]. Si no hay ruta, inferir de la solicitud.

Intención / argCargarNotas
build — landing, marketing, portafolio, página públicamodules/taste/MODULE.md + modules/impeccable/MODULE.md (persuadir)ui-ux-pro-max solo para pautas de stack
app — panel, configuraciones, formularios, UI de producto, pantallas nativasimpeccable (operar) + taste references/app-screens.mdui-ux-pro-max stack + pautas de UX
direction — paleta, fuentes, estilobiblioteca de taste primero; modules/ui-ux-pro-max/MODULE.md búsqueda después, filtrada por slopescribe DESIGN.md
review / auditar / roastmodules/ai-design-review/MODULE.md y su formato de informeescáneres abajo; deduplicar en IDs
polish bolder quieter typeset colorize animate harden clarify distill delight adapt onboard optimize layout overdrive shape init document extract critique audit live generatereferencia de comandos impeccablepin/unpin deshabilitado
slides / deck / presentaciónmodules/slides/MODULE.mdtemplate-library/ último recurso; .pptx → skill pptx
diagram (+ `import mermaiddrawioexcalidraw, export`)
gráficos en una appskill dataviz si está instalado, si no, dominio de gráficos ui-ux-pro-max
copy de formato largoreglas de copy de ai-design-review; skill unslop si está instalado
`hooks onoffstatus`

Flujo de trabajo

Brief (PRODUCT.md) → Dirección (DESIGN.md) → Construir → Revisar → Gate → Informe. Detalles: doctrine/workflow.md.

Los archivos de trabajo de Taste permanecen en .taste-skill/. Resume la dirección elegida en DESIGN.md para que cada módulo lea un solo archivo.

Gate

Hecho cuando: se revisaron los tamaños de envío; se ejecutaron los escáneres relevantes; cero P0; cada P1 justificado por el brief; genericidad ≤ 3/10 para UI nueva; SD1–SD5 pasan; nada inventado; la UI de la app tiene estados vacío/carga/error; el informe nombra los niveles que se ejecutaron. Tabla completa: doctrine/gate.md.

Escáneres de revisión (deduplicar en IDs de catálogo):

node <studio>/modules/ai-design-review/scripts/scan.mjs <target> --json
<studio>/modules/impeccable/scripts/impeccable detect <target>
node <studio>/modules/taste/scripts/lint.mjs <target>

Detect en Windows: <studio>\modules\impeccable\scripts\impeccable.cmd detect <target>.

Política de hooks

Desactivados por defecto. Nunca habilitar silenciosamente.

Al inicio de una ruta build o app en un proyecto real, ejecuta:

<studio>/modules/impeccable/scripts/impeccable hooks status

Propón la aceptación, una frase de motivo, cuando alguna de: la tarea tocará ≥3 archivos de UI o abarcará sesiones; una revisión encontró ≥2 P0/P1 mecánicos (contraste, texto degradado, brillo, desbordamiento, deriva del sistema de diseño); el usuario solicita aplicación continua.

Explica: escaneo por edición a través de .claude/settings.local.json (Claude Code) o .cursor/hooks.json (Cursor). Cursor recibe solo verificaciones por edición, sin pase profundo Stop. Señala a <studio>/modules/impeccable/scripts/impeccable.

Respeta hook.consent en .impeccable/config.local.json. No vuelvas a preguntar en ese proyecto.

Si aceptan: impeccable hooks on. Si rechazan: hooks off y no preguntes de nuevo allí.

Entorno

NecesidadUsado porSi falta
Node 18+scan.mjssaltar escáner, decirlo
Node 22+taste draw / lint / inspectsaltar scripts de taste
Python 3ui-ux-pro-max, diagram verify-geometrysaltar esos
Chrome / Edgetaste inspect, impeccable URL detectsaltar nivel de navegador visual
Playwrightexportación PDF de diapositivassaltar PDF
python-pptximportación PPTsaltar importación

Mapa de módulos

RutaRol
modules/taste/Dirección de arte (draw.mjs), lint/inspect
modules/impeccable/Comandos de ejecución, detect, hooks
modules/ui-ux-pro-max/Estilos / paletas / stacks buscables
modules/ai-design-review/Catálogo de reglas, escaneo, informe de revisión
modules/slides/Decks HTML; template-library/ es referencia de implementación
modules/diagrams/Diagramas HTML/SVG

Skills relacionados