用途：该技能面向 UI/UX 设计环节，依据产品经理提供的 MVP 范围与主用户流程、市场分析师提供的竞品分析，输出视觉架构、用户旅程图、UI 线框蓝图、品牌风格指南，并评估布局的可用性与响应式表现。
主要能力：基于 PM 流程创建用户旅程图；设计低保真线框蓝图；建立设计系统指南（HSL 颜色令牌、字体层级、间距规则）；审查前端布局稿的可用性与一致性；确保布局优先移动端与高品质观感；进行设计保真度审计，使用 computer-use（stablyai/orca@computer-use）或浏览器工具打开渲染页面、截图并检查计算后的 CSS 对齐，若元素检查停滞或失败，触发 Auto-Recovery 回退（midscene-skills@computer-automation 或 codex-skills@gemini-computer-use）。
输出：UI/UX 蓝图设计文档，包含用户画像旅程图、线框页面流（关键页面布局）、风格指南系统（HSL 颜色令牌、字体比例）、交互布局指南（悬停效果、过渡规则），以及在审查前端产出时的设计系统保真度结论（Figma 到代码的视觉审计报告）。
使用方式：先分析 PM 提供的用户流程与竞品评价；梳理用户情感与功能旅程步骤；构建 UI 布局（如页头、正文卡片、按钮、页脚间距）；建立风格令牌（如标准化主/次 HSL 颜色）；指定动画（如“发光悬停过渡”）；将蓝图交给前端/全栈工程师。审查前端稿或已实现代码时，可通过 Chrome DevTools MCP（npx -y chrome-devtools-mcp@latest）连接运行中的页面、截图，并使用 evaluate_script 检查计算后的 CSS 值（如 window.getComputedStyle(element)）。对比度审计需严格将文本颜色与容器背景色对比，防止不可见或低对比度文本，在明暗两种主题中均执行 WCAG AA 4.5:1 比率。质量检查包括：布局网格是否针对移动屏幕缩放优化（响应式）；主要风格令牌是否用清晰的 HEX 或 HSL 值明确记录；旅程流程是否尽量减少用户完成核心目标所需的点击次数。
限制：不编写最终生产代码（HTML、CSS 或 JS）；不管理数据库结构或后端基础设施；未经咨询 PM 不修改功能需求；工作重心完全在视觉布局、可用性路径、品牌与组件。以上为公开资料所述内容，具体收费、价格与平台信息暂未提供。