Feihong Design System

Premium Brand Design System · Arbeitsablauf-Handbuch

Dieses Dokument ist das Betriebssystem des Feihong Design Systems. Es definiert den vollständigen Prozess von der Anforderung bis zur Auslieferung. Dieses Dokument ist das „Gehirn“ des Designsystems und legt den vollständigen Arbeitsablauf von der Anforderung bis zur Auslieferung fest.

Mission: Arbeiten zu produzieren, die künstlerisch verfeinert, eindeutig als Feihong erkennbar und unverkennbar menschlich sind – niemals wie KI-generiert aussehen. Kernziel: Designarbeiten zu produzieren, die nicht wie KI aussehen, die Markenidentität von Feihong haben und künstlerisch und qualitativ hochwertig sind.

Ten Scenes · Zehn Szenarien

Alle 10 Szenarien sind produktionsreif, jeweils mit vollständiger Spezifikation und Vorlage.

N°	Szene · Szenario	Spezifikation · Spezifikation	Vorlage · Vorlage	Kerncharakteristik
01	Portfolio / Persönliche Website · Portfolio/Personal Site	`scenes/portfolio.md`	`assets/portfolio.html`	Asymmetrischer Hero, Bento-Raster, Wachssiegel, redaktionelles Gefühl
02	Landing Page · Landingpage/Event-Seite	`scenes/landing.md`	`assets/landing.html`	Conversionsorientiert, Zeitstrahl, Sprecher, CTA-Formulare
03	Tutorial / Langform · Tutorial/Blog/Langtext	`scenes/tutorial.md`	`assets/tutorial.html`	Initiale (Drop Cap), Lesefortschritt, Inhaltsverzeichnis, buchqualitative Typografie
04	Präsentationsdeck · Präsentationsfolien	`scenes/deck.md`	`assets/deck.html`	Vollbild, 16:9, Tastaturnavigation, 9 Layouts, F für Vollbild
05	Fallstudie · Fallstudie/Projekt-Retrospektive	`scenes/case-study.md`	`assets/case-study.html`	Erzählbogen, Datenvisualisierung, dunkle Paneele
06	Konsole / Admin · Admin-Konsole/Dashboard	`scenes/console.md`	`assets/console.html`	Admin-Dashboard, Seitenleiste, Terminal-Grün, KPI-Karten, Datencharts
07	Social Cards · Grafik-Karten/Xiaohongshu	`scenes/cards.md`	`assets/cards.html`	3:4 Hochformat, Paginierung, html2canvas PNG-Export
08	Lebenslauf / CV · Lebenslauf	`scenes/resume.md`	`assets/resume.html`	A4-Druck, einseitig, keine Animation, Strg+P PDF
09	WeChat-Artikel · WeChat-Offizielles Konto/WeChat-Grafik	`scenes/wechat.md`	Inline-HTML	WeChat-Inline-Stile, kein externes CSS/JS
10	E-Mail / EDM · E-Mail-Marketing	`scenes/email.md`	`assets/email.html`	Tabellenlayout, Inline-Stile, Outlook-kompatibel

Activation · Auslösebedingungen

Das System aktiviert sich automatisch, wenn die Anfrage diesen Szenarien entspricht:

Auslöse-Keywords · Auslöse-Keywords	Szenentyp · Szenario
Persönliche Homepage, persönliche Website, Portfolio, Arbeitsproben, Projektpräsentation, Projektausstellung	Portfolio
Landing Page, Zielseite, Event-Seite, Anmeldeseite, Kursseite, Produkteinführung	Landing
Anleitung, Lehre, Wissenschaftskommunikation, Blog, Artikel-Seite, Langtext, Kolumne	Tutorial
Präsentationsfolien, Folien, Diashow, Deck, Vortrag, Austauschtreffen	Deck
Fallstudie, Case Study, Projekt-Retrospektive, Designprozess	Case Study
Admin-Konsole, Funktionsseite, Dashboard, Verwaltungstool, Werkzeugseite	Console
Grafik-Karten, Xiaohongshu-Grafik, Sozialkarten, Momente-Bilder	Cards
Lebenslauf, CV, Werdegang	Resume
E-Mail-Vorlage, EDM, Newsletter, Abonnement-E-Mail	Email
WeChat-Layout, WeChat-Grafikartikel	WeChat

