Zur Nutzungsanleitung springen
huashu-designvon alchaincyf

Huashu Design Skill.

Ein Skill für Claude Code und Codex für UI-Design: hochauflösende HTML-Prototypen, Folien, Animation und Visualisierungen; beginnt mit drei Entwürfen.

  • Web & UI
  • HTML
alchaincyf/huashu-design · SKILL.mdSKILL.md
--- name: huashu-design description: 花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选(指定风格/品牌也不豁免),选定后才执行。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。 --- ## 你是谁 ## 使用前提 ## 任务路由:一张表定入口 ## 核心原则 #0 · 事实验证先于假设(优先级最高,凌驾所有其他流程) ## 核心哲学(优先级从高到低) ## 设计方向顾问(Fallback 模式)
Front Matter und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 33.602 Zeichen insgesamt

01 Was es tut

Was der huashu-design Skill in Claude Code und Codex tut

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Huashu-Design verwandelt einen Agent in ein HTML-basiertes Design-Studio für hochwertige Prototypen, Präsentationen, Motion-Demos und Visualisierungen. Vor jeder neuen visuellen Arbeit erzwingt es drei unterschiedliche Richtungsentwürfe (selbst wenn ein Stil oder eine Marke vorgegeben ist), damit der Nutzer aus tatsächlich gerenderten Optionen wählt statt eine einzige von der KI vorgegebene Antwort zu erhalten.

Es führt ein Brand-Asset-Protokoll (Logos, Produktfotos, echte Farbwerte) aus, statt zu raten, verifiziert sachliche Aussagen über Produkte per WebSearch vor dem Design und wendet explizite Anti-AI-Slop-Regeln für Farben, Icons, Karten und Bildmaterial an. Es ist nicht für produktive Web-Apps oder backend-getriebene Systeme gedacht.

Was er erzeugt

  • Beschreibend benannte HTML-Design-Dateien, bei starker Überarbeitung versioniert
  • Mehrseitige HTML-Präsentation mit einer Übersichtswand, automatisch nach PDF exportiert und optional als editierbares PPTX
  • MP4-Animationsexporte standardmäßig mit BGM und SFX
  • Gate-Dateien wie brand-spec.md und direction-approved.md, die Assets und die vom Nutzer gewählte Richtung dokumentieren
Siehe Beispiel-Prompt ↗

So funktioniert es

  1. 01
    Fakten zuerst prüfen

    Bevor der Agent etwas gestaltet, das mit einem echten Produkt, einer Technologie oder einem Ereignis verbunden ist, muss er dessen Existenz, Veröffentlichungsstatus, Version und Spezifikationen per WebSearch prüfen, statt sich auf sein Trainingswissen zu verlassen.

  2. 02
    Die Aufgabe routen

    Eine Signaltabelle ordnet Aufgabenhinweise (Markenname, Slide/PPT, Animation/Export, App/iOS-Prototyp, Kritik) dem richtigen Einstiegspunkt und der passenden Referenzdatei zu, bevor die Arbeit beginnt.

  3. 03
    Den Drei-Richtungen-Fallback ausführen

    Jede Aufgabe, die neue visuelle Inhalte erzeugt, durchläuft Phase 1-6: Bedarf klären, das Briefing zusammenfassen, eine Design-Spezifikation festlegen, echte Bilder beschaffen, drei parallele Design-Logiken erzeugen und dann auf die Auswahl des Nutzers warten.

  4. 04
    Die fünf Formfragen beantworten

    Für jede Seite oder jeden Shot muss der Agent narrative Rolle, Betrachtungsdistanz, visuelle Temperatur, Inhaltskapazität und visuelles Motiv beantworten, bevor er das Designsystem aufbaut.

  5. 05
    Mit Verifikation exportieren

    Animationen werden standardmäßig mit BGM und SFX als MP4 gerendert und per ffprobe auf einen Audiostream geprüft; Präsentationen werden automatisch nach PDF und optional als editierbares PPTX exportiert.

02 Finden Sie Ihren Favoriten

Wann Sie den huashu-design-Skill verwenden

Das huashu-design-Skill in Claude Code oder Codex verwenden, wenn die Aufgabe UI-Design dieser Art ist. Passform und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

  • Interaktive High-Fidelity-Produktmockups, die der Nutzer durchklicken und deren Ablauf er nachvollziehen kann
  • 1920x1080 HTML-Foliensätze, die wie eine PPT funktionieren sollen
  • Timeline-basiertes Motion Design, das als Videomaterial oder Konzept-Demo verwendet wird
  • Druckreife Infografiken und datengetriebene Visualisierungen
  • Mehrere Designrichtungen nebeneinander vergleichen oder mit Tweaks feinabstimmen

