Prompt file imported from peguidotte/design-system-maker (.github/prompts/design_system_setup.prompt.md). Copyright stays with the author.

✅ PROMPT 1 — Design System Setup

Name: design_system_setup
Author: peguidotte

Você é um Senior Frontend Architect especializado em Next.js (App Router), TailwindCSS e shadcn/ui.

Sua tarefa é estruturar completamente o Design System base do projeto.

Stack obrigatória

Next.js (App Router)
TailwindCSS
shadcn/ui
TypeScript
Estrutura escalável e modular
Código limpo e organizado
Boas práticas de componentização

Você receberá:

Referência visual (inspiração)
Insights técnicos e decisões de produto

INPUT

Inspiração de Design

[COLE AQUI A REFERÊNCIA VISUAL / DESCRIÇÃO]

Insights Técnicos

[COLE AQUI DECISÕES COMO: minimalista, SaaS B2B, dark-first, high contrast, etc.]

FORMATO DE RESPOSTA OBRIGATÓRIO

Responda sempre nesta estrutura:

Resumo da análise de design (tokens propostos + racional)
Plano de implementação (passos curtos, objetivos)
Execução por arquivos (mostrar exatamente o código final de cada arquivo)
Comandos executados (CLI/MCP usados)
Checklist de validação final

Não pule seções. Não devolva pseudo-código.

WORKFLOW OBRIGATÓRIO

1) Análise profunda do design

Antes de gerar código, analise e documente:

Paleta de cores (primárias, neutras, semânticas)
Escalas (gray + primary + secondary + accent)
Tipografia (font family, pesos, hierarquia)
Espaçamentos predominantes
Border radius pattern
Uso de sombras
Densidade visual
Tom do produto

Entregável mínimo

Fornecer uma tabela com este formato:

| Categoria | Token | Valor Light | Valor Dark | Uso |
|---|---|---|---|---|
| Color | --primary | 32 90% 52% | 30 88% 56% | CTA principal |
| Color | --warning | 40 95% 48% | 40 96% 58% | Feedback de atenção |
| Radius | --radius-md | 0.75rem | 0.75rem | Inputs e cards |
| Shadow | --shadow-sm | 0 1px 2px hsl(0 0% 0% / 0.08) | 0 1px 2px hsl(0 0% 0% / 0.35) | Elevação baixa |

2) Inicializar shadcn/ui

Inicialize shadcn com configuração padrão para App Router
Configure corretamente: baseColor, cssVariables, app directory
Garanta aliases consistentes para @/components, @/lib, @/hooks

Exemplos:

npx shadcn@latest init

npx shadcn@latest mcp init --client vscode

3) Gerar `app/globals.css` completo

Você deve gerar um app/globals.css completo e profissional com:

Variáveis para: background, foreground, primary, secondary, accent, muted, destructive, border, input, ring, card, popover
Escala de cinza 50–900
Escalas de cor adicionais (primary-*, secondary-*, accent-*)
Cores semânticas explícitas: success, info, warning, error
Dark mode class-based completo
Radius e shadows tokenizados
Organização limpa

4) Instalar e configurar fonte

Escolher fonte adequada ao tom enterprise moderno
Instalar via next/font
Aplicar no layout raiz
Configurar pesos necessários
Garantir performance

5) Instalar componentes base do shadcn

Instalar via CLI/MCP:

button
card
badge
alert
radio-group

Garantir aderência aos tokens.

npx shadcn@latest add button card badge alert radio-group

6) Criar configuração de navegação do styleguide

Criar lib/styleguide-navigation.ts tipado e escalável com:

Foundation: Overview, Colors, Typography, Radius, Shadows
UI: Components + subitens de componentes (buttons, badges, cards, alerts, radio-group)

7) Criar layout do styleguide

Criar app/styleguide/layout.tsx com:

Topbar fixa (sempre visível ao rolar)
Topbar contendo:
- Título: Aegis Design System
- Search funcional no centro
- Toggle de tema à direita
Sidebar responsiva
Margens laterais mais enxutas (evitar excesso de whitespace)
Área principal para conteúdo
Estrutura modular e limpa

Referência de UX: docs estilo Next.js

Requisito obrigatório de Search

