Feihong Design System
Système de Design Haut de Gamme · Manuel de Flux de Travail
Ce document est le système d'exploitation du Feihong Design System. Il définit le processus complet, du besoin à la livraison. 本文件是设计系统的「大脑」，规定了从需求到交付的完整工作流程。
Mission : Produire un travail raffiné artistiquement, reconnaissable comme Feihong, et résolument humain — qui ne semble jamais généré par IA. 核心目标：产出不像AI的、有Feihong品牌辨识度的、艺术且有品质的设计作品。
Dix Scénarios · 十大场景
Les 10 scénarios sont prêts pour la production, chacun avec des spécifications et un modèle complets.
| N° | Scène | Spécification | Modèle | Caractère Principal |
|---|---|---|---|---|
| 01 | Portfolio / Site personnel · 作品集/个人主页 | scenes/portfolio.md | assets/portfolio.html | Hero asymétrique, grille Bento, sceau de cire, look éditorial |
| 02 | Page d'atterrissage · 活动页/落地页 | scenes/landing.md | assets/landing.html | Axé conversion, chronologie, intervenants, formulaires CTA |
| 03 | Tutoriel / Article long · 教程/长文/博客 | scenes/tutorial.md | assets/tutorial.html | Lettrine, progression de lecture, table des matières, typographie de qualité livre |
| 04 | Présentation / Diapositives · 演示文稿/Slides | scenes/deck.md | assets/deck.html | Plein écran, 16:9, navigation clavier, 9 mises en page, F plein écran |
| 05 | Étude de cas · 案例研究/项目复盘 | scenes/case-study.md | assets/case-study.html | Arc narratif, visualisation de données, panneaux sombres |
| 06 | Console / Administration · 后台控制台/仪表盘 | scenes/console.md | assets/console.html | Tableau de bord admin, navigation latérale, Vert Terminal, cartes KPI, graphiques |
| 07 | Cartes sociales · 图文卡片/小红书 | scenes/cards.md | assets/cards.html | Portrait 3:4, pagination, export PNG html2canvas |
| 08 | CV / Curriculum Vitae · 简历/履历 | scenes/resume.md | assets/resume.html | Impression A4, une page, sans animation, Ctrl+P PDF |
| 09 | Article WeChat · 公众号/微信图文 | scenes/wechat.md | HTML en ligne | Styles intégrés WeChat, pas de CSS/JS externes |
| 10 | Email / EDM · 邮件营销 | scenes/email.md | assets/email.html | Mise en page tableau, styles intégrés, compatible Outlook |
Activation · 触发条件
Le système s'active automatiquement lorsque la demande correspond à ces scénarios :
| Mots-clés déclencheurs · 触发关键词 | Type de scène · 场景 |
|---|---|
| Page personnelle, Site personnel, Portfolio, Portfolio, Présentation de projet, Présentation d'œuvre | Portfolio |
| Page d'atterrissage, Page d'événement, Page d'inscription, Page de cours, Lancement | Landing |
| Tutoriel, Enseignement, Vulgarisation, Blog, Page d'article, Article long, Chronique | Tutorial |
| Présentation, diapositives, slides, deck, discours, conférence | Deck |
| Étude de cas, Cas d'étude, Récapitulatif de projet, Processus de conception | Case Study |
| Console d'administration, Page fonctionnelle, Tableau de bord, Page d'outils | Console |
| Carte graphique, Carte sociale, Carte d'ami | Cards |
| CV, Curriculum Vitae | Resume |
| Modèle d'email, EDM, Newsletter, Email d'abonnement | |
| Mise en page WeChat, Article WeChat |
Jugement adaptatif : Pour les modifications simples (par exemple, « changer la couleur d'un bouton », « ajouter une section »), utilisez la Voie rapide. Pour les nouvelles pages / conceptions complètes, utilisez le Processus complet en 8 étapes. 自适应判断：需求简单时走快速路径；新建页面/完整设计走完整8步工作流。
⚡ Voie rapide · 快速路径 (Modifications simples)
Pour :
- Modifications mineures de pages existantes
- Ajustements de composants uniques, remplacements de texte, modifications de couleur
- Modifications locales après retour
- Ajouts de sections uniques
Processus :
- Lire le fichier HTML existant
- Appliquer les modifications conformément aux normes de
DNA.md - Vérification rapide par rapport aux éléments P0 pertinents pour la modification
- Si les modifications affectent la couleur/typographie/mise en page → vérifier les éléments P0 associés
- Livrer
Non pour la voie rapide : Nouvelles pages complètes, modifications couvrant 3+ sections, ajustements de palette de couleurs, changements de style globaux.
📋 Processus Feihong en 8 étapes · 完整8步工作流
Étape 01 — Découvrir · 洞察需求 (Tri adaptatif)
Avant de commencer, évaluez rapidement ce qui est déjà connu à partir de la saisie de l'utilisateur :
- Type clair ? (Lequel des 10 scénarios ?)
- Public clair ? (Pour qui ?)
- Échelle connue ? (Combien d'écrans/pages/cartes/diapositives ?)
- Ressources disponibles ? (Copie/images/données/avatar/personnage IP)
- Contraintes claires ? (Indispensables, partenaires de marque, éléments interdits)
Règles de décision :
- 4+ éléments clairs → Passer à l'étape 03
- 2-3 éléments clairs → Ne poser que les questions critiques manquantes
- 0-1 élément clair → Entrer à l'étape 02 pour clarification complète
Étape 02 — Définir · 定调定向 (Clarifier si nécessaire)
Ne posez pas mécaniquement les 5 questions. Sur la base de l'étape 01, ne posez que les questions critiques manquantes.
Questions principales à confirmer (sélectionnez uniquement ce qui manque) :
- Type (en cas d'incertitude) : Proposez 2-3 options les plus probables, pas ouvertes
- Public (lorsqu'il n'est pas mentionné) : « Qui est le public principal ? »
- Échelle (lorsqu'elle n'est pas précisée) : « Approximativement combien d'écrans/pages/cartes ? »
- Ressources (lorsqu'aucune copie n'est fournie) : « Avez-vous préparé du texte, des images ou des données ? »
- Contraintes (en cas de besoins spéciaux) : « Y a-t-il des éléments obligatoires ou des couleurs de marque partenaire ? »
Principe de communication : Parlez comme un designer avec un client, pas comme en remplissant un formulaire. Utilisez un langage naturel, max 2-3 questions à la fois. 沟通原则：像设计师跟客户沟通，不像填表。用自然语言，一次最多问2-3个问题。
Étape 03 — Injecter l'ADN · 品牌注入 (Lire les spécifications)
Lecture obligatoire (chaque projet) :
DNA.md— Mémorisez ces éléments essentiels :- 🔴 Valeurs de couleur exactes :
#0A2463(Bleu Royal 55%),#F4D35E(Or Vintage 30%),#D8315B(Vin Rouge 15%) - 🔴 Stratégie typographique : Playfair Display (titres serif) + Inter (corps sans-serif) + Cormorant Garamond (citations italiques) + JetBrains Mono (code)
- 🔴 Ordre de priorité : Anti-IA > Qualité artistique > Chaleur humaine > Regard du designer
- 🔴 Fond crème chaud
#FDFBF6, texte noir encre#0D1225 - 🔴 Éléments interdits clés
- 🔴 Langage de mouvement de
MOTION.md(assouplissement, durée, principes)
- 🔴 Valeurs de couleur exactes :
Lecture sélective (par type de scène) — lisez la spécification de scène correspondante avant de travailler :
| N° | Scène | Spécification | Modèle |
|---|---|---|---|
| 01 | Portfolio / Site personnel | scenes/portfolio.md | assets/portfolio.html |
| 02 | Page d'atterrissage | scenes/landing.md | assets/landing.html |
| 03 | Tutoriel / Article long | scenes/tutorial.md | assets/tutorial.html |
| 04 | Présentation | scenes/deck.md | assets/deck.html |
| 05 | Étude de cas | scenes/case-study.md | assets/case-study.html |
| 06 | Console / Administration | scenes/console.md | assets/console.html |
| 07 | Cartes sociales | scenes/cards.md | assets/cards.html |
| 08 | CV | scenes/resume.md | assets/resume.html |
| 09 | Article WeChat | scenes/wechat.md | HTML en ligne |
| 10 | scenes/email.md | assets/email.html |
Après la lecture, vous devez être clair sur 5 choses :
- Quelle est la structure/rythme typique de cette scène ?
- Y a-t-il des contraintes techniques ? (tableaux d'email, styles intégrés WeChat, plein écran de présentation)
- Quel rôle jouent les trois couleurs de marque dans cette scène ?
- Quel est le ton émotionnel principal ? (Solennel ? Dynamique ? Professionnel ? Artistique ?)
- Y a-t-il des tabous spécifiques à la scène ?
Étape 04 — Structurer · 架构搭建 (Choisir un point de départ)
Stratégie par défaut : Commencer à partir de modèles, jamais à partir de zéro. 默认策略：从模板开始改，不从零写。
Tous les 10 modèles de scènes — commencez à partir du modèle approprié, jamais à partir de zéro :
| N° | Scène | Modèle | Remarques spéciales |
|---|---|---|---|
| 01 | Portfolio | assets/portfolio.html | Grille de projets, visuel d'abord, Hero asymétrique, Sceau de cire |
| 02 | Landing | assets/landing.html | Axé CTA, impact visuel, chronologie, interaction de formulaire |
| 03 | Tutoriel | assets/tutorial.html | Lecture longue, navigation TOC, barre de progression, lettrine |
| 04 | Présentation | assets/deck.html | Diapositives plein écran, navigation clavier, 16:9, F pour plein écran |
| 05 | Étude de cas | assets/case-study.html | Récit Contexte→Défi→Processus→Résultat, visualisation de données |
| 06 | Console | assets/console.html | Tableau de bord admin, navigation latérale, Vert Terminal, cartes KPI, graphiques |
| 07 | Cartes sociales | assets/cards.html | Pagination portrait 3:4, export PNG html2canvas |
| 08 | CV | assets/resume.html | Page unique A4, adapté à l'impression, PDF Ctrl+P |
| 09 | HTML en ligne | Compatible WeChat, styles intégrés, pas de CSS/JS externes | |
| 10 | assets/email.html | Mise en page tableau, styles intégrés, compatible Outlook |
Quand s'écarter des modèles :
- La structure du modèle ne convient vraiment pas (mais les variables CSS, les importations de polices, la réinitialisation de base doivent rester)
- L'utilisateur demande explicitement une approche de conception unique
- Les jetons de marque (variables CSS
:root), les importations de polices, les styles de réinitialisation de base doivent toujours être préservés
Principes de modification des modèles :
- Préserver les variables CSS
:rootdu modèle - Préserver les balises
<link>de police - Remplacer les zones de contenu, ajuster la structure de mise en page
- Ne pas supprimer les réinitialisations de style de base
Étape 05 — Composer · 组件编排 (Définition de la direction et mise en page)
C'est l'étape la plus critique contre la sortie générique de l'IA — l'IA assemble sans direction. Cette étape décide si la sortie est « conception » ou « assemblage ». **这是最容易被跳过但最重要的步骤——AI没有