Adaptives Urteilsvermögen: Für einfache Änderungen (z. B. „ändere eine Schaltflächenfarbe“, „füge einen Abschnitt hinzu“) den Fast Track verwenden. Für neue Seiten / vollständige Designs den vollständigen 8-Schritte-Prozess verwenden. Adaptives Urteilsvermögen: Bei einfachen Anforderungen den schnellen Pfad nehmen; bei neuen Seiten / vollständigen Designs den vollständigen 8-Schritte-Arbeitsablauf verwenden.

⚡ Fast Track · Schnellpfad (Einfache Änderungen)

Geeignet für:

Kleine Änderungen an bestehenden Seiten
Einzelne Komponentenanpassungen, Textersetzungen, Farbtweaks
Lokale Änderungen nach Feedback
Hinzufügen einzelner Abschnitte

Prozess:

Vorhandene HTML-Datei lesen
Änderungen gemäß den Standards von DNA.md vornehmen
Schnelle Überprüfung gegen die für die Änderung relevanten P0-Punkte
Wenn die Änderungen Farbe/Typografie/Layout betreffen → zugehörige P0-Punkte prüfen
Ausliefern

Nicht für Fast Track: Neue vollständige Seiten, Änderungen über 3+ Abschnitte hinweg, Anpassungen der Farbpalette, allgemeine Stiländerungen.

📋 Feihong 8-Schritte-Prozess · Vollständiger 8-Schritte-Arbeitsablauf

Schritt 01 — Entdecken · Anforderungsanalyse (Adaptive Triage)

Bevor Sie beginnen, bewerten Sie schnell, was aus der Benutzereingabe bereits bekannt ist:

Typ klar? (Welches der 10 Szenarien?)
Zielgruppe klar? (Für wen ist es?)
Umfang bekannt? (Wie viele Bildschirme/Seiten/Karten/Folien?)
Assets verfügbar? (Text/Bilder/Daten/Avatar/IP-Charakter)
Einschränkungen klar? (Muss haben, Markenpartner, verbotene Elemente)

Entscheidungsregeln:

4+ Punkte klar → Überspringe zu Schritt 03
2-3 Punkte klar → Frage nur die fehlenden kritischen Fragen
0-1 Punkte klar → Gehe zu Schritt 02 für vollständige Klärung

Schritt 02 — Definieren · Ausrichtung festlegen (Bei Bedarf klären)

Fragen Sie nicht mechanisch alle 5 Fragen. Basierend auf Schritt 01, fragen Sie nur die fehlenden kritischen Fragen.

Kernfragen zur Bestätigung (nur die auswählen, die fehlen):

Typ (bei Unsicherheit): 2-3 wahrscheinlichste Optionen anbieten, keine offene Frage
Zielgruppe (wenn nicht erwähnt): „Wer ist die primäre Zielgruppe?“
Umfang (wenn nicht angegeben): „Ungefähr wie viele Bildschirme/Seiten/Karten?“
Assets (wenn kein Text bereitgestellt): „Haben Sie vorbereiteten Text, Bilder oder Daten?“
Einschränkungen (bei besonderen Anforderungen): „Gibt es obligatorische Elemente oder Partner-Markenfarben?“

Kommunikationsprinzip: Sprechen Sie wie ein Designer mit einem Kunden, nicht wie beim Ausfüllen eines Formulars. Verwenden Sie natürliche Sprache, maximal 2-3 Fragen auf einmal. Kommunikationsprinzip: Wie ein Designer mit einem Kunden kommunizieren, nicht wie ein Formular ausfüllen. Natürliche Sprache verwenden, maximal 2-3 Fragen auf einmal stellen.

Schritt 03 — DNA injizieren · Markeneinbringung (Spezifikationen lesen)

Pflichtlektüre (bei jedem Projekt):

DNA.md — Merken Sie sich diese Essentials:
- 🔴 Exakte Farbwerte: #0A2463 (Royal Blue 55%), #F4D35E (Vintage Gold 30%), #D8315B (Burgundy Wine 15%)
- 🔴 Typografiestrategie: Playfair Display (Serifen-Überschriften) + Inter (serifenlose Fließtexte) + Cormorant Garamond (kursive Zitate) + JetBrains Mono (Code)
- 🔴 Prioritätsreihenfolge: Anti-KI > Künstlerische Qualität > Menschliche Wärme > Designer-Auge
- 🔴 Warmer cremefarbener Hintergrund #FDFBF6, tintenschwarzer Text #0D1225
- 🔴 Wichtige verbotene Elemente
- 🔴 Bewegungssprache aus MOTION.md (Easing, Dauer, Prinzipien)

