Feihong Design System

Sistema de Design de Marca Premium · Manual de Fluxo de Trabalho

Este documento é o sistema operacional do Feihong Design System. Ele define o processo completo, desde o requisito até a entrega. 本文件是设计系统的「大脑」，规定了从需求到交付的完整工作流程。

Missão: Produzir trabalhos artisticamente refinados, reconhecidamente Feihong e inconfundivelmente humanos — que nunca pareçam gerados por IA. 核心目标：产出不像AI的、有Feihong品牌辨识度的、艺术且有品质的设计作品。

Ten Scenes · Dez Cenários

Todos os 10 cenários estão prontos para produção, cada um com especificação e modelo completos.

Nº	Cena · 场景	Especificação · 规范	Modelo · 模板	Caractere Principal
01	Portfólio / Site Pessoal · 作品集/个人主页	`scenes/portfolio.md`	`assets/portfolio.html`	Hero Assimétrico, Grade Bento, Selo de Cera, toque editorial
02	Landing Page · 活动页/落地页	`scenes/landing.md`	`assets/landing.html`	Foco em conversão, linha do tempo, palestrantes, formulários CTA
03	Tutorial / Conteúdo Longo · 教程/长文/博客	`scenes/tutorial.md`	`assets/tutorial.html`	Capitular, progresso de leitura, sumário, tipografia de qualidade de livro
04	Apresentação de Slides · 演示文稿/Slides	`scenes/deck.md`	`assets/deck.html`	Tela cheia, 16:9, navegação por teclado, 9 layouts, F para tela cheia
05	Estudo de Caso · 案例研究/项目复盘	`scenes/case-study.md`	`assets/case-study.html`	Arco narrativo, visualização de dados, painéis escuros
06	Console / Admin · 后台控制台/仪表盘	`scenes/console.md`	`assets/console.html`	Dashboard administrativo, navegação lateral, Verde Terminal, cartões KPI, gráficos de dados
07	Cartões Sociais · 图文卡片/小红书	`scenes/cards.md`	`assets/cards.html`	Retrato 3:4, paginação, exportação PNG com html2canvas
08	Currículo / CV · 简历/履历	`scenes/resume.md`	`assets/resume.html`	Impressão A4, página única, sem animação, Ctrl+P para PDF
09	Artigo WeChat · 公众号/微信图文	`scenes/wechat.md`	HTML Inline	Estilos inline para WeChat, sem CSS/JS externo
10	Email / EDM · 邮件营销	`scenes/email.md`	`assets/email.html`	Layout de tabela, estilos inline, compatível com Outlook

Activation · Condições de Ativação

O sistema é ativado automaticamente quando a solicitação corresponde a estes cenários:

Palavras-chave de Ativação · 触发关键词	Tipo de Cena · 场景
Página pessoal, site pessoal, Portfolio, portfólio, vitrine de projetos	Portfólio
Landing Page, página de destino, página de evento, página de inscrição, página de curso, lançamento	Landing
Tutorial, ensino, divulgação científica, blog, página de artigo, conteúdo longo, coluna	Tutorial
Apresentação, slides, slide, deck, palestra, evento de compartilhamento	Deck
Estudo de caso, Case Study, revisão de projeto, processo de design	Estudo de Caso
Console administrativo, painel funcional, dashboard, página de ferramentas	Console
Cartão gráfico, post Xiaohongshu, cartão social, postagem de círculo de amigos	Cartões
Currículo, CV, currículo vitae	Currículo
Modelo de email, EDM, Newsletter, email de assinatura	Email
Formatação de conta pública WeChat, artigo WeChat gráfico	WeChat

Julgamento Adaptativo: Para modificações simples (ex.: "mudar a cor de um botão", "adicionar uma seção"), use o Caminho Rápido. Para novas páginas / designs completos, use o Processo Completo de 8 Etapas. 自适应判断：需求简单时走快速路径；新建页面/完整设计走完整8步工作流。

⚡ Fast Track · Caminho Rápido (Modificações Simples)

Para:

Alterações menores em páginas existentes
Ajustes de componente único, substituições de texto, ajustes de cor
Modificações locais pós-feedback
Adições de seção única

Processo:

