用途
本技能用于创建或改进前端界面代码，覆盖网站、Web 应用、仪表盘、落地页、组件与 HTML 原型，也包含本地预览。它把原先独立的 design、polish、animation 技能中仍有价值的部分整合为一条策展过的 UI 路径。核心目标是让产出的界面「看起来是有意设计的，而不是通用的」——即避免千篇一律的模板化观感。
适用时机
- 用户要求搭建网站、Web 应用、仪表盘、落地页、组件或 HTML 原型。
- 用户要求重新设计、打磨、美化、改进布局、增强视觉层次或让 UI 响应式。
- 用户要求前端动效：按钮动画、悬停状态、页面转场、加载状态或微交互。
不适用时机
- 交付物是 PDF、DOCX、电子表格、邮件、Google Workspace 条目或本地文件操作。
- 用户想要点击浏览现有应用或浏览器 UI；这类可见 GUI 操作应走本前端构建流程之外的方式。
- 请求只是代码库、PR 或 CI 任务，没有 UI 产出。
主要路径
- 确定目标项目或输出文件。
- 检测技术栈，复用已有的框架、组件、样式与 token 约定。
- 构建满足请求的最小但完整的可运行 UI。
- UI 能跑通后再做打磨：间距、排版、状态、对比度、响应式与文案贴合。
- 仅当动效能改善反馈、流程或体感愉悦时才添加动效，并尊重 prefers-reduced-motion。
- 尽可能启动或指向预览；否则提供确切的文件路径。
设计规则
- 贴合领域：SaaS、CRM、仪表盘与运维工具应安静、密集、便于扫读；游戏、作品集、创意工具与营销页面可以更具表现力。
- 避免通用 AI 美学：紫色渐变、漂浮色块、过大的卡片、虚假的功能文案，以及不服务于产品的装饰性噪声。
- 不要把 UI 卡片套在另一张卡片里。
- 使用真实控件：图标操作用图标，布尔值用开关，数字用滑块/输入框，视图切换用标签页，选项集合用菜单。
- 文本在移动端与桌面端都必须容纳在容器内，不要随视口宽度缩放字号。
- 页面区块保持全宽或不加边框；卡片留给重复项、模态框与真实工具。
动效规则
- 优先采用一个强烈的动效构思，而不是许多零散动画。
- 对 transform 与 opacity 做动画，避免布局抖动。
- 使用短时长：即时反馈 100–150ms，状态变化 200–300ms，较大布局转场 300–500ms。
- 始终为减少动效偏好的用户保留无动画路径。
验证
- 条件允许时运行项目的检查或构建命令。
- 对于本地预览，确认 URL 可响应或 HTML 文件存在。
- 当任务涉及视觉时，至少检查一个窄视口与一个桌面视口，可使用本地预览工具、页面/浏览器测试工具、渲染截图或产物文件。
- 不要把前端视觉检查变成可见的应用/浏览器操作。
- 若视觉验证受阻，明确说明已检查了什么、还剩下什么。