feat: /tema e /design no Pi + /mapear completo (registro + página por padrão)

- prompts tema.md e design.md + cookbooks theme.md e design.md: entrevista de
  tema com preview aprovada (código via FDA) e redesign de layout por
  referência dentro do design system (motion via Impeccable)
- /mapear ganha os passos 4-5 por padrão: component-architect (semeia o
  registro — a trava de reuso dos briefs depende dele) e ui-component-page
  (página /ui-components); opt-out 'sem componentes'; harness_bridge idem
- viewer: a página viva nasce no /mapear (Pi), /start (passo 6) ou no
  primeiro /componente
- registros: SKILL.md da fia (rotas + cookbooks), nota do fia.js, README

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: elberrd

README.md

@@ -36,7 +36,7 @@ Após a instalação (salvo `--no-fia`):
 | Peça                | Onde                         | Uso                                                                  |
 | ------------------- | ---------------------------- | -------------------------------------------------------------------- |
 | **Orquestrador Pi** | `.pi/skills/fia/`            | `pi` → `/fia` — panorama, FDAs, cookbooks, subagentes                |
-| **Comandos curtos** | `.pi/prompts/`               | `/ideia`, `/stack`, `/componente`, `/grill`, `/prd`, `/mapear`, `/tarefa`, `/goal`, `/lancar`, `/status` |
+| **Comandos curtos** | `.pi/prompts/`               | `/ideia`, `/stack`, `/componente`, `/tema`, `/design`, `/grill`, `/prd`, `/mapear`, `/tarefa`, `/goal`, `/lancar`, `/status` |
 | **FDAs**            | `fia/fda_*.mjs`              | `node fia/fda_plan_build_test.mjs "…"` — fluxos determinísticos      |
 | **Trace**           | `fia/data/fia.db`            | `npm run fda:sessions` / `fda:phases` / `fda:tail`                   |
 | **Viewer**          | `fia/scripts/fia-viewer.mjs` | `npm run fda:viewer` — timeline Gantt no navegador (ao vivo)         |
@@ -52,6 +52,8 @@ Rode `pi` na pasta do projeto e digite `/` — o autocomplete mostra os comandos
 | "Não sei nem o que vou criar"     | `/ideia`  | Entrevista do zero (uma pergunta por vez, sempre com recomendação) até nascer o `ai-docs/PRD.md` — e a melhor STACK para ele (grava em `ai-docs/stack.md`) |
 | Stack pendente (ou tech nova)     | `/stack`  | Decide camadas "decidir depois" do manifesto, gera `ai-docs/apis/<tech>.md` (com a receita de Produção) e instala CLI/MCP/skills da tecnologia |
 | Componente novo (shadcn/REUI/…)   | `/componente` | Nome + URL/comando → pesquisa, instala, registra em `ai-docs/components/registry.md` e expõe na página `/ui-components` (design system vivo). Conflito (duas data tables)? Você escolhe o padrão; a outra vira alternativa, usada só quando pedida |
+| Mudar a cara do app               | `/tema`   | Entrevista rápida (cores, fontes, forma) → preview do design system atual × proposto → só aplica com sua aprovação |
+| Mudar o LAYOUT (com referência)   | `/design` | Imagem(ns) de referência → estrutura extraída, identidade preservada (registry/tema); motion via Impeccable; amplo vira tarefas |
 | "Tenho uma ideia/rascunho de PRD" | `/grill`  | Entrevista que estressa o PRD: caça o que falta (atores, permissões, casos extremos, escopo v1) e grava cada decisão de volta no documento |
 | "Quero só um parecer rápido"      | `/prd`    | O revisor lista lacunas e ambiguidades em ordem de importância (não edita nada)                                                            |
 | PRD pronto                        | `/mapear` | Gera `ai-docs/map.yaml`, telas/rotas e as tarefas numeradas em `ai-docs/todos/issues/` — e abre tudo numa página (`npm run plano`)          |

fia-templates/scripts/fia-viewer-page.mjs

