brief-to-html
便于在实现前进行视觉与交互评审
把屏幕说明转成可交互的 HTML 原型，支持状态切换与深色模式
把经过论证的 screens-brief.md 渲染成交互式 HTML 原型（生成 mockups.html + mockups.data.js），支持点击切换状态和暗黑模式，方便在写前端代码前做视觉与交互评审。用在 /usecase-factory:grill-to-brief 得到屏幕说明后，要把它做成可点交互原型时。外观由指定设计系统驱动，不按 ASCII 布局照搬，保证设计一致性和可读性。
▸ 展开 SKILL.md 英文原文
Render a justified screen brief (screens-brief.md) into an interactive HTML prototype — a fixed engine (mockups.html) plus a content file (mockups.data.js) — so the screen set can be eye-reviewed at real fidelity (clickable tabs, per-screen state switcher, light/dark) before any FE code. The LOOK comes from the brief's intent (purpose, must-show, actions, states, copy, nav & headings) skinned by a REQUIRED design system — never from ASCII art, which anchors the model to an ugly literal layout. The ASCII map (mockups.md), if present, is only a coverage cross-check. Use after /usecase-factory:grill-to-brief lands the screen brief and the user wants to "render the brief to HTML", "make the screens interactive", "turn the brief into a clickable prototype", or "preview the screens with the real design system". Triggers on "brief to html", "render the brief", "interactive prototype", "clickable mockup".
帮我安装这个 skill：https://raw.githubusercontent.com/Tritintruong114/usecase-factory/main/skills/brief-to-html/SKILL.mdcurl -fsSL "https://raw.githubusercontent.com/Tritintruong114/usecase-factory/main/skills/brief-to-html/SKILL.md"# Brief to HTML Render of the Phase-1 screen set. `/usecase-factory:grill-to-brief` produces the justified SPEC (`screens-brief.md`); this turns it into an interactive prototype for eye-review. Still a wireframe, NOT FE code: static markup, no real data, lives in `doc/`. **Why the brief drives the look, not the ASCII.** An ASCII mockup is a precise *low-fidelity* artifact: monospace grid, box-drawing, hard borders. Hand it to a generative renderer and the model faithfully reproduces that ugliness — cramped, boxy, no hierarchy. The screen brief is *intent* (what each screen is for, what it must show, what states it has, what the copy is, what the nav shape is). Intent + a real **design syst