admin
5afeb6b78a
一、④段整套同步（用户选候选 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。
13 KiB
13 KiB
Design System Inspirado no Figma
Category: Design & Criatividade Ferramenta de design colaborativo. Multicolorida e vibrante, lúdica mas profissional.
1. Tema Visual & Atmosfera
A interface do Figma é a ferramenta de design que se projetou a si mesma — uma aula magistral de sofisticação tipográfica onde uma fonte variável personalizada (figmaSans) modula entre ultrafino (weight 320) e negrito (weight 700), com paradas em intermediários incomuns (330, 340, 450, 480, 540) que a maioria dos sistemas tipográficos jamais explora. Esse controle granular de peso confere a cada elemento de texto um peso visual precisamente calibrado, criando hierarquia por meio de micro-diferenças em vez do instrumento contundente de "regular vs negrito."
A página apresenta uma dualidade fascinante: o cromo da interface é estritamente preto e branco (literalmente apenas #000000 e #ffffff detectados como cores), enquanto a seção hero e as vitrines de produto explodem com gradientes multicoloridos e vibrantes — verdes elétricos, amarelos brilhantes, roxos profundos, rosas intensos. Essa separação significa que o próprio design system é sem cor, tratando a saída colorida do produto como o conteúdo principal. A página de marketing do Figma é essencialmente uma parede de galeria branca exibindo arte colorida.
O que torna o Figma distintivo além da fonte variável é sua geometria de círculos e pílulas. Os botões usam raio de 50px (pílula) ou 50% (círculo perfeito para botões de ícone), criando uma sensação orgânica de paleta de ferramentas. O indicador de foco com contorno tracejado (dashed 2px) é uma escolha de design deliberada que ecoa as alças de seleção no próprio editor Figma — a linguagem de UI do site referencia a linguagem de UI do produto.
Características Principais:
- Fonte variável personalizada (figmaSans) com paradas de peso incomuns: 320, 330, 340, 450, 480, 540, 700
- Cromo de interface estritamente preto e branco — a cor existe apenas no conteúdo do produto
- figmaMono para rótulos técnicos em maiúsculas com amplo espaçamento entre letras
- Geometria de botões em pílula (50px) e circular (50%)
- Contornos de foco tracejados que ecoam as alças de seleção do editor Figma
- Gradientes hero multicoloridos e vibrantes (verde, amarelo, roxo, rosa)
- Feature OpenType
"kern"ativado globalmente - Espaçamento entre letras negativo em todo o site — até o corpo do texto usa de -0.14px a -0.26px
2. Paleta de Cores & Papéis
Primária
- Preto Puro (
#000000): Todo o texto, todos os botões sólidos, todas as bordas. A única "cor" da interface. - Branco Puro (
#ffffff): Todos os fundos, botões brancos, texto em superfícies escuras. A outra metade do binário.
Nota: O site de marketing do Figma usa APENAS essas duas cores em sua camada de interface. Todas as cores vibrantes aparecem exclusivamente em capturas de tela do produto, gradientes hero e conteúdo incorporado.
Superfície & Fundo
- Branco Puro (
#ffffff): Fundo principal da página e superfícies de cartão. - Preto Vidro (
rgba(0, 0, 0, 0.08)): Sobreposição escura sutil para botões circulares secundários e efeitos de vidro. - Branco Vidro (
rgba(255, 255, 255, 0.16)): Sobreposição de vidro fosco para botões em superfícies escuras/coloridas.
Sistema de Gradientes
- Gradiente Hero: Um gradiente multiparada vibrante usando verde elétrico, amarelo brilhante, roxo profundo e rosa intenso. Esse gradiente é a assinatura visual da seção hero — ele representa as possibilidades criativas da ferramenta.
- Gradientes de Seção do Produto: Áreas individuais do produto (Design, Dev Mode, Prototipagem) podem usar temas de cores distintos em suas vitrines.
3. Regras Tipográficas
Família de Fontes
- Primária:
figmaSans, com fallbacks:figmaSans Fallback, SF Pro Display, system-ui, helvetica - Monoespaçada / Rótulos:
figmaMono, com fallbacks:figmaMono Fallback, SF Mono, menlo
Hierarquia
| Papel | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento entre Letras | Notas |
|---|---|---|---|---|---|---|
| Display / Hero | figmaSans | 86px (5.38rem) | 400 | 1.00 (compacto) | -1.72px | Impacto máximo, tracking extremo |
| Título de Seção | figmaSans | 64px (4rem) | 400 | 1.10 (compacto) | -0.96px | Títulos de seção de funcionalidade |
| Subtítulo | figmaSans | 26px (1.63rem) | 540 | 1.35 | -0.26px | Texto de seção enfatizado |
| Subtítulo Leve | figmaSans | 26px (1.63rem) | 340 | 1.35 | -0.26px | Texto de seção com peso leve |
| Título de Funcionalidade | figmaSans | 24px (1.5rem) | 700 | 1.45 | normal | Títulos de cartão em negrito |
| Corpo Grande | figmaSans | 20px (1.25rem) | 330–450 | 1.30–1.40 | -0.1px a -0.14px | Descrições, introduções |
| Corpo / Botão | figmaSans | 16px (1rem) | 330–400 | 1.40–1.45 | -0.14px a normal | Corpo padrão, nav, botões |
| Corpo Leve | figmaSans | 18px (1.13rem) | 320 | 1.45 | -0.26px a normal | Corpo com peso leve |
| Rótulo Mono | figmaMono | 18px (1.13rem) | 400 | 1.30 (compacto) | 0.54px | Rótulos de seção em maiúsculas |
| Mono Pequeno | figmaMono | 12px (0.75rem) | 400 | 1.00 (compacto) | 0.6px | Tags minúsculas em maiúsculas |
Princípios
- Precisão da fonte variável: figmaSans usa pesos que a maioria dos sistemas jamais toca — 320, 330, 340, 450, 480, 540. Isso cria hierarquia por meio de diferenças sutis de peso em vez de saltos dramáticos. A diferença entre 330 e 340 é quase imperceptível, mas estruturalmente significativa.
- Leve como base: A maior parte do corpo do texto usa 320–340 (mais leve que o "regular" típico de 400), criando uma experiência de leitura etérea e arejada que combina com a estética de ferramenta de design.
- Kern em todo lugar: Todo elemento de texto ativa a feature OpenType
"kern"— o kerning não é opcional, é estrutural. - Tracking negativo por padrão: Até o corpo do texto usa -0.1px a -0.26px de espaçamento entre letras, criando texto universalmente compacto. O texto de display comprime ainda mais para -0.96px e -1.72px.
- Mono para estrutura: figmaMono em maiúsculas com espaçamento positivo entre letras (0.54px–0.6px) cria rótulos de referência técnica.
4. Estilos de Componentes
Botões
Sólido Preto (Pílula)
- Fundo: Preto Puro (
#000000) - Texto: Branco Puro (
#ffffff) - Raio: círculo (50%) para botões de ícone
- Foco: contorno tracejado 2px
- Ênfase máxima
Pílula Branca
- Fundo: Branco Puro (
#ffffff) - Texto: Preto Puro (
#000000) - Padding: 8px 18px 10px (vertical assimétrico)
- Raio: pílula (50px)
- Foco: contorno tracejado 2px
- CTA padrão em superfícies escuras/coloridas
Vidro Escuro
- Fundo:
rgba(0, 0, 0, 0.08)(sobreposição escura sutil) - Texto: Preto Puro
- Raio: círculo (50%)
- Foco: contorno tracejado 2px
- Ação secundária em superfícies claras
Vidro Claro
- Fundo:
rgba(255, 255, 255, 0.16)(vidro fosco) - Texto: Branco Puro
- Raio: círculo (50%)
- Foco: contorno tracejado 2px
- Ação secundária em superfícies escuras/coloridas
Cartões & Contêineres
- Fundo: Branco Puro
- Borda: nenhuma ou mínima
- Raio: 6px (contêineres pequenos), 8px (imagens, cartões, diálogos)
- Sombra: efeitos de elevação sutis a médios
- Capturas de tela do produto como conteúdo do cartão
Navegação
- Nav horizontal limpa em branco
- Logo: wordmark do Figma em preto
- Abas de produto: navegação por abas em forma de pílula (50px)
- Links: texto preto, decoração sublinhado 1px
- CTA: botão pílula preto
- Hover: cor do texto via variável CSS
Componentes Distintivos
Barra de Abas do Produto
- Abas horizontais em formato de pílula (raio 50px)
- Cada aba representa uma área do produto Figma (Design, Dev Mode, Prototipagem, etc.)
- Aba ativa destacada
Seção de Gradiente Hero
- Fundo com gradiente multicolorido e vibrante de largura total
- Sobreposição de texto branco com título display de 86px
- Capturas de tela do produto flutuando dentro do gradiente
Indicadores de Foco Tracejados
- Todos os elementos interativos usam contorno
dashed 2pxno foco - Referencia as alças de seleção no editor Figma
- Uma escolha de meta-design que conecta o site e o produto
5. Princípios de Layout
Sistema de Espaçamento
- Unidade base: 8px
- Escala: 1px, 2px, 4px, 4.5px, 8px, 10px, 12px, 16px, 18px, 24px, 32px, 40px, 46px, 48px, 50px
Grade & Contêiner
- Largura máxima do contêiner: até 1920px
- Hero: gradiente de largura total com conteúdo centralizado
- Seções do produto: vitrines alternadas
- Rodapé: seção escura de largura total
- Responsivo de 559px a 1920px
Filosofia de Espaço em Branco
- Ritmo de galeria: O espaçamento generoso permite que cada seção do produto respire como uma exposição própria.
- Seções coloridas como respiração visual: O hero gradiente e as vitrines do produto proporcionam alívio cromático entre as seções monocromáticas da interface.
Escala de Raio de Borda
- Mínimo (2px): Pequenos elementos de link
- Sutil (6px): Contêineres pequenos, divisores
- Confortável (8px): Cartões, imagens, diálogos
- Pílula (50px): Botões de aba, CTAs
- Círculo (50%): Botões de ícone, elementos circulares
6. Profundidade & Elevação
| Nível | Tratamento | Uso |
|---|---|---|
| Plano (Nível 0) | Sem sombra | Fundo da página, maior parte do texto |
| Superfície (Nível 1) | Cartão branco em seção gradiente/escura | Cartões, vitrines do produto |
| Elevado (Nível 2) | Sombra sutil | Cartões flutuantes, estados de hover |
Filosofia de Sombra: O Figma usa sombras com parcimônia. Os principais mecanismos de profundidade são o contraste de fundo (conteúdo branco em seções coloridas/escuras) e a dimensionalidade inerente das próprias capturas de tela do produto.
7. O Que Fazer e O Que Evitar
Faça
- Use figmaSans com pesos variáveis precisos (320–540) — o controle granular de peso É o design
- Mantenha a interface estritamente preto e branco — a cor vem apenas do conteúdo do produto
- Use geometria de pílula (50px) e circular (50%) para todos os elementos interativos
- Aplique contornos de foco tracejados de 2px — o padrão de acessibilidade característico
- Ative a feature
"kern"em todo o texto - Use figmaMono em maiúsculas com espaçamento positivo entre letras para rótulos
- Aplique espaçamento negativo entre letras em todo o site (-0.1px a -1.72px)
Evite
- Não adicione cores à interface — a paleta monocromática é absoluta
- Não use pesos de fonte padrão (400, 500, 600, 700) — use as paradas únicas da fonte variável (320, 330, 340, 450, 480, 540)
- Não use cantos afiados nos botões — apenas geometria de pílula e circular
- Não use contornos de foco sólidos — o tracejado é a assinatura
- Não aumente o peso da fonte do corpo acima de 450 — a estética de peso leve é central
- Não use espaçamento positivo entre letras no corpo do texto — é sempre negativo
8. Comportamento Responsivo
Breakpoints
| Nome | Largura | Principais Mudanças |
|---|---|---|
| Mobile Pequeno | <560px | Layout compacto, empilhado |
| Tablet | 560–768px | Ajustes menores |
| Desktop Pequeno | 768–960px | Layouts em 2 colunas |
| Desktop | 960–1280px | Layout padrão |
| Desktop Grande | 1280–1440px | Expandido |
| Ultra-wide | 1440–1920px | Largura máxima |
Estratégia de Colapso
- Texto hero: 86px → 64px → 48px
- Abas do produto: scroll horizontal no mobile
- Seções de funcionalidades: coluna única empilhada
- Rodapé: múltiplas colunas → empilhado
9. Guia de Prompt para Agentes
Referência Rápida de Cores
- Tudo: "Preto Puro (#000000)" e "Branco Puro (#ffffff)"
- Vidro Escuro: "rgba(0, 0, 0, 0.08)"
- Vidro Claro: "rgba(255, 255, 255, 0.16)"
Exemplos de Prompts de Componentes
- "Crie um hero em um gradiente multicolorido e vibrante (verde, amarelo, roxo, rosa). Título em 86px figmaSans weight 400, line-height 1.0, letter-spacing -1.72px. Texto branco. Botão CTA pílula branca (raio 50px, padding 8px 18px)."
- "Projete uma barra de abas de produto com botões em formato de pílula (raio 50px). Ativa: fundo preto, texto branco. Inativa: transparente, texto preto. figmaSans em 20px weight 480."
- "Construa um rótulo de seção: figmaMono 18px, maiúsculas, letter-spacing 0.54px, texto preto. Kern ativado."
- "Crie corpo do texto em 20px figmaSans weight 330, line-height 1.40, letter-spacing -0.14px. Preto Puro sobre branco."
Guia de Iteração
- Use as paradas de peso da fonte variável com precisão: 320, 330, 340, 450, 480, 540, 700
- A interface é sempre preto + branco — nunca adicione cores ao cromo
- Contornos de foco tracejados, não sólidos
- O espaçamento entre letras é sempre negativo no corpo, sempre positivo nos rótulos mono
- Pílula (50px) para botões/abas, círculo (50%) para botões de ícone