Selektive Lektüre (je nach Szenentyp) — lesen Sie die entsprechende Szenenspezifikation vor der Arbeit:

N°	Szene	Spezifikation	Vorlage
01	Portfolio / Persönliche Website	`scenes/portfolio.md`	`assets/portfolio.html`
02	Landing Page	`scenes/landing.md`	`assets/landing.html`
03	Tutorial / Langform	`scenes/tutorial.md`	`assets/tutorial.html`
04	Deck / Präsentation	`scenes/deck.md`	`assets/deck.html`
05	Fallstudie	`scenes/case-study.md`	`assets/case-study.html`
06	Konsole / Admin	`scenes/console.md`	`assets/console.html`
07	Social Cards	`scenes/cards.md`	`assets/cards.html`
08	Lebenslauf / CV	`scenes/resume.md`	`assets/resume.html`
09	WeChat-Artikel	`scenes/wechat.md`	Inline-HTML
10	E-Mail / EDM	`scenes/email.md`	`assets/email.html`

Nach dem Lesen müssen Ihnen 5 Dinge klar sein:

Was ist die typische Struktur / der Rhythmus dieses Szenarios?
Gibt es technische Einschränkungen? (E-Mail-Tabellen, WeChat-Inline-Stile, Deck-Vollbild)
Welche Rolle spielen die drei Markenfarben in diesem Szenario?
Was ist der grundlegende emotionale Ton? (Feierlich? Dynamisch? Professionell? Künstlerisch?)
Gibt es szenariospezifische Tabus?

Schritt 04 — Struktur · Architekturaufbau (Startpunkt wählen)

Standardstrategie: Von Vorlagen aus starten, niemals von Null. Standardstrategie: Mit Vorlagen beginnen, nicht von Grund auf neu schreiben.

Alle 10 Szenenvorlagen — von der entsprechenden starten, niemals von Null:

N°	Szene	Vorlage	Besondere Hinweise
01	Portfolio	`assets/portfolio.html`	Projektraster, visuell zuerst, asymmetrischer Hero, Wachssiegel
02	Landing	`assets/landing.html`	CTA-getrieben, visuelle Wirkung, Zeitleiste, Formularinteraktion
03	Tutorial	`assets/tutorial.html`	Langform-Lesung, Inhaltsverzeichnis-Navigation, Fortschrittsbalken, Initiale (Drop Cap)
04	Deck	`assets/deck.html`	Vollbild-Folien, Tastaturnavigation, 16:9, F für Vollbild
05	Fallstudie	`assets/case-study.html`	Kontext→Herausforderung→Prozess→Ergebnis-Erzählung, Datenvisualisierung
06	Konsole	`assets/console.html`	Admin-Dashboard, Seitenleiste, Terminal-Grün, KPI-Karten, Datencharts
07	Social Cards	`assets/cards.html`	3:4 Hochformat-Paginierung, html2canvas PNG-Export
08	Lebenslauf	`assets/resume.html`	A4-Einzelseite, druckfreundlich, Strg+P PDF
09	WeChat	Inline-HTML	WeChat-kompatibel, Inline-Stile, kein externes CSS/JS
10	E-Mail	`assets/email.html`	Tabellenlayout, Inline-Stile, Outlook-kompatibel

Wann von Vorlagen abweichen:

Vorlagenstruktur passt wirklich nicht (aber CSS-Variablen, Schriftimporte, Basis-Reset müssen bleiben)
Benutzer fordert explizit einen einzigartigen Designansatz
Marken-Token (:root CSS-Variablen), Schriftimporte, Basis-Reset-Stile müssen immer erhalten bleiben

Prinzipien für die Vorlagenänderung:

Vorlagen-:root CSS-Variablen beibehalten
Schrift-<link>-Tags beibehalten
Inhaltsbereiche ersetzen, Layoutstruktur anpassen
Basis-Stil-Reset nicht entfernen

Schritt 05 — Komponieren · Komponenten orchestrieren (Richtungsvorgabe & Layout)

Dies ist der kritischste Schritt gegen KI-generische Ausgabe – KI assembliert ohne Richtung. Dieser Schritt entscheidet, ob die Ausgabe „Design“ oder „Assemblierung“ ist. Dies ist der am leichtesten übersehene, aber wichtigste Schritt – KI hat keine „Richtungsbeurteilung“, sie assembliert direkt. Dieser Schritt entscheidet, ob die Ausgabe „Design“ oder „Assemblierung“ ist.