@@ -1352,7 +1352,7 @@ function renderPlanDesignTab(box){
       '<span style="color:var(--faint);font-size:11.5px;margin-left:9px">precisa do app rodando (npm run dev)</span></div>';
   } else {
     html += '<div style="padding:0 16px 14px;color:var(--faint);font-size:12px">A página viva de componentes ('+
-      esc((d.uiPage&&d.uiPage.route)||'/ui-components')+') ainda não existe — ela nasce no /start do Claude Code (passo 6).</div>';
+      esc((d.uiPage&&d.uiPage.route)||'/ui-components')+') ainda não existe — ela nasce no /mapear (Pi), no /start do Claude Code (passo 6) ou no primeiro /componente.</div>';
   }
   html += '</section>';
   if(d.registry && d.registry.exists && d.registry.entries.length){

pi-templates/.pi/prompts/design.md

@@ -0,0 +1,24 @@
+---
+description: Mudar o LAYOUT do app a partir de referências (imagens) — estrutura da referência, identidade do nosso design system
+argument-hint: "[imagem(ns) + telas em escopo + descrição — o que faltar eu pergunto]"
+---
+Leia `.pi/skills/fia/SKILL.md` e o cookbook `.pi/skills/fia/cookbooks/design.md`, e siga-o à risca.
+
+Referências/pedido: $@
+
+A regra de ouro: **a imagem é inspiração de ESTRUTURA — cores, fontes e
+componentes vêm do NOSSO design system** (tema + registry). Nesta ordem:
+
+1. Leia o registro de componentes, as telas atuais e a skill Impeccable (se
+   instalada — ela manda no motion).
+2. Leia a(s) referência(s) como designer: estrutura, hierarquia, densidade,
+   padrões, motion — e me confirme sua leitura em uma frase.
+3. Entrevista curta (UMA pergunta por vez, com recomendação): escopo, o que
+   importa da referência, o que preservar, nível de motion.
+4. Plano por tela mapeado ao registry (componente faltando → fluxo do
+   /componente ANTES; quero as cores da imagem? → /tema com preview). Espere
+   meu OK.
+5. Aplicar: contido → um FDA + /test-ui; amplo → recomende virar tarefas
+   (issues com o plano nos briefs) e executar com /tarefa ou /goal.
+
+Nunca copie a referência pixel a pixel; nunca toque no tema aqui.

pi-templates/.pi/prompts/mapear.md

@@ -13,13 +13,20 @@ Delegue em sequência, esperando cada um terminar:
 1. `start-mapper` → gera `ai-docs/map.yaml`
 2. `screen-routes-generator` → gera `ai-docs/screens-routes.md`
 3. `task-master-generator` → gera `ai-docs/todos/issues/NN-<slug>.md` + `ai-docs/todos/task-master.md`
+4. `component-architect` → `ai-docs/components/ideal-components.md` + SEMEIA o
+   registro `ai-docs/components/registry.md` (a trava de reuso dos briefs
+   depende dele — sem semear, toda tarefa de UI trava em "não existe no registro")
+5. `ui-component-page` → cria/atualiza a página viva `/ui-components`
+   (design system padronizado: sidebar + busca + Fundamentos)
+
+(Os passos 4–5 são o padrão; se eu disser "sem componentes", pule-os.)
 
 Instruções extras do engenheiro: $@
 
 Ao final:
 
 1. Rode `npm run plano -- --detach` — abre no navegador a página "Plano" com tudo que foi criado (telas, tarefas, design system). Se o script não existir ou falhar, siga em frente e apenas diga que dá para ver depois com `npm run plano`.
-2. Me mostre: quantas tarefas foram criadas, a ordem sugerida (grafo de dependências) e qual seria a tarefa 1.
+2. Me mostre: quantas tarefas foram criadas, a ordem sugerida (grafo de dependências), qual seria a tarefa 1 — e quantos componentes entraram no registro.
 3. Diga, com estas palavras: "abri no seu navegador a página Plano com tudo que o /mapear criou — ela fica em http://127.0.0.1:4600#plan (ou `npm run plano`)".
 
 NÃO comece a implementar — para isso eu uso /tarefa ou /goal.

pi-templates/.pi/prompts/tema.md

@@ -0,0 +1,23 @@
+---
+description: Mudar o tema do app (cores, fontes, forma) — entrevista rápida, preview para aprovar, e só então aplica
+argument-hint: "[dica opcional — ex.: 'azul, mais sério' ou o comando do shadcn/create]"
+---
+Leia `.pi/skills/fia/SKILL.md` e o cookbook `.pi/skills/fia/cookbooks/theme.md`, e siga-o à risca.
+
+Dica inicial (opcional): $@
+
+Nesta ordem — e NADA muda no app sem a minha aprovação:
+
+1. Leia o tema atual, a stack (`ai-docs/stack.md`) e o PRD — as recomendações
+   saem dali.
+2. Entrevista rápida (~6 perguntas, UMA por vez, sempre com recomendação em
+   termos leigos): cor principal (aceito vibe), acento/neutros, claro/escuro,
+   par de fontes, forma (cantos/densidade/sombra), detalhe livre.
+3. Preview via FDA: rota `/ui-components/preview` com o design system que JÁ
+   existe renderizado lado a lado — Atual × Proposto, claro e escuro. Me avise
+   para abrir com `npm run dev`.
+4. Eu decido: **aprovar** (aplica em globals.css + fontes e apaga a preview),
+   **ajustar** (me pergunte o que mudar e regenere) ou **desistir** (apaga a
+   preview; zero mudanças).
+
+Contraste AA nos dois modos é bloqueio. Commit só se eu pedir.

pi-templates/.pi/skills/fia/SKILL.md

@@ -37,6 +37,8 @@ Short commands (prompt templates em `.pi/prompts/`) are the student entry points
 | `/goal` | todas as tarefas até terminar | harness_bridge (Step 3) |
 | `/lancar` | colocar no ar — beta pública e produção | launch |
 | `/componente [nome + URL/comando]` | adicionar componente ao design system (registrar + instalar + página) | components |
+| `/tema [dica]` | mudar cores/fontes/forma — entrevista → preview aprovada → aplica | theme |
+| `/design [imagens]` | redesign de layout por referência, dentro do design system | design |
 | `/absorver [foco]` | projeto existente → PRD as-built + mapa + convenções + manifesto de stack + registro de componentes | — |
 | `/status` | progresso + últimas execuções | observability |
 
@@ -46,6 +48,8 @@ For anything else, route by request:
 |---|---|
 | Decidir stack / documentar tecnologia | [cookbooks/stack.md](cookbooks/stack.md) |
 | Componentes de UI / design system / registry | [cookbooks/components.md](cookbooks/components.md) |
+| Mudar tema / cores / fontes | [cookbooks/theme.md](cookbooks/theme.md) |
+| Redesign de layout / referência visual / motion | [cookbooks/design.md](cookbooks/design.md) |
 | Install / stamp FIA | [cookbooks/install.md](cookbooks/install.md) |
 | Run an FDA | [cookbooks/run_fda.md](cookbooks/run_fda.md) |
 | Create a new FDA | [cookbooks/create_fda.md](cookbooks/create_fda.md) |

pi-templates/.pi/skills/fia/cookbooks/design.md

@@ -0,0 +1,54 @@
+# Design — layout redesign from references, inside the design system
+
+`/design` changes the app's LAYOUT (navegação, onde ficam tabelas/cards/
+gráficos, hierarquia, densidade, motion) a partir de imagens de referência
+e/ou descrição. The rule that makes it work:
+
+> **A referência é inspiração de ESTRUTURA. A identidade é NOSSA.**
+> Layout/hierarquia/densidade/motion vêm da referência; cores, fontes e
+> componentes vêm do design system (tema + `ai-docs/components/registry.md`).
+
+You orchestrate and interview; **app code is FDA work**. Talk pt-BR.
+
+## Step 1 — Facts
+
+Registry (vocabulário único de componentes, papel padrão × alternativa),
+`ai-docs/stack.md`, `ai-docs/screens-routes.md`, `ai-docs/map.yaml`, o código
+das telas em escopo, e a skill Impeccable quando instalada (autoridade de
+motion/polish).
+
+## Step 2 — Ler a referência como designer (não como copiador)
+
+De cada imagem, extraia por escrito: estrutura (navegação, grid, regiões),
+hierarquia (o que domina, o que apoia), densidade, padrões (filtros topo ×
+lateral; detalhe em página × drawer) e motion percebido. DESCARTE
+explicitamente: paleta, tipografia, ícones, componentes de outra biblioteca.
+Pediram as cores da imagem? Explique a separação e ofereça levar a paleta
+extraída como ponto de partida do `/tema` (com preview).
+
+## Step 3 — Confirmar (entrevista curta, UMA pergunta por vez, com recomendação)
+
+Escopo (quais telas) · o que da referência importa (confirme sua leitura em
+uma frase) · o que preservar do atual · nível de motion (sóbrio recomendado |
+médio | expressivo).
+
+## Step 4 — Plano mapeado ao design system (aprovação obrigatória)
+
+Por tela, região a região, cada necessidade → linha do registry (`padrão`;
+`alternativa` só pedida por nome). Faltou componente → protocolo do
+`/componente` (registrar + instalar) ANTES. Motion: com Impeccable, siga-a;
+sem ela: 150–300ms, transform/opacity, stagger ≤ 60ms,
+`prefers-reduced-motion` sempre. Mostre o plano e espere o OK.
+
+## Step 5 — Aplicar (o tamanho decide)
+
+- **Contido** (uma tela/região): UM FDA com o plano como brief; valide com
+  `/test-ui` (e `impeccable audit` quando houver). Atualize
+  `ai-docs/screens-routes.md`.
+- **Amplo** (navegação + várias telas): recomende virar TAREFAS — issues
+  numeradas (uma fatia vertical por tela, o plano vai nos briefs) executadas
+  com `/tarefa`//`/goal` como sempre. Mudança ampla sem tarefas = sem rastro.
+
+Feche reportando: telas/tarefas, componentes do registry usados, o que ficou
+de fora e por quê, motion aplicado, próximos passos (`/test-ui`, `/tema`,
+`/componente`).

pi-templates/.pi/skills/fia/cookbooks/harness_bridge.md

@@ -16,7 +16,7 @@ produces tasks that get rewritten.
 Either path produces the same files:
 
 - **Harness path**: the engineer runs `/start` in Claude Code.
-- **Pi path**: delegate in order — `start-mapper` (→ `ai-docs/map.yaml`), `screen-routes-generator` (→ `ai-docs/screens-routes.md`), `task-master-generator` (→ `ai-docs/todos/issues/NN-<slug>.md` + `ai-docs/todos/task-master.md`).
+- **Pi path**: delegate in order — `start-mapper` (→ `ai-docs/map.yaml`), `screen-routes-generator` (→ `ai-docs/screens-routes.md`), `task-master-generator` (→ `ai-docs/todos/issues/NN-<slug>.md` + `ai-docs/todos/task-master.md`), then `component-architect` (→ `ideal-components.md` + SEEDS `ai-docs/components/registry.md` — the briefs' reuse lock depends on a seeded registry) and `ui-component-page` (→ the live `/ui-components` page). The two component steps are the default; skip only if the engineer says "sem componentes".
 
 After the artifacts land, show them to the engineer: `npm run plano -- --detach` opens the viewer's "Plano" view (screens, tasks, design system, generated files) at http://127.0.0.1:4600#plan. If the script is missing, just mention `npm run plano`.
 

pi-templates/.pi/skills/fia/cookbooks/theme.md

@@ -0,0 +1,58 @@
+# Theme — interview → preview → approve → apply
+
+`/tema` changes the project's visual identity (colors, typography, shape)
+with ZERO risk: a quick interview, a PREVIEW route rendering the existing
+design system with the proposed theme side by side with the current one, and
+NOTHING applied until the engineer approves. You orchestrate and interview;
+**app code (preview route, globals.css, layout) is FDA work** — hard rule 5.
+Talk to the engineer in pt-BR; translate every choice to plain language.
+
+## Step 1 — Facts
+
+`ai-docs/stack.md` (frontend → onde vivem os tokens; stacks Next recomendada/
+própria: `app/globals.css` + fontes no layout via `next/font`), o tema ATUAL
+(leia o arquivo de tokens), `ai-docs/PRD.md` (o produto guia a recomendação) e
+`ai-docs/components/registry.md` (a preview renderiza componentes REAIS).
+
+## Step 2 — Interview (~6 perguntas, UMA por vez, sempre com recomendação)
+
+1. Ponto de partida: ajustar o atual | preset do shadcn/create (cola o
+   comando) | repensar do zero.
+2. Cor principal — aceita hex, nome ou VIBE ("passa confiança"); recomende
+   pelo PRD.
+3. Acento + neutros (quentes × frios) — uma pergunta.
+4. Claro/escuro: ambos (recomendado) e qual o inicial.
+5. Tipografia: 3 pares prontos título+corpo que combinam com a vibe + "outra".
+6. Forma (presets): quadrado e denso | suave e padrão (recomendado) |
+   arredondado e arejado.
+7. Detalhe livre opcional (gradiente, dark-first, bordas…).
+
+## Step 3 — Preview via FDA (nada global muda)
+
+Despache UM FDA (`fda_prompt`/`fda_build`) com a spec completa:
+
+- Gerar TODOS os tokens do padrão do projeto (set shadcn: --background,
+  --foreground, --card, --primary, --secondary, --muted, --accent,
+  --destructive, --border, --input, --ring, --radius, charts… claro E
+  escuro). Contraste WCAG AA nos dois modos é BLOQUEIO (texto ≥ 4.5:1).
+- Criar a rota de preview ao lado da página do design system
+  (`app/ui-components/preview/page.tsx`): wrapper com as CSS variables
+  redefinidas localmente + fontes `next/font` SÓ desta rota; conteúdo =
+  Fundamentos + amostras dos componentes reais do registro, **lado a lado
+  Atual × Proposto**, claro e escuro. Sem página `/ui-components` ainda →
+  preview standalone com as amostras básicas.
+
+Depois: "abra `/ui-components/preview` com `npm run dev`" — e espere.
+
+## Step 4 — Aprovar | Ajustar | Desistir (loop)
+
+- **Aprovar** → FDA de promoção: tokens para `globals.css` (claro+escuro),
+  fontes no layout raiz, apagar a rota de preview, `npm run build` verde.
+  Reporte valores e arquivos; commit só se o engenheiro pedir.
+- **Ajustar** → pergunte O QUE mudar (uma pergunta), regenere a preview
+  (novo FDA pequeno). Quantas vezes precisar.
+- **Desistir** → FDA apaga a rota de preview. NADA mudou.
+
+Regras duras: nunca aplicar sem aprovação explícita; só tokens do padrão do
+projeto; a página `/ui-components` (Fundamentos) já reflete o tema novo por
+ler as variáveis reais — não precisa editá-la.

src/steps/fia.js

@@ -75,6 +75,8 @@ export async function setupFia(ctx) {
       '  /goal    todas as tarefas até terminar',
       '  /lancar  colocar no ar — beta pública e produção de verdade (guiado)',
       '  /componente adicionar componente ao design system (registro + página)',
+      '  /tema    mudar cores/fontes/forma — preview para aprovar, depois aplica',
+      '  /design  redesign de layout por referência (imagens), no design system',
       '  /absorver projeto EXISTENTE → PRD as-built + mapa + manifesto de stack',
       '  /status  progresso e últimas execuções',
       '',