Grenzen kennen

  • Produktionsreife Web-Apps oder Systeme, die ein Backend benötigen, liegen außerhalb des Umfangs
  • SEO-Websites und dynamische, backend-gestützte Systeme laufen nicht über diesen Skill

Was Sie bereitstellen sollten

  • Checkliste für MarkenassetsLogo, Produktbilder, UI-Screenshots, Farbpalette, Schriften und Sperrzonen werden vor der Suche in offiziellen Kanälen gesammelt in einem Durchgang abgefragt.
  • Stil- oder MarkenreferenzEine bevorzugte Website-URL, ein Screenshot oder ein Produkt, dessen Anmutung getroffen werden soll; existiert keine, arbeitet der Agent mit einer benannten Annahme weiter.
  • Vorhandenes Design System oder CodebaseDer Agent prüft zunächst, ob ein Design System, UI-Kit, Codebase oder Figma existiert, bevor er ein Hi-Fi-Design von Grund auf erstellt.

03 Innerhalb des Skills

Regeln, die der huashu-design Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

  1. Das Drei-Richtungen-Gate Ist Zu 100 % Verpflichtend

    Jede Aufgabe, die neue visuelle Elemente erzeugt, muss drei unterschiedliche Richtungsentwürfe vor der Ausführung zeigen, selbst wenn der Nutzer einen Stil oder eine Marke vorgibt; nur drei enge Ausnahmen gelten.

  2. Das Logo Ist Ein Pflicht-Asset

    Zeigt ein Design einen erkennbaren Produkt- oder Markennamen, ist das Abrufen des offiziellen Logos verpflichtend, nicht optional, und zwar so viele Logos, wie Produkte vorkommen.

  3. Platzhalter Statt Schlechter Ausführung

    Fehlende Icons erhalten einen grauen Block plus Textlabel statt eines schlecht gezeichneten SVGs; fehlende Daten erhalten einen ehrlichen Kommentar, niemals erfundene Zahlen.

  4. Keine Füllinhalte

    Jedes Element muss seinen Platz verdienen; leerer Raum wird durch Komposition gelöst, nicht durch erfundene Statistiken, Icons auf jeder Überschrift oder Verläufe überall.

  5. Bekannte AI-Slop-Muster Vermeiden

    Violette Verläufe, Emoji-Icons, abgerundete Karten mit farbigem linkem Rand-Akzent und KI-gezeichnete SVG-Menschen/Gesichter werden als typische KI-Standardmuster markiert, die zu vermeiden sind, außer die Marke selbst nutzt sie.

  6. React-Scoping-Beschränkungen

    Nie ein Style-Objekt const styles = {...} nennen, da mehrere Komponenten kollidieren; Komponenten müssen über Script-Tags per Object.assign(window, {...}) exportiert werden.

  7. Animations-Exporte Sind Standardmäßig Audio

    Bei HTML-Animationen wird standardmäßig als MP4 mit BGM und SFX ausgeliefert; eine stumme Version gilt als unfertiges Ergebnis, sofern der Nutzer nicht ausdrücklich keinen Ton verlangt.

  8. Decks standardmäßig als Mehrdateien-Struktur mit Overview Wall

    Foliensätze bestehen standardmäßig aus mehreren HTML-Dateien plus assets/deck_index.html als Übersicht; eine Einzeldatei-Architektur ist nur für minimalistische Pitches mit ≤5 Seiten geeignet, die ausdrücklich keine Übersicht benötigen.

04 In Betrieb nehmen

huashu-design in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

huashu-design zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

Generische skills-CLI-Form für SKILL.md; das Repository kann einen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

Passen Sie diesen Prompt mit Ihren eigenen Inhalten und Vorgaben an und führen Sie ihn dann in Claude Code oder Codex aus.

Example prompt
做个咖啡主题的 PPT

Quelle: SKILL.md-Beispiel (wörtlich).

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

  • Vor der Auslieferung einen Playwright-Screenshot erstellen und Konsolenfehler prüfen
  • Das Ergebnis vor der Auslieferung persönlich im Browser ansehen, da von KI geschriebener Code oft Interaktionsfehler enthält
  • Drei Playwright-Klicktests an App-Prototypen durchführen (Detailansicht, wichtiger Hotspot, Tab-Wechsel) ohne pageerror
  • Lesbarkeits-Mindestwerte prüfen: Fließtext mindestens 14px, Beschriftungen mindestens 12px, Kontrast mindestens 4,5:1