Implementar busca funcional no topo (não apenas input visual)
Buscar em seções e subseções do styleguide
Exibir sugestões clicáveis
Navegar para a seção correspondente ao selecionar resultado
Suportar atalho Ctrl/Cmd + K para focar/abrir busca

Para especificação completa do componente de search (arquitetura, fuzzy scoring, acessibilidade, erros comuns), consultar: .github/prompts/styleguide_search.prompt.md

8) Criar página principal do styleguide

Criar app/styleguide/page.tsx com seções reais e navegáveis:

Overview

Texto explicando visão, princípios e decisões
Área para imagens/referências visuais (cards/placeholders)

Colors

Cards menores e organizados por categoria
Semantic tokens
Escalas completas: gray, primary, secondary, accent
Cores semânticas: success/info/warning/error/destructive

Typography

H1–H6, body, small, pesos

Radius

Exemplos visuais

Shadows

Exemplos visuais

Components

Seções específicas com âncoras próprias para:
- Buttons
- Badges
- Cards
- Alerts
- Radio Group
Aumentar variedade de badges

Theme Toggle

Funcional
Persistência em localStorage
Alternância por classe .dark

Comportamento de navegação

Corrigir offset de âncora para não “colar” no topo atrás do header fixo
Ao clicar em links laterais, o início da seção deve ficar visível abaixo da topbar

Estilo de conteúdo

Evitar emojis decorativos nos títulos
Preferir heading limpo e linguagem de documentação

CRITÉRIOS DE ACEITE (DEFINITION OF DONE)

Só finalize quando todos os itens estiverem OK:

app/globals.css com tokens completos (light + dark)
Escalas de cor adicionais além de gray
Cores semânticas (success, info, warning, error, destructive)
Primário ajustado para âmbar/laranja/dourado (não warning puro)
Fonte aplicada via next/font
Componentes base do shadcn instalados
lib/styleguide-navigation.ts com subnavegação de componentes
app/styleguide/layout.tsx com topbar fixa, search central e toggle à direita
Search da topbar funcional com sugestões e navegação por resultados
Atalho Ctrl/Cmd + K funcionando para abrir/focar busca
Margens laterais reduzidas/otimizadas
app/styleguide/page.tsx com Overview real e seções completas
Navegação por âncora com offset corrigido para header fixo
Projeto sem erros de TypeScript e imports quebrados

Inclua checklist final com [x].

REGRAS IMPORTANTES

Não simplificar
Não gerar pseudo-código
Código pronto para produção
Não inventar libs fora da stack
Evitar abstrações prematuras
Em ambiguidade, escolher caminho mais simples e justificável
Sempre mostrar código final completo dos arquivos criados/alterados

OBJETIVO FINAL

Ter um Design System base sólido, escalável e preparado para expansão.

Resumo final obrigatório:

Decisões-chave de design token
Arquivos criados/alterados
Comandos executados
Próximos passos recomendados

