Huashu Design: mit einem Satz ein lieferfähiges HTML-Design erhalten

Für wen

Für alle, die im Assistenten mit einem Satz ein lieferfähiges Design holen wollen. Offizieller Wortlaut: Schreibe einen Satz in deinen agent und erhalte ein Design, das du liefern kannst. Der Repository-Titel positioniert es als HTML-natives Design-skill und deckt High-Fidelity-Prototypen, Folien und Animation ab, dazu zwanzig Designphilosophien, eine Fünf-Dimensionen-Prüfung und MP4-Export.

Besser geeignet ist, wer bereits eine Ein-Satz-Anforderung hat (einen klickbaren Prototyp oder einen vortragbaren Foliensatz) und auf diesem Rechner npx skills add ausführen kann. Ungeeignet, wenn du nur darüber sprechen willst und nicht prüfst, ob das Installationsverzeichnis vollständig ist.

Bevor du startest, musst du den offiziellen Installationsbefehl ausführen können. Offiziell heißt es, es sei agent-übergreifend nutzbar und in mehreren Umgebungen installierbar; diese Liste nicht als sich gegenseitig ausschließenden Geltungsbereich lesen.

Ersten Versuch in 3 Minuten abschließen

Nur den npx-Hauptpfad nutzen. Beim ersten Mal die Installation auf Vollständigkeit prüfen, bevor du entscheidest, ob Dateien erzeugt werden.

Voraussetzung: npm/npx ist bereits auf diesem Rechner. Beim ersten Versuch kein MP4 exportieren und nicht auf einen unbestätigten Pfad schreiben.

Installationsort: im Arbeitsbereich ausführen:

npx skills add alchaincyf/huashu-design

Nach der Installation laut Originaltext einen Blick ins Installationsverzeichnis werfen, zum Beispiel ~/.claude/skills/huashu-design/. Wenn nur SKILL.md da ist und jene Unterverzeichnisse fehlen, ist die skills-CLI zu alt (≤1.5.15 hat den Fehler, nur eine einzelne Datei zu synchronisieren; behoben in 1.5.19). Zuerst die CLI aktualisieren, dann weitermachen. Unterverzeichnisse nicht von Hand nachlegen.

Offizielles Repository:

https://github.com/alchaincyf/huashu-design

Risikoarmer Auslöser: Ist das Verzeichnis vollständig, den Assistenten mit einem Satz eine interaktive Prototyp-Prüfung vorbereiten lassen, statt zuerst ein Video zu exportieren. Original-Lieferung für einen interaktiven Prototyp: Ein-Datei-HTML, echtes iPhone bezel, klickbar, mit Playwright geprüft, etwa 10–15 Minuten. Vor dem Erzeugen den Zielpfad der HTML bestätigen; danach lokal öffnen und die Playwright-Prüfung abschließen, bevor du es als lieferfähig behandelst.

Erfolgssignal: Im Installationsverzeichnis liegt nicht nur SKILL.md, und du hast noch keine unbestätigte Exportdatei geschrieben.

Anwendungsfälle

Fall 1: Klickbarer App-/Web-Interaktionsprototyp. Lieferung als Ein-Datei-HTML mit echtem iPhone bezel, klickbar und mit Playwright geprüft. Für alle, die bereits einen Ein-Bildschirm-Ablauf haben und zuerst einen High-Fidelity-Prototyp sehen wollen. Zuerst den Ausgabepfad bestätigen, dann erzeugen; vor bestandener Prüfung nicht weitergeben.

Fall 2: Vortragsfolien. Originaltext: HTML deck (Vortrag im Browser) plus bearbeitbares PPTX (Textfelder bleiben), etwa 15–25 Minuten. Für alle, die bereits eine Gliederung haben und etwas brauchen, das vortragbar und noch editierbar ist. PPTX schreibt eine Datei; vor dem Erzeugen den Speicherort bestätigen; danach lokal öffnen, die Textfelder prüfen, dann verteilen.

Nutzungsgrenzen

Timeline-Animation exportiert MP4 (25fps / 60fps Interpolation), GIF (palette-optimiert) und BGM, etwa 8–12 Minuten. Dateien sind größer; das nicht als ersten Versuch nutzen.

Der einzige Installationsbefehl ist npx skills add alchaincyf/huashu-design. Ist das Verzeichnis unvollständig, verweist der Originaltext nur auf ein CLI-Versionsproblem; keine anderen Installer erfinden.

Die zwanzig Designphilosophien und die Fünf-Dimensionen-Prüfung stehen nur im Repository-Titel; der hier zitierte Fließtext listet die Einträge nicht. Keine Philosophienamen oder Checklisten nachtragen.

Keine Skill-Pfade nachtragen, die nicht vorkommen, und „überall installierbar“ nicht so lesen, als wären die Schritte für jede Umgebung bereits ausgeschrieben.