skills.rest
mulyoved
mulyovedCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-html

Convert approved UI mockups into responsive HTML/CSS using DESIGN.md tokens.

Updated Mar 30, 2026
Search Tags:#automation#design#html#web-standards#design-tools#frontend-engineering#pretext
One-click install
npx skills add https://github.com/mulyoved/awesome-agent-ides --skill design-html-mulyoved
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/mulyoved/awesome-agent-ides/tree/main/.agents/skills/gstack/design-html
Command: npx skills add https://github.com/mulyoved/awesome-agent-ides --skill design-html-mulyoved

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converting design mockups into real, production-ready HTML/CSS is error-prone and slows shipping. This skill automates the translation, ensuring typography, spacing, and components align with official tokens and constraints.

Core Features & Use Cases

  • Convert approved UI mockups into responsive, production-ready HTML/CSS using a Pretext-powered engine.
  • Enforce DESIGN.md tokens (fonts, colors, spacing) to ensure consistent branding across artifacts.
  • Save finalized HTML assets to your design project under ~/.gstack/projects/$SLUG/designs for persistence across branches.

Quick Start

Run the design-html workflow on an approved design to generate a production-ready 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 mockups into production-ready HTML and CSS?▼

To convert UI mockups into production-ready HTML, this skill automates the translation process. It generates responsive HTML/CSS with computed layout while enforcing typography and spacing constraints from your DESIGN.md tokens.

What is the best way to ensure design tokens are applied when generating HTML?▼

To ensure design tokens are applied when generating HTML, this workflow reads your DESIGN.md file for fonts, colors, and spacing. This enforces consistent branding across all finalized static HTML artifacts.

Does the design-html workflow require any external dependencies to run?▼

No, this workflow does not require external dependencies to run. It operates independently using a Pretext-powered engine to translate approved UI mockups into static HTML assets.

How do I save finalized HTML assets to my design project for persistence?▼

Finalized HTML assets are automatically saved to your design project under the ~/.gstack/projects directory. This ensures your generated HTML/CSS files persist securely across different project branches.

Can I use this skill to compute layout and responsive behavior for static HTML?▼

Yes, you can use this skill to compute layout and responsive behavior for static HTML. It applies frontend engineering automation to translate approved mockups into responsive, production-ready HTML/CSS assets.

Why does converting design mockups to HTML manually slow down shipping?▼

Converting design mockups to HTML manually slows shipping because it is error-prone and requires manual verification of typography and spacing. Automating this translation ensures components align with official tokens and constraints.

Related Skills

Explore More Software Engineering Skills→
moasqmoasq
32

design-system

Enforce design tokens via a centralized AppTheme enum for colors, fonts, and spacing.

Community
Advanced
Postpartum-genushyacinthus29Postpartum-genushyacinthus29
8

dotnet-htmlhint

Lint static HTML in .NET projects for DOM structure and attribute validity.

Community
Intermediate
dogekikidogekiki

paper-poster

Redirect users from deprecated LaTeX poster workflows to HTML and CSS pipelines.

Community
Basic
jasonkneenjasonkneen
471

frontend-design

Construct frontend UIs with HTML, CSS, and JavaScript for responsive layouts.

Community
Intermediate