④段整套同步（六节＋ 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,313 @@
+# Design System Inspired by Vercel
+
+> Category: Ferramentas para Desenvolvedores
+> Implantação de frontend. Precisão em preto e branco, fonte Geist.
+
+## 1. Tema Visual & Atmosfera
+
+O site da Vercel é a tese visual de infraestrutura para desenvolvedores tornada invisível — um design system tão contido que beira o filosófico. A página é predominantemente branca (`#ffffff`) com texto quase-preto (`#171717`), criando um vazio de galeria onde cada elemento merece seu pixel. Isso não é minimalismo como decoração; é minimalismo como princípio de engenharia. O design system Geist trata a interface como um compilador trata o código — cada token desnecessário é removido até restar apenas estrutura.
+
+A família de fontes Geist personalizada é a joia da coroa. Geist Sans utiliza espaçamento entre letras negativamente agressivo (-2,4px a -2,88px em tamanhos de exibição), criando títulos que parecem comprimidos, urgentes e engenheirados — como código que foi minificado para produção. Em tamanhos de corpo, o espaçamento relaxa, mas a precisão geométrica persiste. Geist Mono completa o sistema como a fonte monoespaçada para código, saída de terminal e rótulos técnicos. Ambas as fontes habilitam OpenType `"liga"` (ligaduras) globalmente, adicionando uma camada de sofisticação tipográfica que recompensa uma leitura atenta.
+
+O que distingue a Vercel de outros design systems monocromáticos é sua filosofia de sombra-como-borda. Em vez de bordas CSS tradicionais, a Vercel usa `box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)` — uma sombra de deslocamento zero, desfoque zero e espalhamento de 1px que cria uma linha semelhante a uma borda sem as implicações do modelo de caixa. Essa técnica permite que bordas existam na camada de sombra, possibilitando transições mais suaves, cantos arredondados sem recorte e um peso visual mais sutil do que bordas tradicionais. Todo o sistema de profundidade é construído sobre pilhas de sombras em múltiplas camadas, onde cada camada serve a um propósito específico: uma para a borda, outra para elevação suave e outra para profundidade ambiente.
+
+**Características Principais:**
+- Geist Sans com espaçamento entre letras extremamente negativo (-2,4px a -2,88px no tamanho de exibição) — texto como infraestrutura comprimida
+- Geist Mono para código e rótulos técnicos com OpenType `"liga"` globalmente
+- Técnica de sombra-como-borda: `box-shadow 0px 0px 0px 1px` substitui bordas tradicionais em todo o sistema
+- Pilhas de sombras em múltiplas camadas para profundidade refinada (borda + elevação + ambiente em declarações únicas)
+- Tela quase-branca pura com texto `#171717` — não completamente preto, criando uma suavidade de micro-contraste
+- Cores de destaque específicas para fluxo de trabalho: Vermelho Ship (`#ff5b4f`), Rosa Preview (`#de1d8d`), Azul Develop (`#0a72ef`)
+- Sistema de anel de foco usando `hsla(212, 100%, 48%, 1)` — um azul saturado para acessibilidade
+- Emblemas pílula (9999px) com fundos matizados para indicadores de status
+
+## 2. Paleta de Cores & Funções
+
+### Primária
+- **Vercel Black** (`#171717`): Texto primário, títulos, fundos de superfícies escuras. Não é preto puro — o leve calor previne a dureza.
+- **Branco Puro** (`#ffffff`): Fundo da página, superfícies de cartões, texto de botões em escuro.
+- **Preto Verdadeiro** (`#000000`): Uso secundário, `--geist-console-text-color-default`, usado em contextos específicos de console/código.
+
+### Cores de Destaque para Fluxo de Trabalho
+- **Vermelho Ship** (`#ff5b4f`): `--ship-text`, a etapa de fluxo de trabalho "enviar para produção" — coral-vermelho quente e urgente.
+- **Rosa Preview** (`#de1d8d`): `--preview-text`, o fluxo de trabalho de implantação em preview — magenta-rosa vívido.
+- **Azul Develop** (`#0a72ef`): `--develop-text`, o fluxo de trabalho de desenvolvimento — azul brilhante e focado.
+
+### Cores do Console / Código
+- **Azul Console** (`#0070f3`): `--geist-console-text-color-blue`, azul de realce de sintaxe.
+- **Roxo Console** (`#7928ca`): `--geist-console-text-color-purple`, roxo de realce de sintaxe.
+- **Rosa Console** (`#eb367f`): `--geist-console-text-color-pink`, rosa de realce de sintaxe.
+
+### Interativo
+- **Azul Link** (`#0072f5`): Cor primária de link com decoração de sublinhado.
+- **Azul Foco** (`hsla(212, 100%, 48%, 1)`): `--ds-focus-color`, anel de foco em elementos interativos.
+- **Azul Anel** (`rgba(147, 197, 253, 0.5)`): `--tw-ring-color`, utilitário de anel do Tailwind.
+
+### Escala de Neutros
+- **Cinza 900** (`#171717`): Texto primário, títulos, texto de navegação.
+- **Cinza 600** (`#4d4d4d`): Texto secundário, texto descritivo.
+- **Cinza 500** (`#666666`): Texto terciário, links discretos.
+- **Cinza 400** (`#808080`): Texto de placeholder, estados desabilitados.
+- **Cinza 100** (`#ebebeb`): Bordas, contornos de cartões, divisores.
+- **Cinza 50** (`#fafafa`): Matiz sutil de superfície, destaque de sombra interna.
+
+### Superfície & Sobreposição
+- **Fundo de Sobreposição** (`hsla(0, 0%, 98%, 1)`): `--ds-overlay-backdrop-color`, fundo de modal/diálogo.
+- **Texto de Seleção** (`hsla(0, 0%, 95%, 1)`): `--geist-selection-text-color`, destaque de seleção de texto.
+- **Fundo Azul do Emblema** (`#ebf5ff`): Fundo do emblema pílula, superfície azul matizada.
+- **Texto Azul do Emblema** (`#0068d6`): Texto do emblema pílula, azul mais escuro para legibilidade.
+
+### Sombras & Profundidade
+- **Sombra de Borda** (`rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`): A assinatura — substitui bordas tradicionais.
+- **Elevação Sutil** (`rgba(0, 0, 0, 0.04) 0px 2px 2px`): Elevação mínima para cartões.
+- **Pilha de Cartão** (`rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px`): Sombra de cartão completa em múltiplas camadas.
+- **Borda de Anel** (`rgb(235, 235, 235) 0px 0px 0px 1px`): Anel-borda cinza claro para abas e imagens.
+
+## 3. Regras Tipográficas
+
+### Família de Fonte
+- **Primária**: `Geist`, com fallbacks: `Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol`
+- **Monoespaçada**: `Geist Mono`, com fallbacks: `ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New`
+- **Recursos OpenType**: `"liga"` habilitado globalmente em todo texto Geist; `"tnum"` para números tabulares em legendas específicas.
+
+### Hierarquia
+
+| Função | Fonte | Tamanho | Peso | Altura de Linha | Espaçamento entre Letras | Observações |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | Geist | 48px (3,00rem) | 600 | 1,00–1,17 (compacto) | -2,4px a -2,88px | Compressão máxima, impacto de outdoor |
+| Título de Seção | Geist | 40px (2,50rem) | 600 | 1,20 (compacto) | -2,4px | Títulos de seções de funcionalidades |
+| Subtítulo Grande | Geist | 32px (2,00rem) | 600 | 1,25 (compacto) | -1,28px | Títulos de cartões, subseções |
+| Subtítulo | Geist | 32px (2,00rem) | 400 | 1,50 | -1,28px | Subtítulos mais leves |
+| Título de Cartão | Geist | 24px (1,50rem) | 600 | 1,33 | -0,96px | Cartões de funcionalidades |
+| Título de Cartão Leve | Geist | 24px (1,50rem) | 500 | 1,33 | -0,96px | Títulos de cartões secundários |
+| Corpo Grande | Geist | 20px (1,25rem) | 400 | 1,80 (relaxado) | normal | Introduções, descrições de funcionalidades |
+| Corpo | Geist | 18px (1,13rem) | 400 | 1,56 | normal | Texto de leitura padrão |
+| Corpo Pequeno | Geist | 16px (1,00rem) | 400 | 1,50 | normal | Texto de interface padrão |
+| Corpo Médio | Geist | 16px (1,00rem) | 500 | 1,50 | normal | Navegação, texto enfatizado |
+| Corpo Seminegrito | Geist | 16px (1,00rem) | 600 | 1,50 | -0,32px | Rótulos fortes, estados ativos |
+| Botão / Link | Geist | 14px (0,88rem) | 500 | 1,43 | normal | Botões, links, legendas |
+| Botão Pequeno | Geist | 14px (0,88rem) | 400 | 1,00 (compacto) | normal | Botões compactos |
+| Legenda | Geist | 12px (0,75rem) | 400–500 | 1,33 | normal | Metadados, tags |
+| Mono Corpo | Geist Mono | 16px (1,00rem) | 400 | 1,50 | normal | Blocos de código |
+| Mono Legenda | Geist Mono | 13px (0,81rem) | 500 | 1,54 | normal | Rótulos de código |
+| Mono Pequeno | Geist Mono | 12px (0,75rem) | 500 | 1,00 (compacto) | normal | `text-transform: uppercase`, rótulos técnicos |
+| Micro Emblema | Geist | 7px (0,44rem) | 700 | 1,00 (compacto) | normal | `text-transform: uppercase`, emblemas minúsculos |
+
+### Princípios
+- **Compressão como identidade**: Geist Sans em tamanhos de exibição usa espaçamento entre letras de -2,4px a -2,88px — o espaçamento negativo mais agressivo de qualquer design system importante. Isso cria um texto que parece _minificado_, como código otimizado para produção. O espaçamento relaxa progressivamente conforme o tamanho diminui: -1,28px em 32px, -0,96px em 24px, -0,32px em 16px, e normal em 14px.
+- **Ligaduras em toda parte**: Cada elemento de texto Geist habilita OpenType `"liga"`. Ligaduras não são decorativas — são estruturais, criando combinações de glifos mais compactas e eficientes.
+- **Três pesos, funções estritas**: 400 (corpo/leitura), 500 (interface/interativo), 600 (títulos/ênfase). Sem negrito (700), exceto para micro-emblemas minúsculos. Essa faixa estreita de pesos cria hierarquia através de tamanho e espaçamento, não de peso.
+- **Mono como identidade**: Geist Mono em maiúsculas com `"tnum"` ou `"liga"` serve como a voz do "console de desenvolvedor" — rótulos técnicos compactos que conectam o site de marketing ao produto.
+
+## 4. Estilização de Componentes
+
+### Botões
+
+**Branco Primário (Com borda por sombra)**
+- Fundo: `#ffffff`
+- Texto: `#171717`
+- Padding: 0px 6px (mínimo — largura guiada pelo conteúdo)
+- Raio: 6px (levemente arredondado)
+- Sombra: `rgb(235, 235, 235) 0px 0px 0px 1px` (borda de anel)
+- Hover: fundo muda para `var(--ds-gray-1000)` (escuro)
+- Foco: contorno `2px solid var(--ds-focus-color)` + sombra `var(--ds-focus-ring)`
+- Uso: Botão secundário padrão
+
+**Escuro Primário (Inferido do sistema Geist)**
+- Fundo: `#171717`
+- Texto: `#ffffff`
+- Padding: 8px 16px
+- Raio: 6px
+- Uso: CTA principal ("Start Deploying", "Get Started")
+
+**Botão Pílula / Emblema**
+- Fundo: `#ebf5ff` (azul matizado)
+- Texto: `#0068d6`
+- Padding: 0px 10px
+- Raio: 9999px (pílula completa)
+- Fonte: 12px peso 500
+- Uso: Emblemas de status, tags, rótulos de funcionalidades
+
+**Pílula Grande (Navegação)**
+- Fundo: transparente ou `#171717`
+- Raio: 64px–100px
+- Uso: Navegação por abas, seletores de seção
+
+### Cartões & Contêineres
+- Fundo: `#ffffff`
+- Borda: via sombra — `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
+- Raio: 8px (padrão), 12px (cartões em destaque/imagem)
+- Pilha de sombras: `rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px`
+- Cartões de imagem: `1px solid #ebebeb` com raio superior de 12px
+- Hover: intensificação sutil da sombra
+
+### Entradas & Formulários
+- Rádio: estilização padrão com fundo `var(--ds-gray-200)` no foco
+- Sombra de foco: `1px 0 0 0 var(--ds-gray-alpha-600)`
+- Contorno de foco: `2px solid var(--ds-focus-color)` — anel de foco azul consistente
+- Borda: via técnica de sombra, não borda tradicional
+
+### Navegação
+- Navegação horizontal limpa em branco, fixa
+- Logotipo Vercel alinhado à esquerda, 262x52px
+- Links: Geist 14px peso 500, texto `#171717`
+- Ativo: peso 600 ou sublinhado
+- CTA: botões pílula escuros ("Start Deploying", "Contact Sales")
+- Mobile: menu hamburguer recolhível
+- Dropdowns de produtos com menus de múltiplos níveis
+
+### Tratamento de Imagens
+- Capturas de tela do produto com borda `1px solid #ebebeb`
+- Imagens com topo arredondado: raio `12px 12px 0px 0px`
+- Capturas de tela de painel/visualização de código dominam seções de funcionalidades
+- Fundos com gradiente suave atrás de imagens de herói (multi-cor pastel)
+
+### Componentes Distintos
+
+**Pipeline de Fluxo de Trabalho**
+- Pipeline horizontal em três etapas: Develop → Preview → Ship
+- Cada etapa tem sua própria cor de destaque: Azul → Rosa → Vermelho
+- Conectados com linhas/setas
+- A metáfora visual para a proposta de valor central da Vercel
+
+**Barra de Confiança / Grade de Logos**
+- Logos de empresas (Perplexity, ChatGPT, Cursor, etc.) em escala de cinza
+- Rolagem horizontal ou layout em grade
+- Separação sutil com borda `#ebebeb`
+
+**Cartões de Métricas**
+- Exibição de números grandes (ex.: "10x mais rápido")
+- Geist 48px peso 600 para a métrica
+- Descrição abaixo em texto cinza de corpo
+- Contêiner de cartão com borda de sombra
+
+## 5. Princípios de Layout
+
+### Sistema de Espaçamento
+- Unidade base: 8px
+- Escala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
+- Salto notável: pula de 16px para 32px — sem 20px ou 24px na escala primária
+
+### Grade & Contêiner
+- Largura máxima do conteúdo: aproximadamente 1200px
+- Herói: coluna única centralizada com padding superior generoso
+- Seções de funcionalidades: grades de 2–3 colunas para cartões
+- Divisores de largura total usando `border-bottom: 1px solid #171717`
+- Capturas de tela de código/painel em largura total ou contidas com borda
+
+### Filosofia de Espaçamento em Branco
+- **Vazio de galeria**: Padding vertical massivo entre seções (80px–120px+). O espaço em branco É o design — ele comunica que a Vercel não tem nada a provar nem a esconder.
+- **Texto comprimido, espaço expandido**: O espaçamento entre letras negativamente agressivo nos títulos é contrabalançado por espaçamento em branco generoso ao redor. O texto é denso; o espaço ao seu redor é vasto.
+- **Ritmo de seção**: Seções brancas alternam com seções brancas — não há variação de cor entre as seções. A separação vem apenas de bordas (sombras-borda) e espaçamento.
+
+### Escala de Raio de Borda
+- Micro (2px): Trechos de código inline, pequenos spans
+- Sutil (4px): Pequenos contêineres
+- Padrão (6px): Botões, links, elementos funcionais
+- Confortável (8px): Cartões, itens de lista
+- Imagem (12px): Cartões em destaque, contêineres de imagem (arredondados no topo)
+- Grande (64px): Pílulas de navegação por abas
+- XL (100px): Links de navegação grandes
+- Pílula Completa (9999px): Emblemas, pílulas de status, tags
+- Círculo (50%): Alternador de menu, contêineres de avatar
+
+## 6. Profundidade & Elevação
+
+| Nível | Tratamento | Uso |
+|-------|-----------|-----|
+| Plano (Nível 0) | Sem sombra | Fundo da página, blocos de texto |
+| Anel (Nível 1) | `rgba(0,0,0,0.08) 0px 0px 0px 1px` | Sombra-como-borda para a maioria dos elementos |
+| Anel Claro (Nível 1b) | `rgb(235,235,235) 0px 0px 0px 1px` | Anel mais claro para abas, imagens |
+| Cartão Sutil (Nível 2) | Anel + `rgba(0,0,0,0.04) 0px 2px 2px` | Cartões padrão com elevação mínima |
+| Cartão Completo (Nível 3) | Anel + Sutil + `rgba(0,0,0,0.04) 0px 8px 8px -8px` + anel `#fafafa` interno | Cartões em destaque, painéis realçados |
+| Foco (Acessibilidade) | Contorno `2px solid hsla(212, 100%, 48%, 1)` | Foco do teclado em todos os elementos interativos |
+
+**Filosofia de Sombras**: A Vercel tem indiscutivelmente o sistema de sombras mais sofisticado no design web moderno. Em vez de usar sombras para elevação no sentido tradicional do Material Design, a Vercel usa pilhas de sombras com múltiplos valores, onde cada camada tem um propósito arquitetônico distinto: uma cria a "borda" (0px de espalhamento, 1px), outra adiciona suavidade ambiente (2px de desfoque), outra cuida da profundidade à distância (8px de desfoque com espalhamento negativo) e um anel interno (`#fafafa`) cria o destaque sutil que faz o cartão "brilhar" por dentro. Essa abordagem em camadas faz com que os cartões pareçam construídos, não flutuando.
+
+### Profundidade Decorativa
+- Gradiente do herói: lavagem de gradiente suave e multi-cor pastel atrás do conteúdo do herói (quase invisível, atmosférico)
+- Bordas de seção: `1px solid #171717` (linha escura completa) entre seções principais
+- Sem variação de cor de fundo — a profundidade vem inteiramente do empilhamento de sombras e do contraste de bordas
+
+## 7. Faça e Não Faça
+
+### Faça
+- Use Geist Sans com espaçamento entre letras negativamente agressivo em tamanhos de exibição (-2,4px a -2,88px em 48px)
+- Use sombra-como-borda (`0px 0px 0px 1px rgba(0,0,0,0.08)`) em vez de bordas CSS tradicionais
+- Habilite `"liga"` em todo o texto Geist — ligaduras são estruturais, não opcionais
+- Use o sistema de três pesos: 400 (corpo), 500 (interface), 600 (títulos)
+- Aplique cores de destaque de fluxo de trabalho (Vermelho/Rosa/Azul) apenas no contexto do respectivo fluxo
+- Use pilhas de sombras em múltiplas camadas para cartões (borda + elevação + ambiente + destaque interno)
+- Mantenha a paleta de cores acromática — os cinzas de `#171717` a `#ffffff` são o sistema
+- Use `#171717` em vez de `#000000` para texto primário — o micro-calor importa
+
+### Não Faça
+- Não use espaçamento entre letras positivo no Geist Sans — ele é sempre negativo ou zero
+- Não use peso 700 (negrito) em texto de corpo — 600 é o máximo, usado apenas para títulos
+- Não use `border` CSS tradicional em cartões — use a técnica de sombra-borda
+- Não introduza cores quentes (laranjas, amarelos, verdes) no cromo da interface
+- Não aplique as cores de destaque de fluxo de trabalho (Vermelho Ship, Rosa Preview, Azul Develop) de forma decorativa
+- Não use sombras pesadas (> 0,1 de opacidade) — o sistema de sombras é no nível de sussurro
+- Não aumente o espaçamento entre letras do texto de corpo — Geist foi projetado para ser compacto
+- Não use raio pílula (9999px) em botões de ação primários — pílulas são apenas para emblemas/tags
+- Não omita o anel `#fafafa` interno nas sombras de cartão — é o brilho que faz o sistema funcionar
+
+## 8. Comportamento Responsivo
+
+### Breakpoints
+| Nome | Largura | Principais Mudanças |
+|------|-------|-------------|
+| Mobile Pequeno | <400px | Coluna única compacta, padding mínimo |
+| Mobile | 400–600px | Mobile padrão, layout empilhado |
+| Tablet Pequeno | 600–768px | Grades de 2 colunas começam |
+| Tablet | 768–1024px | Grades completas de cartões, padding expandido |
+| Desktop Pequeno | 1024–1200px | Layout de desktop padrão |
+| Desktop | 1200–1400px | Layout completo, largura máxima de conteúdo |
+| Desktop Grande | >1400px | Centralizado, margens generosas |
+
+### Alvos de Toque
+- Botões usam padding confortável (8px–16px vertical)
+- Links de navegação em 14px com espaçamento adequado
+- Emblemas pílula têm 10px de padding horizontal para alvos de toque
+- Alternador de menu mobile usa botão circular com raio de 50%
+
+### Estratégia de Colapso
+- Herói: display 48px → escala para baixo, mantendo o espaçamento negativo proporcionalmente
+- Navegação: links horizontais + CTAs → menu hamburguer
+- Cartões de funcionalidades: 3 colunas → 2 colunas → coluna única empilhada
+- Capturas de tela de código: mantêm proporção, podem rolar horizontalmente
+- Logos da barra de confiança: grade → rolagem horizontal
+- Rodapé: múltiplas colunas → coluna única empilhada
+- Espaçamento de seção: 80px+ → 48px no mobile
+
+### Comportamento de Imagens
+- Capturas de tela do painel mantêm tratamento de borda em todos os tamanhos
+- Gradiente do herói suaviza/simplifica no mobile
+- Capturas de tela do produto usam imagens responsivas com raio de borda consistente
+- Seções de largura total mantêm tratamento de borda a borda
+
+## 9. Guia de Prompt para Agente
+
+### Referência Rápida de Cores
+- CTA Primário: Vercel Black (`#171717`)
+- Fundo: Branco Puro (`#ffffff`)
+- Texto de título: Vercel Black (`#171717`)
+- Texto de corpo: Cinza 600 (`#4d4d4d`)
+- Borda (sombra): `rgba(0, 0, 0, 0.08) 0px 0px 0px 1px`
+- Link: Azul Link (`#0072f5`)
+- Anel de foco: Azul Foco (`hsla(212, 100%, 48%, 1)`)
+
+### Exemplos de Prompts de Componentes
+- "Crie uma seção de herói em fundo branco. Título em 48px Geist peso 600, line-height 1,00, letter-spacing -2,4px, cor #171717. Subtítulo em 20px Geist peso 400, line-height 1,80, cor #4d4d4d. Botão CTA escuro (#171717, raio 6px, padding 8px 16px) e botão fantasma (branco, sombra-borda rgba(0,0,0,0.08) 0px 0px 0px 1px, raio 6px)."
+- "Projete um cartão: fundo branco, sem borda CSS. Use pilha de sombras: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Raio 8px. Título em 24px Geist peso 600, letter-spacing -0,96px. Corpo em 16px peso 400, #4d4d4d."
+- "Construa um emblema pílula: fundo #ebf5ff, texto #0068d6, raio 9999px, padding 0px 10px, Geist 12px peso 500."
+- "Crie navegação: cabeçalho fixo branco. Geist 14px peso 500 para links, texto #171717. CTA pílula escuro 'Start Deploying' alinhado à direita. Sombra-borda na parte inferior: rgba(0,0,0,0.08) 0px 0px 0px 1px."
+- "Projete uma seção de fluxo de trabalho mostrando três etapas: Develop (cor de texto #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Cada etapa: rótulo Geist Mono 14px maiúsculas + título 24px Geist peso 600 + descrição 16px peso 400 em #4d4d4d."
+
+### Guia de Iteração
+1. Sempre use sombra-como-borda em vez de borda CSS — `0px 0px 0px 1px rgba(0,0,0,0.08)` é a base
+2. O espaçamento entre letras escala com o tamanho da fonte: -2,4px em 48px, -1,28px em 32px, -0,96px em 24px, normal em 14px
+3. Apenas três pesos: 400 (leitura), 500 (interação), 600 (anúncio)
+4. A cor é funcional, nunca decorativa — cores de fluxo de trabalho (Vermelho/Rosa/Azul) marcam apenas etapas do pipeline
+5. O anel `#fafafa` interno nas sombras de cartão é o que dá aos cartões Vercel seu brilho interno sutil
+6. Geist Mono maiúsculas para rótulos técnicos, Geist Sans para todo o resto