用途
pug-ui 用于生成单文件 HTML UI、报告、仪表盘和落地页。它把 Pug 语法写在自编译的 HTML 模板中，由浏览器端编译，最终产出独立 HTML 文件。
主要能力
根据页面类型选择不同的 CSS 框架预设：
| 预设 | 模板 | Gzip | 类名风格 | 适用场景 |
|---|---|---|---|---|
| pico（默认） | template-pico.html | 约 10KB | 无类名 | 大多数页面，token 与能力平衡最佳 |
| bulma | template-bulma.html | 约 66KB | 语义化 | 复杂仪表盘、需要丰富组件 |
| daisyui | template-daisyui.html | 约 57KB+Tailwind | 语义化加工具类 | 标签页、抽屉、轮播、移动优先 |
| minimal | template-minimal.html | 约 3KB | 无类名 | 文字较多的报告、文档、文章 |
不确定时使用 pico，它是新的默认值。所有预设默认使用 Claude Code 浅色主题（暖米色 #EEECE2 加陶土色 #DA7756）。
使用方式
- 从上面的表格中选择一个预设。
- 阅读 assets/template-<preset>.html 确认结构。
- 把它复制到目标路径。
- 替换 <script type="text/pug" id="pug-src"> 内的 Pug 块。
- 设置 <title>。
Claude Code 浅色主题已内置，除非用户明确要求其他主题，否则无需切换。
参考资料
| 文件 | 用途 |
|---|---|
| references/preset-pico.md | Pico CSS 模式及使用时机 |
| references/preset-bulma.md | Bulma 模式及使用时机 |
| references/preset-daisyui.md | daisyUI 模式及使用时机 |
| references/preset-minimal.md | Simple.css 模式及使用时机 |
| references/claude-theme.md | 调色板与覆盖项 |
| references/pug-syntax.md | Pug 速查表（各预设共享） |
硬性规则
- 只在模板的 script 块内写 Pug，绝不写原始 HTML。
- 使用两空格缩进，Pug 对空白敏感。
- 响应式前缀（md:、lg:、hover:）使用 (class="md:grid-cols-3") 这种写法。
- 不要混用预设，不同框架的类名互不兼容。
- 除非用户明确要求，不要切换主题调色板，Claude 主题是默认。
相关
- references/claude-theme.md：调色板说明。
- references/pug-syntax.md：各预设共享的语法。