技能介绍

要解决的问题

当把界面设计交给 Agent 时，最常见的失败不是功能缺失，而是把设计判断当作视觉生成：要么过度产出，要么在缺证据时擅自发明角色、阈值、策略、业务规则，用「更精致」「更有质感」这类主观词替代可验收的条件。另一个问题则是把所有内容都交给动态生成，导致组件语义、可访问性、校验和兜底行为失控。

技能如何工作

vibe-design 把人的设计判断拆成可执行声明，并区分调度契约与验收契约。它先按最小可用模式路由任务：Specify 把模糊需求转成意图、流程、状态、边界和验收条件；Design 选择信息架构、页面形态、组件语义、视觉方向与交互；Implement 在改动前检查仓库现有 tokens、组件和约束；Review 基于证据审查成品并给出修订指令；Systematize 把重复判断沉淀为可复用声明。

核心流程从建立 brief 开始：区分已确认事实、推断、假设和待决策项；按落地页、产品控制台、对话界面、数据看板等归类页面形态；再补齐加载、空、错误、权限、超时、部分成功、撤销与危险操作等状态。结构上优先复用现有模板，只在注意力优先级确实不同的时候生成架构变体；组件映射时保持领域含义、语义与样式分离，已有 token 不硬编码，缺少规范时显式暴露系统缺口。动态性方面，稳定导航、设置和持久信息架构使用固定 UI，只有任务路径、证据、内容结构或决策点随上下文变化时才使用 GenUI。

适用边界

它不默认产出所有设计物料，只创建当前任务需要的内容。输出需匹配请求：规格、设计方案、实现、评审或设计系统抽取各有契约。评审时只看成品证据，不让平均分掩盖主路径失败、领域逻辑错误或不可读内容。使用前应明确角色、业务风险和领域规则；不确定时把占位值标注为 proposed default 并列出待确认项。