Menü
构建风格鲜明、可用于生产环境的高质量前端界面。用于实现网站、落地页、仪表盘、React 组件、HTML/CSS 布局、视觉物料或任何需要明显提升设计质量的 Web UI 任务。产出应具有创意与完成度，并避免套版化的 AI 审美。
| name | frontend-design |
| description | 构建风格鲜明、可用于生产环境的高质量前端界面。用于实现网站、落地页、仪表盘、React 组件、HTML/CSS 布局、视觉物料或任何需要明显提升设计质量的 Web UI 任务。产出应具有创意与完成度，并避免套版化的 AI 审美。 |
| license | Complete terms in LICENSE.txt |
本技能用于指导你创建风格明确、可用于生产环境的前端界面，避免生成模板化、缺乏判断力的“AI 风格”页面。目标不是只把功能做出来，而是产出真正完成度高、审美一致、可运行的界面代码。
用户通常会提供一个前端需求，例如组件、页面、应用或某种界面；也可能附带用途、目标用户、业务背景、设计风格、技术约束或性能要求。
在开始编码前，先明确语境，并选择一个强烈且一致的视觉方向：
关键要求：先定方向，再执行。不论是极繁还是极简，重点都不是“花哨”或“克制”本身，而是整个界面必须有明确判断，而不是平均化地堆常见组件。
然后再实现真正可运行的代码，无论是 HTML/CSS/JS、React、Vue 还是其他前端形式，都应满足：
重点关注以下方面：
避免下列常见问题：
应当根据上下文作出真正有判断的选择，让界面看起来像“专门为这个任务设计的”，而不是“随便套了个看起来还不错的模板”。
你应该把这类任务视为“真正的界面设计与实现”，不是纯粹的代码排版工作。
每次生成的结果都应该：
自动化浏览器交互，用于网页测试、表单填写、截图与页面数据提取。当用户需要访问网站、操作网页、填写表单、截图或抓取网页内容时，应使用本技能。
适用于 Creative Studio 的缺陷定位与修复流程。
Creative Studio 项目的基础编码标准，覆盖 TypeScript、React、Rust 与跨层协作。
查找当前库、框架或 API 的官方文档，优先使用实时文档而不是过期记忆。
适用于 Creative Studio 的标准功能开发流程。
帮助用户发现并安装可复用的 agent 技能。当用户询问“怎么做某件事”“有没有适合某任务的 skill”“是否存在某种能力扩展”，或表达希望扩展代理能力时使用。只要用户需求可能已有现成技能可复用，就应优先考虑本技能。