Leia o arquivo HTML existente
Aplique as alterações seguindo os padrões do DNA.md
Verifique rapidamente os itens P0 relevantes para a alteração
Se as alterações afetarem cor/tipografia/layout → verifique os itens P0 relacionados
Entregue

Não para Caminho Rápido: Novas páginas completas, alterações que abrangem 3+ seções, ajustes de paleta de cores, mudanças de estilo geral.

📋 Processo Feihong de 8 Etapas · 完整8步工作流

Etapa 01 — Discover · Descobrir (Triagem Adaptativa)

Antes de começar, avalie rapidamente o que já é conhecido a partir da entrada do usuário:

Tipo claro? (Qual dos 10 cenários?)
Público claro? (Para quem é?)
Escala conhecida? (Quantas telas/páginas/cartões/slides?)
Ativos disponíveis? (Texto/imagens/dados/avatar/personagem IP)
Restrições claras? (Obrigatórios, marcas parceiras, elementos proibidos)

Regras de Decisão:

4+ itens claros → Pule para a Etapa 03
2-3 itens claros → Pergunte apenas as questões críticas faltantes
0-1 itens claros → Entre na Etapa 02 para esclarecimento completo

Etapa 02 — Define · Definir (Esclarecer Quando Necessário)

Não pergunte mecanicamente todas as 5 questões. Com base na Etapa 01, pergunte apenas as questões críticas faltantes.

Questões principais a confirmar (selecione apenas o que estiver faltando):

Tipo (quando incerto): Ofereça 2-3 opções mais prováveis, não de forma aberta
Público (quando não mencionado): "Quem é o público principal?"
Escala (quando não informada): "Aproximadamente quantas telas/páginas/cartões?"
Ativos (quando nenhum texto fornecido): "Você tem texto, imagens ou dados preparados?"
Restrições (quando houver necessidades especiais): "Há elementos obrigatórios ou cores de marca parceira?"

Princípio de Comunicação: Fale como um designer com um cliente, não como se estivesse preenchendo um formulário. Use linguagem natural, no máximo 2-3 perguntas por vez. 沟通原则：像设计师跟客户沟通，不像填表。用自然语言，一次最多问2-3个问题。

Etapa 03 — Inject DNA · Injetar DNA (Ler Especificações)

Leitura Obrigatória (em todo projeto):

DNA.md — Memorize estes essenciais:
- 🔴 Valores exatos de cor: #0A2463 (Azul Real 55%), #F4D35E (Dourado Vintage 30%), #D8315B (Vinho Borgonha 15%)
- 🔴 Estratégia tipográfica: Playfair Display (serifa para títulos) + Inter (sem serifa para corpo) + Cormorant Garamond (itálico para citações) + JetBrains Mono (código)
- 🔴 Ordem de prioridade: Anti-IA > Qualidade Artística > Calor Humano > Olhar do Designer
- 🔴 Fundo creme quente #FDFBF6, texto preto tinta #0D1225
- 🔴 Itens proibidos principais
- 🔴 Linguagem de movimento do MOTION.md (easing, duração, princípios)

Leitura Seletiva (por tipo de cena) — leia a especificação da cena correspondente antes do trabalho:

Nº	Cena	Especificação	Modelo
01	Portfólio / Site Pessoal	`scenes/portfolio.md`	`assets/portfolio.html`
02	Landing Page	`scenes/landing.md`	`assets/landing.html`
03	Tutorial / Conteúdo Longo	`scenes/tutorial.md`	`assets/tutorial.html`
04	Deck / Apresentação	`scenes/deck.md`	`assets/deck.html`
05	Estudo de Caso	`scenes/case-study.md`	`assets/case-study.html`
06	Console / Admin	`scenes/console.md`	`assets/console.html`
07	Cartões Sociais	`scenes/cards.md`	`assets/cards.html`
08	Currículo / CV	`scenes/resume.md`	`assets/resume.html`
09	Artigo WeChat	`scenes/wechat.md`	HTML Inline
10	Email / EDM	`scenes/email.md`	`assets/email.html`

Após a Leitura, você deve ter clareza sobre 5 coisas:

