About this skill

Problem

Front-end prototypes often stall between finalized design docs and working code: a DESIGN.md may already define colors, typography, component styles, and layout rules, but hand-assembled single-file pages can miss design tokens, drift visually, or pull in unnecessary frameworks. This skill turns those design rules and page requirements into a directly openable HTML prototype.

How It Works

It reads DESIGN.md first to extract color, typography, component, and layout rules, then uses user prompts or files such as requirements.md and PRD.md to define navigation, sidebars, cards, tables, forms, and charts. The output is one .html file with inlined CSS and JavaScript, requiring no build step and depending only on the ECharts CDN.

Key practices include:

Design tokens as CSS custom properties
Native JavaScript for tabs, hover states, collapsibles, and modals
Inline SVG or Unicode icons
5-10 rows of mock data in tables, forms, and charts

Limits

It is best for quick review of layout, color consistency, and dashboard aesthetics. For production-grade accessibility, real API integration, component-library reuse, or complex state management, use a proper front-end project instead.

Screenshots

Use Cases

Read a project DESIGN.md and PRD to produce a clickable HTML prototype for an admin dashboard.
Generate a single-file dashboard mock with tables, charts, and navigation from requirement notes.
Replicate an ArcoDesign-style UI using DESIGN.md color and typography rules for design review.
Emit a prototype with tabs, modals, mock data, and ECharts charts using design tokens in CSS variables.

Best For

Front-end engineers who need design specs and page requirements turned into reviewable mockups quickly.
Product and design collaborators checking layout, color consistency, and component states.
Independent developers preparing a self-contained demo page before handoff.
Web developers creating enterprise dashboard UI sketches from a DESIGN.md.