design-htmlvon Garry Tan

Design HTML Skill.

Ein Claude Code- und Codex-Skill für UI-Design: erzeugt produktionsreife HTML/CSS aus einer vereinbarten Designrichtung.

Web & UI
HTML

OpenDesign herunterladen Anleitung ansehen

garrytan/gstack · design-html/SKILL.mdSKILL.md

--- name: design-html description: Design finalization: generates production-quality Pretext-native HTML/CSS. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)

Front Matter und Abschnittsüberschriften aus der vorgelagerten Datei vom 14.09.2026 · 54.976 Zeichen vollständig

01 Was es tut

Was die design-html Skill in Claude Code und Codex macht

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

Generiert produktionsreifes HTML/CSS mit Pretext-nativem Textlayout, bei dem Text tatsächlich neu umbricht, Höhen dynamisch berechnet werden und Layouts sich bei Größenänderung anpassen. Arbeitet auf Basis freigegebener Mockups (/design-shotgun), CEO-Pläne (/plan-ceo-review), Design-Review-Kontext oder Nutzerbeschreibungen. Leitet je nach Designkomplexität zur passenden Pretext-API-Stufe (einfache Layouts nutzen prepare + layout; Chat-UIs nutzen prepareWithSegments + walkLineRanges; editorielle Doppelseiten nutzen layoutNextLine für Text um Hindernisse).

30 KB Overhead, keine Abhängigkeiten. Erzeugt eigenständige HTML-Dateien (Pretext als Vendor-Code inline eingebettet) oder Framework-Komponenten (React/Svelte/Vue). Standardmäßig Vanilla-HTML mit Live-Reload-Server für sofortige Browser-Vorschau. Nie Lorem Ipsum – extrahiert echten Content aus Mockups oder generiert realistischen Text aus Plänen.

Was er erzeugt

Eigenständige HTML-Datei mit inline eingebettetem Pretext, CSS Custom Properties aus Tokens, semantischem HTML5, contenteditable + MutationObserver für Live-Bearbeitung, ResizeObserver für Relayout bei Größenänderung, gespeichert unter ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html
Framework-Komponentendatei (React TSX/JSX, Svelte, Vue) mit Pretext-Imports, die den Projektabhängigkeiten hinzugefügt werden, gespeichert unter ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]
finalized.json-Metadaten neben dem HTML mit source_mockup-Pfad, source_plan-Pfad, mode (approved-mockup/plan-driven/freeform/evolve), pretext_tier, Framework-Wahl, Iterationszähler, Datum, Screen-Name, Branch
DESIGN.md-Datei im offenen DESIGN.md-Format, falls der Nutzer das Extraktionsangebot annimmt, mit CSS Custom Properties, Schriftfamilien, Farbpalette, Abstandsskala, Border-Radius-Werten und Schattenwerten, extrahiert aus dem generierten HTML

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Design-Kontext erkennen und weiterleiten
Prüft auf approved.json aus /design-shotgun, CEO-Pläne, Design-Varianten oder DESIGN.md-Tokens.
02
Implementierungsspezifikation extrahieren
Wenn ein Design-Binary verfügbar ist, führt einen Prompt-Befehl auf dem freigegebenen PNG aus, um Farben, Typografie und Layout-Struktur per GPT-4o-Vision zu extrahieren.
03
Intelligentes Pretext-API-Routing
Klassifiziert das Design in eine Stufe: einfache Layouts nutzen prepare + layout für resize-fähige Höhen; Card-Grids nutzen dasselbe für Selbst-Sizing; Chat-UIs nutzen prepareWithSegments + walkLineRanges für eng anliegende Bubbles; redaktionelle Spreads nutzen layoutNextLine für Text um Hindernisse.
04
Pretext-native HTML generieren
Schreibt eine einzelne Datei mit eingebettetem Pretext (oder CDN-Fallback), CSS Custom Properties aus Tokens, semantischem HTML5, contenteditable + MutationObserver für Live-Bearbeitung, ResizeObserver für Neuanordnung bei Größenänderung, echtem Inhalt aus Mockup oder Plan extrahiert.
05
Slop-Gate-Scan vor der Vorschau
Wenn ein Design-Detector verfügbar ist, scannt die finalisierte Seite einmal auf AI-Slop-Muster (violette Farbverläufe, identische Card-Grids, generische CTAs, die nicht aus dem Mockup stammen).

02 Finden Sie Ihren Favoriten

Wann der design-html-Skill zu verwenden ist

Verwenden Sie das design-html-Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Sie erstellen ein Dashboard, eine Listing-Seite oder ein Card-Grid, bei dem Karten sich anhand ihres Inhalts ohne fest codierte Höhen selbst dimensionieren müssen
Sie implementieren eine Chat- oder Messaging-UI, bei der sich Bubbles eng an den Text anlegen und die Mindestbreite korrekt berechnet werden muss
Sie finalisieren ein Design, nachdem /design-shotgun ein Mockup freigegeben hat, /plan-ceo-review eine Produktstrategie liefert oder /plan-design-review-Kontext vorhanden ist
Sie erstellen einen redaktionellen Spread, ein Blog-Layout oder eine inhaltsreiche Seite, bei der Text dynamisch um Hindernisse oder Bilder fließen muss