Bevor Komponenten gefüllt werden, definieren Sie 4 Richtungsentscheidungen:

5a. Emotionaler Ton (wählen Sie 1-2 primäre)

Souveräne Autorität: Großzügige Weißräume, Royal Blue dominant, Gold sparsam verwendet, Serifen-Überschriften, minimale Animation
Dynamische Kreativität: Gold und Burgunder aktiver, asymmetrische Layouts, Elemente, die Container durchbrechen, etwas mehr Animation
Künstlerisches Editorial: Große Bilder, Text als visuelles Element, Bilder, die Container überlaufen, großzügige Weißräume, dunkle Paneele
Warme Humanisierung: Mehr Cormorant kursiv, etwas höherer Burgunder-Anteil, warme Töne, IP-Charakter tritt auf
Verfeinerte Minimalistik: Zurückhaltende Farbe, großzügige Weißräume, höherer Inter-Anteil, geometrische Präzision

5b. Hero-Strategie (wählen Sie 1)

Visuell geführt: Großes Bild / IP / abstraktes Visuelles als Primär, minimaler Text
Typografie geführt: Große Überschrift + Pull-Zitat primär, visuelle Elemente sekundär
Portrait geführt: Avatar / IP-Charakter als Mittelpunkt, Text daneben
Daten/Erfolge geführt: Große Zahlen + Kennzeichnungen primär, Vertrauen aufbauen

5c. Signaturelemente (wählen Sie 1-2 zur durchgängigen Verwendung auf der Seite)

Goldene dekorative Linie (unter Überschriften)
Große dekorative Ziffern / Englisch (niedrige Deckkraft im Hintergrund)
Serifen-kursive Pull-Zitate
IP-Charakter / Avatar eingestreut
Goldene Punkte für Listen / Zeitachsenmarkierungen
Bilder, die Container überlaufen
Tiefblaue Paneele, die den Rhythmus durchbrechen
Elemente der Feihong Signature Collection (Wachssiegel, Fotoecken, Fleuron ❦, Initiale (Drop Cap), große Zitate)

5d. Rhythmusplanung

Gesamte Bildschirme/Seiten: ___
Dichterhythmus: Dicht→Sparsam→Dicht→Sparsam? Oder Stark→Schwach→Stark?
Wo ist der visuelle Überraschungsbildschirm platziert?
Dunkle Paneele? Wo?

Richtungsausgabe: Sie müssen dies nicht aufschreiben, aber es muss Ihnen kristallklar sein. Nachfolgende Layout- und Komponentenentscheidungen dienen dieser Richtung.

Wählen Sie dann Layoutmuster aus components/14-layouts.md für jeden Abschnitt / jede Seite.

Kernprinzip: Jeder Abschnitt muss ein anderes Layout verwenden. Layoutentscheidungen dienen der in 5a-5d festgelegten Richtung.

Schritt 06 — Signatur · Akzente setzen (Komponenten füllen)

Wählen Sie geeignete Komponenten aus den components/-Dateien aus.

🔴 Harte Regel (P0-Niveau): Keine Standard-HTML-Stile. 🔴 Harte Regel (P0-Niveau): Die Verwendung von HTML-Standardstilen ist verboten.

Spezifische Null-Standard-Stil-Anforderungen:

❌ Standard <blockquote> (linker Rand ist Notion/Feishu-generisch)
❌ Standard border-left-Zitatblöcke
❌ Nicht gestylte <ul>/<ol> (müssen angepasst werden — goldene Punkte, Serifen-Ziffern, benutzerdefinierte Symbole)
❌ Standard <table>-Ränder
❌ Standard blau unterstrichene Links
❌ Standard-Schaltflächenstile (grau, 3D-Effekte, Standardränder)
❌ Standard-Input-Stile
❌ Standard-Formularsteuerelement-Stile
✅ Alle Komponenten aus der Komponentenbibliothek ausgewählt
✅ Komponenten nicht in der Bibliothek: Design konsistent mit DNA.md, niemals Browser-Standard

Markeninjektions-Checkpunkte:

