skills.rest
mgher668
mgher668COMMUNITY
Explore all skills by this author →
GitHub

design-html

Convert approved mockups and planning documents into production HTML/CSS.

Updated Apr 13, 2026
Search Tags:#layout#design-system#responsive-design#html-css#pretext#design-to-html
One-click install
npx skills add https://github.com/mgher668/surf-ai --skill design-html-mgher668
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/mgher668/surf-ai/tree/main/.agents/skills/gstack/design-html
Command: npx skills add https://github.com/mgher668/surf-ai --skill design-html-mgher668

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Turning design specs into production-ready HTML/CSS is error-prone and slow. This engine translates approved mockups into deterministic, responsive markup that respects layout constraints and typography, reducing rework and drift.

Core Features & Use Cases

  • Produces production-grade HTML/CSS from design briefs and mockups
  • Enforces Pretext-driven layout rules for consistent sizing and wrapping
  • Supports design-plan inputs like design-shotgun and plan-ceo-review to accelerate handoffs

Quick Start

Generate production-ready HTML/CSS from approved designs or design briefs.

Frequently Asked Questions about design-html

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

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

To convert design mockups into production HTML, this engine translates approved design specs into deterministic, responsive CSS and markup using Pretext-driven rules to ensure layout correctness and reduce handoff drift.

What is Pretext-driven layout in HTML and CSS generation?▼

Pretext-driven layout in HTML generation enforces strict rules for consistent sizing and wrapping, ensuring responsive markup respects original design constraints with deterministic output and zero-dependency tooling.

Does this design-to-HTML conversion require any external dependencies?▼

This design-to-HTML conversion requires zero dependencies, utilizing a self-contained engine to reliably produce production-grade HTML and CSS from approved mockups.

Can I use approved design briefs from planning documents to generate responsive HTML?▼

Yes, you can use approved design briefs and planning documents like design-shotgun and plan-ceo-review as inputs to rapidly generate responsive, production-ready HTML and CSS.

Why does my design-to-HTML handoff have layout drift and errors?▼

Design-to-HTML handoffs often experience layout drift and errors due to manual translation; applying deterministic Pretext-driven rules ensures layout correctness and prevents rework.

Related Skills

Explore More Design & Creative Skills→
zhu637882-stackzhu637882-stack

design-html

Generate production HTML/CSS from mockups and planning documents.

Community
Advanced
AvaTar-ArTsAvaTar-ArTs

frontend-design

Generate responsive HTML/CSS/JS interfaces with accessible, reusable components and distinctive aesthetics.

Community
Advanced
bizzybaebizzybae

design-html

Translate design mockups into HTML and CSS with the Pretext engine.

Community
Advanced
algorithmbasicsalgorithmbasics

design-html

Translate approved design mockups into responsive HTML and CSS.

Community
Advanced