腾讯云 CloudBase UI 设计

前端界面设计的核心挑战

在现代Web和小程序开发中，界面设计常面临两大痛点：一是开发者缺乏明确的设计方向，容易陷入“能用就行”的思维，导致产出千篇一律、缺乏品牌识别度的界面；二是在快速迭代中，视觉决策往往滞后或随意，造成设计规范缺失，后期维护和一致性保证成本高昂。这不仅影响用户体验，也降低了产品的专业感知。

本技能如何解决上述问题

该技能是一个结构化的前端UI设计指南，旨在将专业设计流程强制集成到开发工作流中。其核心能力在于：在编写任何界面代码之前，强制输出完整的设计规范。这涵盖了从 美学方向 到具体视觉规则的全链条决策。

• 强制预设设计规范：要求在代码生成前必须明确产出包含目的陈述、美学方向、调色板、字体方案和布局策略的设计文档。这避免了直接编码带来的设计随意性。
• 提供清晰的设计流程：遵循“用户体验分析 → 产品界面规划 → 美学方向确定 → 高保真UI设计 → 前端原型实现 → 真实感增强”的六步法，确保思考的系统性和完整性。
• 明确的风格指引与禁忌清单：技能详细列出了多种美学方向（如极简主义、复古未来、奢华精致等），并严格禁止通用AI审美（如使用 purple/violet 梯度、Inter/Roboto 字体、居中阴影卡片、用emoji代替图标），强迫设计走向独特和高质量。
• 集成专业实现要求：在设计阶段就规定使用 Tailwind CSS 进行样式编写，必须采用 FontAwesome、Heroicons 等专业图标库，并要求对生成的代码进行颜色、字体、图标和布局的自我审计，确保最终产出符合初始设计意图。

适用边界与注意点

本技能专注于界面视觉与交互设计层面的决策，而非通用代码生成。请在以下场景使用：

• 适合：创建网页、小程序界面原型；设计前端组件库的视觉风格；在开发前确定整体视觉方向和交互细节。
• 不适合：纯后端逻辑、数据库架构设计；对已有且固定的UI进行简单套用；不涉及任何视觉决策的编码任务。

重要提醒：技能内置了品牌规避机制。如果项目已有明确的品牌色、字体库或设计系统，你应优先遵循这些约束，并在设计规范中明确注明覆盖了哪些默认规则。技能的目的是提升设计基线，而非取代已有的成熟品牌资产。