用途
ui-designer 是一个面向界面视觉设计与实现的技能，目标是在构建、样式化、评审或打磨任何界面时，以系统化、可验证的方式产出专业、精致的视觉效果。它强调“细节决定专业度”，并给出从场景判断到最终目视检查的完整工作流。
主要能力
- 场景模式判断：先区分 Brand（落地页、营销站、作品集、一次性活动，允许更夸张的字体、动效和不对称布局）与 Product（应用、仪表盘、内部系统、SaaS，默认克制、清晰、系统化），避免场景错配导致界面“看起来不对”。
- 读取既有项目规范：优先使用项目已有的设计令牌与组件库，避免引入冲突值；若没有系统，则默认精炼极简风格，并至少加入一个有意的个性选择。
- 视觉基础系统：涵盖 8pt 间距网格、数学比例的字体大小阶梯、60-30-10 配色比例、语义色变体、对比度要求、阴影层级、圆角风格与嵌套圆角公式、暗色模式独立配色。
- 组件规范：包括按钮层级（主/次/幽灵/破坏性）、输入与表单、卡片、表格与数据展示、导航、弹窗与遮罩的尺寸、间距、状态与可访问性要求。
- 布局与构成：12 列网格、对齐原则、留白作为主动设计、响应式断点（640/768/1024/1280/1536px）与移动端模式。
- 细节打磨：交错动画、彩色阴影、背景纹理、边框光效、微渐变、背景模糊、内阴影、嵌套圆角、图标一致性、渐变文字等技法；动效缓动与仅动画 transform/opacity 的约束。
- 高级设计师自检：从层级、颜色、间距、系统、克制、状态、响应式七个维度做发布前检查，并要求最终目视检查渲染结果。
使用方式
技能描述中给出了分步流程：Step 0 判断 Brand/Product 模式；Step 0.5 读取项目已有模式与令牌；Step 1 建立视觉基础；Step 2 按一致性构建组件；Step 3 布局与构成；Step 4 应用打磨；Step 5 运行高级设计师过滤清单；Step 6 验证视觉质量。其中 Step 6.0 要求在可渲染时通过开发服务器、Playwright 或 Chrome DevTools MCP 截图并目视检查，无法渲染时需明确说明跳过视觉验证及原因。若传入 URL、组件名或文件路径，应先获取或读取对应内容再继续。
适用场景
适合在构建新界面、为现有界面添加样式、评审界面视觉质量或进行细节打磨时使用；也适合需要统一设计系统、检查响应式与暗色模式、排查“看起来不对”但难以定位原因的情况。资料中提及 references/design-tokens.md、component-library.md、component-taste.md、polish-and-craft.md、interface-checklist.md 作为扩展参考。
限制
资料未提供该技能的安装命令、运行环境要求、收费方式或具体平台支持信息，暂未提供。技能文本中的规则属于设计指导，不保证自动修复所有视觉问题；截图无法验证过渡动画、表单标签关联、设计令牌原始值或计算对比度等源码层面问题，需结合检查清单与源码审查。