Frontend Design Toolkit

## Descripción General

Un flujo de trabajo de diseño a página: comienza con una dirección de diseño, produce maquetas visuales y luego construye una página de inicio — tres herramientas complementarias en un solo plugin.

- **frontend-design** — Define la identidad visual: estilo, paleta, tipografía y código de componentes de producción
- **canvas-design** — Crea maquetas visuales: pósters, imágenes hero y arte de diseño como PNG/PDF
- **page-builder** — Ensambla páginas de inicio usando componentes Tailark con secciones estructuradas

## Inicio Rápido

1. Instala el plugin: `npx skillstore add @frontend-design-toolkit`
2. Describe tu proyecto y público objetivo a **frontend-design** → obtén una dirección de estilo, paleta de colores y código de componentes
3. Usa **canvas-design** para producir imágenes hero, banner o recursos visuales que coincidan con el estilo
4. Pasa los tokens de diseño y contenido a **page-builder** → obtén una página de inicio completa

## Tutorial: Construyendo una Página de Lanzamiento de Producto

**Paso 1 — Dirección de Diseño**
> "Crea un sistema de diseño para un SaaS de herramientas para desarrolladores. Tema oscuro moderno, con acentos azules y morados."

frontend-design devuelve: paleta de colores, escala de tipografía, componentes de botón/card en código listo para producción.

**Paso 2 — Recursos Visuales**
> "Crea un banner hero para la página de inicio. Formas geométricas abstractas, fondo oscuro, degradado azul."

canvas-design produce una imagen hero en PNG que coincide con la paleta establecida.

**Paso 3 — Ensamblaje de Página**
> "Construye una página de inicio con: sección hero, grille de características de 3 columnas, tabla de precios, pie de página con CTA."

page-builder genera una página completa usando componentes Tailark, incorporando los tokens de diseño del Paso 1.

## Alcance y Límites

**Este kit de herramientas está diseñado para:**
- Nuevas páginas de inicio, páginas de marketing, páginas de campañas
- Páginas de lanzamiento de productos y micrositios promocionales
- Prototipos y exploraciones de diseño
- Páginas de portafolio y sitios personales

**No está diseñado para:**
- Tomar el control de aplicaciones web complejas existentes
- Reemplazar un sistema de diseño completo ya en producción
- Flujos de checkout de comercio electrónico o formularios de múltiples pasos
- Renderizado del lado del servidor o integración con backend

## Manejo de Errores

- **El diseño no coincide con la marca** → Regresa al Paso 1 (frontend-design) y refina la dirección de estilo. Ajusta la paleta, tipografía o estado de ánimo antes de regenerar los recursos posteriores
- **Maqueta visual fuera de objetivo** → Vuelve a ejecutar canvas-design con restricciones más específicas. Referencia los tokens de diseño del Paso 1 explícitamente
- **Estructura de página incorrecta** → Modifica el prompt de page-builder con instrucciones a nivel de sección. La salida es HTML/Tailwind estándar — las ediciones manuales siempre son posibles
- **Nunca hace auto-despliegue a producción** — Toda la salida son archivos locales. Tú revisas y despliegas manualmente
- **Mantén los recursos generados versionados** — Guarda cada iteración para que puedas comparar y revertir a una dirección de diseño anterior

## Consejos

- Comienza amplio con frontend-design, luego estrecha. Una dirección de estilo clara hace que las otras dos herramientas sean mucho más efectivas
- canvas-design crea arte original — nunca copia obras de artistas existentes
- page-builder funciona mejor con descripciones de secciones concretas en lugar de solicitudes vagas
- Las tres herramientas producen salida estática (código, imágenes, HTML) — sin dependencias de tiempo de ejecución