技能介绍

解决 AI 生成 UI 的失控问题

当 AI 直接生成界面时，最终产物常带有强烈的"AI 味"：不支持的渐变、权重相同的卡片、装饰性大写标签、模糊的"高级感"样式，以及缺失的状态处理。根源不是模型能力不足，而是设计决策被压缩成一个不透明的 prompt，缺少分层的声明和验证机制。

将设计视为输入系统

@user_932f49b5/vibe-design-engineering 的解法是把设计从生成步骤中分离出来，当作可注入的输入系统。每个设计问题都有明确的归属层：产品意图进入 spec.md，领域语义进入 domain.md，视觉工艺进入 craft.md，组件边界进入组件契约，样式规范进入 design tokens，最终由评估器门控决定是否放行。

核心循环分为五步：

理解与规划：澄清用户目标、页面类型、产品上下文、目标用户、风险与成功标准
构建结构：定义信息架构、主要任务、层级、导航，以及空/加载/错误状态
填充受控部分：选择允许的组件、数据字段、文案模式、领域语义和设计令牌
细化交互与工艺：覆盖状态转换、恢复路径、信息密度、节奏、无障碍和视觉克制
评估与路由反馈：根据页面类型和任务进行判断，收集证据，识别阻碍，将修复路由回负责层

适用边界与注意点

这个技能不是"写更好的 prompt"的工具，而是一套让设计决策显式化的工作流。它要求使用者能够区分设计声明（规格、领域、工艺、组件、模板）与执行契约（技能、结构化 UI 契约、评估器、门控）。当令牌、组件或领域规则缺失时，技能会暴露缺口而不是编造一个字面意义上的 fallback。

适用场景包括将模糊的 UI 需求转化为规格或实现计划、构建 agentic 产品的对话工作流、动态卡片或生成式报告，以及需要截图/浏览器证据的评估循环。不适合那些不需要设计约束的通用页面生成任务。