Huashu Design (Claude Skill) — Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

20 kodifizierte Designprinzipien (Kontrast, Rhythmus, Modularität, …)
5-dimensionaler Review: Layout / Typografie / Farbe / Bewegung / Inhalt
MP4-Export via Headless-Rendering für animierte Deliverables
High-Fidelity-Prototyp-Modus — pixelgenaue Zielgenauigkeit
Funktioniert mit beliebigem Framework oder reinem HTML

Live-Demo

In der Praxis

bereit

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "huashu-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ],
      "_inferred": true
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "huashu-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/alchaincyf/huashu-design",
        "~/.claude/skills/huashu-design"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "huashu-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/alchaincyf/huashu-design",
          "~/.claude/skills/huashu-design"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add huashu-design-skill -- git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Huashu Design

Schnell eine Produkt-Landingpage in HTML prototypisieren

👤 Gründer und Designer, die Code gegenüber Figma bevorzugen ⏱ ~60 min intermediate

Wann einsetzen: Du hast ein Brief und willst einen klickbaren, messbaren Prototyp — keinen statischen Mock.

Voraussetzungen

Skill installiert — git clone https://github.com/alchaincyf/huashu-design ~/.claude/skills/huashu-design

Ablauf

Stil verankern

Nutze huashu-design. Brief: minimale B2B-SaaS-Landingpage, Schweizer Einfluss, Serifen-Überschriften, eine Akzentfarbe. Layout-Plan gemäß deinen 20 Prinzipien generieren.✓ Kopiert

→ Layout-Plan zitiert konkret angewendete Prinzipien
Bauen

HTML/CSS erstellen. Einzelne Datei. Responsive. Keine JS-Frameworks.✓ Kopiert

→ Einzeldatei-Deliverable, das grundlegende Barrierefreiheit besteht
5-dim-Review

5-dimensionalen Review über das Gelieferte ausführen. Wo fällt es kurz?✓ Kopiert

→ Kritischer Selbst-Review, kein Marketing-Sprech

Ergebnis: Ein Prototyp, den du A/B-testen oder iterieren kannst, ohne den Code zu verlassen.

Fallstricke

Skill verfällt auf generisches „Hero + Features + CTA“-Template — Stilreferenz (Schweizer, Bauhaus, Editorial) in jeden Prompt einpinnen

Kombinieren mit: filesystem

Animiertes Erklärvideo bauen und als MP4 exportieren

👤 Entwickler und Creator, die ein Produktvideo erstellen ⏱ ~120 min advanced

Wann einsetzen: Du willst ein 30-Sekunden-Erklärvideo für dein Produkt, kannst After Effects aber nicht rechtfertigen.

Ablauf

Storyboard

Nutze huashu-design. Storyboard für ein 30s-Erklärvideo meines Produkts: Problem (8s) / Lösung (14s) / CTA (8s).✓ Kopiert

→ Frame-für-Frame-Plan
In HTML animieren

Jede Szene als CSS-Keyframe-Animation implementieren. Als einzelnes HTML mit Timeline rendern.✓ Kopiert

→ HTML spielt sauber im Browser ab
Exportieren

Als 1080p-MP4 rendern.✓ Kopiert

→ MP4 auf Disk geschrieben; Länge stimmt

Ergebnis: Aus einem Prompt heraus ein shippe-bereites MP4-Erklärvideo, ohne Videobearbeitungssoftware.

Fallstricke

Schriftarten rendern in Headless Chrome anders — Web-Schriftarten einbetten; nicht auf Systemschriftarten vertrauen

Kombinieren mit: filesystem · after-effects

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

huashu-design-skill + after-effects

In HTML storyboarden, in AE für Broadcast-Qualität fertigstellen

In huashu-design entwerfen; Frames für AE-Compositing exportieren.✓ Kopiert

huashu-design-skill + filesystem

Iterationen neben dem Brief speichern

/designs/landing-v1/ bis v3/ erstellen und alle behalten.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen
plan_layout	brief, style_ref	Bei jedem neuen Design
generate_html	plan	Aus Plan heraus bauen
review_5d	html	Selbst-Review nach dem Bauen
render_mp4	html, duration	Animiertes Deliverable

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: k. A.
Tokens pro Aufruf: High-Fidelity-Designs produzieren viel HTML — Umfang eng halten
Kosten in €: Kostenlos
Tipp: In kleinen Durchläufen generieren: erst Struktur, dann Styling, dann Feinschliff

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: filesystem-write

Credential-Speicherung: Keine

Datenabfluss: Keine

Fehlerbehebung

Häufige Fehler und Lösungen

MP4-Rendering schlägt fehl (ffmpeg fehlt)

brew install ffmpeg — der Skill nutzt es für Frame-Zusammensetzung

Prüfen: `ffmpeg -version`

Design wirkt generisch

Du hast keine Stilreferenz eingebunden — immer eine nennen (Schweizer, Bauhaus, Pentagram, …)

Review gibt positives Feedback für schlechtes Design

Expliziter Prompt: „be critical; list what's wrong first“

Alternativen

Huashu Design vs. andere

Alternative	Wann stattdessen	Kompromiss
cc-frontend-skill	Du willst eine eigenwillige Stimme statt einer Methodik	Weniger strukturierter Review-Prozess
Figma	Der Team-Workflow erfordert Figma	Kein Code; nicht auf dieselbe Weise animierbar

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen