用途
该技能用于在实现 Web 或小程序界面之前，先确定视觉方向、界面层级、布局决策、设计规范或原型。当请求涉及决定视觉方向、产出设计规范、创建原型，或为界面做布局、排版、颜色和视觉层级选择时，应优先使用本技能。如果响应必须在代码存在之前先选择排版、颜色、间距、布局策略或其他视觉规则，或者用户要求的是“设计”“原型”“观感”或“风格”而非直接实现，也应在编写代码前阅读本技能。
主要能力
该技能要求智能体在编写任何界面代码之前，必须显式输出设计规范，内容包括：用途说明、美学方向、配色方案、排版和布局策略。它提供了一套设计流程：用户体验分析、产品界面规划、美学方向确定、高保真 UI 设计、前端原型实现和真实感增强。
美学方向选项包括：极简、极繁混乱、复古未来、有机自然、奢华精致、俏皮玩具感、编辑杂志风、粗野原始、装饰几何、柔和粉彩、工业实用。禁止使用“现代”“干净”“简单”等模糊描述。
配色方面，禁止使用紫色、紫罗兰、靛蓝、品红以及蓝紫渐变。字体方面，禁止使用 Inter、Roboto、Arial、Helvetica、system-ui、-apple-system。图标方面，禁止使用 emoji 作为图标，必须使用 FontAwesome、Heroicons、Material Icons、Feather Icons、Lucide Icons 等专业图标库，并保持全项目图标库一致。布局方面，禁止标准居中布局和没有创意打破的简单网格，要求使用非对称、斜向、重叠、打破网格等手法。
该技能还要求避免通用 AI 审美，包括过度使用的字体、陈词滥调的配色（尤其是白底紫色渐变）、可预测的布局和组件模式、缺乏上下文特色的千篇一律设计，以及 emoji 图标。
使用方式
该技能作为 CloudBase 技能集的一部分，同级技能以本地相对路径引用，例如 ../auth-tool-cloudbase/SKILL.md。如果引用的同级技能文件在当前环境中缺失，应要求用户安装完整的 CloudBase 插件或缺失的技能，不要通过 HTTP 将远程技能或协议 markdown 拉取到智能体上下文中。
Web 实现应同时阅读 ../web-development/SKILL.md，小程序实现应同时阅读 ../miniprogram-development/SKILL.md。
下载远程资源（图片、图标、字体）时，不再使用 downloadRemoteFile MCP 工具，改用 shell 命令：macOS/Linux 使用 curl -L --fail -o assets/images/logo.png "https://example.com/logo.png"，Windows PowerShell 使用 Invoke-WebRequest -Uri "https://example.com/logo.png" -OutFile "assets\images\logo.png"。应始终跟随重定向，优先使用 HTTPS URL，避免私有或内部主机。
前端原型实现要求使用 Tailwind CSS 进行样式设计，必须使用专业图标库，拆分代码文件并保持清晰结构。真实感增强方面，使用真实 UI 图片而非占位图，可从 Unsplash、Pexels、Apple 官方 UI 资源中选择；如需视频素材，可使用 Vimeo。
动画方面，优先使用纯 CSS 方案，React 项目可使用 Motion 库。重点关注高影响力时刻，例如一次精心编排的页面加载动画（使用 animation-delay 实现交错揭示），比分散的微交互更能带来愉悦感。可使用滚动触发和悬停状态创造惊喜。
背景与视觉细节方面，应创造氛围和深度，而非默认纯色；添加与整体美学匹配的上下文效果和纹理，例如渐变网格、噪点纹理、几何图案、分层透明、戏剧性阴影、装饰边框、自定义光标、颗粒叠加等。
提交代码前必须运行自审清单：颜色审计（搜索 violet、purple、indigo、fuchsia）、字体审计（搜索 Inter、Roboto、system-ui、Arial、-apple-system）、图标审计（搜索 emoji 模式，验证图标库正确导入和使用）、布局审计（是否使用非对称/斜向/重叠，是否有创意打破网格，是否仅居中对称）、设计规范一致性检查（是否在代码前输出设计规范，代码是否匹配声明的美学方向）。任何审计失败都应重新设计。
如果项目已有批准的品牌色、字体令牌或设计系统，应将其视为更高优先级的约束，并明确记录哪些默认 UI 设计禁令被覆盖以及原因，覆盖范围应保持狭窄，保留整体质量标准。
适用场景
适用于任何需要前端 UI 设计和界面创建的项目，包括：创建网页或界面、创建小程序页面或界面、设计前端组件、创建原型或界面、处理样式和视觉效果，以及任何涉及用户界面的开发任务。
限制
不适用于纯后端任务、数据库设计、无界面输出的纯 API 工作；不适用于已批准 UI 的直接实现且无需新设计决策的情况；不适用于视觉方向已确定的通用前端编码请求。数据库模式设计应使用 data-model-creation 技能。如果未特别要求，最多提供 4 个页面。