skills.rest
him55710-sudo
him55710-sudoCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Convert UI design mockups into HTML and CSS with responsive behavior.

Updated Mar 19, 2026
Search Tags:#html#frontend#css#design-tokens#pretext#design-to-html#design-handshake
One-click install
npx skills add https://github.com/him55710-sudo/uni-foli --skill design-html-him55710-sudo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/him55710-sudo/uni-foli/tree/main/.agents/skills/gstack-design-html
Command: npx skills add https://github.com/him55710-sudo/uni-foli --skill design-html-him55710-sudo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts approved UI design mockups into production-grade HTML and CSS with layout fidelity and responsive behavior, so handoffs from design to code are reliable and repeatable.

Core Features & Use Cases

  • Inline Pretext engine integration: either inline the Pretext JS bundle or load via CDN to render production HTML that matches mockups.
  • Design-to-code workflow: supports vanilla HTML output and framework-backed outputs (React, Svelte, Vue) by generating appropriate files and updating dependencies.
  • Design tokens & typography: applies tokens from DESIGN.md to ensure brand consistency across outputs.
  • Artifact storage: saves finalized HTML artifacts under ~/.gstack/projects/$SLUG/designs/ with date-based folders for easy reuse.

Quick Start

Provide an approved design mockup and run the tool to generate a self-contained finalized HTML file.

Frequently Asked Questions about design-html

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

FAQPage Schema
How do I convert UI design mockups into production-grade HTML?▼

To convert UI design mockups into production-grade HTML, you provide an approved design file and the tool generates self-contained HTML and CSS with layout fidelity and responsive behavior, ensuring reliable and repeatable design-to-code handoffs.

Does the generated HTML support frontend frameworks like React or Vue?▼

Yes, the generated HTML supports frontend frameworks like React, Svelte, and Vue. The tool generates the appropriate framework-specific files and updates dependencies alongside standard vanilla HTML output.

How do design tokens work when converting mockups to HTML?▼

Design tokens from your DESIGN.md file are applied during mockup-to-HTML conversion to ensure brand consistency. The tool reads these tokens to standardize typography and styling across all generated HTML outputs.

Can I load the Pretext engine via CDN instead of inlining it?▼

Yes, you can load the Pretext engine via CDN instead of inlining it. The tool supports both inline Pretext JS bundle integration and CDN loading to render production HTML that matches your approved mockups.

Where are finalized HTML artifacts stored after generation?▼

Finalized HTML artifacts are stored under the ~/.gstack/projects/$SLUG/designs/ directory. They are organized into date-based folders within this path for easy access and future reuse.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

uupm-design

Orchestrate brand identity, design tokens, UI styling, and marketing visuals.

Community
Advanced
i3ringiti3ringit
3

figma-design-sync

Detect and fix visual differences between Figma designs and web implementations.

Community
Advanced
westnwestn
1

design-html

Generate production HTML/CSS from design mocks and planning context.

Community
Advanced
giosuetedeschi-specgiosuetedeschi-spec

core-components

Enforce semantic design tokens and centralized components in Next.js UI development.

Community
Intermediate