What is the design-html skill?
The gstack design-html skill finalizes a design as HTML and CSS built on Pretext. It accepts approved mockups, CEO plans, design review context or a plain description, then writes pages where text reflows, heights are computed and layouts stay dynamic, with 30KB of overhead and zero dependencies.
design-html is the finalization step among gstack's design skills. Its one line description promises production quality Pretext native HTML and CSS, and its folder includes a vendored pretext.js file that the generated pages inline.
The skill text says text actually reflows, heights are computed and layouts are dynamic. It also quotes 30KB of overhead and zero dependencies, and it writes one page per invocation.
What it can start from
- Approved mockups from the design-shotgun skill in the same collection.
- CEO plans produced by plan-ceo-review.
- Design review context from plan-design-review.
- A plain description from you, when nothing earlier exists.
What it does with the input
- Smart API routing picks the right Pretext patterns for each design type.
- It uses section files for doctrine, Pretext patterns and a detector install offer.
- It writes one page per invocation.
- It asks questions through AskUserQuestion before committing to choices.
Who the design-html skill is for
Best for
- Builders who have an approved mockup and want working HTML and CSS from it.
- Teams that want a small, dependency free page.
- Anyone saying build the design, code the mockup or make design real.
Not for
- Exploring options. The design-shotgun skill handles variants before you finalize.
- A design token pipeline. The skill only offers to extract tokens into DESIGN.md, a file that design-consultation also writes.
Use it with UiChemy
The output here is standalone HTML and CSS, not WordPress blocks. If your end goal is a WordPress site, UiChemy accepts raw HTML, CSS and JS as an input and returns editable WordPress in Elementor, Gutenberg or Bricks. Click Get Started on uichemy.com.
How to install gstack Design HTML Skill: Pretext Native HTML and CSS
git clone --single-branch --depth 1 https://github.com/garrytan/gstack.git ~/.claude/skills/gstack && cd ~/.claude/skills/gstack && ./setupConfirm the tools
The README asks for Claude Code, Git and Bun v1.4.2 or newer. Node.js is required on Windows only.
Install the collection
Run the clone and setup command above. The skill ships inside gstack, so one install adds it with the other skills.
Choose your agent
Plain ./setup targets Claude Code. Add --host codex for Codex, or --host auto for every agent setup detects, and run ./setup --status to see each install.
Call the skill
Run /design-html, or on hosts that use a prefix ask for the gstack prefixed name, as the README table describes for its other skills.
Check that it loaded
Give the agent an approved mockup and ask it to turn this into HTML. It should load design-html, pick Pretext patterns for the design type and write HTML and CSS that includes the bundled pretext.js.
Key features
- Pretext native outputThe description says it generates production quality Pretext native HTML and CSS, so pages are built on the Pretext library bundled in the skill folder.
- Text that reflowsThe skill text says text actually reflows and heights are computed. It uses Pretext relayout for responsive behavior, with breakpoint adjustments at 375, 768, 1024 and 1440 pixels.
- Small footprintSKILL.md quotes 30KB of overhead and zero dependencies. When the vendored bundle is found, the HTML file is fully self-contained with zero network dependencies.
- Smart API routingIt classifies the design into one of five Pretext tiers, from simple layouts and card grids to chat interfaces and complex editorial pages, then names the Pretext APIs it will use.
- Starts from what you haveIt starts from an approved mockup, from a CEO plan or design review notes, or from a freeform description gathered by questions. It uses real content and never placeholder text.
- Framework detectionIf package.json shows React, Svelte or Vue, it asks whether you want vanilla HTML or a framework component, and a follow-up asks for TypeScript or JavaScript.
- Editable and resize aware pagesGenerated pages set contenteditable on text, with a MutationObserver to re-layout after an edit and a ResizeObserver on containers to re-layout on resize.
- Preview and refinement loopIt serves the page with live reload, takes verification screenshots at three viewports, and makes surgical edits with the Edit tool so manual changes are preserved.
- Slop blacklistBy default it avoids purple and blue gradients, gradient text, generic three column feature grids, hero metric rows, stock photo placeholders and emoji as visual elements.
- DESIGN.md extractionIf the repo root has no DESIGN.md, it offers to create one from the colors, fonts, spacing and radius values in the HTML it just built.
Frequently asked questions
What is the gstack design-html skill?
It is the design finalization skill in the gstack collection. It writes production quality HTML and CSS built on Pretext from approved mockups, plans or a plain description, with reflowing text, computed heights and no extra dependencies. It produces one page per invocation.
What is Pretext?
Pretext is the text layout library the skill builds on. Vanilla output inlines the vendored pretext.js from the skill folder, and falls back to an esm.sh import of @chenglou/pretext when that file is missing. Framework output adds @chenglou/pretext to your project dependencies instead.
How do I install design-html?
Install gstack itself. Run the README clone command into your agent's skills folder, then run ./setup from that folder. The design-html skill comes with the collection, so one setup covers every gstack skill, and you can then call it by name.
What should I give it as input?
It accepts approved mockups from design-shotgun, CEO plans from plan-ceo-review, design review context from plan-design-review, or a written description. Its description also says to use it after any planning skill, and to suggest it when a design is approved.
Does it add dependencies to my page?
SKILL.md says 30KB of overhead and zero deps. For vanilla HTML the vendored pretext.js is inlined in a script module, so the file is self-contained. If the vendor file is missing, the page imports Pretext from a CDN and carries a FALLBACK comment.
Which phrases trigger it?
The frontmatter lists build the design, code the mockup and make design real. The description adds finalize this design, turn this into HTML, build me a page and implement this design as requests that call for it, plus speech to text aliases.
Which agents does gstack support?
The README table lists Claude Code at the full tier. Codex CLI, OpenCode, Cursor, Factory Droid, Kiro, GitHub Copilot CLI and Antigravity CLI are experimental, and Slate, OpenClaw, Hermes and GBrain are instruction only installs, so check the table for yours.
What license does gstack use?
The README describes gstack as free, MIT licensed, open source software with no premium tier and no waitlist. It invites you to fork it and make it your own, which covers the design-html skill because it ships inside the same repository.