Grenzen kennen

Projekte, die Platzhalterinhalte oder Lorem Ipsum erfordern – der Skill generiert stets echten Inhalt, extrahiert aus Mockups, Plänen oder Nutzerbeschreibungen
Automatisierte Durchläufe ohne menschliche Überprüfung – das Angebot zur Installation des Design-Detectors und die Verfeinerungsschleife erfordern Nutzerentscheidungen über AskUserQuestion

Was Sie bereitstellen sollten

Freigegebenes Design-Mockup-PNGPfad zur freigegebenen Variante aus /design-shotgun, gespeichert in approved.json, oder ein vom Nutzer angegebener PNG-Pfad.
CEO-Plan oder Design-Review-NotizenMarkdown-Datei aus /plan-ceo-review oder /plan-design-review mit Produktvision, UI-Anforderungen, User Flows, Zielgruppe, visuellem Feeling, Inhaltsstruktur.
DESIGN.md-TokensDesign-System-Datei des Repositorys mit Markenfarben, Schriftfamilie, Abstandsskala, Border-Radius, Schattenwerten.
Nutzerbeschreibung für den Freiform-ModusWenn kein Mockup oder Plan vorhanden ist, gibt der Nutzer Zweck/Zielgruppe, visuelles Feeling (dunkel/hell, verspielt/seriös, dicht/luftig), Inhaltsstruktur und Referenzseiten an.
Vorherige finalized.html für den Evolve-ModusBestehendes finalisiertes HTML aus einer vorherigen Sitzung.

03 Innerhalb des Skills

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

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

Immer Pretext für Textlayout verwenden
Selbst wenn das Design einfach aussieht, sorgt Pretext für eine korrekte Höhenberechnung bei Größenänderung. Der Overhead beträgt 30KB. Jede Seite profitiert davon.
Nur echte Inhalte, niemals Platzhaltertext
Wenn ein Mockup vorhanden ist, extrahieren Sie den Text daraus. Im plan-gesteuerten Modus verwenden Sie Inhalte aus dem Plan. Im freien Modus generieren Sie realistische Inhalte basierend auf der Nutzerbeschreibung.
Treue zur Quelle geht vor Code-Eleganz
Wenn ein genehmigtes Mockup vorhanden ist, gleichen Sie es pixelgenau ab. Wenn dafür width: 312px statt einer CSS-Grid-Klasse nötig ist, ist das korrekt.
Chirurgische Änderungen in der Verfeinerungsschleife, niemals neu generieren
Verwenden Sie das Edit-Tool für gezielte Änderungen, nicht das Write-Tool, um die gesamte Datei neu zu generieren. Der Nutzer hat möglicherweise manuelle Änderungen über contenteditable vorgenommen, die erhalten bleiben müssen.
Eine Seite pro Aufruf
Für mehrseitige Designs führen Sie /design-html einmal pro Seite aus. Jeder Durchlauf erzeugt eine HTML-Datei.
AI-Slop-Blacklist standardmäßig aktiv
Vermeiden Sie stets: Lila/Blau-Verläufe, Creme-und-Serif-Paletten, Verlaufstext, generische 3-Spalten-Feature-Grids, identische Karten-Grids, Alles-zentriert-Layouts, Kicker über Überschriften, Hero-Metrik-Zeilen, dekorative Blobs, glühende Kanten, Stockfoto-Platzhalter, generische CTAs, abgerundete Karten mit Schlagschatten, Emoji-Dekoration, generische Testimonials oder Standard-Split-Heroes – außer wenn das genehmigte Mockup eines enthält, DESIGN.md es befürwortet oder der Nutzer explizit danach fragt und der Trade-off einmal genannt wird.

04 In Betrieb nehmen

design-html 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.

design-html 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/garrytan/gstack --skill design-html

