0 Fork 0

Files

T

admin 5afeb6b78a ④段整套同步（六节＋ 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

20 KiB

Raw Blame History

Sistema de Design Inspirado na Apple

Category: Mídia & Consumo Eletrônicos de consumo. Espaço em branco premium, SF Pro, imagens cinematográficas.

1. Tema Visual & Atmosfera

A linguagem web da Apple é um sistema editorial de precisão que alterna entre uma calma de galeria e blocos de informação com densidade de varejo. O tom visual permanece contido: amplas telas neutras, cromados discretos e imagens de produto recebendo quase todo o peso expressivo. A interface é projetada para desaparecer, de modo que hardware, materiais e opções de acabamento se tornem o primeiro plano narrativo.

Ao longo das cinco páginas analisadas, o ritmo é consistente, mas não monolítico. As superfícies de marketing (homepage e Environment) usam um encadeamento cinematográfico de preto e luz, enquanto as superfícies de comércio (fluxos da Store e Shop) introduzem espaçamento mais apertado, mais controles utilitários e pilhas de cards mais densas sem romper a gramática central da marca. O resultado é um único sistema com duas marchas: modo vitrine e modo transação.

A tipografia é o estabilizador. A SF Pro Display sustenta a hierarquia de hero e merchandising com alturas de linha compactas e tracking controlado, enquanto a SF Pro Text cuida dos metadados de produto, navegação, filtros e UI densa de seleção. A tipografia permanece discreta, mas a faixa de escala é ampla o suficiente para suportar tanto a mensagem de hero em estilo outdoor quanto micro rótulos utilitários.

Características Principais:

