以 skill 自身的术语
生成生产质量的 HTML/CSS，采用原生 Pretext 文本布局，文本能真正重排、高度动态计算、布局在调整大小时自适应。可基于已批准的原型稿（/design-shotgun）、CEO 计划（/plan-ceo-review）、设计评审上下文或用户描述来工作。根据设计复杂度路由到正确的 Pretext API 层级（简单布局使用 prepare + layout；聊天类 UI 使用 prepareWithSegments + walkLineRanges；书刊式跨页排版使用 layoutNextLine 处理文本环绕障碍物）。
30KB 开销，零依赖。生成自包含的 HTML 文件（内联打包的 Pretext）或框架组件（React/Svelte/Vue）。默认使用原生 HTML，并配备实时刷新服务器以便立即在浏览器中预览。绝不使用 lorem ipsum——从原型稿中提取真实内容，或根据计划生成逼真的文本。
它产出什么
- 独立的 HTML 文件，内嵌预置的 Pretext，包含来自 token 的 CSS 自定义属性、语义化 HTML5、用于实时编辑的 contenteditable + MutationObserver、用于调整大小时重新布局的 ResizeObserver，保存至 ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.html
- 框架组件文件（React TSX/JSX、Svelte、Vue），已将 Pretext 导入项添加到项目依赖中，保存至 ~/.gstack/projects/$SLUG/designs/<screen-name>-YYYYMMDD/finalized.[tsx|svelte|vue]
- 与 HTML 一并存在的 finalized.json 元数据，包含 source_mockup 路径、source_plan 路径、mode（approved-mockup/plan-driven/freeform/evolve）、pretext_tier、框架选择、迭代次数、日期、屏幕名称、分支
- 若用户接受提取建议，则生成 open DESIGN.md 格式的 DESIGN.md 文件，其中包含从生成的 HTML 中提取的 CSS 自定义属性、字体家族、调色板、间距刻度、边框半径、阴影值
工作方式
- 01检测设计上下文并路由
检查来自 /design-shotgun 的 approved.json、CEO 计划、设计变体，或 DESIGN.md 中的 token。
- 02提取实现规格
若有可用的设计二值文件，则对已批准的 PNG 运行 prompt 命令，通过 GPT-4o 视觉提取颜色、排版与布局结构。
- 03智能 Pretext API 路由
将设计归类到不同层级：简单布局使用 prepare + layout 来实现可感知缩放的高度；卡片网格使用同一方式实现自适应尺寸；聊天界面使用 prepareWithSegments + walkLineRanges 来实现紧贴内容的气泡；编辑式排版使用 layoutNextLine 让文字环绕障碍物。
- 04生成原生 Pretext HTML
将内嵌打包的 Pretext（或 CDN 回退）、来自 token 的 CSS 自定义属性、语义化 HTML5、用于实时编辑的 contenteditable + MutationObserver、用于缩放时重排的 ResizeObserver，以及从 mockup 或计划中提取的真实内容写入单个文件。
- 05预览前进行 Slop Gate 扫描
若有可用的设计检测器，则在最终页面完成后进行一次 AI-slop 模式扫描（紫色渐变、雷同的卡片网格、并非源自 mockup 的通用 CTA）。