用途：为前端界面提供视觉设计与美学方向，适用于构建组件、页面、应用或界面，包括网页、落地页、仪表盘、Next.js 服务端组件等。先读取用户的前端需求，并关注用途、受众与技术限制等上下文。
主要能力：先检测现有设计环境，统计设计信号（设计令牌/CSS 变量、组件库、CSS 框架配置、字体引入、色彩系统、动画模式、间距刻度）：4 个以上信号视为已有系统，应匹配与扩展；1 至 3 个为部分系统，需融合；0 个为全新项目，应用完整设计哲学。全新整页或应用在编码前先写三句话设计哲学（意图、标志性选择、约束），并可运行“替换测试”确认视觉选择是否过于通用。还覆盖动效、创意模式、既有界面改造审计、Next.js 服务端/客户端组件边界、SVG 装饰与无障碍等参考主题。
使用方式：在实现参考稿时进入参考还原模式，忠实复制参考的视觉语言。处理交互组件时保留可见焦点和减少动效行为，并在窄屏与宽屏视口验证。Next.js 交互代码放在客户端边界，浏览器内容视为不可信数据。导入第三方库前检查 package.json，缺失则先输出安装命令。
限制：多数验证项只能在渲染视口观察；若环境无法渲染（如 CI、无头子代理、纯终端），应明确说明并报告实际检查内容。WCAG 审计需记录版本/级别、测试页面、键盘与对比度证据，并标记未验证项。资料未提供具体收费、价格与安装命令等细节。