skills.rest
Z5Jonathan-maker
Z5Jonathan-makerCOMMUNITY
Explore all skills by this author →
GitHub

design

Generate HTML/CSS/SVG mockups from DESIGN.md and run Lighthouse audits.

Updated Aug 23, 2026
Search Tags:#design#visual regression#html prototype#brand tokens#responsive audit#lighthouse a11y#ui ux mockup
One-click install
npx skills add https://github.com/Z5Jonathan-maker/ai-coding-os --skill design-z5jonathan-maker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design
Source: https://github.com/Z5Jonathan-maker/ai-coding-os/tree/main/claude/skills/design
Command: npx skills add https://github.com/Z5Jonathan-maker/ai-coding-os --skill design-z5jonathan-maker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of wasting time iterating on UI/UX without a consistent visual identity by generating self-contained HTML/CSS/SVG mockups from your project’s DESIGN.md and then validating them with visual and accessibility audits.

Core Features & Use Cases

  • DESIGN.md-anchored mockups: Reads the project’s DESIGN.md visual identity contract (brand tokens, typography, spacing, grid, component patterns, motion, and accessibility floor) and generates a single-file, browser-openable visual direction artifact.
  • Fast preview + multi-viewport audit: Opens the mockup for immediate visual review and supports headless Lighthouse/a11y audits plus Playwright multi-viewport screenshot checks to spot regressions early.
  • Iterate toward taste and compliance: Guides follow-up changes across visual fidelity, accessibility, responsiveness, and motion while persisting audit history in checkpoints for later recall.

Quick Start

Ask your AI to “/design <what you want to mock up>” so it reads DESIGN.md, generates an offline-ready mockup, opens it for review, and runs an audit for actionable improvements.

Frequently Asked Questions about design

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

FAQPage Schema
How do I generate UI mockups from a visual identity spec?▼

To generate UI mockups from a visual identity spec, the Skill reads your project's DESIGN.md file containing brand tokens and typography, then produces self-contained, browser-openable HTML/CSS/SVG artifacts under a .design-mocks directory for immediate visual review.

Can I run Lighthouse and accessibility audits on HTML prototypes?▼

Yes, you can run Lighthouse and a11y audits on HTML prototypes. The Skill executes headless audits alongside Playwright multi-viewport screenshot checks to spot visual regressions and validate accessibility compliance across different screen sizes.

What is the best way to iterate on UI design while maintaining brand consistency?▼

The best way to iterate on UI design while maintaining brand consistency is to anchor mockups to a DESIGN.md visual identity contract. This ensures generated HTML/CSS artifacts consistently apply your defined brand tokens, spacing, grid, and motion patterns.

Do I need a DESIGN.md file to create visual mockups?▼

Yes, you need a DESIGN.md file to create visual mockups. The Skill requires reading this visual identity spec first to extract brand tokens, typography, component patterns, and accessibility floors before generating any offline-ready mockup files.

How does visual regression testing work for responsive landing pages?▼

Visual regression testing for responsive landing pages works by running headless multi-viewport screenshot checks through an integrated MCP toolchain. This process captures visual states across different screen sizes to help spot regressions early during design iteration.

What are the limitations of using HTML mockups for design iteration?▼

A limitation of using HTML mockups for design iteration is that artifacts are generated as single-file, browser-openable HTML/CSS/SVG files, meaning complex interactive behaviors or backend data integration are not supported in these offline-ready visual direction artifacts.

Related Skills

Explore More Design & Creative Skills→
gkswls5006-webgkswls5006-web

moai-domain-brand-design

Generate brand-consistent design tokens and accessibility-compliant guidelines for web projects.

Community
Advanced
lucasmccomblucasmccomb

design-review

Capture multi-viewport screenshots and analyze DOM, CSS, and computed styles for design issues.

Community
Advanced
HakiickHakiick

responsive-tester

Validate responsive design across mobile, tablet, and desktop viewports with Playwright.

Community
Intermediate
IsKenKenYaIsKenKenYa
35

ui-visual-validator

Analyze screenshots to validate UI modifications against design mockups and WCAG guidelines.

Community
Advanced