用途：该技能用于构建独特、生产级的前端界面，并通过真实浏览器进行视觉验证，弥合“生成代码”与“交付美观成品”之间的差距。适用于用户要求构建网页组件、页面、落地页等场景。
主要能力：分为三个阶段。第一阶段设计思考，要求先确定明确的美学方向，包括目的、基调与差异化；字体上建议搭配独特的展示字体与精致的正文字体，使用清晰的字号比例，避免 Inter、Roboto、Arial 等通用字体；色彩上使用 CSS 变量保持一致性，避免白底紫色渐变等常见 AI 风格；动效上优先 CSS 方案，React 项目可用 Motion 库，并尊重 prefers-reduced-motion；空间构图鼓励打破网格，背景与视觉细节可运用渐变网格、噪点纹理、几何图案等。第二阶段实现，先检测项目技术栈（React/Next.js、Vue、Svelte、Tailwind 或原生 HTML/CSS/JS），再生成生产级代码；图片占位需使用指定来源，数据展示使用 Intl.NumberFormat 和 Intl.DateTimeFormat；无障碍要求包括对比度至少 4.5:1、可见焦点指示、语义化 HTML、ARIA 标签和 reduced-motion 媒体查询。第三阶段视觉验证循环，按优先级检测浏览器工具：Chrome 扩展、Playwright MCP、Playwright CLI，若均不可用则仅按设计原则生成代码并建议用户配置浏览器验证。
使用方式：生成或更新前端代码后，确保开发服务器运行，在浏览器中打开页面，截图或目视检查渲染结果，对照设计意图评估布局、字体、色彩、动效、响应式和控制台错误，有问题则修复并重新验证。使用 Chrome 扩展时可导航到开发服务器地址、检查控制台、测试交互和响应式；使用 Playwright MCP 时可调用 browser_navigate、browser_take_screenshot、browser_snapshot、browser_console_messages、browser_evaluate、browser_resize 等工具。建议增量构建：先布局骨架，再排版与色彩，再动效与交互，再响应式，最后整体打磨。
适用场景：构建网页组件、页面、落地页等需要视觉品质的前端开发任务；可与 Figma 工作流、SpecWeave、E2E 测试集成。
限制：资料未提供具体收费、价格、平台支持范围或效果保证；浏览器验证依赖可用的浏览器工具，若不可用则无法完成视觉验证循环。