blueprint-frontend-design-systemlisted
Install: claude install-skill DouglasPrado/blueprint
<!-- GERADO por tools/build-codex.py a partir de skills/frontend-design-system/SKILL.md.
Nao edite aqui: edite a fonte e rode `python3 tools/build-codex.py`. -->
# Frontend — Design System (compartilhado)
Gera `docs/frontend/shared/03-design-system.md`. Documento **compartilhado** entre web, mobile e desktop.
## Contexto (ler uma vez)
- `docs/blueprint/01-vision.md` — visao e identidade do produto (define a personalidade visual)
- `docs/blueprint/04-domain-model.md` — entidades e termos do dominio
- `docs/prd.md` — complemento
- Template a preencher: `docs/frontend/shared/03-design-system.md`
## Convencoes
- **Escrita:** doc so com `{{placeholders}}` → Write. Doc com conteudo real → Edit, inserindo antes de `<!-- APPEND:... -->`. Alteracao pontual → `blueprint-increment`.
- **Origem:** marque conteudo derivado com `<!-- do blueprint: XX-arquivo.md -->`.
- **Versoes:** bibliotecas de UI → `mcp__context7__resolve-library-id` → `mcp__context7__query-docs`.
- **Perguntas:** as escolhas de tipografia e paleta **sao** as perguntas desta skill — apresente opcoes em vez de decidir sozinho.
## Cobertura
- **Design Tokens**: cores, tipografia, espacamento, breakpoints
- **Temas**: light/dark/custom — implementacao e alternancia
- **Ferramentas**: Figma, Storybook
- **Catalogo de Componentes Base**: primitivos (Button, Input, Typography, ...)
---
## Tipografia — Google Fonts via Fontpair
Escolha um par (heading + body) em https://www.fontpair.co/all usando Google Fonts.