Qual é a estrutura/ritmo típico desta cena?
Há restrições técnicas? (tabelas de email, estilos inline WeChat, tela cheia Deck)
Qual o papel das três cores da marca nesta cena?
Qual é o tom emocional central? (Solenemente? Dinâmico? Profissional? Artístico?)
Há tabus específicos da cena?

Etapa 04 — Structure · Estruturar (Escolher Ponto de Partida)

Estratégia Padrão: Comece a partir de modelos, nunca do zero. 默认策略：从模板开始改，不从零写。

Todos os 10 modelos de cena — comece pelo apropriado, nunca do zero:

Nº	Cena	Modelo	Notas Especiais
01	Portfólio	`assets/portfolio.html`	Grade de projetos, visual-first, Hero Assimétrico, Selo de Cera
02	Landing	`assets/landing.html`	Orientado a CTA, impacto visual, linha do tempo, interação de formulário
03	Tutorial	`assets/tutorial.html`	Leitura de formato longo, navegação de sumário, barra de progresso, Capitular
04	Deck	`assets/deck.html`	Slides em tela cheia, navegação por teclado, 16:9, F para tela cheia
05	Estudo de Caso	`assets/case-study.html`	Narrativa Contexto→Desafio→Processo→Resultado, visualização de dados
06	Console	`assets/console.html`	Dashboard administrativo, navegação lateral, Verde Terminal, cartões KPI, gráficos de dados
07	Cartões Sociais	`assets/cards.html`	Paginação retrato 3:4, exportação PNG com html2canvas
08	Currículo	`assets/resume.html`	Página única A4, amigável para impressão, Ctrl+P para PDF
09	WeChat	HTML Inline	Compatível com WeChat, estilos inline, sem CSS/JS externo
10	Email	`assets/email.html`	Layout de tabela, estilos inline, compatível com Outlook

Quando desviar dos modelos:

A estrutura do modelo realmente não se encaixa (mas as variáveis CSS, importações de fontes, reset base devem permanecer)
O usuário solicita explicitamente uma abordagem de design única
Os tokens de marca (variáveis CSS :root), importações de fontes, estilos de reset base devem sempre ser preservados

Princípios de modificação de modelo:

Preserve as variáveis CSS :root do modelo
Preserve as tags <link> de fonte
Substitua áreas de conteúdo, ajuste a estrutura de layout
Não remova os resets de estilo base

Etapa 05 — Compose · Compor (Definição de Direção e Layout)

Esta é a etapa mais crítica contra a saída genérica de IA — a IA monta sem direção. Esta etapa decide se a saída é "design" ou "montagem". 这是最容易被跳过但最重要的步骤——AI没有"方向判断"，它直接组装。这一步决定了产出是"设计"还是"组装"。

Antes de preencher componentes, defina 4 decisões de direção:

5a. Tom Emocional (escolha 1-2 primários)

Autoridade Soberana · 沉稳权威: Espaçamento generoso, Azul Real dominante, dourado usado com moderação, títulos serifados, animação mínima
Criatividade Dinâmica · 活力创意: Dourado e Borgonha mais ativos, layouts assimétricos, elementos quebrando contêineres, um pouco mais de animação
Editorial Artístico · 艺术画册: Imagens grandes, texto como elemento visual, imagens transbordando contêineres, espaçamento generoso, painéis escuros
Humanista Acolhedor · 温暖人文: Mais itálico Cormorant, proporção ligeiramente maior de Borgonha, tons quentes, personagem IP aparece
Mínimo Refinado · 专业极简: Cor contida, espaçamento generoso, proporção maior de Inter, precisão geométrica

5b. Estratégia de Hero (escolha 1)

Liderado por Visual: Imagem grande / IP / visual abstrato como primário, texto mínimo
Liderado por Tipografia: Título grande + citação destacada como primário, elementos visuais secundários
Liderado por Retrato: Avatar / personagem IP como peça central, texto ao lado
Liderado por Dados/Realização: Números grandes + rótulos como primários, estabelecendo confiança

5c. Elementos de Assinatura (escolha 1-2 para levar pela página)

