design-html

Convert approved UI mockups into Pretext-Native HTML and CSS.

Updated Mar 31, 2026
One-click install
npx skills add https://github.com/hetsheth-droid/toolbox-template --skill design-html-hetsheth-droid
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/hetsheth-droid/toolbox-template/tree/main/incubating/gstack/design-html
Command: npx skills add https://github.com/hetsheth-droid/toolbox-template --skill design-html-hetsheth-droid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design finalization: turns an approved AI mockup from /design-shotgun into production-quality Pretext-native HTML/CSS with dynamic layouts and computed heights. Proactively suggest when a design has been approved in /design-shotgun to streamline the handoff.

Core Features & Use Cases

  • Automates converting approved mockups into production-ready HTML/CSS.
  • Smart API routing picks the right Pretext pattern for each design type.
  • Proactively suggests HTML implementations after design approvals in /design-shotgun.

Quick Start

Use the design-html skill to generate production HTML from an approved mockup.

Frequently Asked Questions about design-html

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert an approved UI mockup into production-ready HTML?▼

You can automate converting approved UI mockups into production-ready HTML and CSS using this skill. It translates your design into Pretext-native HTML, applying the correct Pretext patterns for each design type and generating dynamic layouts with computed heights.

What is the best way to finalize frontend designs after mockup approval?▼

The best way to finalize frontend designs after mockup approval is to automate the conversion to Pretext-native HTML and CSS. This skill generates ready-to-ship HTML pages with dynamic layouts and computed heights from your approved designs.

Does this design-to-html workflow require access to specific design tools?▼

Yes, this design-to-html workflow requires access to design-shotgun workflows to process approved mockups. It also requires allowed-tools including Bash, Read, Write, Edit, Glob, Grep, Agent, and AskUserQuestion to generate the production HTML output.

Can I use this skill to generate dynamic layouts and computed heights in CSS?▼

Yes, you can generate dynamic layouts and computed heights in CSS with this skill. It translates approved UI mockups into production-quality Pretext-native HTML and CSS, automatically handling layout computations through smart API routing for each design type.

Why does the skill proactively suggest HTML implementation after design approvals?▼

The skill proactively suggests HTML implementation after design approvals to streamline the design finalization handoff. When a mockup is approved in design-shotgun, it immediately prompts conversion into ready-to-ship Pretext-native HTML pages to accelerate the frontend workflow.

When should I not use an automated design-to-html approach for frontend layouts?▼

You should avoid using an automated design-to-html approach when your mockup has not been approved in design-shotgun or when your frontend project does not support Pretext-native HTML patterns. The skill specifically targets approved designs requiring Pretext pattern routing for production output.