skills.rest
Faeif
FaeifCOMMUNITY
Explore all skills by this author →
GitHub

design-html

Convert approved design mockups into responsive HTML and CSS.

Updated Aug 27, 2026
Search Tags:#design#html#layout#frontend#css#mockups#pretext
One-click install
npx skills add https://github.com/Faeif/linguaquest --skill design-html-faeif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/Faeif/linguaquest/tree/main/.claude/skills/gstack/design-html
Command: npx skills add https://github.com/Faeif/linguaquest --skill design-html-faeif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converting design mockups into accurate, responsive HTML and CSS is time-consuming and error-prone. This Skill automates the translation of approved mockups or design briefs into production-ready HTML/CSS with dynamic layouts and precise sizing, reducing manual handoffs and rework.

Core Features & Use Cases

  • Generate production-ready HTML/CSS from design mockups or from scratch based on a user description.
  • Compute heights and apply responsive layouts, ensuring pages render consistently across devices.
  • Route design types to the appropriate Pretext patterns based on design source (design-shotgun, plan-ceo-review, plan-design-review) or from scratch, enabling hands-off execution for common workflows.

Quick Start

Provide an approved design mockup or a brief to generate production-ready HTML and iterate until the result matches the design.

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 responsive HTML and CSS?▼

You can turn design mockups into production-ready HTML and CSS by providing an approved mockup or design brief for automated translation. The Skill computes heights, applies responsive layouts, and outputs dependency-free code that renders consistently across devices.

What's the best way to generate frontend HTML from scratch based on a design description?▼

The best way to generate frontend HTML from a design description is routing the brief to pattern-based execution to build production-ready HTML/CSS from scratch. This method requires zero external dependencies and creates dynamic layouts directly from your input.

Do I need external CSS frameworks or dependencies to build pages from mockups?▼

You do not need external CSS frameworks or dependencies to build pages from mockups using this approach. It outputs production-ready HTML and CSS built with zero external dependencies, ensuring self-contained frontend code.

Can I use outputs from design review workflows to generate frontend code?▼

Yes, you can use outputs from design review workflows like design-shotgun, plan-ceo-review, or plan-design-review to generate frontend code. The system routes these design sources to appropriate patterns for automated HTML and CSS production.

Why does my HTML layout not match the original mockup sizing?▼

HTML layout mismatches with original mockup sizing often occur due to uncomputed heights or incorrect responsive layout application. Automated mockup translation specifically computes heights and applies dynamic layouts to prevent these sizing discrepancies.

Related Skills

Explore More Design & Creative Skills→
jonkikyjonkiky

design-html

Generate responsive HTML and CSS from design mockups or descriptions.

Community
Advanced
kunalrawat425kunalrawat425

design-html

Generate production HTML/CSS from approved design mockups and planning context.

Community
Advanced
limzivectorlimzivector

design-html

Convert approved design mockups into HTML/CSS code using Pretext patterns.

Community
Intermediate
Azeem-2Azeem-2

frontend-design

Create production-ready frontend interfaces with HTML/CSS/JS or framework components.

Community
Advanced