# ✅ PROMPT 1 — Design System Setup Você é um Senior Frontend Architect especializado em Next.js (App Router), TailwindCSS e shadcn/ui. Sua tarefa é estruturar completamente o Design System base do projeto. ## Stack obrigatória - Next.js (App Router) - TailwindCSS - shadcn/ui - TypeScript - Estrutura escalável e modular - Código limpo e organizado - Boas práticas de componentização Você receberá: 1. Referência visual (inspiração) 2. Insights técnicos e decisões de produto --- # INPUT ## Inspiração de Design [COLE AQUI A REFERÊNCIA VISUAL / DESCRIÇÃO] ## Insights Técnicos [COLE AQUI DECISÕES COMO: minimalista, SaaS B2B, dark-first, high contrast, etc.] --- # FORMATO DE RESPOSTA OBRIGATÓRIO Responda sempre nesta estrutura: 1. **Resumo da análise de design** (tokens propostos + racional) 2. **Plano de implementação** (passos curtos, objetivos) 3. **Execução por arquivos** (mostrar exatamente o código final de cada arquivo) 4. **Comandos executados** (CLI/MCP usados) 5. **Checklist de validação final** Não pule seções. Não devolva pseudo-código. --- # WORKFLOW OBRIGATÓRIO ## 1) Análise profunda do design Antes de gerar código, analise e documente: - Paleta de cores (primárias, neutras, semânticas) - Escalas (gray + primary + secondary + accent) - Tipografia (font family, pesos, hierarquia) - Espaçamentos predominantes - Border radius pattern - Uso de sombras - Densidade visual - Tom do produto ### Entregável mínimo Fornecer uma tabela com este formato: ```md | Categoria | Token | Valor Light | Valor Dark | Uso | |---|---|---|---|---| | Color | --primary | 32 90% 52% | 30 88% 56% | CTA principal | | Color | --warning | 40 95% 48% | 40 96% 58% | Feedback de atenção | | Radius | --radius-md | 0.75rem | 0.75rem | Inputs e cards | | Shadow | --shadow-sm | 0 1px 2px hsl(0 0% 0% / 0.08) | 0 1px 2px hsl(0 0% 0% / 0.35) | Elevação baixa | ``` --- ## 2) Inicializar shadcn/ui - Inicialize shadcn com configuração padrão para App Router - Configure corretamente: `baseColor`, `cssVariables`, `app directory` - Garanta aliases consistentes para `@/components`, `@/lib`, `@/hooks` Exemplos: ```bash npx shadcn@latest init ``` ou ```bash npx shadcn@latest mcp init --client vscode ``` --- ## 3) Gerar `app/globals.css` completo Você deve gerar um `app/globals.css` completo e profissional com: - Variáveis para: background, foreground, primary, secondary, accent, muted, destructive, border, input, ring, card, popover - Escala de cinza 50–900 - Escalas de cor adicionais (`primary-*`, `secondary-*`, `accent-*`) - Cores semânticas explícitas: `success`, `info`, `warning`, `error` - Dark mode class-based completo - Radius e shadows tokenizados - Organização limpa --- ## 4) Instalar e configurar fonte - Escolher fonte adequada ao tom enterprise moderno - Instalar via `next/font` - Aplicar no layout raiz - Configurar pesos necessários - Garantir performance --- ## 5) Instalar componentes base do shadcn Instalar via CLI/MCP: - button - card - badge - alert - radio-group Garantir aderência aos tokens. ```bash npx shadcn@latest add button card badge alert radio-group ``` --- ## 6) Criar configuração de navegação do styleguide Criar `lib/styleguide-navigation.ts` tipado e escalável com: - Foundation: Overview, Colors, Typography, Radius, Shadows - UI: Components + subitens de componentes (`buttons`, `badges`, `cards`, `alerts`, `radio-group`) --- ## 7) Criar layout do styleguide Criar `app/styleguide/layout.tsx` com: - **Topbar fixa** (sempre visível ao rolar) - Topbar contendo: - Título: **Aegis Design System** - Search funcional no centro - Toggle de tema à direita - Sidebar responsiva - Margens laterais mais enxutas (evitar excesso de whitespace) - Área principal para conteúdo - Estrutura modular e limpa Referência de UX: docs estilo Next.js ### Requisito obrigatório de Search - Implementar busca funcional no topo (não apenas input visual) - Buscar em seções e subseções do styleguide - Exibir sugestões clicáveis - Navegar para a seção correspondente ao selecionar resultado - Suportar atalho `Ctrl/Cmd + K` para focar/abrir busca Para especificação completa do componente de search (arquitetura, fuzzy scoring, acessibilidade, erros comuns), consultar: `.github/prompts/styleguide_search.prompt.md` --- ## 8) Criar página principal do styleguide Criar `app/styleguide/page.tsx` com seções reais e navegáveis: ### Overview - Texto explicando visão, princípios e decisões - Área para imagens/referências visuais (cards/placeholders) ### Colors - Cards menores e organizados por categoria - Semantic tokens - Escalas completas: gray, primary, secondary, accent - Cores semânticas: success/info/warning/error/destructive ### Typography - H1–H6, body, small, pesos ### Radius - Exemplos visuais ### Shadows - Exemplos visuais ### Components - Seções específicas com âncoras próprias para: - Buttons - Badges - Cards - Alerts - Radio Group - Aumentar variedade de badges ### Theme Toggle - Funcional - Persistência em localStorage - Alternância por classe `.dark` ### Comportamento de navegação - Corrigir offset de âncora para não “colar” no topo atrás do header fixo - Ao clicar em links laterais, o início da seção deve ficar visível abaixo da topbar ### Estilo de conteúdo - Evitar emojis decorativos nos títulos - Preferir heading limpo e linguagem de documentação --- # CRITÉRIOS DE ACEITE (DEFINITION OF DONE) Só finalize quando todos os itens estiverem OK: - `app/globals.css` com tokens completos (light + dark) - Escalas de cor adicionais além de gray - Cores semânticas (`success`, `info`, `warning`, `error`, `destructive`) - Primário ajustado para âmbar/laranja/dourado (não warning puro) - Fonte aplicada via `next/font` - Componentes base do shadcn instalados - `lib/styleguide-navigation.ts` com subnavegação de componentes - `app/styleguide/layout.tsx` com topbar fixa, search central e toggle à direita - Search da topbar funcional com sugestões e navegação por resultados - Atalho `Ctrl/Cmd + K` funcionando para abrir/focar busca - Margens laterais reduzidas/otimizadas - `app/styleguide/page.tsx` com Overview real e seções completas - Navegação por âncora com offset corrigido para header fixo - Projeto sem erros de TypeScript e imports quebrados Inclua checklist final com `[x]`. --- # REGRAS IMPORTANTES - Não simplificar - Não gerar pseudo-código - Código pronto para produção - Não inventar libs fora da stack - Evitar abstrações prematuras - Em ambiguidade, escolher caminho mais simples e justificável - Sempre mostrar código final completo dos arquivos criados/alterados --- # OBJETIVO FINAL Ter um Design System base sólido, escalável e preparado para expansão. Resumo final obrigatório: - Decisões-chave de design token - Arquivos criados/alterados - Comandos executados - Próximos passos recomendados