Generische skills-CLI-Form für design-html/SKILL.md; das Repository kann seinen eigenen Pfad dokumentieren.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Finalize the design for our [product name] landing page. I have an approved mockup from /design-shotgun at [path to approved.json]. The page needs a hero section with dynamic text that reflows on resize, a 3-card feature grid where cards self-size based on content, and a pricing table. Use our brand colors from DESIGN.md and make sure all text is editable in the browser so I can tweak copy live. Output as vanilla HTML first so I can preview immediately, then I'll ask for a React component version once the design is locked.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Live-Reload-Server gestartet unter http://localhost:PORT/finalized.html, sodass der Nutzer das Fenster in der Größe ändern kann, um zu prüfen, ob der Text dynamisch umbricht, und auf beliebigen Text klicken kann, um zu prüfen, ob das contenteditable-Layout sofort neu berechnet wird
Genehmigtes Mockup-PNG wird während der Verfeinerungsschleife für den visuellen Vergleich inline angezeigt, falls vorhanden; ansonsten ist das Nutzerfeedback während der Schleife die Quelle der Wahrheit für plan-gesteuerte oder freie Modi
Bestätigung des Schriftladens über document.fonts.ready als Gate vor dem ersten prepare()-Aufruf, damit die Textmetriken für die Pretext-Layoutberechnung korrekt sind
Der Nutzer bestätigt 'fertig' / 'so ausliefern' / 'sieht gut aus' / 'perfekt' in der Verfeinerungsschleife, nachdem das Resize-Verhalten und die Live-Textbearbeitung getestet wurden, maximal 10 Iterationen, bevor angeboten wird fortzufahren oder abzuschließen

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

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

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

Author: Garry Tan
Repository: github.com/garrytan/gstack Branch main
Skill-Datei: design-html/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 71f6048
License: MIT Aus LICENSE.
Repository-Sterne: 132.921 GitHub-Snapshot aufgenommen am 2026-09-14 für das gesamte garrytan/gstack-Repository, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszählung für design-html.
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

Wann dieses Skill aufgerufen wirdFunktioniert mit genehmigten Mockups, CEO-Plänen, Design-Review-Kontext oder Nutzerbeschreibungen für produktionsreifes HTML/CSS
Präambel (zuerst ausführen)Führt gstack-skill-start aus, liest STATUS-Zeilen, behandelt den eingeschränkten Modus, folgt GSTACK_INSTRUCTION-Blöcken für Onboarding/Zustimmung
Sichere Operationen im Plan-ModusIm Plan-Modus erlaubte Operationen: codex exec/review, Schreibzugriffe auf ~/.gstack/, Plandatei, open für Artefakte
Skill-Aufruf während des Plan-ModusSkill-Anweisungen sind ausführbar, nicht nur Referenz; AskUserQuestion erfüllt das Ende-der-Runde-Kriterium; ExitPlanMode erst nach Abschluss des Workflows
AskUserQuestion-FormatTool-Auflösung verzweigt je nach SESSION_KIND; spawned wählt automatisch die empfohlene Option; Conductor verwendet Fließtext; Fallback-Behandlung bei Fehlern
Artefakt-Synchronisation (Skill-Start)Reagiert auf die Ausgabe von skill-start: GBrain-Hinweis, ARTIFACTS_SYNC-Status, einmaliges Datenschutz-Zustimmungsgate über GSTACK_INSTRUCTION
Modellspezifischer Verhaltens-Patch (claude)Disziplin bei Todo-Listen, Nachdenken vor umfangreichen Aktionen, dedizierte Tools statt Bash – Präferenzen sind den Skill-Anweisungen untergeordnet
StimmeGStack-Stimme: mit der Kernaussage beginnen, konkrete Details, Entscheidungen mit Nutzerergebnissen verknüpfen, direkt bei Qualitätsfragen, klar begrenzte Abschlüsse
Kontext-WiederherstellungStellt aktuelle Artefakte, Reviews, Timeline, Entscheidungen und den letzten Checkpoint wieder her; schlägt den nächsten Skill vor, falls RECENT_PATTERN einen impliziert
SchreibstilErklärt ausgewählte Fachbegriffe bei erster Verwendung, formuliert Fragen ergebnisorientiert, kurze Sätze im Aktiv, entfällt bei EXPLAIN_LEVEL: terse
Vollständigkeitsprinzip — Boil the OceanKI macht Vollständigkeit günstig; volle Abdeckung empfehlen; Completeness: X/10, wenn sich Optionen im Umfang unterscheiden
VerwirrungsprotokollBei folgenreicher Mehrdeutigkeit STOPPEN, sie benennen, 2-3 Optionen mit Trade-offs präsentieren, nachfragen – nicht bei Routine-Coding

Die eigene Beschreibung des Skills

Design-Finalisierung: generiert produktionsreife Pretext-native HTML/CSS. (gstack)

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

06 Vor der Installation

Fragen zum design-html Skill

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

Funktioniert das mit meinem React/Svelte/Vue-Projekt oder nur mit reinem HTML?

Beides. Schritt 2.5 erkennt Ihr Framework in package.json und fragt, ob Sie reines HTML (eigenständige Vorschaudatei, für den ersten Durchgang empfohlen) oder eine Framework-native Komponente mit Pretext-Hooks möchten. Ohne erkanntes Framework wird standardmäßig reines HTML verwendet. Für die Framework-Ausgabe wählen Sie TypeScript oder JavaScript.

Design HTML

design-html auf eine echte UI-Design-Aufgabe anwenden.

Laden Sie OpenDesign herunter, importieren Sie design-html über den SKILL.md-Link, fügen Sie den Prompt oben ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen