实用技能 —— `design-html`

/design-html 技能是一个将AI辅助开发从“模糊的通用对话”升级为“结构化的专业工作流”的核心组件。它不仅仅是将您的需求“翻译”成代码，而是模拟了一个专业设计工程师的角色，遵循一套严谨的方法论来交付生产级的HTML/CSS代码。

它与您一句简单的“请将xxx功能做个单页面html展示”的prompt有着本质区别。

🎯 核心定位与工作流集成

/design-html 并非一个独立技能，而是被设计为GStack专业工作流中的关键一环。它的主要职责是“将模型转化为真正能用的生产级HTML”。一个典型的工作流如下：

设计构思：先通过 /design-shotgun 等技能进行头脑风暴，快速生成多个视觉方案。
方案审查：使用 /plan-design-review 技能对设计稿进行UI/UX评审。
最终实现：在上述步骤产出最终的设计蓝图后，再将“接力棒”交给 /design-html 进行最终的生产级代码实现。

这种角色分离的设计，解决了传统AI编码工具中因开发者身兼多职而导致的“思维模式混杂”问题。

🔧 关键特性解读

该技能之所以能交付“生产级”页面，源于其背后的技术选型和设计原则：

技术选型：基于 Pretext 的“计算”布局
- 核心原理：该技能生成的HTML/CSS并非传统依赖于浏览器DOM渲染，而是基于一个名为 Pretext 的前端布局引擎。Pretext通过纯数学运算来计算布局，避开了浏览器昂贵且耗时的DOM回流（Reflow）过程。
- 显著优势：这种方法可将文字排版速度提升约500倍，并能实现流畅的120 FPS 高级交互模式。最终效果是，页面中的文本会正确重排，元素高度自适应内容，卡片、聊天气泡等组件能完美适应其内部内容，实现真正的动态布局。
核心设计观：以“人”为本的UX原则
该技能内置了一套名为 “UX Principles: How Users Actually Behave” 的设计准则，指导生成的界面更符合用户直觉。这些原则包括：
- 三个可用性法则 (The Three Laws of Usability)：
  1. 别让我思考 (Don't make me think)：每个页面都应是自明的，用户无需停顿思考“该点哪里”或“这是什么意思”。
  2. 点击次数不重要，思考才重要 (Clicks don't matter, thinking does)：三次无需思考的明确点击，胜过一次需要思考的点击。
  3. 删除再删除 (Omit, then omit again)：去掉页面上一半的文字，然后再去掉剩下的一半。如果用户需要阅读说明才能使用，那设计就是失败的。
- 用户真实行为模式 (How Users Actually Behave)：
  设计必须适应“用户只是扫描，并不会逐字阅读”的现实，因此需要构建清晰的视觉层次。
工程化保障：30KB开销，零依赖
该技能生成的页面非常纯净，没有引入任何外部依赖（Zero deps），所有功能的总开销仅为30KB。这确保了产品的高性能和可维护性。

🆚 一句话Prompt vs. /design-html 技能

维度	您的一句话Prompt	/design-html 技能
🎯 结果定位	基本原型或演示稿，可能包含AI的“随意发挥”。	遵循明确设计原则的生产级代码。
🧠 思考过程	单步、直接翻译需求。	多步骤、结构化的专业工作流，有审查和迭代。
⚙️ 技术深度	生成传统的、依赖DOM布局的HTML/CSS。	使用 Pretext 引擎进行数学计算布局，性能极高。
🎨 交互体验	静态交互为主，复杂动画和布局可能不流畅。	内置高级UX原则，能实现120 FPS的流畅交互。
🏗️ 工程质量	质量不受控，可能包含冗余或非标准代码。	30KB开销，零依赖，代码纯净，可维护性高。
🎓 适用阶段	适用于快速验证想法、制作一次性演示。	适用于正式产品开发，需要高代码质量和团队协作的场景。

💡 使用建议

要发挥该技能的最大价值，建议您遵循其设计的工作流，并结合其他技能使用，从而实现从产品构思、技术评审到最终交付的全流程AI辅助开发。

总而言之，/design-html 技能的价值在于它将一个专业设计工程师的思考方式、技术选型（Pretext）和设计原则（以用户为中心）封装成一个可复用的AI技能。它交付的不是一个“能看”的页面，而是一个经过深思熟虑、高性能、可维护的“能用”的产品界面。

实用技能 —— `design-html`