skills.rest
AlejandroFigini
AlejandroFiginiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

design-html

Generate production-quality HTML and CSS from approved design mockups.

Updated Mar 27, 2026
Search Tags:#frontend#handoff#responsive#html-css#design-html#pretext
One-click install
npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill design-html-alejandrofigini
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-html
Source: https://github.com/AlejandroFigini/artist-portfolio/tree/main/.agent/skills/design-html
Command: npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill design-html-alejandrofigini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design finalization often requires turning static mockups into production-quality HTML and CSS that aligns with the Pretext system, speeding up handoffs and reducing rework.

Core Features & Use Cases

  • Generate semantic, accessible HTML and CSS that faithfully implements approved designs and tokens.
  • Produce responsive layouts compatible with Pretext components and design tokens for consistent UI.
  • Seamlessly hand off ready-to-run markup for integration, QA, and deployment.

Quick Start

Convert the approved mockup into production-ready HTML and CSS using the Pretext HTML generator.

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

To convert design mockups into production-ready HTML and CSS, this Skill generates deterministic, semantically structured markup with consistent typography and spacing tokens directly from your approved design shots.

Does this HTML and CSS generator support responsive layouts and design tokens?▼

Yes, this HTML and CSS generator supports responsive layouts by producing markup compatible with Pretext components and applying consistent design tokens for UI integration.

What is the best way to turn approved design shots into semantic markup for handoff?▼

The best way to turn approved design shots into semantic markup for handoff is using a generator that outputs deterministic, accessible HTML and CSS aligned with your system's spacing tokens.

Can I generate HTML and CSS from scratch based on a text description instead of a mockup?▼

Yes, you can generate HTML and CSS from scratch based on a text description, producing production-quality, semantically structured markup ready for codebase integration without needing a visual mockup.

Do I need design review plans to start generating HTML and CSS code?▼

You do not need design review plans to start generating HTML and CSS code; the Skill accepts CEO plans, design review context, approved mockups, or simple text descriptions as valid input.

Why does my generated HTML and CSS need to align with the Pretext system?▼

Generated HTML and CSS needs to align with the Pretext system to ensure consistent typography, deterministic spacing tokens, and seamless integration into the final codebase without manual rework.

Related Skills

Explore More Design & Creative Skills→
xotongxotong

design-html

Generate production-ready HTML and CSS from mockups, plans, or descriptions.

Community
Advanced
Moshe-shipMoshe-ship
29

raqeeb

Detect and score RTL issues in HTML/CSS with remediation guidance.

Community
Intermediate
zhu637882-stackzhu637882-stack

design-html

Generate production HTML/CSS from mockups and planning documents.

Community
Advanced
marcusgollmarcusgoll
91

mockup-extraction

Extract reusable UI components from approved HTML mockups and map CSS to Tailwind utilities.

Community
Advanced