html-prototype

HTML Prototype Generation

Generate single-file HTML prototypes that can be opened directly in browser, look like real products, and align with the user's design system.

Important: this skill expects a references/example-tokens.css file with the user's design tokens (colors, fonts, radii, shadows, etc.). Replace it with your own company's tokens before using this skill in production, otherwise all prototypes will share the example brand colors.

When to use

2.1. User asks for: 原型 / mockup / 设计图 / HTML 给前端 / 给前端看的页面。 2.2. User asks to redesign an existing prototype to match a reference design. 2.3. Output is referenced from PRD .md files via file:/// link or [name](prototype/foo.html) markdown link.

Output location

Always save to <PRD-module>/prototype/<page-name>.html, beside the PRD .md file. Create the prototype/ subdirectory if missing.

Naming: <module>-<view>.html (e.g. agent-management.html, reception-detail.html, knowledge-list.html). One file per module is preferred — use page-switching JS to handle multiple states (list / detail / modal). Multiple files only when modules are unrelated.

Tech stack (always these three CDNs, no build)

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=YourFontHere:wght@400;500;600;700&display=swap" rel="stylesheet">

After page load, call lucide.createIcons() to render icons.

Inline the canonical tokens file

Always copy the full contents of references/example-tokens.css (or whatever the user has replaced it with) into the prototype's <style> block at the top. This gives you all CSS variables (--neutral-*, brand scales, semantic tokens, type, spacing, radii, shadows) plus baseline typography.

Then layer prototype-specific component CSS below it, referencing tokens via var(--token) rather than hardcoded hex.

Example skeleton:

<style>
  /* PASTE ENTIRE references/example-tokens.css HERE */
  :root { ... }
  html, body { font-family: var(--font-sans); ... }
  h1, h2, h3 ...

  /* Then prototype-specific components */
  .btn { background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); ... }
  .card { background: var(--card); border: var(--border-100) solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); ... }
</style>

Design System Application

The actual color values, font names, radii, etc. live in references/example-tokens.css. This section is about how to apply them, not what the specific values are.

6.1. Fonts (order matters for CJK + Latin)

If the product supports Chinese, put CJK font FIRST so Chinese characters render natively while Latin characters fall through to the Latin sans:

"PingFang SC", "Geist", "Inter", system-ui, -apple-system, sans-serif

Don't reverse this order — Latin glyphs in PingFang look thin / weak. Adjust based on your tokens file.

Body: 16px / 24px line-height (--text-base / --lh-base). Use var(--text-sm) (14/20) for compact UI like sidebars or table cells.

6.2. Tailwind CDN preflight conflict

Tailwind CDN injects @layer base { h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; } } AFTER your <style> block. This kills semantic heading styles unless you use !important on the base typography rules:

h1,.h1 { font-size: var(--text-2xl) !important; ... }
h2,.h2 { font-size: var(--text-xl) !important; ... }