Linha decorativa dourada (abaixo dos títulos)
Numerais / Inglês decorativos grandes (fundo de baixa opacidade)
Citações em itálico com serifa
Personagem IP / avatar intercalado
Pontos dourados para marcadores de lista / linha do tempo
Imagens transbordando contêineres
Painéis azuis profundos quebrando o ritmo
Elementos da Coleção de Assinatura Feihong (selo de cera, cantos de foto, florão ❦, capitular, citações grandes)

5d. Planejamento de Ritmo

Total de telas/páginas: ___
Ritmo de densidade: Denso→Espaçado→Denso→Espaçado? Ou Forte→Fraco→Forte?
Onde está a tela surpresa visual?
Painéis escuros? Onde?

Saída de Direção: Você não precisa escrever isso, mas deve estar cristalino em sua mente. Escolhas subsequentes de layout e componentes servem a esta direção.

Em seguida, selecione padrões de layout em components/14-layouts.md para cada seção/página.

Princípio central: Cada seção deve usar um layout diferente. As escolhas de layout servem à direção definida em 5a-5d.

Etapa 06 — Signature · Assinar (Preenchimento de Componentes)

Selecione componentes apropriados dos arquivos components/.

🔴 Regra Rígida (nível P0): Zero estilos HTML padrão. 🔴 硬规则（P0级别）：禁止使用任何HTML默认样式。

Requisitos específicos de zero estilo padrão:

❌ <blockquote> padrão (borda esquerda é genérica do Notion/Feishu)
❌ Blocos de citação border-left padrão
❌ <ul>/<ol> sem estilo (deve personalizar — pontos dourados, numerais serifados, ícones personalizados)
❌ Bordas <table> padrão
❌ Links azuis sublinhados padrão
❌ Estilos de botão padrão (cinza, efeitos 3D, bordas padrão)
❌ Estilos de input padrão
❌ Estilos de controle de formulário padrão
✅ Todos os componentes selecionados da biblioteca de componentes
✅ Componentes não na biblioteca: design consistente com DNA.md, nunca padrão do navegador

Pontos de verificação de injeção de marca:

Links: Azul Real #0A2463, hover com sublinhado dourado / matiz de fundo
Botões: Primário Azul Real, CTA Borgonha, Secundário Dourado contornado/preenchido
Blocos de citação: Citações grandes douradas com serifa + itálico Cormorant + linha decorativa dourada
Marcadores de lista: Pontos dourados ou numerais serifados Playfair Display
Tags/Badges: Preenchimento dourado (secundário), preenchimento Borgonha (ênfase), fundo claro Azul Real (categoria)
Títulos: Playfair Display serifado, opcional linha curta decorativa dourada abaixo
Divisores: Não simples border-bottom; use linha fina dourada + gradiente de desvanecimento ou separadores de ponto dourado
Animação (se houver): Leve, lenta, contida, cubic-bezier(0.16, 1, 0.3, 1), sem bounce

Coleção de Assinatura Feihong — fortemente recomendada para todos os cenários:

Capitular (primeiro parágrafo de tutoriais)
Marginalia (notas laterais de tutorial)
Selo de Cera (sensação de portfólio / certificação)
Canto de Foto (sensação de portfólio / editorial)
Assinatura Dourada (finais de artigo / páginas Sobre)
Florão ❦ (divisores de seção)
Badge Serial N° (itens numerados, sensação de edição limitada)

Etapa 07 — Refine · Refinar (Auto-Verificação de Qualidade)

Esta é a etapa mais crítica. Não pule. 这是最关键的一步，不能跳过。

Verifique os padrões de gate de qualidade QUALITY.md + DNA.md item por item.

🔴 P0 — Selo Obrigatório · 必过 (um item não aprovado deve ser corrigido)

🟡 P1 (itens importantes, mas não bloqueadores de entrega)

Regras de Saída (sem exceção):

❌ Jamais diga "Vou gerar..." ou "Aqui está..." — apenas mostre o código com comentários
❌ Jamais peça permissão para mostrar o código — apenas produza
❌ Nunca entregue HTML incompleto com elipses /* ... */ ou  — cada entrega é completa renderizável

Etapa 08 — Deliver · Entregar (Apresentação e Reflexão)

Formato de saída:

