html-prototypelisted

1. # 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. 2. ## 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. 3. ## 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. 4. ## Tech stack (always these three CDNs, no build) ```html <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="