④段整套同步（六节＋ P/S/F/J ＋模板）＋ open-design 移到技能根

一、④段整套同步（用户选候选 A） - 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。 - ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐： · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。 · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。 · 保留旧版有价值的要求：每项功能补齐做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；横向流程图每步写清页面／功能／操作／完成判据。 · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。 · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。 · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。 - 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图＋用户路径）。二、open-design 移到技能根（用户选候选 A） - `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。 - `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。 - 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与同根技能（`<技能根>/<技能名>/`）两类分开写。 - open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。 - 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md 当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。三、验收 - check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝通过 225 / 失败 0 / 提示 27。 - 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00
1 parent fa0a9026c8
commit 5afeb6b78a
@@ -0,0 +1,160 @@
+# Sistema de design inspirado no Duolingo
+
+> Category: Produtividade & SaaS
+> Plataforma de aprendizado de idiomas. Verde coruja brilhante, sombras grossas, alegria gamificada.
+
+## 1. Tema visual e atmosfera
+
+O Duolingo é a gamificação expressa como linguagem visual. A interface é descaradamente brilhante, com o **verde coruja** (`#58cc02`) como cor primária da marca e uma sombra grossa de 4px na parte inferior de cada elemento interativo, que parece um botão 3D esperando para ser pressionado. A página é branca (`#ffffff`) com bordas grossas de 2–3px em cinza escuro (`#e5e5e5`), e o sistema inteiro lembra um aplicativo iOS de 2015 renascido com melhor hierarquia.
+
+A tipografia usa **Feather Bold** (uma sans-serif arredondada personalizada) para o chrome e **Mona Sans** (ou Inter) para o corpo do texto. Os tamanhos de exibição são grandes e confiantes — o Duolingo nunca sussurra. Os títulos frequentemente têm o traço de sublinhado verde ou ficam sobre uma pílula verde, e o mascote Duo (uma coruja verde) aparece como um personagem de ilustração ativo, não como um logotipo estático.
+
+A linguagem de formas é amigável: raios de 16–20px nos cartões, 12px nos botões, 9999px nos chips e barras de progresso. A iconografia é preenchida, arredondada e codificada por cor de acordo com a habilidade — cada superfície de lição tem um par de cores instantaneamente identificável.
+
+**Características principais:**
+- Verde coruja (`#58cc02`) como cor de marca dominante, usada em mais de 30% da superfície
+- Sombra inferior grossa de 4px em cada botão (a affordance de "pressão tátil")
+- Bordas sólidas de 2–3px, nunca linhas finas
+- Feather Bold (display arredondado) + Mona Sans (corpo)
+- Texto grande e confiante — os tamanhos de exibição começam em 48px e crescem
+- Mascote como personagem: a coruja Duo aparece no onboarding, erros, sequências
+- Laranja de sequência (`#ff9600`) e rosa gema (`#ce82ff`) como cores de marca secundárias
+
+## 2. Paleta de cores e papéis
+
+### Primário
+- **Verde coruja** (`#58cc02`): Primário da marca, CTA principal, resposta correta.
+- **Verde coruja escuro** (`#58a700`): Cor de pressionamento/sombra para botões verdes.
+- **Verde coruja claro** (`#89e219`): Hover, preenchimentos suaves.
+- **Verde coruja pálido** (`#dbf8c5`): Superfície suave, banner de sucesso.
+
+### Acentos secundários
+- **Laranja de sequência** (`#ff9600`): Contador de sequência, ícone de chama, energia premium.
+- **Laranja de sequência escuro** (`#cc7a00`): Laranja pressionado.
+- **Rosa gema** (`#ce82ff`): Moeda gema, Super Duolingo.
+- **Azul enguia** (`#1cb0f6`): Botão de dica, link de informação.
+- **Vermelho cardeal** (`#ff4b4b`): Resposta errada, vida perdida.
+- **Amarelo abelha** (`#ffc800`): Distintivo pro, conquista.
+
+### Superfície
+- **Neve** (`#ffffff`): Fundo principal.
+- **Enguia** (`#f7f7f7`): Separação de seção, superfície secundária.
+- **Cisne** (`#e5e5e5`): Fundo desativado, bloco embutido.
+- **Lobo** (`#777777`): Divisor escuro, texto secundário.
+
+### Tinta e texto
+- **Preto enguia** (`#3c3c3c`): Texto principal.
+- **Lobo** (`#777777`): Texto secundário, legendas.
+- **Lebre** (`#afafaf`): Desativado, espaço reservado.
+
+### Borda
+- **Cisne** (`#e5e5e5`): Borda padrão de 2px.
+- **Lebre** (`#afafaf`): Borda enfatizada ao passar o cursor.
+
+## 3. Regras tipográficas
+
+### Família de fontes
+- **Display / UI / Títulos**: `Feather Bold`, com fallback: `'DIN Round Pro', 'Helvetica Neue', sans-serif`
+- **Corpo / Texto longo**: `Mona Sans`, com fallback: `'Helvetica Neue', system-ui, sans-serif`
+- **Código (raro, escolas/admin)**: `JetBrains Mono`, com fallback: `ui-monospace, Menlo, monospace`
+
+### Hierarquia
+
+| Papel | Fonte | Tamanho | Peso | Altura de linha | Espaçamento | Notas |
+|------|------|------|--------|-------------|----------------|-------|
+| Display | Feather Bold | 56px (3.5rem) | 800 | 1.05 | -0.01em | Herói de onboarding |
+| H1 | Feather Bold | 32px (2rem) | 800 | 1.15 | -0.005em | Título da página |
+| H2 | Feather Bold | 24px (1.5rem) | 800 | 1.2 | normal | Cabeçalho de seção |
+| H3 | Feather Bold | 18px (1.125rem) | 700 | 1.25 | normal | Título do cartão, linha de lição |
+| Corpo grande | Mona Sans | 17px (1.0625rem) | 500 | 1.5 | normal | Prompt de lição, instrução |
+| Corpo | Mona Sans | 15px (0.9375rem) | 400 | 1.5 | normal | Prosa padrão |
+| Legenda | Mona Sans | 13px (0.8125rem) | 600 | 1.4 | 0.01em | Contador de XP, metadados |
+| Botão | Feather Bold | 16px (1rem) | 800 | 1.2 | 0.02em | Rótulo padrão de botão |
+| Sequência | Feather Bold | 14px (0.875rem) | 800 | 1.2 | normal | Número de sequência, na chama |
+
+### Princípios
+- **800 é o padrão**: O Feather Bold usa peso 800 em títulos e botões. 700 parece fraco neste sistema.
+- **Texto grande**: os tamanhos de título são 25–40% maiores do que marcas de produtos típicas — confiança como identidade.
+- **Formas de letras arredondadas**: cada glifo tem terminações suaves; serifas afiadas quebrariam o contrato de amizade.
+
+## 4. Estilização de componentes
+
+### Botões
+
+**Primário (Verde coruja)**
+- Fundo: `#58cc02`
+- Texto: `#ffffff`
+- Preenchimento: 14px 24px
+- Raio: 16px
+- Border-bottom: 4px solid `#58a700` (a sombra grossa)
+- Hover: fundo `#89e219`
+- Ativo: translate-y 4px, border-bottom 0 (o botão "pressiona")
+- Uso: "Continuar", "Verificar", CTA principal.
+
+**Secundário (Branco com sombra inferior)**
+- Fundo: `#ffffff`
+- Texto: `#777777`
+- Borda: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- Raio: 16px
+- Preenchimento: 14px 24px
+- Hover: texto `#3c3c3c`, borda `#afafaf`
+
+**Laranja de sequência**
+- Fundo: `#ff9600`
+- Texto: `#ffffff`
+- Border-bottom: 4px solid `#cc7a00`
+- Uso: meta de sequência, "Iniciar sequência"
+
+**Erro (Vermelho cardeal)**
+- Fundo: `#ff4b4b`
+- Texto: `#ffffff`
+- Border-bottom: 4px solid `#cc3b3b`
+- Uso: feedback de resposta errada.
+
+### Cartões / Blocos de lição
+- Fundo: `#ffffff`
+- Borda: 2px solid `#e5e5e5`
+- Border-bottom: 4px solid `#e5e5e5`
+- Raio: 16px
+- Preenchimento: 16px
+- Hover: elevar 2px, sombra `0 4px 0 #d7d7d7`
+
+### Nó da árvore de habilidades (Bolha de lição)
+- Tamanho: 80×72px
+- Fundo: tonalidade da cor da habilidade (verde para ativo, cinza para bloqueado)
+- Border-bottom: 6px solid variante mais escura
+- Raio: 50% (circular)
+- Ativo: pulsa 1.0 → 1.05 a cada 1.6s
+
+### Entradas
+- Fundo: `#ffffff`
+- Borda: 2px solid `#e5e5e5`
+- Raio: 12px
+- Preenchimento: 12px 16px
+- Foco: borda `#1cb0f6` (azul enguia), anel `0 0 0 3px rgba(28, 176, 246, 0.2)`
+
+### Barra de progresso
+- Trilha: `#e5e5e5`
+- Preenchimento: `#58cc02` (ou `#ff9600` para sequência)
+- Raio: 9999px
+- Altura: 16px
+- Preenchimento animado: 320ms ease-out ao incrementar.
+
+## 5. Espaçamento e layout
+
+- **Unidade base**: 4px. Escala: 4, 8, 12, 16, 24, 32, 48, 64.
+- **Contêiner**: máx. 1080px, calha de 24px.
+- **Coluna da árvore de lições**: 320px de largura; centralizada no desktop.
+
+## 6. Movimento
+
+- **Duração**: 180ms para pressionar botão; 320ms para desbloqueio de nó de habilidade; 1.6s para pulso do nó ativo.
+- **Easing**: `cubic-bezier(0.34, 1.56, 0.64, 1)` (back-out, leve ultrapassagem) para desbloqueios.
+- **Mascote**: Duo pisca a cada 4–6s, pula em marcos de sequência (480ms ease-out mola).
+
+## 7. Diretrizes de uso
+
+- Mantenha juntos o verde coruja de alta saturação, as sombras inferiores grossas e a geometria arredondada das lições; botões verdes planos sozinhos não transmitem a identidade do Duolingo.
+- Reserve o texto em negrito de tamanho grande para momentos de lição, sequência e progresso onde o produto precisa de encorajamento ou feedback.
+- Use movimento lúdico com moderação em torno de mudanças de estado de progresso, evitando animações genéricas de quique em cada controle.