<!-- scene: [scene-name] -->
<!-- Feihong Design System · v3.1 -->
<!-- Tone: [Emotional Tone] | Hero: [Hero Strategy] | Signature: [Signature Elements] -->
<!-- Color proportions: Royal Blue ~55% · Gold ~30% · Burgundy ~15% -->

... (código HTML completo) ...

Marcação de cena obrigatória: scene-[name] na classe do body ou div wrapper mais externa.

Sempre entregue código autossuficiente, completo e renderizável — uma única página HTML com CSS e JS inline. Sem dependências externas (CDNs aceitáveis se confiáveis).

🚫 Tabus · Tabus

🔴 Tabus Absolutos (Nunca Usar)

❌ Glassmorphism: (fundo borrado + vidro) — moda passageira, não atemporal
❌ Bounce: Efeito bounce no scroll/revelação — parece IA genérica
❌ Gradiente de texto: background-clip: text para gradiente em texto — não é premium
❌ Brilho de IA: Efeito de brilho, especialmente azul ciano → parece IA
❌ Blocos de citação com borda esquerda: Estilo Notion/Feishu, não é premium
❌ Cores neon/fluorescentes: Especialmente verde néon nos temas Console
❌ Efeito máquina de escrever: Animação de texto aparecendo letra por letra — parece IA
❌ Arte gerada por IA: (mãos deformadas, texturas lisas demais, olhos sem vida)
❌ Sombras pretas: rgba(0,0,0,0.x) para sombras de cartão — use tons de azul escuro
❌ Padding uniforme: Todas as seções com o mesmo padding → parece template genérico
❌ Mais de 3 níveis de heading: h1 → h2 → h3, nunca h4
❌ Quarta cor não funcional: Se uma quarta cor é necessária, use tom extendido do azul ou cinza quente

📂 Estrutura do Sistema · Estrutura do Sistema

feihong-design-system/
├── DNA.md                    # Especificações de identidade de marca
├── QUALITY.md                # Padrões de gate de qualidade
├── MOTION.md                 # Linguagem de movimento e princípios de animação
├── SCENES.md                 # (Este arquivo) Manual de fluxo de trabalho
├── components/
│   ├── 01-hero-patterns.md
│   ├── 02-navigation.md
│   ├── 03-cards.md
│   ├── 04-forms.md
│   ├── 05-buttons.md
│   ├── 06-quote-blocks.md
│   ├── 07-data-tables.md
│   ├── 08-charts.md
│   ├── 09-footers.md
│   ├── 10-modals.md
│   ├── 11-feature-grids.md
│   ├── 12-misc-decorative.md
│   ├── 13-signature-collection.md
│   └── 14-layouts.md
├── scenes/
│   ├── portfolio.md
│   ├── landing.md
│   ├── tutorial.md
│   ├── deck.md
│   ├── case-study.md
│   ├── console.md
│   ├── cards.md
│   ├── resume.md
│   ├── wechat.md
│   └── email.md
├── assets/
│   ├── portfolio.html
│   ├── landing.html
│   ├── tutorial.html
│   ├── deck.html
│   ├── case-study.html
│   ├── console.html
│   ├── cards.html
│   ├── resume.html
│   ├── wechat.html
│   └── email.html
└── assets/
    └── images/            # Imagens de amostra, ícones, recursos de personagem IP

📐 Princípios de Design · Princípios de Design

Hierarquia Clara: Cada página tem um ponto focal claro
Espaço em Branco como Recurso: Espaçamento generoso, sem aglomeração
Ritmo: Layout alterna densidade → espaço em branco → densidade → espaço em branco
Consistência: Componentes similares são visualmente consistentes
Toque Humano: Cada design inclui um elemento "feito pelo homem" (foto angular, letra capitular, citação manuscrita, florão)
Primeiro Mobile: Mobile-first, desktop expande
Performance: CSS leve, sem bibliotecas pesadas desnecessárias, transições suaves
Acessibilidade: Proporções de contraste WCAG AA, tamanhos de fonte legíveis, significados não apenas por cor

Feihong Design System — Onde o artesanato encontra o algoritmo. 飞鸿设计系统 — 当匠心遇见算法。

ifeihong/feihong-design-system

O que é feihong-design-system?

Perguntar na sua IA favorita

Documentação