Feihong Design System
Sistema de Diseño de Marca Premium · Manual de Flujo de Trabajo
Este documento es el sistema operativo de Feihong Design System. Define el proceso completo desde el requisito hasta la entrega. 本文件是设计系统的「大脑」，规定了从需求到交付的完整工作流程。
Misión: Producir trabajos artísticamente refinados, reconocibles como Feihong e inconfundiblemente humanos, que nunca parezcan generados por IA. 核心目标：产出不像AI的、有Feihong品牌辨识度的、艺术且有品质的设计作品。
Diez Escenarios · 十大场景
Los 10 escenarios están listos para producción, cada uno con especificaciones y plantillas completas.
| Nº | Escenario | Especificación | Plantilla | Carácter Principal |
|---|---|---|---|---|
| 01 | Portfolio / Sitio Personal · 作品集/个人主页 | scenes/portfolio.md | assets/portfolio.html | Hero asimétrico, cuadrícula Bento, Sello de Cera, estilo editorial |
| 02 | Página de Aterrizaje · 活动页/落地页 | scenes/landing.md | assets/landing.html | Orientado a conversión, línea de tiempo, ponentes, formularios CTA |
| 03 | Tutorial / Artículo Largo · 教程/长文/博客 | scenes/tutorial.md | assets/tutorial.html | Letra capitular, progreso de lectura, TOC, tipografía de calidad de libro |
| 04 | Presentación / Diapositivas · 演示文稿/Slides | scenes/deck.md | assets/deck.html | Pantalla completa, 16:9, navegación por teclado, 9 diseños, F para pantalla completa |
| 05 | Caso de Estudio · 案例研究/项目复盘 | scenes/case-study.md | assets/case-study.html | Arco narrativo, visualización de datos, paneles oscuros |
| 06 | Consola / Administración · 后台控制台/仪表盘 | scenes/console.md | assets/console.html | Panel de administración, barra lateral, Terminal Green, tarjetas KPI, gráficos de datos |
| 07 | Tarjetas Sociales · 图文卡片/小红书 | scenes/cards.md | assets/cards.html | Retrato 3:4, paginación, exportación html2canvas PNG |
| 08 | Currículum / CV · 简历/履历 | scenes/resume.md | assets/resume.html | Impresión A4, una página, sin animación, Ctrl+P PDF |
| 09 | Artículo de WeChat · 公众号/微信图文 | scenes/wechat.md | HTML en línea | Estilos en línea de WeChat, sin CSS/JS externos |
| 10 | Correo Electrónico / EDM · 邮件营销 | scenes/email.md | assets/email.html | Diseño de tabla, estilos en línea, compatible con Outlook |
Activación · 触发条件
El sistema se activa automáticamente cuando la solicitud coincide con estos escenarios:
| Palabras Clave de Activación · 触发关键词 | Tipo de Escenario · 场景 |
|---|---|
| 个人主页、个人网站、Portfolio、作品集、作品展示、项目展示 | Portfolio |
| Landing Page、落地页、活动页、报名页、课程页、发布会 | Landing |
| 教程、教学、科普、博客、文章页、长文、专栏 | Tutorial |
| 演示文稿、slides、幻灯片、deck、演讲、分享会 | Deck |
| 案例研究、Case Study、项目复盘、设计过程 | Case Study |
| 后台控制台、功能页、看板、仪表盘、工具页 | Console |
| 图文卡片、小红书图文、社交卡片、朋友圈图 | Cards |
| 简历、CV、履历 | Resume |
| 邮件模板、EDM、Newsletter、订阅邮件 | |
| 公众号排版、微信图文 |
Juicio Adaptativo: Para modificaciones simples (por ejemplo, "cambiar el color de un botón", "añadir una sección"), utiliza la Vía Rápida. Para páginas nuevas / diseños completos, utiliza el Proceso Completo de 8 Pasos. 自适应判断：需求简单时走快速路径；新建页面/完整设计走完整8步工作流。
⚡ Vía Rápida · 快速路径 (Modificaciones Simples)
Para:
- Cambios menores en páginas existentes
- Ajustes de un solo componente, sustituciones de texto, ajustes de color
- Modificaciones locales después de recibir comentarios
- Adiciones de una sola sección
Proceso:
- Leer el archivo HTML existente
- Aplicar los cambios siguiendo los estándares de
DNA.md - Verificar rápidamente los elementos P0 relevantes para el cambio
- Si los cambios afectan el color/tipografía/diseño → comprobar los elementos P0 relacionados
- Entregar
No apto para Vía Rápida: Páginas completas nuevas, cambios que abarquen 3+ secciones, ajustes de paleta de colores, cambios de estilo general.
📋 Proceso Feihong de 8 Pasos · 完整8步工作流
Paso 01 — Descubrir · 洞察需求 (Triaje Adaptativo)
Antes de comenzar, evalúa rápidamente lo que ya se sabe a partir de la entrada del usuario:
- Tipo ¿Claro? (¿Cuál de los 10 escenarios?)
- Audiencia ¿Clara? (¿Para quién es?)
- Escala ¿Conocida? (¿Cuántas pantallas/páginas/tarjetas/diapositivas?)
- Activos ¿Disponibles? (Texto/imágenes/datos/avatar/personaje IP)
- Restricciones ¿Claras? (Imprescindibles, socios de marca, elementos prohibidos)
Reglas de Decisión:
- 4+ elementos claros → Saltar al Paso 03
- 2-3 elementos claros → Preguntar solo las preguntas críticas faltantes
- 0-1 elementos claros → Entrar al Paso 02 para aclaración completa
Paso 02 — Definir · 定调定向 (Aclarar Cuando Sea Necesario)
No hagas mecánicamente las 5 preguntas. Basándote en el Paso 01, pregunta solo las preguntas críticas faltantes.
Preguntas principales a confirmar (selecciona solo las que faltan):
- Tipo (cuando sea incierto): Ofrece 2-3 opciones más probables, no abiertas
- Audiencia (cuando no se mencione): "¿Quién es la audiencia principal?"
- Escala (cuando no se indique): "¿Aproximadamente cuántas pantallas/páginas/tarjetas?"
- Activos (cuando no se proporcione texto): "¿Tienes texto, imágenes o datos preparados?"
- Restricciones (cuando haya necesidades especiales): "¿Hay algún elemento obligatorio o colores de marca del socio?"
Principio de Comunicación: Habla como un diseñador con un cliente, no como quien llena un formulario. Usa lenguaje natural, máximo 2-3 preguntas a la vez. 沟通原则：像设计师跟客户沟通，不像填表。用自然语言，一次最多问2-3个问题。
Paso 03 — Inyectar ADN · 品牌注入 (Leer Especificaciones)
Lectura Obligatoria (cada proyecto):
DNA.md— Memoriza estos elementos esenciales:- 🔴 Valores de color exactos:
#0A2463(Azul Real 55%),#F4D35E(Oro Vintage 30%),#D8315B(Burdeos 15%) - 🔴 Estrategia tipográfica: Playfair Display (serif para encabezados) + Inter (sans para cuerpo) + Cormorant Garamond (citas en cursiva) + JetBrains Mono (código)
- 🔴 Orden de prioridad: Anti-IA > Calidad Artística > Calidez Humana > Ojo de Diseñador
- 🔴 Fondo color crema cálido
#FDFBF6, texto negro tinta#0D1225 - 🔴 Elementos prohibidos clave
- 🔴 Lenguaje de movimiento de
MOTION.md(facilidad, duración, principios)
- 🔴 Valores de color exactos:
Lectura Selectiva (según el tipo de escenario) — lee la especificación del escenario correspondiente antes de trabajar:
| Nº | Escenario | Especificación | Plantilla |
|---|---|---|---|
| 01 | Portfolio / Sitio Personal | scenes/portfolio.md | assets/portfolio.html |
| 02 | Página de Aterrizaje | scenes/landing.md | assets/landing.html |
| 03 | Tutorial / Artículo Largo | scenes/tutorial.md | assets/tutorial.html |
| 04 | Presentación / Diapositivas | scenes/deck.md | assets/deck.html |
| 05 | Caso de Estudio | scenes/case-study.md | assets/case-study.html |
| 06 | Consola / Administración | scenes/console.md | assets/console.html |
| 07 | Tarjetas Sociales | scenes/cards.md | assets/cards.html |
| 08 | Currículum / CV | scenes/resume.md | assets/resume.html |
| 09 | Artículo de WeChat | scenes/wechat.md | HTML en línea |
| 10 | Correo Electrónico / EDM | scenes/email.md | assets/email.html |
Después de leer, debes tener claras 5 cosas:
- ¿Cuál es la estructura/ritmo típico de este escenario?
- ¿Hay restricciones técnicas? (tablas de correo electrónico, estilos en línea de WeChat, Deck a pantalla completa)
- ¿Qué papel juegan los tres colores de la marca en este escenario?
- ¿Cuál es el tono emocional principal? (¿Solemne? ¿Dinámico? ¿Profesional? ¿Artístico?)
- ¿Hay algún tabú específico del escenario?
Paso 04 — Estructurar · 架构搭建 (Elegir Punto de Partida)
Estrategia predeterminada: Comienza desde las plantillas, nunca desde cero. 默认策略：从模板开始改，不从零写。
Las 10 plantillas de escenario — comienza desde la adecuada, nunca desde cero:
| Nº | Escenario | Plantilla | Notas Especiales |
|---|---|---|---|
| 01 | Portfolio | assets/portfolio.html | Cuadrícula de proyectos, primero lo visual, Hero asimétrico, Sello de Cera |
| 02 | Página de Aterrizaje | assets/landing.html | Impulsado por CTA, impacto visual, línea de tiempo, interacción de formulario |
| 03 | Tutorial | assets/tutorial.html | Lectura de formato largo, navegación TOC, barra de progreso, Letra Capitular |
| 04 | Presentación | assets/deck.html | Diapositivas a pantalla completa, navegación por teclado, 16:9, F para pantalla completa |
| 05 | Caso de Estudio | assets/case-study.html | Narrativa Contexto→Desafío→Proceso→Resultado, visualización de datos |
| 06 | Consola | assets/console.html | Panel de administración, barra lateral, Terminal Green, tarjetas KPI, gráficos de datos |
| 07 | Tarjetas Sociales | assets/cards.html | Paginación de retrato 3:4, exportación html2canvas PNG |
| 08 | Currículum | assets/resume.html | Una página A4, apto para impresión, Ctrl+P PDF |
| 09 | HTML en línea | Compatible con WeChat, estilos en línea, sin CSS/JS externos | |
| 10 | Correo Electrónico | assets/email.html | Diseño de tabla, estilos en línea, compatible con Outlook |
Cuándo desviarse de las plantillas:
- La estructura de la plantilla realmente no se ajusta (pero las variables CSS, las importaciones de fuentes y el reinicio base deben permanecer)
- El usuario solicita explícitamente un enfoque de diseño único
- Los tokens de marca (variables CSS
:root), las importaciones de fuentes y los estilos de reinicio base siempre deben conservarse
Principios de modificación de plantillas:
- Conservar las variables CSS
:rootde la plantilla - Conservar las etiquetas
<link>de fuentes - Reemplazar las áreas de contenido, ajustar la estructura de diseño
- No eliminar los reinicios de estilo base
Paso 05 — Componer · 组件编排 (Configuración de Dirección y Diseño)
Este es el paso más crítico contra la salida genérica de IA — la IA ensambla sin dirección. Este paso decide si la salida es "diseño" o "ensamblaje". 这是最容易被跳过但最重要的步骤——AI没有"方向判断"，它直接组装。这一步决定了产出是"设计"还是"组装"。
Antes de llenar los componentes, define 4 decisiones de dirección:
5a. Tono Emocional (elige 1-2 principales)
- Autoridad Soberana · 沉稳权威: Amplio espacio en blanco, Azul Real dominante, oro usado con moderación, titulares serif, animación mínima
- Creativo Dinámico · 活力创意: Oro y burdeos más activos, diseños asimétricos, elementos que rompen contenedores, un poco más de animación
- Editorial Artístico · 艺术画册: Imágenes grandes, texto como elemento visual, imágenes desbordando contenedores, amplio espacio en blanco, paneles oscuros
- Humanista Cálido · 温暖人文: Más cursiva Cormorant, proporción de burdeos ligeramente más alta, tonos cálidos, aparece el personaje IP
- Minimalista Refinado · 专业极简: Color contenido, amplio espacio en blanco, mayor proporción de Inter, precisión geométrica
5b. Estrategia de Hero (elige 1)
- Liderado por lo visual: Imagen grande / IP / abstracto visual como principal, texto mínimo
- Liderado por tipografía: Titular grande + cita destacada como principal, elementos visuales secundarios
- Liderado por retrato: Avatar / personaje IP como pieza central, texto al lado
- Liderado por datos/logros: Números grandes + etiquetas como principal, generando confianza
5c. Elementos Distintivos (elige 1-2 para llevar a través de la página)
- Línea decorativa dorada (debajo de los titulares)
- Grandes numerales decorativos / inglés (fondo de baja opacidad)
- Citas en cursiva serif
- Personaje IP / avatar intercalados
- Puntos dorados para listas / marcadores de línea de tiempo
- Imágenes desbordando contenedores
- Paneles azul profundo rompiendo el ritmo
- Elementos de la Colección Feihong Signature (sello de cera, esquinas de foto, florón ❦, letra capitular, grandes citas)
5d. Planificación del Ritmo
- Total de pantallas/páginas: ___
- Ritmo de densidad: ¿Denso→Espaciado→Denso→Espaciado? ¿O Fuerte→Débil→Fuerte?
- ¿Dónde está la pantalla sorpresa visual?
- ¿Paneles oscuros? ¿Dónde?
Salida de Dirección: No necesitas escribir esto, pero debe estar muy claro en tu mente. Las elecciones de diseño y componentes posteriores sirven a esta dirección.
Luego, selecciona patrones de diseño de components/14-layouts.md para cada sección/página.
Principio fundamental: Cada sección debe usar un diseño diferente. Las elecciones de diseño sirven a la dirección establecida en 5a-5d.
Paso 06 — Firma · 签名点睛 (Relleno de Componentes)
Selecciona los componentes apropiados de los archivos components/.
🔴 Regla Estricta (Nivel P0): Cero estilos HTML predeterminados. 🔴 硬规则（P0级别）：禁止使用任何HTML默认样式。
Requisitos específicos de cero estilos predeterminados:
- ❌
<blockquote>predeterminado (borde izquierdo es genérico de Notion/Feishu) - ❌ Bloques de cita con
border-leftpredeterminados - ❌
<ul>/<ol>sin estilo (debe personalizarse — puntos dorados, numerales serif, iconos personalizados) - ❌ Bordes de
<table>predeterminados - ❌ Enlaces azules subrayados predeterminados
- ❌ Estilos de botón predeterminados (gris, efectos 3D, bordes predeterminados)
- ❌ Estilos de
inputpredeterminados - ❌ Estilos de control de formulario predeterminados
- ✅ Todos los componentes seleccionados de la biblioteca de componentes
- ✅ Componentes no en la biblioteca: diseñados de acuerdo con
DNA.md, nunca el predeterminado del navegador
Puntos de control de inyección de marca:
- Enlaces: Azul Real
#0A2463, hover con subrayado dorado / tinte de fondo - Botones: Primario Azul Real, CTA Burdeos, Secundario Oro delineado/relleno
- Bloques de cita: Grandes citas doradas serif + cursiva Cormorant + línea decorativa dorada
- Marcadores de lista: Puntos dorados o numerales serif Playfair Display
- Etiquetas/Insignias: Relleno dorado (secundario), relleno burdeos (énfasis), fondo claro Azul Real (categoría)
- Titulares: Playfair Display serif, opcional línea corta decorativa dorada debajo
- Divisores: No simple
border-bottom; usar línea delgada dorada + degradado o separadores de punto dorado - Animación (si la hay): Ligera, lenta, contenida,
cubic-bezier(0.16, 1, 0.3, 1), sin rebote
Colección Feihong Signature — muy recomendada para todos los escenarios:
- Letra Capitular (primer párrafo de tutoriales)
- Marginalia (notas al margen del tutorial)
- Sello de Cera (sensación de portfolio / certificación)
- Esquina de Foto (sensación de portfolio / editorial)
- Firma Dorada (finales de artículo / páginas Acerca de)
- Florón ❦ (divisores de sección)
- Insignia de Serie N° (elementos numerados, sensación de edición limitada)
Paso 07 — Refinar · 精工细作 (Autoverificación de Calidad)
Este es el paso más crítico. No lo omitas. 这是最关键的一步，不能跳过。
Verifica contra los estándares de QUALITY.md + DNA.md punto por punto.
🔴 P0 — Sello Requerido · 必过 (Si uno no pasa, debe cambiarse)
- Colores exactos: Busca en el HTML para confirmar que los tres colores son exactamente
#0A2463,#F4D35E,#D8315B, sin aproximaciones - Proporciones de color: Azul Real dominante ~55%, Oro de apoyo ~30%, Burdeos de acento ~15%
- Oro nunca como fondo grande: Solo para énfasis / decoración / resaltado
- Contraste del cuerpo: ≥4.5:1, sin texto del cuerpo dorado sobre fondos claros
- Enfoque de Hero único: Solo un punto focal visual principal
- Adaptación móvil: Diseño <600px razonable, sin superposición/desbordamiento de texto
- Sin cuarto color principal: Verde éxito solo funcional, Terminal Green solo en escenarios de terminal
- Verificación de tabúes: Sin glassmorphism / rebote / texto degradado / brillo de IA / bloques de cita predeterminados
- Cero estilos predeterminados: Todos ul/ol/blockquote/table/button/input/links con marca
- Mezcla Serif + Sans: Titulares Playfair Display, cuerpo Inter, nunca una sola fuente en todo
- Responsive completo: Escritorio + tableta + móvil, usando
clamp() - Los diseños de sección/página difieren: Las áreas adyacentes nunca repiten el diseño
- Uso de
clamp(): Tamaños de fuente clave / espaciado / contenedores usanclamp(), no px duro - Tono coherente: Coincide con la dirección de 5a-5d en toda la página
Paso 08 — Entregar · 最终交付 (Salida Final)
Proporciona la salida final:
- Archivo HTML completo con estilos y scripts en línea incrustados (a menos que se especifique lo contrario)
- Lista de verificación breve: "P0 — todos verificados" o detalles de los elementos marcados para revisión
- Notas: Cualquier desviación de la plantilla, suposiciones realizadas o elementos que necesitan aprobación del cliente
Apéndice: Referencia Rápida de Archivos
| Archivo | Propósito |
|---|---|
DNA.md | Genética de marca: colores, fuentes, principios, prohibiciones |
MOTION.md | Lenguaje de animación: facilidad, duración, directrices |
QUALITY.md | Estándares de puerta de calidad, lista de verificación P0 completa |
components/ | Biblioteca de componentes de UI (~265+ componentes) |
scenes/ | Especificaciones de escenario (10 archivos) |
assets/ | Plantillas HTML de escenario (9 archivos + código en línea para WeChat) |
Stack Técnico
- HTML/CSS puro: Sin marco, sin dependencias npm, sin compilación
- Tailwind CSS (vía CDN): Opcional para creación rápida de prototipos (según
DNA.md) - html2canvas: Para exportación de Tarjetas Sociales
- Variables CSS: Definiciones de color, fuente y espaciado en
:root clamp(): Tipografía fluida y espaciado responsivo- Iconos SVG: Todos los iconos son SVG en línea o de bibliotecas aprobadas