Agent Skills
返回列表
前端界面设计指南

前端界面设计指南

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_15292d5a/yjkj-ui-design-guide 到你的 AI 助手。

技能介绍

问题

很多界面生成会跳过设计判断，直接堆出居中卡片、紫蓝渐变、Inter 或 system-ui 字体，以及 emoji 图标。结果看起来像默认 AI 模板，而不是可交付的前端原型。ui-design-guide 针对网页、小程序、组件和样式任务，要求先明确视觉方向，再进入实现。

工作方式

技能把设计前置为强制步骤：

  • 输出设计规范：包括目的、审美方向、color palette、字体、布局策略。
  • 选择审美路线：如极简、杂志感、复古未来、工业风、奢华感等，并避免通用 AI 配色与字体。
  • 按流程推进：用户体验分析、界面规划、高保真设计、Tailwind CSS 实现、真实素材增强。
  • 提交前自检：检查颜色、字体、图标、布局是否符合规范，避免 emoji 图标，优先使用 FontAwesome、Heroicons 等专业图标库。

边界与注意点

它适合需要新的视觉决策的前端任务，不适用于纯后端、数据库、API 或已有批准设计后的直接实现。若项目已有品牌色、字体 token 或设计系统，应将其视为更高优先级，并在规范中显式说明覆盖了哪些默认限制。

使用场景

  • 接到一个管理后台首页需求时，先确定配色、字体、布局和审美方向，再生成 Tailwind CSS 原型。
  • 做小程序登录页或详情页时，把信息架构、组件层级、专业图标库和规范自检写入实现前流程。
  • 重构已有页面视觉时，用该技能输出设计规格，检查是否落入紫蓝渐变、Inter 字体、emoji 图标等反模式。
  • 为教育类产品做课程卡片界面时，选择杂志感或有机审美，避免通用蓝色和居中卡片。

适合人员

  • 负责前端界面的工程师：希望先把视觉方向和布局规则说清楚，再交付可开发原型。
  • 做小程序页目的开发者：需要避免默认模板感，并为登录、详情等页面选择一致字体与配色。
  • 做产品原型的团队：要求在设计阶段明确审美方向、信息架构和组件层级，而不是直接写代码。
  • 维护品牌规范的前端负责人：需要把品牌色和字体 token 作为更高优先级覆盖默认设计限制。