Agent Skills
返回列表
品牌1 UI 设计系统

品牌1 UI 设计系统

设计多媒体 更新于 2026.08.30

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

请根据 https://skillhub.cn/install/skillhub.md，将 @user_c2706611/yuanxingsheji-v1 安装到你的 AI 助手中。

技能介绍

解决的问题

品牌1 的 B 端界面常遇到 UI 实现不一致的问题：色值随手写、按钮状态缺少对照、卡片圆角和阴影不统一、页面间距依赖个人经验。该技能把品牌1设计系统规范整理为可引用的工程约束，适用于 PC、移动端和大屏界面。

核心能力与工作方式

  • 色彩体系：以 Brand-6 #07978D 作为主色，配合 Neutral 中性色与成功、警告、错误、进行等功能色；状态映射如 Brand-5 悬停、Brand-8 点击。
  • 排版规则：中文使用思源黑体，英文与数字使用 Arial；通过 --font-size-3 到 --font-size-11、字重和行高 token 建立层级。
  • 布局间距：基于 24 列网格与响应式断点，明确 4px、12px、16px 的间距用途，并给出内页、门户首页、数据分析主页的区域序列。
  • 组件样式：覆盖按钮、卡片、输入框、全局导航、标签等，统一高度 28px、圆角 2px 或 4px、阴影 --shadow-1 到 --shadow-3。

适用边界

适合实现品牌1风格界面、检查组件一致性或补齐设计 token。它不替代业务组件库，也不覆盖完整无障碍验证、动效实现或品牌视觉延展；具体页面仍需结合前端框架与组件库落地。

使用场景

  • 前端实现品牌1后台列表页时，按16px/24px间距、24列网格和按钮高度28px完成查询区、标题区、内容区布局。
  • 设计走查时，对照Brand-6、Neutral、Error等功能色与悬停、点击、禁用状态检查按钮、输入框和卡片。
  • 构建品牌1门户首页或数据看板时，按导航区、英雄区/页签区、卡片区、内容区的顺序设置24px主区间距和底部留白。
  • 整理设计 token 时，把字号、字重、行高、阴影、间距映射成 --font-size-3、--shadow-1 等变量，供前端组件复用。

适合人员

  • 负责品牌1 B端页面的前端工程师：需要把按钮、输入框、卡片、导航的色值、圆角、阴影和高度落到代码中。
  • 做设计走查的 UI 设计师：需要对照成功、警告、错误、进行状态和禁用态检查组件颜色与焦点态。
  • 维护设计系统的产品设计师：需要把字号、行高、间距、阴影整理成可复用的设计 token。
  • 接入品牌1数据看板的前端开发：需要按门户首页、内页、数据分析主页的区域序列和间距规则搭建页面。