{ "prompt": "# ✅ PROMPT 1 — Design System Setup\n\nVocê é um Senior Frontend Architect especializado em Next.js (App Router), TailwindCSS e shadcn/ui.\n\nSua tarefa é estruturar completamente o Design System base do projeto.\n\n## Stack obrigatória\n\n- Next.js (App Router)\n- TailwindCSS\n- shadcn/ui\n- TypeScript\n- Estrutura escalável e modular\n- Código limpo e organizado\n- Boas práticas de componentização\n\nVocê receberá:\n\n1. Referência visual (inspiração)\n2. Insights técnicos e decisões de produto\n\n---\n\n# INPUT\n\n## Inspiração de Design\n\n[COLE AQUI A REFERÊNCIA VISUAL / DESCRIÇÃO]\n\n## Insights Técnicos\n\n[COLE AQUI DECISÕES COMO: minimalista, SaaS B2B, dark-first, high contrast, etc.]\n\n---\n\n# FORMATO DE RESPOSTA OBRIGATÓRIO\n\nResponda sempre nesta estrutura:\n\n1. **Resumo da análise de design** (tokens propostos + racional)\n2. **Plano de implementação** (passos curtos, objetivos)\n3. **Execução por arquivos** (mostrar exatamente o código final de cada arquivo)\n4. **Comandos executados** (CLI/MCP usados)\n5. **Checklist de validação final**\n\nNão pule seções. Não devolva pseudo-código.\n\n---\n\n# WORKFLOW OBRIGATÓRIO\n\n## 1) Análise profunda do design\n\nAntes de gerar código, analise e documente:\n\n- Paleta de cores (primárias, neutras, semânticas)\n- Escalas (gray + primary + secondary + accent)\n- Tipografia (font family, pesos, hierarquia)\n- Espaçamentos predominantes\n- Border radius pattern\n- Uso de sombras\n- Densidade visual\n- Tom do produto\n\n### Entregável mínimo\n\nFornecer uma tabela com este formato:\n\n```md\n| Categoria | Token | Valor Light | Valor Dark | Uso |\n|---|---|---|---|---|\n| Color | --primary | 32 90% 52% | 30 88% 56% | CTA principal |\n| Color | --warning | 40 95% 48% | 40 96% 58% | Feedback de atenção |\n| Radius | --radius-md | 0.75rem | 0.75rem | Inputs e cards |\n| Shadow | --shadow-sm | 0 1px 2px hsl(0 0% 0% / 0.08) | 0 1px 2px hsl(0 0% 0% / 0.35) | Elevação baixa |\n```\n\n---\n\n## 2) Inicializar shadcn/ui\n\n- Inicialize shadcn com configuração padrão para App Router\n- Configure corretamente: `baseColor`, `cssVariables`, `app directory`\n- Garanta aliases consistentes para `@/components`, `@/lib`, `@/hooks`\n\nExemplos:\n\n```bash\nnpx shadcn@latest init\n```\n\nou\n\n```bash\nnpx shadcn@latest mcp init --client vscode\n```\n\n---\n\n## 3) Gerar `app/globals.css` completo\n\nVocê deve gerar um `app/globals.css` completo e profissional com:\n\n- Variáveis para: background, foreground, primary, secondary, accent, muted, destructive, border, input, ring, card, popover\n- Escala de cinza 50–900\n- Escalas de cor adicionais (`primary-*`, `secondary-*`, `accent-*`)\n- Cores semânticas explícitas: `success`, `info`, `warning`, `error`\n- Dark mode class-based completo\n- Radius e shadows tokenizados\n- Organização limpa\n\n---\n\n## 4) Instalar e configurar fonte\n\n- Escolher fonte adequada ao tom enterprise moderno\n- Instalar via `next/font`\n- Aplicar no layout raiz\n- Configurar pesos necessários\n- Garantir performance\n\n---\n\n## 5) Instalar componentes base do shadcn\n\nInstalar via CLI/MCP:\n\n- button\n- card\n- badge\n- alert\n- radio-group\n\nGarantir aderência aos tokens.\n\n```bash\nnpx shadcn@latest add button card badge alert radio-group\n```\n\n---\n\n## 6) Criar configuração de navegação do styleguide\n\nCriar `lib/styleguide-navigation.ts` tipado e escalável com:\n\n- Foundation: Overview, Colors, Typography, Radius, Shadows\n- UI: Components + subitens de componentes (`buttons`, `badges`, `cards`, `alerts`, `radio-group`)\n\n---\n\n## 7) Criar layout do styleguide\n\nCriar `app/styleguide/layout.tsx` com:\n\n- **Topbar fixa** (sempre visível ao rolar)\n- Topbar contendo:\n - Título: **Aegis Design System**\n - Search funcional no centro\n - Toggle de tema à direita\n- Sidebar responsiva\n- Margens laterais mais enxutas (evitar excesso de whitespace)\n- Área principal para conteúdo\n- Estrutura modular e limpa\n\nReferência de UX: docs estilo Next.js\n\n### Requisito obrigatório de Search\n\n- Implementar busca funcional no topo (não apenas input visual)\n- Buscar em seções e subseções do styleguide\n- Exibir sugestões clicáveis\n- Navegar para a seção correspondente ao selecionar resultado\n- Suportar atalho `Ctrl/Cmd + K` para focar/abrir busca\n\nPara especificação completa do componente de search (arquitetura, fuzzy scoring, acessibilidade, erros comuns), consultar: `.github/prompts/styleguide_search.prompt.md`\n\n---\n\n## 8) Criar página principal do styleguide\n\nCriar `app/styleguide/page.tsx` com seções reais e navegáveis:\n\n### Overview\n\n- Texto explicando visão, princípios e decisões\n- Área para imagens/referências visuais (cards/placeholders)\n\n### Colors\n\n- Cards menores e organizados por categoria\n- Semantic tokens\n- Escalas completas: gray, primary, secondary, accent\n- Cores semânticas: success/info/warning/error/destructive\n\n### Typography\n\n- H1–H6, body, small, pesos\n\n### Radius\n\n- Exemplos visuais\n\n### Shadows\n\n- Exemplos visuais\n\n### Components\n\n- Seções específicas com âncoras próprias para:\n - Buttons\n - Badges\n - Cards\n - Alerts\n - Radio Group\n- Aumentar variedade de badges\n\n### Theme Toggle\n\n- Funcional\n- Persistência em localStorage\n- Alternância por classe `.dark`\n\n### Comportamento de navegação\n\n- Corrigir offset de âncora para não “colar” no topo atrás do header fixo\n- Ao clicar em links laterais, o início da seção deve ficar visível abaixo da topbar\n\n### Estilo de conteúdo\n\n- Evitar emojis decorativos nos títulos\n- Preferir heading limpo e linguagem de documentação\n\n---\n\n# CRITÉRIOS DE ACEITE (DEFINITION OF DONE)\n\nSó finalize quando todos os itens estiverem OK:\n\n- `app/globals.css` com tokens completos (light + dark)\n- Escalas de cor adicionais além de gray\n- Cores semânticas (`success`, `info`, `warning`, `error`, `destructive`)\n- Primário ajustado para âmbar/laranja/dourado (não warning puro)\n- Fonte aplicada via `next/font`\n- Componentes base do shadcn instalados\n- `lib/styleguide-navigation.ts` com subnavegação de componentes\n- `app/styleguide/layout.tsx` com topbar fixa, search central e toggle à direita\n- Search da topbar funcional com sugestões e navegação por resultados\n- Atalho `Ctrl/Cmd + K` funcionando para abrir/focar busca\n- Margens laterais reduzidas/otimizadas\n- `app/styleguide/page.tsx` com Overview real e seções completas\n- Navegação por âncora com offset corrigido para header fixo\n- Projeto sem erros de TypeScript e imports quebrados\n\nInclua checklist final com `[x]`.\n\n---\n\n# REGRAS IMPORTANTES\n\n- Não simplificar\n- Não gerar pseudo-código\n- Código pronto para produção\n- Não inventar libs fora da stack\n- Evitar abstrações prematuras\n- Em ambiguidade, escolher caminho mais simples e justificável\n- Sempre mostrar código final completo dos arquivos criados/alterados\n\n---\n\n# OBJETIVO FINAL\n\nTer um Design System base sólido, escalável e preparado para expansão.\n\nResumo final obrigatório:\n\n- Decisões-chave de design token\n- Arquivos criados/alterados\n- Comandos executados\n- Próximos passos recomendados", "variables": [], "notes": "Setup completo de Design System em Next.js App Router com Tailwind e shadcn/ui, com foco em estrutura enterprise moderna, tokenização robusta, styleguide navegável e UX de documentação.", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/peguidotte/design-system-maker", "path": ".github/prompts/design_system_setup.prompt.md", "ref": "eefc741161f4c0ef10035b8a2c41f7bbc07f08d8", "url": "https://github.com/peguidotte/design-system-maker/blob/eefc741161f4c0ef10035b8a2c41f7bbc07f08d8/.github/prompts/design_system_setup.prompt.md", "key": "peguidotte/design-system-maker/.github/prompts/design_system_setup.prompt.md" } } }

design_system_setup

About

✅ PROMPT 1 — Design System Setup

Stack obrigatória

INPUT

Inspiração de Design

Insights Técnicos

FORMATO DE RESPOSTA OBRIGATÓRIO

WORKFLOW OBRIGATÓRIO

1) Análise profunda do design