Ritmo binário de seções: cenas em preto profundo (#000000) alternando com campos neutros pálidos (#f5f5f7)
Família única de azul de destaque para semântica de ação e link (#0071e3, #0066cc, #2997ff)
Dois modos de operação em um sistema: módulos de vitrine cinematográfica e configuradores de comércio densos
Forte dependência de imagens e acabamentos de material; o cromado da UI permanece visualmente fino
Métricas de manchete apertadas (SF Pro Display, semibold) combinadas com tipografia de corpo/link compacta (SF Pro Text)
Geometria de pílula e cápsula como linguagem de ação característica (18px a 980px e controles circulares)
Profundidade usada com parcimônia; contraste e separação de superfície fazem a maior parte do trabalho de camadas
Ritmo de blocos de cor em múltiplas páginas: capítulos de hero pretos -> campos de merchandising neutros pálidos -> superfícies de varejo brancas utilitárias -> micro superfícies escuras para controles

2. Paleta de Cores & Papéis

Source Pages: https://www.apple.com/, https://www.apple.com/environment/, https://www.apple.com/store, https://www.apple.com/shop/buy-iphone/iphone-17-pro, https://www.apple.com/shop/accessories/all

Primárias

Preto Absoluto (#000000): Telas de hero imersivas, capítulos de produto de alto drama, âncoras profundas de UI.
Cinza Apple Pálido (#f5f5f7): Principal superfície clara para faixas de recursos, blocos de comparação e transições editoriais.
Tinta Quase-Preta (#1d1d1f): Cor de texto primário e de controle de preenchimento escuro em telas claras.

Secundárias & Destaque

Azul de Ação Apple (#0071e3): Preenchimento de ação primária e destaque da marca que sinaliza foco.
Azul de Link de Corpo (#0066cc): Cor de link inline otimizada para legibilidade em textos longos.
Azul de Link de Alta Luminância (#2997ff): Tratamento de link brilhante em cenas mais escuras onde se exige contraste mais forte.

Superfície & Fundo

Tela Branco Puro (#ffffff): Fundos de varejo/lista de produtos e seções transacionais densas.
Superfície Grafite A (#272729): Camada de contexto para cards escuros e controles de mídia.
Superfície Grafite B (#262629): Camada utilitária escura ligeiramente mais profunda para agrupamentos de controles.
Superfície Grafite C (#28282b): Superfícies escuras de apoio elevadas.
Superfície Grafite D (#2a2a2c): Degrau elevado mais escuro usado para separação em cenas escuras mais ricas.

Neutros & Texto

Cinza Neutro Secundário (#6e6e73): Texto secundário de corpo, descrições auxiliares, metadados terciários.
Cinza de Borda Suave (#d2d2d7): Divisórias, contornos sutis e contenção utilitária discreta.
Cinza de Borda Médio (#86868b): Contornos de campo mais fortes em contextos de configuração de produto e filtros.
Cinza Escuro Utilitário (#424245): Cruzamento de texto/superfície neutro-escuro em contextos de loja.

Semântica & Destaque

Sinal de Seleção/Foco (#0071e3): Sinal compartilhado de foco e estado selecionado entre os contextos de marketing e comércio.
Erro/Aviso/Sucesso: Nenhuma paleta semântica distinta foi consistentemente visível no conjunto de superfícies extraídas.

Sistema de Gradiente

As páginas extraídas são esmagadoramente conduzidas por superfícies sólidas. A riqueza visual vem da fotografia e da renderização de acabamento, em vez de gradientes persistentes de UI.

3. Regras de Tipografia

Família de Fontes

Família de Display: SF Pro Display, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
Família de Texto: SF Pro Text, fallbacks SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif
Divisão de Uso: A família de display cuida das manchetes de hero/produto e dos títulos de merchandising; a família de texto cuida da navegação, controles, rótulos e texto denso de comércio.

Hierarquia

Papel	Tamanho	Peso	Altura de Linha	Espaçamento de Letras	Notas
Hero Display XL	80px	600	1.00-1.05	-1.2px	Escala de hero de Environment/store
Hero Display L	56px	600	1.07	-0.28px	Momentos de hero da homepage
Section Display	48px	500-600	1.08	-0.144px	Títulos principais de capítulo
Product Heading	40px	600	1.10	normal	Títulos de seção de produto e campanha
Feature Display	38px	600	1.21	0.152px	Destaques de dispositivo e merchandising
Promo Display	32px	300-600	1.09-1.13	0.128px a 0.352px	Sub-heroes de nível de módulo
Card/Product Title	28px	600	1.14	0.196px	Nomeação de nível de tile e texto-chave
Utility Heading	24px	600	1.17	0.216px / -0.2px	Cabeçalhos de configurador e conteúdo agrupado
Link/Action Heading	21px	600	1.14-1.38	0.231px	Links promocionais maiores
Subhead	19px	600	1.21	0.228px	Introduções de seção compactas
Body Primary	17px	400	1.47	-0.374px	Corpo padrão e descrições de varejo
Body Emphasis	17px	600	1.24	-0.374px	Rótulos enfatizados e valores-chave
Control Label	14px	400-600	1.29-1.47	-0.224px	Botões, rótulos auxiliares, texto de navegação compacto
Micro UI	12px	400-600	1.00-1.33	-0.12px	Letras miúdas, micro rótulos
Legal/Meta	10px	400	1.30-1.47	-0.08px	Metadados densos e texto de apoio legal

Princípios

Continuidade entre tipos de página: O mesmo DNA tipográfico abrange lançamentos cinematográficos e fluxos de compra de produto, evitando uma divisão de marca entre marketing e comércio.
Compressão em escala: Os níveis de display usam entrelinhamento apertado e tracking controlado para parecerem usinados e centrados no produto.
Densidade legível em profundidade de varejo: A SF Pro Text equilibra compacidade com ritmo vertical suficiente para longas listas de produtos e matrizes de opções.
Escada de pesos medida: 600 é o peso de ênfase dominante; 700 aparece seletivamente; 300 é usado com parcimônia para contraste em linhas maiores.

Nota sobre Substitutos de Fonte

Substitutos mais próximos disponíveis gratuitamente: Inter para implementação rica em texto e métricas SF Pro Display-like aproximadas com Inter Tight para títulos.
Ao substituir, aumente ligeiramente a altura de linha (+0.02 a +0.06) nos tamanhos de corpo e reduza a intensidade do tracking negativo para preservar a legibilidade.

4. Estilizações de Componentes

Botões

Ação de Preenchimento Primária: fundo #0071e3, texto #ffffff, raio de 8px, padding horizontal compacto (comumente 8px 15px). Usada para ações decisivas de compra/progressão.
Ação de Preenchimento Escuro: fundo #1d1d1f, texto #ffffff, raio de 8px. Usada quando superfícies claras precisam de uma primária de alto contraste contida.
Família de Ação Pílula/Cápsula: grandes ações de cápsula em raios de 18px-56px e links de pílula extrema em 980px. Estabelece a silhueta de call-to-action suave, mas precisa, da Apple.
Cascas de Filtro/Botão Utilitário: cascas claras (#fafafc ou branco translúcido) com bordas cinza sutis (#d2d2d7 / #86868b) para contextos de configuração densos.
Comportamento ao Pressionar: controles ativos comumente reduzem a escala ou deslocam ligeiramente o preenchimento para indicar a confirmação física do toque.

Cards & Contêineres

Cards Editoriais/de Produto: cards claros em campos #f5f5f7 ou brancos com enquadramento mínimo e composição centrada na imagem.
Cards Utilitários Escuros: degraus de grafite (#272729 a #2a2a2c) usados para overlays, controles de mídia e módulos de contexto escuro.
Painéis de Configurador: contêineres arredondados (frequentemente 12px-18px) com definição de borda clara, porém contida.
Módulos de Carrossel/Destaque: cascas arredondadas maiores (28px-36px) para faixas de conteúdo em destaque.

Inputs & Formulários

Campos de Input de Varejo: fundos translúcidos ou brancos, texto escuro (#1d1d1f), contenção orientada por borda (#86868b).
Controles de Seleção: geometria de controle circular/em estilo de alternância aparece com frequência em interfaces de seleção de produto.
Estratégia de Densidade: os campos de formulário permanecem visualmente discretos para manter dominantes a imagem do dispositivo e a hierarquia de preço.

Navegação

Nav Global de Marketing: barra escura translúcida compacta com links de tipo pequeno e iconografia contida.
Camadas de Nav da Store/Sub-shop: barras utilitárias adicionais, chips e controles segmentados para o estreitamento de categoria e produto.
Hierarquia de Links: os azuis de link permanecem o sinal interativo primário, enquanto o texto neutro dá suporte a conjuntos de navegação densos.

Tratamento de Imagem

Fotografia Centrada no Objeto: hardware e acessórios são colocados em primeiro plano sobre superfícies sólidas controladas.
Renderização de acabamento de alta fidelidade: detalhes reflexivos/de material são centrais para a persuasão visual.
Enquadramento misto: cenas de hero full-bleed coexistem com cards de varejo arredondados e miniaturas de merchandising recortadas com precisão.

Outros Componentes Distintivos

Matriz de Configurador de Produto: pilhas de opções e seletores combinando chips, controles em estilo radio e blocos contextuais de preço/resumo.
Pontos/Setas de Controle de Carrossel: vocabulário de controle circular em overlays discretos para a progressão da galeria.
Painéis de História do Environment: capítulos narrativos que mesclam tipografia editorial com visuais cinematográficos de produto/ambiente.

5. Princípios de Layout

Sistema de Espaçamento

A unidade base é efetivamente 8px, mas o sistema suporta micro degraus densos para alinhamento de precisão.
Valores de espaçamento reutilizados com frequência entre páginas: 2, 4, 6, 7, 8, 9, 10, 12, 14, 17, 20 px.
Constantes de ritmo universais visíveis tanto nos fluxos de marketing quanto nos de varejo: andaime de unidade de 8px com intervalos utilitários de 14-20px para padding de componentes e espaçamento de listas.

Grid & Contêiner

Páginas de vitrine: grandes colunas centrais com amplo espaço horizontal de respiro e capítulos de cor de largura total.
Páginas de comércio: grids mais apertados de produto e controle em múltiplas colunas com empilhamento modular frequente.
Comportamento de contêiner: núcleo legível restrito com margens externas generosas em larguras de desktop.

Filosofia de Espaço em Branco

Cadência de cena: os principais capítulos visuais usam amplo espaço de respiro superior/inferior.
Compactação de informação onde necessário: as páginas de varejo comprimem deliberadamente o espaçamento para expor mais informação acionável por viewport.
Separação orientada por contraste: as transições de seção dependem mais de mudanças de superfície do que de separadores decorativos.

Escala de Raio de Borda

5px: pequenos links/tags utilitários e cascas pequenas menores.
8px-12px: controles padrão e campos compactos.
16px-18px: cards, molduras de módulo e painéis de comércio.
28px-36px: contêineres maiores de módulo e destaque.
56px / 100px / 980px: cápsulas, grandes pílulas e formas características de CTA alongadas.
50%: controles circulares de mídia e seleção.

6. Profundidade & Elevação

Nível	Tratamento	Uso
Nível 0	Superfícies neutras planas (`#ffffff`, `#f5f5f7`, `#000000`)	Palcos principais de narrativa e produto
Nível 1	Contenção sutil por borda (`#d2d2d7`, `#86868b`)	Filtros, campos de input, cards utilitários
Nível 2	Sombra suave (`rgba(0,0,0,0.08)` a `rgba(0,0,0,0.22)` onde presente)	Cards destacados e módulos de mercadoria elevados
Nível 3	Escalonamento de superfície escura (`#272729` -> `#2a2a2c`)	Overlays, controles de mídia, clusters utilitários escuros
Acessibilidade	Sinal de foco azul (`#0071e3`)	Ênfase de teclado e seleção

A profundidade é intencionalmente contida. A Apple favorece contraste tonal, escalonamento de superfície e hierarquia composicional em vez de pilhas pesadas de sombra.

Profundidade Decorativa

A profundidade decorativa é criada principalmente pelo realismo fotográfico e pela renderização de material, e não por efeitos sintéticos de UI.
Overlays translúcidos e barras utilitárias em estilo de vidro fornecem uma leve camada atmosférica na navegação e nos controles.

7. O que Fazer e o que Não Fazer

O que Fazer

Use a tríade neutra (#000000, #f5f5f7, #ffffff) como a fundação estrutural.
Reserve os destaques de azul para a semântica genuína de ação e navegação.
Mantenha a tipografia apertada e deliberada, especialmente em escalas de display.
Mantenha a linguagem de geometria de cápsula/círculo para controles e ações-chave.
Deixe a imagem do produto carregar o drama visual; mantenha o cromado discreto.
Use contenção orientada por borda em contextos densos de varejo, em vez de ornamentação pesada de card.
Preserve a separação clara entre módulos de vitrine e módulos transacionais, mantendo os tokens centrais compartilhados.

O que Não Fazer

Não introduza paletas amplas de destaque secundário que compitam com o azul da Apple.
Não use em excesso sombras, efeitos de brilho ou gradientes decorativos no cromado central da UI.
Não misture famílias de fontes não relacionadas nem afrouxe o tracking indiscriminadamente.
Não achate todos os cantos em um único raio; a Apple usa níveis de raio propositais.
Não sobrecarregue os módulos de comércio com bordas grossas ou efeitos visuais chamativos.
Não remova a cadência de contraste neutro entre capítulos escuros e claros.
Não trate os fluxos de marketing e de compra como sistemas de design separados.

8. Comportamento Responsivo

Breakpoints

Nome	Largura	Mudanças Principais
Small Mobile	374px e abaixo	Controles de varejo apertados, pilhas de produto em coluna única
Mobile	375px-640px	Módulos em uma coluna, linhas de ação compactas, seletores condensados
Tablet	641px-833px	Cards expandidos e transições mistas de 1-2 colunas
Tablet Wide	834px-1023px	Merchandising em múltiplas colunas mais estável, blocos de texto maiores
Desktop	1024px-1240px	Layouts de varejo completos e estruturas de comparação de produtos
Desktop Wide	1241px-1440px	Expansão de hero de marketing e espaçamento de seção mais amplo
Large Desktop	1441px+	Espaço de respiro máximo de capítulo e composição editorial ampla

Alvos de Toque

As ações primárias e secundárias são geralmente apresentadas em geometrias de pílula/botão amigáveis ao toque.
Os controles circulares de mídia e seleção alinham-se com a intenção mínima de toque em contextos móveis.
A UI densa de comércio usa rótulos compactos, mas mantém regiões de acerto claras por meio do padding de forma ao redor.

Estratégia de Colapso

A tipografia de hero de marketing reduz de escala em níveis discretos enquanto preserva o contraste de hierarquia.
Os grids de produto e comércio colapsam de múltiplas colunas para cards empilhados com visibilidade persistente do seletor.
A navegação utilitária comprime-se em agrupamentos de link/controle mais simples enquanto preserva as ações-chave.
Os clusters de opção/configuração tornam-se sequenciados verticalmente para manter o fluxo de compra linear em telas pequenas.

Comportamento de Imagem

A imagem do produto preserva a proporção e a centralidade ao longo dos breakpoints.
Os visuais de hero permanecem dominantes no mobile, com o texto reposicionado em torno da prioridade da mídia.
As miniaturas de varejo permanecem legíveis por meio de uma lógica de recorte mais apertada e do empilhamento mais denso de cards.
Os módulos liderados por imagem continuam a ancorar o ritmo conforme a densidade do layout aumenta.

9. Guia de Prompt para o Agente

Referência Rápida de Cores

Azul de ação primária: Azul de Ação Apple (#0071e3)
Azul de link inline: Azul de Link de Corpo (#0066cc)
Tela de capítulo escuro: Preto Absoluto (#000000)
Tela de capítulo claro: Cinza Apple Pálido (#f5f5f7)
Texto primário em claro: Tinta Quase-Preta (#1d1d1f)
Texto secundário: Cinza Neutro Secundário (#6e6e73)
Borda de varejo suave: Cinza de Borda Suave (#d2d2d7)
Borda de varejo forte: Cinza de Borda Médio (#86868b)

Exemplos de Prompts de Componente

"Projete um hero de produto em estilo Apple sobre uma tela preta (#000000) com manchete em SF Pro Display semibold (48-56px), texto de apoio conciso e dois CTAs em cápsula usando #0071e3 e #1d1d1f."
"Crie um painel de configuração de comércio em branco (#ffffff) com cards arredondados de 18px, campos com borda #86868b, texto de corpo em SF Pro Text 17px e seletores de opção compactos."
"Construa um grid de cards de merchandising alternando superfícies #f5f5f7 e brancas, com cards centrados na imagem, sombras contidas e metadados em SF Pro Text de 14-17px."
"Gere um cluster de controle de carrossel usando botões circulares (raio de 50%), overlays cinza discretos e feedback ativo claro para a navegação da galeria."
"Componha um ritmo de página misto de marketing + varejo: capítulo de vitrine escuro -> capítulo de recurso claro -> módulo de lista de produtos denso, mantendo os destaques de azul apenas para ações e links."

Guia de Iteração

Fixe primeiro a fundação neutra (#000000, #f5f5f7, #ffffff) antes de ajustar os destaques.
Mantenha os destaques de azul escassos e propositais; se tudo é azul, a hierarquia colapsa.
Ajuste a tipografia nesta ordem: escala de display, legibilidade do corpo e, então, micro rótulos.
Combine o raio por classe de componente (campo, card, cápsula, círculo) em vez de um arredondamento único para tudo.
Aumente a densidade gradualmente ao passar das seções de vitrine para as seções de comércio.
Valide que a imagem do produto permaneça a camada visual mais forte após cada revisão.

Lacunas Conhecidas

Cores de status semântico distintas (erro/aviso/sucesso) não foram consistentemente visíveis no conjunto de páginas extraídas.
Alguns micro estados de interação variam por módulo e não são representados como tokens universais de sistema.
Alguns módulos de varejo expõem substituições de tipografia específicas de contexto que não aparecem em todas as cinco páginas.

20 KiB Raw Blame History