技能介绍

它解决什么问题

产品想法还停留在一句话阶段时，最常卡住的不是写不出代码，而是不知道该先定什么：页面结构没想清楚就动手，改到第三轮才发现信息层级不对；设计方向聊了两小时，产物只剩几个形容词。frontend-ui-pipeline 针对的正是这段「从模糊想法到可构建方案」的空白——它不产出最终样式代码，而是把后续每一步需要回答的问题显式列出来，让你先做结构决策，再谈实现。

核心能力与工作方式

技能按阶段编排六类产物，每次调用只推进当前阶段，结尾必须给出明确的下一个产物或行动：

UI brief：明确产品或页面类型、目标用户、主目标、主 CTA、范围与约束、待确认问题。
Design direction：把策略、风格方向、布局模式、导航模式、交互原则写清楚，而不是停留在「要简洁」。
Build plan：列出页面、关键组件、必须覆盖的状态、响应式规则、无障碍要求和实现目标。
Review plan / iteration plan：评审按严重度分级，迭代计划回答「保留什么、改什么、下一步做什么」。
DESIGN.md：一旦流程创建或修改了前端文件，就在项目或特性根目录记录当前设计方向、布局与导航决策、颜色字体间距规则等，供下次评审对照。

默认路径按输入状态分流：想法模糊走 references/templates/ui-brief-template.md，样式不清走设计方向模板，可以开工走构建计划模板，已有 UI 待改进走评审计划模板。另外它还为 landing page、SaaS dashboard、admin panel、mobile app 各自提供了 pipeline 参考。

适用边界

以下情况应跳过：后端、API、数据库、基础设施等非视觉任务；已有完整实现简报或终稿设计规范、只缺编码；没有规划与迭代需求的细微视觉调整；只想做点评、不打算继续构建的 critique。此外 frontend-design、web-design-guidelines、ui-ux-pro-max 分别覆盖直接实现、UI 审计、设计系统方向，当专项技能更合适时优先路由过去——本技能把这三者当作可选协作方而非硬依赖，缺失时仍能按内置模板产出简报、计划与评审结构。