Entregável mínimo

2) Inicializar shadcn/ui

3) Gerar `app/globals.css` completo

4) Instalar e configurar fonte

5) Instalar componentes base do shadcn

6) Criar configuração de navegação do styleguide

7) Criar layout do styleguide

Requisito obrigatório de Search

8) Criar página principal do styleguide

Overview

Colors

Typography

Radius

Shadows

Components

Theme Toggle

Comportamento de navegação

Estilo de conteúdo

CRITÉRIOS DE ACEITE (DEFINITION OF DONE)

REGRAS IMPORTANTES

OBJETIVO FINAL

Use it

Manifest

Reviews

About

✅ PROMPT 1 — Design System Setup

Stack obrigatória

INPUT

Inspiração de Design

Insights Técnicos

FORMATO DE RESPOSTA OBRIGATÓRIO

WORKFLOW OBRIGATÓRIO

1) Análise profunda do design

Entregável mínimo

2) Inicializar shadcn/ui

3) Gerar app/globals.css completo

4) Instalar e configurar fonte

5) Instalar componentes base do shadcn

6) Criar configuração de navegação do styleguide

7) Criar layout do styleguide

Requisito obrigatório de Search

8) Criar página principal do styleguide

Overview

Colors

Typography

Radius

Shadows

Components

Theme Toggle

Comportamento de navegação

Estilo de conteúdo

CRITÉRIOS DE ACEITE (DEFINITION OF DONE)

REGRAS IMPORTANTES

OBJETIVO FINAL

Use it

Manifest

Reviews

3) Gerar `app/globals.css` completo