mirror of
https://github.com/melgarafael/DeskcommCRM.git
synced 2026-10-02 01:28:34 +08:00
Design system tokens materialized to production: - app/globals.css rewritten with Sage palette (light + dark drawn separately) - 11 stops accent, 11 stops greige neutral, states (success/warning/error/info) - WCAG validated: AAA body text, AA muted, AA accent UI - dark mode designed not inverted (dark accent-400 = #82a077, light 500 = #67885d) - tailwind.config.ts extended with var(--color-*) references + dark via [data-theme] - app/layout.tsx loads Atkinson Hyperlegible + IBM Plex Mono via next/font/google + anti-FOUC inline script + ThemeProvider wrapping children - lib/theme.tsx: ThemeProvider + useTheme() with light/dark/system + localStorage - components/ui/button|card|input|textarea|badge rewritten to consume Sage tokens (other shadcn components keep working via shadcn-compat aliases) Showcase preserved at /design (5 palettes, 4 typography pairs, 3 densities, motion samples, 4 icon styles compared) for future variant exploration. Documentation (11 files, ~10.4k words) at docs/design-system/: - 00-overview, 01-foundation-tokens, 02-palette-sage, 03-typography, 04-density-aerada, 05-iconography-phosphor, 06-components, 07-motion-language, 08-voice-and-tone, 09-anti-patterns, README Screen flow (9 files, ~13.8k words) at docs/design-system/screen-flow/: - 00-personas (5 personas with JTBD/frustrations/metrics) - 01-sitemap (94 routes with persona/auth/priority) - 02-journeys (5 critical journeys: BPO attends, super-admin triage, AI handoff, onboarding, LGPD data_request) - 03-screen-inventory (94 screens with states/realtime/components) - 04-clickflows (8 Mermaid flowcharts) - 05-state-machines (9 stateDiagram-v2: conversation, lead, channel_session, bot mode, LGPD request, attendant presence, etc.) - 06-empty-states-and-errors (10 empty + 16 errors with PT-BR copy) - 07-responsive-strategy (desktop/laptop/tablet/mobile breakpoints) - 08-accessibility (keyboard nav, shortcuts, ARIA, focus visible, reduced motion) Anti-patterns enforced: zero Inter/Geist/Space Grotesk, zero purple gradient, zero zinc-900, zero glassmorphism, zero Sparkle for AI, zero rounded-md defaults. Each component has ≥3 of 5 explicit constraints (shape/color/typo/ motion/layout). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
3.9 KiB
3.9 KiB
DeskcommCRM — Workflow de Construção
Ordem definida pelo Rafael: PRD → Regras de Negócio → Specs → Epics → Stories → Plano com Tasks.
Fase 0 — Brainstorming (em andamento)
- Entender demanda e confirmar com o usuário
- Decidir tenancy model (multi-tenant clássico desde dia 1)
- Decidir escopo MVP (Opção B — com IA core)
- Decidir integração e-commerce (Nuvemshop only)
- Decidir perfil do primeiro tenant (PME médio)
- Ler material de referência da Aula CRM Nichado WAHA
- Decidir adoção da arquitetura de referência (integral, opção A)
- Criar skeleton de docs do projeto
- Preservar síntese da referência em
docs/research/
Fase 1 — PRD-Mestre + sub-PRDs
- Escrever PRD-Mestre (
docs/prd/00-prd-master.md) — visão, problema, escopo, stakeholders, métricas, restrições — v0.1 escrito, em revisão pelo Rafael - Sub-PRD 01: Plataforma Base (auth, multi-tenant, RBAC, audit, LGPD framework) — v0.1 escrito
- Sub-PRD 02: Customer 360° + Identity Resolution determinística — v0.1 escrito
- Sub-PRD 03: Canal WhatsApp (WAHA + anti-banimento + janela 24h + multi-atendente) — v0.1 escrito
- Sub-PRD 04: Pipeline Kanban + Atendimento + Tickets + Handoff — v0.1 escrito
- Sub-PRD 05: IA Conversacional (chatbot + RAG por tenant + sentiment detection) — v0.1 escrito
- Sub-PRD 06: Integração Nuvemshop + LGPD webhooks — v0.1 escrito
- Revisão final do PRD-Mestre + sub-PRDs — spot-check de consistência cross-doc passou
Fase 2 — Regras de Negócio
- Regras de tenancy e isolamento (T-01 a T-08) — em
docs/business-rules/00-business-rules-catalog.md - Regras LGPD (L-01 a L-10) — idem
- Regras WhatsApp (W-01 a W-12) — idem
- Regras de pipeline (P-01 a P-08) — idem
- Regras de atendimento (AT-01 a AT-08) — idem
- Regras de IA (IA-01 a IA-11) — idem
- Regras de billing/uso (B-01 a B-05) — idem
Fase 3 — Specs Técnicas — COMPLETA (8 specs, ~60k palavras)
- Spec 01 Plataforma Base (auth, RLS templates, audit, LGPD framework, API conventions)
- Spec 02 Customer 360 + Identity Resolution
- Spec 03 WhatsApp via WAHA Plus
- Spec 04 Pipeline Kanban + Atendimento (UI 3 colunas)
- Spec 05 IA + RAG + Sentiment + Handoff
- Spec 06 Nuvemshop + LGPD
- Spec 07 Event Log + Workers + Crons (transversal)
- Spec 08 Deploy + Observability (transversal)
- 15 diagramas Mermaid em
docs/research/architecture-diagrams.md
Fase 3.5 — Design System + Screen Flow (extra) — COMPLETA
- Showcase navegável
/designcom 5 paletas + 4 tipografias + 3 densidades + componentes + motion - Direção locked: Sage + Atkinson Hyperlegible + Aerada + Phosphor
- Tokens materializados em
tailwind.config.ts+app/globals.css+app/layout.tsx <ThemeProvider>com light/dark/system + persistência localStorage- shadcn components reescritos pra Sage (button/card/input/textarea/badge)
- Documentação em
docs/design-system/(11 arquivos, ~10.4k palavras) - Screen flow em
docs/design-system/screen-flow/(9 arquivos, ~13.8k palavras) - 94 telas inventariadas + 5 jornadas + 8 clickflows + 9 state machines
Fase 4 — Epics
- Epic E1: Plataforma Base
- Epic E2: Conexão WhatsApp + Inbox Live
- Epic E3: Customer 360° + Identity Resolution
- Epic E4: Pipeline Kanban + Atendimento Humano
- Epic E5: IA Conversacional + Handoff
- Epic E6: Integração Nuvemshop + LGPD
- Epic E7: Hardening + Observability + Deploy
Fase 5 — Stories
- Detalhar stories de cada epic com ACs
- Estimativas relativas (T-shirt sizing)
- Priorizar por Now/Next/Later
Fase 6 — Plano de Tasks
- Quebrar stories em tasks técnicas
- Sequenciar com dependências explícitas
- Cronograma e marcos