让Claude直接输出Pretext原生HTML/CSS，这个Skill把设计稿变成可交付代码

做过设计的都知道，最怕的就是”设计稿挺好看，实现出来完全不是那么回事”——间距跑偏、字体发虚、动效生硬。Claude Code 配这个 Skill，能把设计稿直接变成可交付的 Pretext 原生 HTML/CSS，而不是一堆 Tailwind 拼接的”能用但丑”的代码。

它到底是什么

design-html 是 gstack 项目里的一个 Claude Code Skill，作者是 Garry Tan。它干的事情很纯粹：接收设计稿或设计描述，输出生产级 Pretext 原生 HTML/CSS。

Pretext 是个出版标记语言，输出结果是语义化、结构化的 HTML，不是 Tailwind 堆出来的 div 汤。文字自动重排、高度计算、动态布局——这些 Tailwind 搞起来很麻烦的事情，它原生支持。Overhead 只有 30KB，零依赖。

怎么触发

直接说人话就行：

• “finalize this design”
• “turn this into HTML”
• “build me a page”
• “implement this design”

或者在配合其他设计类 Skill 用的时候自动触发——比如 /design-shotgun 给出设计方案之后，或者 /plan-design-review 完成设计评审之后。

和其他工具的区别

Cursor、Warp 这些 AI 工具也能生成 HTML，但默认输出基本是 Tailwind + div 堆砌，维护性差，设计系统也不统一。design-html 的核心区别是：

• 输出质量高：Pretext 原生结构，不是随便拼接
• 和生产流程打通：设计→实现路径短，不是”生成一堆代码再手动调”
• 上下文感知：Smart API routing，根据设计类型自动选合适的 Pretext 模式
• 轻量：30KB，零外部依赖，装完就能用

适合谁

如果你经常需要把 UI 设计转换成代码，或者在团队里做设计→开发衔接，这个 Skill 能省不少调整时间。它不是一个 AI 生图工具，而是一个设计实现加速器——设计决策已经做好了，它帮你快速落地成可用的 HTML/CSS。

GitHub 完全开源，Stars 13 万+，更新很活跃。推荐装上试试，特别是你经常被”设计稿和实现差太多”这个问题困扰的话。

https://github.com/garrytan/gstack

GitHub: https://github.com/garrytan/gstack