In OpenDesign importieren Sie huashu-design über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Repository
github.com/alchaincyf/huashu-design Branch master
Skill-Datei
SKILL.md Inhaltsprüfsumme bei Verifizierung erfasst; Commit a790f70
License
MIT Aus LICENSE.
Repository-Sterne
24.121 GitHub-Snapshot vom 14.09.2026 für das gesamte Repository alchaincyf/huashu-design. Keine Bewertung oder Nutzungszahl für huashu-design.
Verifiziert von OpenDesign
14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

  1. 你是谁Stellt den Agent als Studio dar, das sechs Rollen übernimmt: Art Director, Markenrechercheur, Visual/Motion Designer, Ingenieur, Texter.
  2. VoraussetzungenGibt an, welche Ausgabetypen der Skill abdeckt und dass produktive Web-Apps ausgeschlossen sind.
  3. 任务路由:一张表定入口Tabelle, die Aufgabensignale dem passenden Einstiegspunkt und der Referenzdatei zuordnet.
  4. 核心原则 #0 · 事实验证先于假设Verlangt eine WebSearch-Verifizierung von Produktfakten, bevor jegliche Designarbeit beginnt.
  5. 核心哲学(优先级从高到低)Sechs geordnete Prinzipien: vorhandenen Kontext nutzen, vor dem Bauen abstimmen, Varianten liefern, Platzhalter bevorzugen, Füllmaterial vermeiden, AI Slop vermeiden.
  6. 设计方向顾问(Fallback 模式)Definiert den verbindlichen siebenphasigen Prozess, der drei parallele Designrichtungen vor der Umsetzung liefert.
  7. App / iOS 原型专属守则(速查版)Spezifische, übergeordnete Regeln für mobile App-Prototypen zu Architektur, Bildern, Geräterahmen und Klicktests.
  8. 工作流程Nummerierter Standardworkflow mit Checkpoints, Gate-File-Protokoll und Fragevorlagen.
  9. 异常处理Vordefinierte Fallback-Maßnahmen für vage Anfragen, abgelehnte Fragen, widersprüchlichen Kontext und enge Deadlines.
  10. 技术红线(必读 references/react-setup.md)Nicht verhandelbare Implementierungsvorgaben für React/Babel und Stage/Sprite.
  11. Starter Components(assets/下)Listet vorgefertigte Komponenten (deck_index.html, animations.jsx, ios_frame.jsx usw.) auf und wann jede davon zu verwenden ist.
  12. 产出要求Namenskonventionen, Versionierung, Dateispeicherort und Anforderungen an die finale Browser-/Playwright-Prüfung.
Die eigene Beschreibung des Skills
„Huashu Design – Erstellen Sie High-Fidelity-Prototypen, Präsentationen, Animationen, Visualisierungen und Experten-Reviews mit HTML. Jedes neue Design beginnt zu 100 % mit drei Entwurfsvarianten zur Auswahl (auch bei vorgegebenem Stil/Brand keine Ausnahme); erst nach der Auswahl wird umgesetzt. Auslöser: Prototyp erstellen, PPT, Präsentation, Animation, Design-Stil, Review, HTML-Seite erstellen, UI mockup, MP4/GIF exportieren, etwas Schönes gestalten. Nicht geeignet für produktionsreife Web-Apps oder Systeme, die ein Backend benötigen."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 33.602 Zeichen. Vollständige Datei auf GitHub lesen.

06 Vor der Installation

Fragen zum huashu-design-Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Funktioniert dieser Skill nur in Claude Code?

Nein, der Skill ist als agentenunabhängig beschrieben und funktioniert in Claude Code, Codex, Cursor, Trae, OpenClaw, Hermes Agent oder jedem Markdown-basierten Skill-Agent, mit einem dokumentierten Degraded-Modus für schwächere Runtimes ohne Subagent-Spawning.

Huashu Design

Führen Sie huashu-design bei einer echten UI-Design-Aufgabe aus.

Laden Sie OpenDesign herunter, importieren Sie huashu-design über den SKILL.md-Link, fügen Sie die obige Eingabeaufforderung ein und lesen Sie den Plan vor dem Ergebnis.

Terminal
npx skills add https://github.com/alchaincyf/huashu-design --skill huashu-design

OpenDesign Desktop

Ein Designsystem. Jeder Output unverkennbar deine Marke

Im vollständigen Vibe Design Workspace gelten dieselben Markenregeln für Websites, Slides, interaktive Prototypen, Dashboards, Bilder und HTML-Videos. Verbinde Codex, Claude Code, Cursor und weitere lokale Coding-Agents und gestalte kostenlos.

  • Web, Slides, Prototypen, Dashboards, Bilder und Video
  • 140+ Designsysteme plus die vollständige Vorlagen- und Skill-Bibliothek
  • Lokales Codex und 21+ Coding-Agents verbinden · Kostenlos

Für macOS und Windows