用途
website-ui-ux-engineer 是一个面向网站与 Web UI 设计开发的智能体技能，定位为资深前端工程师与 UX/UI 设计师，专注于构建完整、达到生产级质量、设计出色的网站。其核心目标是把用户需求转化为已完整实现、可直接部署的前端代码，交付直观、可访问且视觉上有辨识度的 Web 界面。
主要能力
- 端到端前端开发：设计、构建并交付完整、可上线的 Web 界面。
- UX/UI 设计：基于以用户为中心的原则创建线框图、模型稿并定义用户流程。
- 技术策略：推荐并实现合适的前端技术栈。
- 基础技术 SEO：实现语义化 HTML、元数据、canonical 标签以及基础 JSON-LD 结构化数据。
- 质量保障：确保最终代码在性能、可访问性与安全性方面达标。
使用方式
技能遵循标准循环：探索（Explore）→ 规划（Plan）→ 执行（Execute）→ 校验（Validate）→ 记录（Log），不中途遗留任务。执行时优先使用 execution/ 目录下的确定性脚本；输出遵循工作区技术标准：原生 CSS（或指定时使用 Tailwind）、函数式 React 组件（如适用）、每行 100 字符限制；CLI 工具操作使用静默标志（--silent、-q）。
核心工作流：
- 澄清与理解（UX 基础）：提出澄清问题，收集项目关键信息，参考 references/core-principles.md 中的基础 UX 原则。
- 收集上下文与定义策略：已有项目扫描代码库识别模式、约定与工具，使策略与现有架构对齐；新项目根据用户需求提出技术栈，若回答含糊则明确说明所有假设。进行版本预检：确认 Node.js 18+、Next.js 15+ 及指定工具版本。
- 建立设计系统（Master + Overrides 模式）：创建 design-system/MASTER.md 作为颜色、排版、间距与组件模式的全局事实来源；创建 design-system/pages/[page-name].md 用于页面级覆盖。MASTER.md 最低结构模板包含：Colors（primary、secondary、surface、text、error、success）、Typography（字体族、xs→4xl 比例、行高、字重）、Spacing（基础单位、比例步进）、Breakpoints（sm/md/lg/xl）、Components（按钮变体、卡片、输入框、徽章默认值）。
- 选择与搭建技术栈：按 references/ 中对应设置指南搭建项目，按 references/code-quality-setup.md 集成 Prettier 与 ESLint，确认构建干净通过后再进入实现。
- 设计与实现（UI 与美学）：先定义站点地图与关键用户流程；依据 references/aesthetic-guidelines.md 确定鲜明具体的美学方向，无品牌资产时应用 references/brand-identity-defaults.md；移动优先，基础样式先定义移动端，再用 md: 与 lg: 断点放大，绝不桌面优先；将设计转化为语义化、高性能、生产级代码，每个区块完整构建，无占位符、无骨架 TODO。
- 校验与优化：完成前运行完整质量检查清单，重点审计 Lighthouse >90、WCAG AA 对比度、键盘导航与 Core Web Vitals（LCP、INP <200ms、CLS），修复所有失败项后再交付。
- 构建与交付：生成生产优化构建，确认构建输出无警告无错误，交付最终代码及所选技术栈对应的部署说明。
澄清问题分两阶段提出，避免信息过载。必需澄清（定义范围）：项目目标、目标受众、范围与交付物（如编码的 React 组件、完整静态网站）、站点结构与关键功能（如联系表单）。可选澄清（细化策略）：品牌与竞品（无品牌指南则应用默认值）、技术栈（1. 现代 JS 框架 React/Vite；2. Next.js（React）；3. Headless CMS 前端；4. 传统 WordPress 主题；5. 纯 HTML/CSS/JS；性能推荐 Next.js）、内容与资产（用户提供文本与图片，还是使用占位符与专业图库资产）。若回答不完整或含糊，不停滞，基于行业默认值做出合理专业假设，并在实现前明确说明所有假设。
适用场景
当用户想要设计或构建任何网站或 Web UI 时使用，触发场景包括：落地页、营销站点等。适用于需要完整、可部署前端交付物的项目，包括新项目搭建与已有项目集成。
限制
该技能不负责：后端开发（不编写服务端逻辑、不管理数据库、不创建超出无头前端所需的 API）；平面设计（不从头创建复杂原创插画、Logo 或品牌识别，但会使用提供的资产或专业默认值）；内容写作（不撰写营销文案或大量文本内容，但会使用提供的文本或专业占位符）；深度 SEO 与营销（不执行深度 SEO 审计、外链建设或管理付费搜索广告）。
质量检查清单涵盖：UX 与可用性（明确目的、直观导航、语义完整性、微排版、主动语态、跳转链接）；可访问性与包容性设计（颜色对比度、键盘导航、ARIA 地标、动效敏感度）；美学与实现（美学一致性、标题打磨、文案 Title Case、组件状态、交互状态、文本溢出、生产级代码、焦点安全、图标使用 SVG、光标、Z-Index 层级、暗色模式、滚动条）；性能与优化（Lighthouse 分数、Core Web Vitals、资源压缩、资源加载、字体优化、图片完整性、布局卫生、水合安全）；SEO 与可发现性（Metadata API、站点地图与 robots、结构化数据、语义层级）；安全与状态（输入精度、安全链接、URL 同步）。
关于该技能的收费、价格、平台支持范围等具体信息，资料中暂未提供。