Links: Royal Blue #0A2463, Hover mit goldener Unterstreichung / Hintergrundton
Schaltflächen: Primär Royal Blue, CTA Burgunder, Sekundär Gold umrandet/gefüllt
Zitatblöcke: Große goldene Serifen-Zitate + Cormorant kursiv + goldene dekorative Linie
Listenmarkierungen: Goldene Punkte oder Playfair Display Serifen-Ziffern
Tags/Badges: Gold gefüllt (sekundär), Burgunder gefüllt (Betonung), Royal Blue heller Hintergrund (Kategorie)
Überschriften: Playfair Display Serifen, optionale goldene dekorative kurze Linie darunter
Trennlinien: Kein einfaches border-bottom; goldene dünne Linie + Verlauf ausgeblendet oder goldene Punkt-Trennzeichen verwenden
Animation (falls vorhanden): Leicht, langsam, zurückhaltend, cubic-bezier(0.16, 1, 0.3, 1), kein Hüpfen

Feihong Signature Collection — für alle Szenarien stark empfohlen:

Initiale (Drop Cap) (erster Absatz von Tutorials)
Marginalie (Tutorial-Seitennotizen)
Wachssiegel (Portfolio / Zertifikatsgefühl)
Fotoecke (Portfolio / Editorial-Gefühl)
Goldene Signatur (Artikelenden / Über-Seiten)
Fleuron ❦ (Abschnittstrennzeichen)
N° Seriennummern-Badge (nummerierte Elemente, limitierte Auflage-Gefühl)

Schritt 07 — Verfeinern · Qualitätskontrolle (Qualitäts-Selbstprüfung)

Dies ist der kritischste Schritt. Nicht überspringen. Dies ist der kritischste Schritt, er darf nicht übersprungen werden.

Prüfen Sie Punkt für Punkt gegen die Qualitätsstandards von QUALITY.md + DNA.md.

🔴 P0 — Siegel erforderlich · Muss bestehen (Wenn ein Punkt nicht besteht, muss er geändert werden)

🟡 P1 — Gold Standard · Sollte bestehen (Hoch empfohlen)

Warm cream Hintergrund #FDFBF6: Auf den meisten Hauptbereichen angewendet; reines Weiß #FFFFFF für kontrastierende Karten/Paneele reserviert
Bildqualität: Bilder sind hochauflösend, nicht verpixelt/niedrige Qualität; Silhouetten-platzhalter sind akzeptabel
Abschnittsrhyhmus: Die 5a-Rhythmusplanung eingehalten? (Dicht/Sparsam abwechselnd)
Goldene Akzenteplazierung: Gold wird strategisch platziert, um Aufmerksamkeit auf Schlüsselelemente zu lenken
Druckoptimierung: Alle 10 Szenarien haben eine gute Druckansicht; console/resume müssen druckoptimierte Ansichten haben
Lesbarkeit auf Mobilgeräten: Zeilenlänge ≤75 Zeichen, Touch-Ziele groß genug (min 44px)

Schritt 08 — Ausliefern · Finale Übergabe & Handoff

Ausgabeprozess

Ausgabe-Datei auswählen: Bestimmen Sie die Ausgabe-Datei basierend auf der Benutzeranfrage
Wenn nicht angegeben: Erstellen Sie index.html im Stammverzeichnis, es sei denn, die Anfrage beinhaltet mehrere Seiten / unterschiedliche Ansichten
Erste Ausgabe erzeugen: Vollständige, einzelne HTML-Datei mit 3 Teilen

3 Teile einer kompletten Ausgabe:

Teil A — Markierter Bereich (Dialog-Spickzettel)
- Option A: „Überspringe diesen Abschnitt zum Lesen des Codes“ → Sie können die Dialogdetails sehen, andere jedoch nicht; HTML-Code unterhalb ausgegeben
- Option B: Anzeigen im Dialog (weniger Code zum Lesen, interaktive Referenz)
Teil B — Haupt-HTML-Datei
- <head>: <title>, <meta> (Viewport/Description/OG), <link> Schriftarten (Google Fonts / lokale), <script> externe Bibliotheken (Font Awesome, AOS, etc.), <style> alle Stile in <style>-Tags (keine separate CSS-Datei)
- <body>: Vollständiger HTML-Inhalt
- <script>: JavaScript für Interaktivität (Navigation, Animation, Filter, Export, etc.)
Teil C — Aktions-Prompt (Nachbereitung, Klärung)
- Nicht erforderlich, wenn die Anfrage vollständig spezifiziert ist
- Wenn die Anfrage unvollständig ist: Verwenden Sie natürliche Sprache, um dem Kunden zu sagen, welche Arbeit benötigt wird und ob Unterstützung benötigt wird

Kritische technische Regeln

