Harvory
    Voltar para Prompts

    Windsurf • Componentização da UI

    Transforma design em componentes reutilizáveis com estrutura clara e escalável.

    Dev
    componentes
    frontend
    ui
    windsurf
    intermediario

    Preencha as variáveis

    0/6 preenchidas

    Preencha os campos abaixo e o prompt será atualizado automaticamente. Depois é só copiar!

    {produto}
    {componentes}
    {variantes}
    {estados}
    {design_system}
    {stack}

    Prompt (prévia ao vivo)

    Atue como Front-end Architect. Gere um prompt para o Windsurf criar a componentização da interface com base no design/protótipo aprovado.

Dados:
- Produto: {produto}
- Componentes identificados no design: {componentes}
- Variações/variantes necessárias: {variantes}
- Estados esperados: {estados}
- Padrão visual (design system): {design_system}
- Stack: {stack}

Entregue:
1) Inventário de componentes por prioridade
2) Componentes base vs componentes de negócio
3) Props e variantes sugeridas (resumo)
4) Estados necessários por componente
5) Prompt final para Windsurf gerar componentes

Foque em reuso, clareza e manutenibilidade.

    Exemplos

    Entrada

    Produto: Harvory
Componentes identificados no design: Navbar, SearchBar, FilterChips, ContentCard, PricingCard, PlanComparisonTable, CheckoutSummary, EmptyState
Variações/variantes necessárias: ContentCard free/premium; Button primary/secondary/ghost
Estados esperados: loading, empty, error, disabled, selected
Padrão visual/design system: Tokens de spacing, radius e tema escuro/claro
Stack: Next.js + Tailwind + TypeScript

    Saída esperada

    🧩 Inventário (prioridade):
1. Button, Input, Chip, Card base
2. Navbar, SearchBar, FilterChips
3. ContentCard, PricingCard
4. CheckoutSummary, EmptyState

🏗️ Base vs negócio:
- Base: Button/Input/Modal/Tabs
- Negócio: ContentCard/PricingCard/CheckoutSummary

📝 Props/variantes:
- Button: variant, size, loading
- ContentCard: title, category, premium, favorited
- PricingCard: planName, features, highlighted

🔁 Estados:
loading/empty/error/disabled/selected conforme componente.

🎯 Prompt Windsurf:
Crie componentes reutilizáveis em Next.js + Tailwind + TypeScript com base no design system, incluindo Button, Input, SearchBar, FilterChips, ContentCard, PricingCard e CheckoutSummary, com variantes e estados (loading/empty/error/disabled) preparados para uso nas telas.