ahtserhsuddav/diseño-web

Diseño web

Cada proyecto tiene su propio aspecto, basado en su tema y referencias reales. Esta habilidad mantiene el orden de trabajo y los archivos de este proyecto; la artesanía proviene de las habilidades de diseño instaladas junto a ella.

La puerta de entrada

No hay código de página o componente hasta que design/DESIGN.md → Entradas de diseño tenga las cuatro líneas completadas, en orden: una fuente o "ninguna" para cada una, escritas por ti. Un pequeño ajuste a un diseño existente es la única excepción (consulta Reglas).

1. Recopila las entradas, en este orden

Cada paso lee lo que decidieron los pasos anteriores. Una entrada anterior siempre prevalece sobre una posterior.

1. Las referencias y documentos de diseño del humano (máxima prioridad).
   • Lee design/DESIGN.md. Si está completo (los tokens de color tienen valores), es la base: ve al paso 3.
   • design/references/: lee cada imagen una vez y escribe una línea por imagen en DESIGN.md → Referencias (archivo → tomar: … · evitar: …). Trabaja a partir de ese texto después.
   • Enlaces, guías de marca, logotipos, colores o fuentes que el humano te dio en la conversación, y PROJECT.md.
   • ¿El briefing está vacío? Hazle al humano 3 preguntas cortas en un solo mensaje: qué es y para quién; tres palabras para la sensación; sitios que le gusten o no le gusten. Escribe las respuestas en DESIGN.md → Briefing.
   • Escribe Entradas de diseño → Referencias (lo que encontraste, o "ninguna").
2. Si el paso 1 no proporcionó un lenguaje de diseño: una base de awesome-design-md.
   • {{run}} design:md list imprime el catálogo por categoría con una línea por entrada (--category <palabra> lo reduce). Propón 2–3 que se ajusten al briefing, cada uno con una frase sobre por qué, y deja que el humano elija.
   • {{run}} design:md use <nombre> lo copia a design/DESIGN.md con el crédito. Reemplaza cada nombre de marca, logotipo y marca comercial con los de este proyecto.
   • Omite este paso si el paso 1 proporcionó un lenguaje de diseño, o si DESIGN.md ya comienza desde una entrada (su encabezado lo indica).
   • Escribe Entradas de diseño → Base (la entrada, o "ninguna: construida a partir de las referencias del humano").
3. taste-skill (habilidad design-taste-frontend): la dirección artística.
   • Ejecuta sus pasos 1–4 (briefing e inventario del tema, el argumento, la dirección, la idea) para esta página.
   • Cuando los pasos 1–2 fijaron colores y tipo, lidia con --keep palette,type para que planifique la composición, las imágenes y las secciones dentro del lenguaje de diseño en lugar de reemplazarlo.
   • Escribe la dirección elegida en las secciones de DESIGN.md (tema, maquetación, componentes), y Entradas de diseño → Dirección (el id de la dirección y una línea sobre por qué).
4. Sitios reales para los requisitos de este sitio.
   • Abre la sección de tu tipo de proyecto en references/project-types.md (rg -n "^## " <archivo>) y, para los patrones específicos que esta página necesita (precios, pago, documentación, panel de control, incorporación…), las galerías en references/inspiration.md.
   • Estudia 2–3 sitios reales para esos patrones (jerarquía, densidad, cómo explican las cosas), en una herramienta de navegador. Escribe una línea cada uno en DESIGN.md → Referencias.
   • Escribe Entradas de diseño → Sitios de referencia.

2. Construcción

• Tokens: asigna los tokens de DESIGN.md al tema en {{#tanstack-start}}src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}} (shadcn/ui's --background, --primary, --radius…){{/shadcn}}. No uses valores hex sin procesar en los componentes.
• Construcción con la habilidad frontend-design, siguiendo la hoja de dirección de taste-skill (sus pasos 5–6).

{{#shadcn}} Usa componentes shadcn/ui (habilidad shadcn; {{dlx}} shadcn@latest add <component>). {{/shadcn}} Elecciones de componentes e iconos: references/libraries.md.

• Contenido: contenido real. Pídelo, o escribe texto específico y simple. Sin lorem ipsum, ni logotipos, estadísticas o testimonios falsos. Haz que una cosa sea memorable y mantén el resto discreto.
• Línea base: responsivo desde 360px, foco visible, prefers-reduced-motion, contraste WCAG 2.2 AA, y estados vacío, de carga y de error.

3. Revisión

• La puerta de entrada y los pasos de revisión visual de taste-skill (sus pasos 7–8), con capturas de pantalla a 390, 768 y 1440px (habilidad playwright-cli{{#next}}, o next-dev-loop contra el servidor de desarrollo{{/next}}).
• Habilidad web-design-guidelines para accesibilidad y UX, habilidad writing-guidelines para cada pieza de texto, y habilidad web-perf para el rendimiento de carga en las páginas principales.
• Corrige los 3 problemas principales, luego elimina una decoración antes de terminar.

Reglas

• Aprende principios de las referencias (jerarquía, ritmo, densidad, tipo, color). Nunca copies la maquetación, el texto, los logotipos, las ilustraciones o el código de un sitio, y nunca publiques el nombre, logotipo o marca comercial de otra marca.
• El briefing y las referencias del humano prevalecen sobre la base de awesome-design-md, que prevalece sobre los valores predeterminados de taste-skill, que prevalecen sobre tu propio gusto.
• Un pequeño ajuste visual a un diseño existente (espaciado, un color dentro de la paleta, un componente) es un Cambio rápido: sigue DESIGN.md y no vuelvas a ejecutar las entradas.