N° 00 Workflow Bundle · Version 1.0

Design System Rezept.
Genau so, wie es gemacht wurde.

Dieses Bundle enthält den exakten 10-Schritte-Workflow, mit dem das Artsan Design System entstanden ist — als reproduzierbares Rezept für jede andere Marke.

Inhalt

N° 01Alle Dateien im Bundle

Öffnen Sie jede Datei einzeln, um sie zu lesen. Alle Dateien sind reines Markdown oder HTML — keine Abhängigkeiten.

README.md

Willkommensseite und Bundle-Übersicht. Erst lesen.

WORKFLOW.md

Die volle 10-Schritte-Dokumentation. Das Herzstück.

CHECKLIST.md

Häkchen-Liste zum Abarbeiten während der Arbeit.

PROMPTS.md

Copy-paste-fertige Prompts für KI-Assistenten.

FOLDER_STRUCTURE.md

Ziel-Ordnerstruktur mit Erklärung jeder Datei.

templates/SKILL.md.template

Skelett für die Metadaten-Datei.

templates/README.md.template

Skelett für die Marken-Doku.

templates/colors_and_type.css.template

Skelett für alle CSS-Tokens.

templates/preview-card.html.template

Skelett für eine Vorschau-Karte.

templates/ui_kit_component.jsx.template

Skelett für eine JSX-Komponente.

templates/ui_kit_index.html.template

Skelett für das UI-Kit-index.html.

templates/root-index.html.template

Optionale Root-Landing-Page als Übersicht.

N° 02Die 10 Schritte im Überblick

  1. Vorbereitung — Assets sammeln

    Logo, Farbwerte, Fonts, Fotos, Copy-Beispiele in _inputs/ ablegen. Ohne Rohmaterial wird das System generisch.

  2. Materialien lesen und verstehen

    Voice-Regeln, Farb-Palette, Typographie, Layout-Motive in _inputs/decoded.md notieren.

  3. Projekt-Struktur anlegen

    Ordner: assets/, preview/, ui_kits/, fonts/.

  4. Assets kopieren und normalisieren

    Fotos, Logos und Bestandsmaterial an ihre finalen Plätze. Fremdprojekte gehören nicht ins Deliverable.

  5. colors_and_type.css schreiben

    Alle Design-Tokens als CSS-Variablen + semantische Helper (.ds-eyebrow, .ds-h3, .ds-lede).

  6. README.md mit 4 Kernsektionen

    Content Fundamentals, Visual Foundations, Iconography, Fonts. Plus Voice-Beispiele und Index.

  7. 20+ Vorschau-Karten bauen

    Colors, Type, Spacing, Components, Brand — je 700×150–400 px, ein Sub-Konzept pro Karte.

  8. UI-Kit als React/JSX-Komponenten bauen

    Pixel-genaue Recreation des Zielprodukts. Je eine .jsx-Datei pro Sektion, gebündelt in index.html.

  9. Thumbnail erstellen

    Eingefrorene Hero-Ansicht in _thumbnail.html, per Screenshot als thumbnail.png (1280×900) speichern.

  10. SKILL.md schreiben und übergeben

    YAML-Front-Matter + Quick Map + House Rules. Als ZIP verpacken und mit Handover-Notiz übergeben.

N° 03So starten Sie auf Ihrer Maschine

Voraussetzungen: ein Editor (VS Code, Cursor), ein moderner Browser, optional Node.js für lokalen Server und ein KI-Assistent (Cursor, Claude Code, ChatGPT).

# 1. Bundle entpacken
unzip design-system-workflow-bundle.zip
cd workflow_bundle

# 2. Templates in Ihr neues Projekt kopieren
mkdir ~/mein-design-system
cp templates/* ~/mein-design-system/
cd ~/mein-design-system

# 3. Struktur anlegen
mkdir -p assets/products preview reference ui_kits fonts _inputs

# 4. Assets in _inputs/ ablegen (manuell)

# 5. KI-Assistent öffnen und Master-Prompt aus PROMPTS.md einfügen

# 6. Live-Preview per lokalem Server
python3 -m http.server 8000
# → http://localhost:8000

N° 04Der Master-Prompt

Kopieren Sie diesen Prompt in Ihren KI-Assistenten. Er lädt den kompletten Workflow in einem Aufruf.

Ich möchte ein Design System für die Marke "{MARKENNAME}" erstellen.

Kontext:
- Branche/Beschreibung: {1-2 Sätze zur Marke}
- Zielprodukt: {z.B. Marketing-Website, Mobile-App, Katalog}
- Input-Materialien: {Liste, z.B. "Katalog-PDF, 8 Produktfotos, 3 Screenshots"}

Bitte folge dem 10-Schritte-Workflow (siehe workflow_bundle/WORKFLOW.md):
1. Materialien lesen → _inputs/decoded.md
2. Ordnerstruktur anlegen
3. Assets kopieren
4. colors_and_type.css schreiben
5. README.md mit 4 Kernsektionen
6. 20+ Vorschau-Karten in preview/
7. UI-Kit unter ui_kits/{produkt}/
8. thumbnail.png (1280×900)
9. SKILL.md mit YAML-Front-Matter
10. Zusammenfassung mit Caveats + 2-3 Iterations-Fragen

Starte jetzt mit Schritt 1.

Die volle Version mit allen Details finden Sie in PROMPTS.md.

Bundle herunterladen

Der komplette Workflow als ZIP — 12 Dateien, ca. 60 KB.

Download ZIP →