83.3K+Descargar
Ir a la guía de uso
design-consultationpor Garry Tan

Design Consultation Skill.

Un skill de Claude Code y Codex para trabajo de marca y sistemas de diseño: consultoría de diseño de producto que propone un sistema de diseño completo: estética, tipografía, color, layout, movimiento.

  • Marca y sistemas de diseño
  • Sistema de diseño
Descargar OpenDesignVer guía de uso
garrytan/gstack · design-consultation/SKILL.mdSKILL.md
--- name: design-consultation description: Design consultation: understands your product, researches the landscape, proposes a complete design system (aesthetic, typography, color, layout, spacing, motion), and generates font+color preview... (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
Encabezados y materia preliminar leídos del archivo original el 14 de septiembre de 2026 · 67 098 caracteres completos

01 Qué hace

Qué hace el Skill design-consultation en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Un skill de consultoría de diseño que actúa como diseñador de producto senior para crear un design system completo. Investiga el panorama del producto mediante búsqueda web y análisis visual, propone tipografía (fuentes específicas, no las predeterminadas), sistemas de color (variables CSS con valores hexadecimales), enfoques de layout (composición primero) y dirección estética. El skill genera un archivo DESIGN.md como fuente de verdad del diseño del proyecto, con mockups opcionales generados por IA que muestran el sistema aplicado a pantallas reales.

Admite tanto el navegador Aside (sesiones reales del usuario) como un modo headless de respaldo, mantiene un perfil de gusto persistente entre sesiones e integra voces de diseño externas de Codex y del subagente de Claude. El skill funciona de manera conversacional, no como un formulario rígido, explica la justificación de cada recomendación y prioriza la coherencia sobre las decisiones óptimas individuales.

Qué produce

  • Mockups generados por IA que muestran el design system aplicado a pantallas reales (cuando gstack designer está disponible)
  • Página de vista previa en HTML con muestras en vivo de tipografía y color (alternativa cuando el diseñador no está disponible)
  • JSON de perfil de gusto persistente que registra las decisiones de diseño aprobadas y rechazadas entre sesiones
Ver el ejemplo de prompt ↗

Cómo funciona

  1. 01
    Recopilar Contexto del Producto

    Lee el DESIGN.md, PRODUCT.md, README, package.json existentes y la salida de office-hours para comprender el producto.

  2. 02
    Investigar el Panorama

    Cuando se solicita, usa el navegador Aside o WebSearch para encontrar de 5 a 10 productos competidores, toma capturas de pantalla de página completa y analiza fuentes, colores, layouts y dirección estética.

  3. 03
    Consultar Voces Externas

    Opcionalmente lanza Codex y el subagente de Claude en paralelo para generar propuestas de diseño independientes.

  4. 04
    Proponer un Design System Completo

    Entrega una propuesta con criterio definido, con nombres de fuentes específicos, valores de color hexadecimales, variables CSS, enfoque de layout y dirección estética.

  5. 05
    Generar Artefactos de Vista Previa

    Crea maquetas con IA (cuando gstack designer está disponible) que muestran el sistema de diseño aplicado a pantallas reales, o una página de vista previa en HTML con muestras en vivo de tipografía y color.

  6. 06
    Escribir DESIGN.md

    Produce la fuente de verdad del diseño del proyecto en el formato abierto DESIGN.md, con tokens en el front-matter y secciones de justificación.

02 Encuentra tu caso de uso

Cuándo usar el Skill design-consultation

Usa el skill design-consultation en Claude Code o Codex cuando el trabajo sea de marca y sistema de diseño de este tipo. El ajuste y los límites que siguen están tomados del archivo propio del skill.

Buen caso de uso

  • Al iniciar la UI de un nuevo proyecto sin sistema de diseño ni DESIGN.md existente
  • Cuando se solicita explícitamente la creación de un sistema de diseño, guías de marca o DESIGN.md
  • Productos que necesitan diferenciarse de las normas de su categoría mediante desviaciones de diseño deliberadas

Conozca los límites

  • Una limitación o requisito declarado ("la API no puede hacer esto", "X requiere una credencial", "eso es imposible en esta plataforma") es una afirmación material.
  • Declárala solo con el error textual, la declaración documentada o una prueba en vivo en la mano; ajustar un fallo a una historia conocida no es evidencia.
  • Cuando una prueba rápida resuelve la cuestión, ejecútala ANTES de preguntar al usuario algo o declarar un paso bloqueado.

Qué proporcionar

  • Preferencia de investigaciónSi se investigan productos competidores mediante búsqueda web y análisis visual, o si se trabaja a partir del conocimiento de diseño incorporado en el skill.
  • Elección de voces externasOpcional: si se ejecutan en paralelo la evaluación de diseño de Codex y la propuesta de diseño del subagente de Claude para obtener perspectivas independientes.
  • DESIGN.md existenteSi existe, el skill lo lee y pregunta si se debe actualizar, empezar de nuevo o cancelar. Gestiona la conversión de formato desde la especificación heredada a la especificación abierta.

03 Dentro del skill

Reglas que el Skill design-consultation proporciona a Claude Code y Codex

7 instrucciones concretas, valores predeterminados y límites que el SKILL.md establece para el agente: la parte del archivo que cambia el resultado.

  1. Nunca tipografías prohibidas, nunca tipografías de display sobreutilizadas

    El texto de cuerpo o de UI en las superficies Operate o Read sigue una lista específica de cada rol. Ninguna tipografía prohibida en ningún rol, ninguna tipografía sobreutilizada como voz de display.

  2. Se requieren fuentes específicas, no predeterminadas

    Las propuestas tipográficas deben nombrar fuentes específicas, nunca Inter, Roboto, Arial ni las predeterminadas del sistema.

  3. La coherencia prevalece sobre la optimización individual

    Un sistema de diseño en el que cada pieza refuerza a las demás supera a uno con decisiones individualmente óptimas pero incoherentes entre sí.

  4. Se requiere justificación para cada recomendación

    Nunca recomiende una elección de diseño sin explicar por qué. Cada decisión de fuente, color, diseño o estética debe vincularse al contexto del producto, las necesidades del usuario o la estrategia de diferenciación.

  5. El perfil de gusto persiste y decae

    El skill mantiene ~/.gstack/projects/$SLUG/taste-profile.json, que registra las decisiones de diseño aprobadas y rechazadas entre sesiones. Las puntuaciones de confianza decaen un 5% por semana.

  6. Función forzadora de "lo memorable"

    Antes de proponer un sistema de diseño, el skill pregunta qué quiere el usuario que se recuerde tras la primera exposición.

  7. Conversacional, no un flujo de trabajo rígido

    El skill funciona como un consultor de diseño, no como un formulario. Los usuarios pueden entrar al chat en cualquier momento para discutir decisiones.

04 Ponlo a trabajar

Instalar design-consultation en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agregar design-consultation a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation

Formulario genérico de la CLI de skills para design-consultation/SKILL.md; el repositorio puede documentar su propia ruta.

Dale a la skill una primera tarea de trabajo de marca y sistema de diseño

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt
I'm building [a SaaS dashboard for engineering teams / a landing page for a fintech startup / an internal tool for data analysts]. We have no design system yet. Help me create one that [stands out from the typical enterprise look / feels trustworthy and serious / makes complex data feel approachable]. Research what's out there in this space and propose typography, colors, and layout that differentiate us.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

  • DESIGN.md existe y contiene front-matter con tokens de diseño (colores, fuentes, espaciado)
  • El sistema de color incluye variables CSS para fondo, superficie, texto principal, texto atenuado y acento con valores hexadecimales
  • Si existe un perfil de gustos, la propuesta de diseño hace referencia a las preferencias establecidas o se aparta deliberadamente de ellas

En OpenDesign design-consultation viene incluido: Plugins → Skills, selecciónelo en la barra superior.

Descargar OpenDesignLeer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author
Garry Tan
Repository
github.com/garrytan/gstack Rama main
Archivo de skill
design-consultation/SKILL.md Suma de verificación del contenido registrada en la verificación; commit 71f6048
License
MIT De LICENSE.
Estrellas del repositorio
132.921 Captura de GitHub tomada el 14-09-2026 para todo el repositorio garrytan/gstack, que contiene 7 skills en este catálogo. No es una calificación ni un recuento de uso para design-consultation.
Verificado por OpenDesign
14-09-2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. Incluido en OpenDesign main (verificado el 28-08-2026); no se ha registrado una ejecución real en esta página.

Dentro del SKILL.md

  1. Cuándo invocar este skillCrea DESIGN.md; para sitios existentes use /plan-design-review; se activa con solicitudes de sistema de diseño
  2. Preámbulo (ejecutar primero)Ejecuta gstack-skill-start; gestiona el modo degradado; procesa bloques de instrucciones; determina el tipo de sesión
  3. CONFIGURACIÓN DEL NAVEGADORComprueba la disponibilidad del navegador Aside; gestiona el consentimiento de sesión real; define reglas para controlar el navegador del usuario
  4. Alternativa de navegador: el navegador headless propio de gstackBusca el binario $B cuando Aside no está disponible; traduce los scripts de Aside a comandos $B; gestiona sesiones sin cookies
  5. CONFIGURACIÓN DE DISEÑOComprueba el binario designer de gstack para la generación de mockups con IA; enumera los comandos disponibles; establece reglas de ruta de artefactos
  6. Aprendizajes previosBusca aprendizajes entre proyectos o específicos del proyecto; solicita la preferencia entre proyectos en la primera ejecución
  7. Fase 0: Comprobaciones previasComprueba si existe DESIGN.md; ofrece actualizar/crear desde cero/cancelar; verifica el formato; gestiona la conversión; recopila el contexto del producto a partir del código base
  8. Fase 1: Contexto del productoUna única pregunta que abarca producto/audiencia/sector/tipo; pregunta forzada sobre algo memorable; lee el perfil de gustos si existe
  9. La investigación web se ejecuta en AsideUsa el agente Aside para búsquedas web; recurre a la herramienta WebSearch como alternativa; depura las consultas; trata los resultados como contenido no fiable
  10. Fase 2: InvestigaciónIdentifica de 5 a 10 productos de la competencia; toma capturas de pantalla; analiza fuentes/colores/diseños; sintetiza a través de tres capas
  11. Voces externas de diseñoOpcionalmente ejecuta Codex y un subagente de Claude en paralelo; sintetiza los acuerdos y las divergencias; registra el resultado
  12. Reglas importantesProponer, no presentar menús; se requiere justificación; la coherencia prevalece sobre las elecciones individuales; tono conversacional, no rígido; aceptar la decisión final
La descripción propia del Skill
"Consultoría de diseño: comprende tu producto, investiga el panorama, propone un sistema de diseño completo (estética, tipografía, color, layout, espaciado, movimiento) y genera vista previa de fuente+color... (gstack)"

Descripción del encabezado de SKILL.md. El archivo completo tiene aproximadamente 67.098 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre el skill design-consultation

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Funciona esto con Cursor, Windsurf u otros agentes basados en Claude?

Sí, pero la integración con el navegador depende de Aside (solo macOS 15+) o de la alternativa de navegador headless de gstack. Sin ninguno de los dos, el skill omite la investigación visual de la competencia y trabaja a partir del conocimiento de diseño integrado. La consulta de diseño principal —contexto del producto, propuesta de tipografía/color/diseño, creación de DESIGN.md— funciona en cualquier entorno.

Consulta de diseño

Ejecuta design-consultation en una tarea real de marca y design-system.

El skill design-consultation viene incluido en OpenDesign. Descarga la app, selecciona el skill en Plugins → Skills, pega el prompt de arriba y lee el plan antes del resultado.

Descargar OpenDesignVer todas las skills
Terminal
npx skills add https://github.com/garrytan/gstack --skill design-consultation