Keine Fragmentierung: Geben Sie immer eine einzelne, vollständige HTML-Datei aus. Code nicht aufteilen.
Keine externen Abhängigkeiten (außer diesen):
- Google Fonts (CDN-Links bleiben gültig)
- Font Awesome (CDN-Links bleiben gültig)
- html2canvas (für Karten-Szenario)
- Chart.js / Plotly (für Konsole-/Dashboard-Szenario)
- (Alle anderen Abhängigkeiten in der HTML-Datei bündeln)
Pfade: Vorlagenbilder/Platzhalter verwenden Platzhalter-spezifische Pfade, z. B. assets/images/placeholder.jpg; Benutzer bereitgestellt → entsprechend ersetzen
Szenario-Vorlage beibehalten: Alle ausgewählten Szenenvorlagen müssen ihre Identität nach Änderungen beibehalten. Sie können den Inhalt ändern, aber den visuellen Charakter des Szenarios nicht verlieren.

Ausgabeformat (für Benutzer)

Erste Ausgabe: Geben Sie den vollständigen Code einmal aus. Keine iterative Generierung.

Nach erstem Feedback:

Neue Sitzung öffnen
FEEDBACK.md lesen (wird automatisch im vorherigen Turn generiert)
DESIGN.md lesen (wird automatisch im Initialisierungsturn generiert)
PROGRESS.md lesen (Fortschrittsprotokoll)
Fortsetzung des Arbeitsablaufs, Anwendung von Änderungen basierend auf Feedback

Anhang · Feedback & Qualitätssicherungsprotokoll

FEEDBACK.md Generierungsstandard

Ein separates FEEDBACK.md verwalten, um Benutzerfeedback zu verfolgen. Format:

# Feedback-Protokoll

## Sitzung 1

**Datum**: 2024-01-15

**Feedback**: "Die Landing Page muss mehr Vertrauenselemente haben — Kundenlogos und Erfahrungsberichte hinzufügen."

**Status**: Behindert P0-Designintegrität

**Auswirkung**: Abschnitt 2 umgebaut, Layout von 3-Spalten-Gitter auf 4-Spalten-Gitter geändert

**Aktion**: Hero-Layout von typografiegeführt auf visuell geführt geändert, Kundenlogos in Abschnitt 1 hinzugefügt

**Überprüfung**: Bestanden

DESIGN.md Generierungsstandard

Wird beim ersten Entwurf aus Schritt 1-8 generiert. Format:

# Design-Entscheidungsprotokoll (DESIGN.md)

## Sitzung 1

### Szenarien-Typ
Landing Page

### 5a. Emotionaler Ton
Dynamische Kreativität + Warme Humanisierung

### 5b. Hero-Strategie
Visuell geführt

### 5c. Signaturelemente
- Goldene dekorative Linie (unter Überschriften)
- IP-Charakter / Avatar eingestreut
- Bilder, die Container überlaufen

### 5d. Rhythmusplanung
- Gesamtseiten: 1 Seite, 6 Abschnitte
- Dichterhythmus: Stark→Schwach→Stark→Schwach
- Visueller Überraschungsbildschirm: Abschnitt 3 (Statistik-Dashboard)
- Dunkle Paneele: Abschnitt 4 (Erfahrungsberichte)

### Gewählte Layouts
- Abschnitt 1 (Hero): Splitscreen (Bild + Text)
- Abschnitt 2 (Features): Bento-Raster
- Abschnitt 3 (Statistiken): Zahlen-Reihe
- Abschnitt 4 (Erfahrungsberichte): Karussell

PROGRESS.md Generierungsstandard

Verfolgen Sie den Fortschritt während des gesamten Arbeitsablaufs. Format:

# Fortschrittsprotokoll

## Sitzung 1

**Status**: Ausstehend / In Bearbeitung / Abgeschlossen

**Aktuelle Phase**: Schritt 4 — Struktur

**Nächste Phase**: Schritt 5 — Komponieren

**Blockaden**: Keine

**Notizen**: Wartet auf Kunden, um Assets bereitzustellen; wird mit Platzhaltern fortfahren

---

Abschluss

Dieser 8-Schritte-Prozess ist das Betriebssystem von Feihong Design. Befolgen Sie ihn strikt, und die Ausgabe wird automatisch die Marke Feihong widerspiegeln.

ifeihong/feihong-design-system

Was ist feihong-design-system?

In Ihrer bevorzugten KI fragen

Dokumentation