Frontend Design Toolkit

## Visão Geral

Um fluxo de trabalho do design à página: começar com um direcionamento de design, produzir mockups visuais e então construir uma página inicial — três ferramentas complementares em um único plugin.

- **frontend-design** — Defina a identidade visual: estilo, paleta, tipografia e código de componentes de nível de produção
- **canvas-design** — Crie mockups visuais: pôsteres, imagens de herói e arte de layout como PNG/PDF
- **page-builder** — Monte páginas iniciais usando componentes Tailark com seções estruturadas

## Início Rápido

1. Instale o plugin: `npx skillstore add @frontend-design-toolkit`
2. Descreva seu projeto e público-alvo para **frontend-design** → получите uma direção de estilo, paleta de cores e código de componentes
3. Use **canvas-design** para produzir imagens de herói, banners ou ativos visuais que correspondam ao estilo
4. Passe os tokens de design e conteúdo para **page-builder** → obtenha uma página inicial completa

## Passo a Passo: Construindo uma Página de Lançamento de Produto

**Etapa 1 — Direcionamento de Design**
> "Crie um sistema de design para um SaaS de ferramentas para desenvolvedores. Tema escuro moderno, com acentos azuis e roxos."

O frontend-design retorna: paleta de cores, escala de tipografia, componentes de botão/card em código pronto para produção.

**Etapa 2 — Ativos Visuais**
> "Crie um banner de herói para a página inicial. Formas geométricas abstratas, fundo escuro, gradiente azul."

O canvas-design produz uma imagem de herói em PNG correspondente à paleta estabelecida.

**Etapa 3 — Montagem da Página**
> "Construa uma página inicial com: seção hero, grade de recursos com 3 colunas, tabela de preços, rodapé com CTA."

O page-builder gera uma página completa usando componentes Tailark, incorporando os tokens de design da Etapa 1.

## Escopo e Limitações

**Este kit de ferramentas foi projetado para:**
- Novas páginas iniciais, páginas de marketing, páginas de campanhas
- Páginas de lançamento de produtos e microsites promocionais
- Protótipos e explorações de design
- Páginas de portfólio e sites pessoais

**Não foi projetado para:**
- Substituir aplicações web complexas existentes
- Substituir um sistema de design completo já em produção
- Fluxos de checkout de e-commerce ou formulários de múltiplas etapas
- Renderização do lado do servidor ou integração com backend

## Tratamento de Falhas

- **O design não corresponde à marca** → Volte para a Etapa 1 (frontend-design) e refine o direcionamento de estilo. Ajuste a paleta, tipografia ou humor antes de regenerar os ativos downstream
- **Mockup visual impreciso** → Reexecute o canvas-design com restrições mais específicas. Referencie explicitamente os tokens de design da Etapa 1
- **Estrutura da página incorreta** → Modifique o prompt do page-builder com instruções em nível de seção. A saída é HTML/Tailwind padrão — edições manuais sempre são possíveis
- **Nunca implanta automaticamente em produção** — Toda saída são arquivos locais. Você revisa e implanta manualmente
- **Mantenha os ativos gerados versionados** — Salve cada iteração para que você possa comparar e reverter para uma direção de design anterior

## Dicas

- Comece amplo com o frontend-design, depois estreite. Uma direção de estilo clara torna as outras duas ferramentas muito mais eficazes
- O canvas-design cria arte original — nunca copia trabalhos de artistas existentes
- O page-builder funciona melhor com descrições concretas de seção em vez de solicitações vagas
- Todas as três ferramentas produzem saída estática (código, imagens, HTML) — sem dependências de runtime