Skill · 按需触发
输入 /design-html 才加载。52KB 完整工作流，从 mockup 到 Pretext-native HTML。
零常驻开销，精准手术。
01核心概念
Plugin · 常驻加载
每次会话自动注入系统提示。42 行美学宣言，大胆字体、非对称构图、锐利点缀。 +52 token 常驻成本，潜移默化。
Agent View · 多会话
按 ← 左箭头进入 dashboard。管理并行会话状态：运行中、等待输入、已完成。 Pro/Max 计划专属，Kimi 中转不可用。
02本质差异
| 维度 | frontend-design Plugin | design-html Skill |
|---|---|---|
| 加载机制 | 常驻加载（每次会话 +52 token） | 按需触发（零常驻开销） |
| 代码量 | 42 行美学指南 | 52KB+ 完整工程规范 |
| 核心能力 | 审美过滤器（大胆、独特、非对称） | 设计工程系统（Pretext 计算布局） |
| 工作流 | 无——只是系统提示词 | 6 步流水线：检测 → 分析 → 路由 → 生成 |
| 输出质量 | 取决于 Claude 的审美发挥 | 精确还原 mockup，文本真重排 |
| 生态集成 | 孤立 | 深度集成 gstack（timeline、learnings） |
03Pretext 演示
这是 design-html 的核心特性：文本使用 Pretext 计算布局，编辑时高度自动重算。 试试点击下方文本，修改内容，观察容器高度如何自适应。
可编辑文本区域
点击编辑 · 高度自动计算 · ResizeObserver 驱动响应式
Skill 是纯按需加载的指令集。你不输入 /skill-name，它完全不参与，零 token 开销。
Plugin 是常驻加载的能力扩展。安装启用后，每次启动 Claude Code 会话都会自动注入。