④段整套同步（六节＋ 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,269 @@
+# Design System Inspired by Cohere
+
+> Categoria: IA e LLM
+> Plataforma de IA empresarial. Gradientes vibrantes, estética de painel rico em dados.
+
+## 1. Tema Visual e Atmosfera
+
+A interface da Cohere é um painel de comando empresarial refinado — confiante, limpo e projetado para fazer a IA parecer uma infraestrutura séria, não um brinquedo para consumidores. A experiência vive em uma tela de branco brilhante onde o conteúdo é organizado em cartões generosamente arredondados (raio de 22px) que criam uma linguagem de contenção orgânica, semelhante a nuvens. Este é um site que fala com CTOs e arquitetos empresariais: profissional sem ser frio, sofisticado sem ser intimidador.
+
+A linguagem de design conecta dois mundos com um sistema de duas tipografias: CohereText, uma serifa customizada para display com tracking apertado, confere às manchetes a gravidade de um manifesto tecnológico, enquanto Unica77 Cohere Web cuida de todo o texto de corpo e UI com precisão geométrica suíça. Esse par serifa/sem-serifa cria uma personalidade de "autoridade confiante encontra clareza de engenharia" que reflete perfeitamente uma plataforma de IA empresarial.
+
+A cor é usada com extrema contenção — a interface é quase inteiramente em preto e branco com bordas em cinza frio (`#d9d9dd`, `#e5e7eb`). O roxo-violeta aparece apenas em faixas fotográficas de hero, seções com gradiente e no azul interativo (`#1863dc`) que sinaliza estados de hover e foco. Essa contenção cromática faz com que, quando a cor APARECE — em capturas de tela do produto, fotografia empresarial e na seção roxo-profundo — ela carregue o máximo de peso visual.
+
+**Características Principais:**
+- Tela branca brilhante com bordas de contenção em cinza frio
+- Raio de borda exclusivo de 22px — o arredondamento distinto do "cartão Cohere"
+- Duas tipografias customizadas: CohereText (serifa para display) + Unica77 (sem-serifa para corpo)
+- Contenção cromática de nível empresarial: preto, branco, cinzas frios, mínimo acento roxo-azul
+- Seções hero em roxo-profundo/violeta para contraste dramático
+- Botões ghost/transparentes que mudam para azul ao passar o mouse
+- Fotografia empresarial mostrando aplicações reais e diversas
+- CohereMono para código e rótulos técnicos com transformações em maiúsculas
+
+## 2. Paleta de Cores e Funções
+
+### Primárias
+- **Cohere Black** (`#000000`): Texto de manchete principal e elementos de máxima ênfase.
+- **Near Black** (`#212121`): Cor padrão de link no corpo — levemente mais suave que o preto puro.
+- **Deep Dark** (`#17171c`): Um quase-preto com tom azul para navegação e texto em seções escuras.
+
+### Secundárias e Destaque
+- **Interaction Blue** (`#1863dc`): O acento interativo principal — aparece no hover de botões, estados de foco e links ativos. A única cor de ação cromática.
+- **Ring Blue** (`#4c6ee6` a 50%): Cor do anel Tailwind para indicadores de foco por teclado.
+- **Focus Purple** (`#9b60aa`): Cor de borda de foco nos inputs — um violeta suave.
+
+### Superfície e Fundo
+- **Pure White** (`#ffffff`): O fundo principal da página e superfície dos cartões.
+- **Snow** (`#fafafa`): Superfícies elevadas sutis e fundos de seções claras.
+- **Lightest Gray** (`#f2f2f2`): Bordas de cartões e as linhas de contenção mais suaves.
+
+### Neutros e Texto
+- **Muted Slate** (`#93939f`): Links de rodapé desenfatizados e texto terciário — um cinza de tom frio com leve tinte azul-violeta.
+- **Border Cool** (`#d9d9dd`): Bordas padrão de seções e itens de lista — um cinza frio, levemente com tinte roxo.
+- **Border Light** (`#e5e7eb`): Variante de borda mais clara — o gray-200 padrão do Tailwind.
+
+### Sistema de Gradientes
+- **Faixa Hero Roxo-Violeta**: Seções com gradiente roxo-profundo que criam contraste dramático contra a tela branca. Aparecem como faixas de largura total abrigando capturas de tela do produto e mensagens-chave.
+- **Gradiente de Rodapé Escuro**: A página transita por roxo-profundo/carvão até o rodapé preto, criando um efeito de "entardecer".
+
+## 3. Regras Tipográficas
+
+### Família de Fontes
+- **Display**: `CohereText`, com fallbacks: `Space Grotesk, Inter, ui-sans-serif, system-ui`
+- **Corpo / UI**: `Unica77 Cohere Web`, com fallbacks: `Inter, Arial, ui-sans-serif, system-ui`
+- **Código**: `CohereMono`, com fallbacks: `Arial, ui-sans-serif, system-ui`
+- **Ícones**: `CohereIconDefault` (fonte de ícones customizada)
+
+### Hierarquia
+
+| Função | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento | Notas |
+|--------|-------|---------|------|-----------------|-------------|-------|
+| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (compacto) | -1.44px | Máximo impacto, autoridade com serifa |
+| Display Secundário | CohereText | 60px (3.75rem) | 400 | 1.00 (compacto) | -1.2px | Títulos de seções grandes |
+| Título de Seção | Unica77 | 48px (3rem) | 400 | 1.20 (compacto) | -0.48px | Títulos de seções de funcionalidades |
+| Subtítulo | Unica77 | 32px (2rem) | 400 | 1.20 (compacto) | -0.32px | Títulos de cartões, nomes de funcionalidades |
+| Título de Funcionalidade | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | Títulos de seções menores |
+| Corpo Grande | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | Parágrafos de introdução |
+| Corpo / Botão | Unica77 | 16px (1rem) | 400 | 1.50 | normal | Corpo padrão, texto de botões |
+| Botão Médio | Unica77 | 14px (0.88rem) | 500 | 1.71 (relaxado) | normal | Botões menores, rótulos enfatizados |
+| Legenda | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | Metadados, descrições |
+| Rótulo em Maiúsculas | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | Rótulos de seção em maiúsculas |
+| Pequeno | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | Texto menor, links de rodapé |
+| Código Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | Minúsculos rótulos de código em maiúsculas |
+
+### Princípios
+- **Serifa para declaração, sem-serifa para utilidade**: CohereText carrega a voz da marca na escala de display — suas terminações serifadas conferem às manchetes a autoridade de uma pesquisa publicada. Unica77 cuida de tudo o que é funcional com neutralidade geométrica suíça.
+- **Tracking negativo em grande escala**: CohereText usa espaçamento de -1.2px a -1.44px em 60–72px, criando blocos de texto densos e impactantes.
+- **Peso único no corpo**: Praticamente todo uso de Unica77 é no peso 400. O peso 500 aparece apenas para ênfase em botões pequenos. O sistema se apoia em tamanho e espaçamento, não em contraste de peso.
+- **Rótulos de código em maiúsculas**: CohereMono usa maiúsculas com espaçamento de letras positivo (0.16–0.28px) para tags técnicas e marcadores de seção.
+
+## 4. Estilização de Componentes
+
+### Botões
+
+**Ghost / Transparente**
+- Fundo: transparente (`rgba(255, 255, 255, 0)`)
+- Texto: Cohere Black (`#000000`)
+- Sem borda visível
+- Hover: texto muda para Interaction Blue (`#1863dc`), opacidade 0.8
+- Foco: contorno sólido de 2px em Interaction Blue
+- O estilo primário de botão — invisível até ser interagido
+
+**Sólido Escuro**
+- Fundo: escuro/preto
+- Texto: Pure White
+- Para CTA em superfícies claras
+- Formato pílula ou raio padrão
+
+**Contornado**
+- Contenção baseada em borda
+- Usado em ações secundárias
+
+### Cartões e Contêineres
+- Fundo: Pure White (`#ffffff`)
+- Borda: linha fina sólida Lightest Gray (`1px solid #f2f2f2`) para cartões sutis; Cool Border (`#d9d9dd`) para ênfase
+- Raio: **22px** — o raio exclusivo Cohere para cartões primários, imagens e contêineres de diálogo. Também 4px, 8px, 16px, 20px para elementos menores
+- Sombra: mínima — a Cohere se apoia em cor de fundo e bordas em vez de sombras
+- Especial: raio `0px 0px 22px 22px` (arredondamento apenas na parte inferior) para contêineres de seção
+- Diálogo: raio de 8px para caixas modais/de diálogo
+
+### Inputs e Formulários
+- Texto: branco em input escuro, preto em claro
+- Borda de foco: Focus Purple (`#9b60aa`) com `1px solid`
+- Sombra de foco: anel vermelho (`rgb(179, 0, 0) 0px 0px 0px 2px`) — provavelmente para indicação de estado de erro
+- Contorno de foco: Interaction Blue sólido 2px
+
+### Navegação
+- Nav horizontal limpa em fundo branco ou escuro
+- Logo: wordmark Cohere (SVG customizado)
+- Links: texto escuro a 16px Unica77
+- CTA: botão sólido escuro
+- Mobile: colapso com hamburger
+
+### Tratamento de Imagens
+- Fotografia empresarial com sujeitos e ambientes diversos
+- Fotografia hero com tinte roxo para seções dramáticas
+- Capturas de tela da UI do produto em superfícies escuras
+- Imagens com raio de 22px correspondendo ao sistema de cartões
+- Seções de gradiente roxo de largura total
+
+### Componentes Distintivos
+
+**Sistema de Cartões 22px**
+- O raio de borda de 22px é a assinatura visual da Cohere
+- Todos os cartões primários, imagens e contêineres usam esse raio
+- Cria uma suavidade orgânica semelhante a nuvens, distintiva do típico 8–12px
+
+**Barra de Confiança Empresarial**
+- Logos de empresas exibidos em uma faixa horizontal
+- Demonstra adoção empresarial
+- Tratamento de logo limpo e monocromático
+
+**Faixas Hero Roxas**
+- Seções roxo-profundo de largura total abrigando demonstrações de produto
+- Criam quebras visuais dramáticas no fluxo branco da página
+- Capturas de tela do produto flutuam dentro do ambiente roxo
+
+**Tags de Código em Maiúsculas**
+- CohereMono em maiúsculas com espaçamento de letras
+- Usadas como marcadores de seção e rótulos de categorização
+- Cria uma hierarquia de informações técnica e estruturada
+
+## 5. Princípios de Layout
+
+### Sistema de Espaçamento
+- Unidade base: 8px
+- Escala: 2px, 6px, 8px, 10px, 12px, 16px, 20px, 22px, 24px, 28px, 32px, 36px, 40px, 56px, 60px
+- Padding de botões varia por variante
+- Padding interno do cartão: aproximadamente 24–32px
+- Espaçamento vertical de seção: generoso (56–60px entre seções)
+
+### Grade e Contêiner
+- Largura máxima do contêiner: até 2560px (muito largo) com escalonamento responsivo
+- Hero: centralizado com tipografia dramática
+- Seções de funcionalidades: grades de cartões multi-coluna
+- Seções empresariais: faixas roxas de largura total
+- 26 breakpoints detectados — sistema responsivo extremamente granular
+
+### Filosofia de Espaço em Branco
+- **Clareza empresarial**: Cada seção apresenta uma proposição clara com espaço para respirar entre elas.
+- **Fotografia como hero**: Grandes seções fotográficas proporcionam interesse visual sem exigir elementos decorativos de design.
+- **Agrupamento por cartões**: Conteúdo relacionado é agrupado em cartões arredondados com 22px, criando clusters naturais de informação.
+
+### Escala de Raio de Borda
+- Nítido (4px): Elementos de navegação, tags pequenas, paginação
+- Confortável (8px): Caixas de diálogo, contêineres secundários, cartões pequenos
+- Generoso (16px): Contêineres em destaque, cartões médios
+- Grande (20px): Cartões de funcionalidades grandes
+- Assinatura (22px): Cartões primários, imagens hero, contêineres principais — O raio Cohere
+- Pílula (9999px): Botões, tags, indicadores de status
+
+## 6. Profundidade e Elevação
+
+| Nível | Tratamento | Uso |
+|-------|-----------|-----|
+| Plano (Nível 0) | Sem sombra, sem borda | Fundo da página, blocos de texto |
+| Com Borda (Nível 1) | `1px solid #f2f2f2` ou `#d9d9dd` | Cartões padrão, separadores de lista |
+| Faixa Roxa (Nível 2) | Fundo roxo-escuro de largura total | Seções hero, demonstrações de funcionalidades |
+
+**Filosofia de Sombra**: A Cohere é quase livre de sombras. A profundidade é comunicada através do **contraste de cor de fundo** (cartões brancos em faixas roxas, superfície branca sobre snow), **contenção por borda** (bordas em cinza frio) e a dramática **alternância de seções claras para escuras**. Quando os elementos precisam de elevação, isso é alcançado por estarem brancos sobre escuro, em vez de projetar sombras.
+
+## 7. O Que Fazer e Não Fazer
+
+### Fazer
+- Usar raio de borda de 22px em todos os cartões e contêineres primários — é a assinatura visual
+- Usar CohereText para títulos de display (72px, 60px) com espaçamento de letras negativo
+- Usar Unica77 para todo texto de corpo e UI no peso 400
+- Manter a paleta em preto e branco com bordas em cinza frio
+- Usar Interaction Blue (#1863dc) apenas para estados interativos de hover/foco
+- Usar seções roxo-profundo para quebras visuais dramáticas e demonstrações de produto
+- Aplicar maiúsculas + espaçamento de letras no CohereMono para rótulos de seção
+- Manter fotografia adequada para empresas com sujeitos diversos
+
+### Não Fazer
+- Não usar raio de borda diferente de 22px em cartões primários — o raio exclusivo importa
+- Não introduzir cores quentes — a paleta é estritamente de tons frios
+- Não usar sombras pesadas — a profundidade vem do contraste de cor e bordas
+- Não usar peso negrito (700+) no texto do corpo — o intervalo é 400–500
+- Não pular a hierarquia serifa/sem-serifa — CohereText para manchetes, Unica77 para corpo
+- Não usar roxo como cor de superfície de cartões — o roxo é reservado para seções de largura total
+- Não reduzir o espaçamento entre seções abaixo de 40px — layouts empresariais precisam de espaço para respirar
+- Não usar decoração em botões por padrão — ghost/transparente é o estado base
+
+## 8. Comportamento Responsivo
+
+### Breakpoints
+| Nome | Largura | Mudanças Principais |
+|------|---------|---------------------|
+| Mobile Pequeno | <425px | Layout compacto, espaçamento mínimo |
+| Mobile | 425–640px | Coluna única, cartões empilhados |
+| Mobile Grande | 640–768px | Pequenos ajustes de espaçamento |
+| Tablet | 768–1024px | Grades de 2 colunas começam |
+| Desktop | 1024–1440px | Layout multi-coluna completo |
+| Desktop Grande | 1440–2560px | Largura máxima do contêiner |
+
+*26 breakpoints detectados — um dos sites com responsividade mais granular no conjunto de dados.*
+
+### Alvos de Toque
+- Botões adequadamente dimensionados para interação por toque
+- Links de navegação com espaçamento confortável
+- Superfícies de cartões como alvos de toque
+
+### Estratégia de Colapso
+- **Navegação**: Nav completa colapsa para hamburger
+- **Grades de funcionalidades**: Multi-coluna → 2 colunas → coluna única
+- **Texto do hero**: 72px → 48px → 32px escalonamento progressivo
+- **Seções roxas**: Mantêm largura total, conteúdo empilha
+- **Grades de cartões**: 3 → 2 → 1 coluna
+
+### Comportamento de Imagens
+- Fotografia escala proporcionalmente dentro de contêineres com raio de 22px
+- Capturas de tela do produto mantêm proporção
+- Seções roxas escalam o fundo proporcionalmente
+
+## 9. Guia de Prompt para Agentes
+
+### Referência Rápida de Cores
+- Texto Principal: "Cohere Black (#000000)"
+- Fundo da Página: "Pure White (#ffffff)"
+- Texto Secundário: "Near Black (#212121)"
+- Acento de Hover: "Interaction Blue (#1863dc)"
+- Texto Discreto: "Muted Slate (#93939f)"
+- Bordas de Cartões: "Lightest Gray (#f2f2f2)"
+- Bordas de Seção: "Border Cool (#d9d9dd)"
+
+### Exemplos de Prompts para Componentes
+- "Crie uma seção hero em Pure White (#ffffff) com CohereText a 72px peso 400, line-height 1.0, letter-spacing -1.44px. Texto em Cohere Black. Subtítulo em Unica77 a 18px peso 400, line-height 1.4."
+- "Projete um cartão de funcionalidade com raio de borda de 22px, borda 1px solid Lightest Gray (#f2f2f2) em branco. Título em Unica77 a 32px, letter-spacing -0.32px. Corpo em Unica77 a 16px, Muted Slate (#93939f)."
+- "Construa um botão ghost: fundo transparente, texto Cohere Black em Unica77 a 16px. Ao passar o mouse, texto muda para Interaction Blue (#1863dc) com opacidade 0.8. Foco: contorno sólido de 2px em Interaction Blue."
+- "Crie uma seção roxa de largura total com texto branco. CohereText a 60px para o título. Captura de tela do produto flutua dentro usando raio de borda de 22px."
+- "Projete um rótulo de seção usando CohereMono a 14px, maiúsculas, letter-spacing 0.28px. Texto em Muted Slate (#93939f)."
+
+### Guia de Iteração
+1. Foque em UM componente por vez
+2. Sempre use raio de 22px para cartões primários — "o arredondamento do cartão Cohere"
+3. Especifique a tipografia — CohereText para manchetes, Unica77 para corpo, CohereMono para rótulos
+4. Elementos interativos usam Interaction Blue (#1863dc) apenas no hover
+5. Mantenha superfícies brancas com bordas em cinza frio — sem tons quentes
+6. Roxo é para seções de largura total, nunca fundos de cartões