首页 注册 登录
OA0 = Omni AI 0
OA0 是一个探索 AI 的论坛
现在注册
已注册用户请  登录
OA0  ›  技能包  ›  ui-design-system：资深 UI 设计师的 UI 设计系统工具包

ui-design-system：资深 UI 设计师的 UI 设计系统工具包

 
  kubernetes ·  2026-02-14 15:11:55 · 3 次点击  · 0 条评论  

名称： ui-design-system
描述： 面向高级 UI 设计师的 UI 设计系统工具包，包含设计令牌生成、组件文档、响应式设计计算和开发交付工具。用于创建设计系统、保持视觉一致性并促进设计与开发协作。

UI 设计系统

生成设计令牌、创建调色板、计算排版比例、构建组件系统，并准备开发交付文档。

目录

触发词

在以下场景中使用此技能：

  • "生成设计令牌"
  • "创建调色板"
  • "构建排版比例"
  • "计算间距系统"
  • "创建设计系统"
  • "生成 CSS 变量"
  • "导出 SCSS 令牌"
  • "设置组件架构"
  • "编写组件库文档"
  • "计算响应式断点"
  • "准备开发交付"
  • "将品牌色转换为调色板"
  • "检查 WCAG 对比度"
  • "构建 8pt 网格系统"

工作流程

工作流程 1：生成设计令牌

场景： 你有一个品牌色，需要一套完整的设计令牌系统。

步骤：

  1. 确定品牌色和风格

    • 品牌主色（十六进制格式）
    • 风格偏好：modern | classic | playful

  2. 使用脚本生成令牌
    bash python scripts/design_token_generator.py "#0066CC" modern json

  3. 审查生成的类别

    • 颜色： 主色、辅助色、中性色、语义色、表面色
    • 排版： 字体族、字体大小、字重、行高
    • 间距： 基于 8pt 网格的刻度（0-64）
    • 边框： 圆角、宽度
    • 阴影： 无到 2xl
    • 动画： 时长、缓动函数
    • 断点： xs 到 2xl

  4. 导出为目标格式
    ```bash
    # CSS 自定义属性
    python scripts/design_token_generator.py "#0066CC" modern css > design-tokens.css

    SCSS 变量

    python scripts/design_token_generator.py "#0066CC" modern scss > _design-tokens.scss

    JSON（用于 Figma/工具）

    python scripts/design_token_generator.py "#0066CC" modern json > design-tokens.json
    ```

  5. 验证可访问性

    • 检查颜色对比度是否符合 WCAG AA 标准（正常文本 4.5:1，大文本 3:1）
    • 确认语义色已定义对比色

工作流程 2：创建组件系统

场景： 你需要使用设计令牌构建组件库。

步骤：

  1. 定义组件层级

    • 原子： 按钮、输入框、图标、标签、徽章
    • 分子： 表单字段、搜索栏、卡片、列表项
    • 有机体： 页眉、页脚、数据表格、模态框
    • 模板： 仪表板布局、认证布局

  2. 将令牌映射到组件

    组件 使用的令牌
    按钮 颜色、尺寸、边框、阴影、排版
    输入框 颜色、尺寸、边框、间距
    卡片 颜色、边框、阴影、间距
    模态框 颜色、阴影、间距、z-index、动画

  3. 定义变体模式

    尺寸变体：
    sm: 高度 32px, 水平内边距 12px, 字体大小 14px md: 高度 40px, 水平内边距 16px, 字体大小 16px lg: 高度 48px, 水平内边距 20px, 字体大小 18px

    颜色变体：
    primary: 背景色 primary-500, 文字色 白色 secondary: 背景色 neutral-100, 文字色 neutral-900 ghost: 背景色 透明, 文字色 neutral-700

  4. 编写组件 API 文档

    • 带类型的 Props 接口
    • 变体选项
    • 状态处理（悬停、激活、聚焦、禁用）
    • 可访问性要求

  5. 参考： 查看 references/component-architecture.md

工作流程 3：响应式设计

场景： 你需要定义断点、流体排版或响应式间距。

步骤：

  1. 定义断点

    名称 宽度 目标设备
    xs 0 小屏手机
    sm 480px 大屏手机
    md 640px 平板电脑
    lg 768px 小型笔记本电脑
    xl 1024px 桌面电脑
    2xl 1280px 大屏幕

  2. 计算流体排版

    公式：clamp(最小值, 理想值, 最大值)

    css /* 在 320px 到 1200px 视口范围内，字体大小从 16px 变化到 24px */ font-size: clamp(1rem, 0.5rem + 2vw, 1.5rem);

    预计算的比例：
    css --fluid-h1: clamp(2rem, 1rem + 3.6vw, 4rem); --fluid-h2: clamp(1.75rem, 1rem + 2.3vw, 3rem); --fluid-h3: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); --fluid-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  3. 设置响应式间距

    令牌 移动端 平板 桌面端
    --space-md 12px 16px 16px
    --space-lg 16px 24px 32px
    --space-xl 24px 32px 48px
    --space-section 48px 80px 120px

  4. 参考： 查看 references/responsive-calculations.md

工作流程 4：开发交付

场景： 你需要将设计令牌交付给开发团队。

步骤：

  1. 以所需格式导出令牌
    ```bash
    # 用于 CSS 项目
    python scripts/design_token_generator.py "#0066CC" modern css

    用于 SCSS 项目

    python scripts/design_token_generator.py "#0066CC" modern scss

    用于 JavaScript/TypeScript

    python scripts/design_token_generator.py "#0066CC" modern json
    ```

  2. 准备框架集成

    React + CSS 变量：
    ```tsx
    import './design-tokens.css';


    ```

    Tailwind 配置：
    ```javascript
    const tokens = require('./design-tokens.json');

    module.exports = {
    theme: {
    colors: tokens.colors,
    fontFamily: tokens.typography.fontFamily
    }
    };
    ```

    styled-components：
    ```typescript
    import tokens from './design-tokens.json';

    const Button = styled.buttonbackground: ${tokens.colors.primary['500']}; padding: ${tokens.spacing['2']} ${tokens.spacing['4']};;
    ```

  3. 与 Figma 同步

    • 安装 Tokens Studio 插件
    • 导入 design-tokens.json
    • 令牌将自动与 Figma 样式同步

  4. 交付清单

    • [ ] 令牌文件已添加到项目
    • [ ] 构建流水线已配置
    • [ ] 主题/CSS 变量已导入
    • [ ] 组件库已对齐
    • [ ] 文档已生成

  5. 参考： 查看 references/developer-handoff.md

工具参考

design_token_generator.py

根据品牌色生成完整的设计令牌系统。

参数 值 默认值 描述
brand_color 十六进制颜色 #0066CC 品牌主色
style modern, classic, playful modern 设计风格预设
format json, css, scss, summary json 输出格式

示例：

# 生成 JSON 令牌（默认）
python scripts/design_token_generator.py "#0066CC"

# 经典风格，CSS 输出
python scripts/design_token_generator.py "#8B4513" classic css

# 活泼风格，摘要视图
python scripts/design_token_generator.py "#FF6B6B" playful summary

输出类别：

类别 描述 关键值
colors 调色板 primary, secondary, neutral, semantic, surface
typography 字体系统 fontFamily, fontSize, fontWeight, lineHeight
spacing 8pt 网格 0-64 刻度，语义化（xs-3xl）
sizing 组件尺寸 container, button, input, icon
borders 边框值 radius（按风格）, width
shadows 阴影样式 none 到 2xl, inner
animation 动效令牌 duration, easing, keyframes
breakpoints 响应式 xs, sm, md, lg, xl, 2xl
z-index 层级系统 base 到 notification

快速参考表

颜色刻度生成

步骤 亮度 饱和度 用例
50 固定 95% 30% 微妙背景
100 固定 95% 38% 浅色背景
200 固定 95% 46% 悬停状态
300 固定 95% 54% 边框
400 固定 95% 62% 禁用状态
500 原始值 70% 基础/默认颜色
600 原始值 × 0.8 78% 悬停（深色）
700 原始值 × 0.6 86% 激活状态
800 原始值 × 0.4 94% 文本
900 原始值 × 0.2 100% 标题

排版比例（1.25x 比率）

尺寸 值 计算
xs 10px 16 ÷ 1.25²
sm 13px 16 ÷ 1.25¹
base 16px 基准值
lg 20px 16 × 1.25¹
xl 25px 16 × 1.25²
2xl 31px 16 × 1.25³
3xl 39px 16 × 1.25⁴
4xl 49px 16 × 1.25⁵
5xl 61px 16 × 1.25⁶

WCAG 对比度要求

等级 正常文本 大文本
AA 4.5:1 3:1
AAA 7:1 4.5:1

大文本：≥18pt 常规字体 或 ≥14pt 粗体

风格预设

方面 Modern Classic Playful
无衬线字体 Inter Helvetica Poppins
等宽字体 Fira Code Courier Source Code Pro
默认圆角 8px 4px 16px
阴影 分层、微妙 单层 柔和、明显

知识库

references/ 目录下的详细参考指南：

文件 内容
token-generation.md 颜色算法、HSV 色彩空间、WCAG 对比度、字体比例
component-architecture.md 原子设计、命名约定、Props 模式
responsive-calculations.md 断点、流体排版、网格系统
developer-handoff.md 导出格式、框架设置、Figma 同步

验证清单

令牌生成

  • [ ] 品牌色以十六进制格式提供
  • [ ] 风格符合项目要求
  • [ ] 所有令牌类别已生成
  • [ ] 语义色包含对比色值

组件系统

  • [ ] 所有尺寸已实现（sm, md, lg）
  • [ ] 所有变体已实现（primary, secondary, ghost）
  • [ ] 所有状态正常工作（悬停、激活、聚焦、禁用）
  • [ ] 仅使用设计令牌（无硬编码值）

可访问性

  • [ ] 颜色对比度符合 WCAG AA
  • [ ] 焦点指示器可见
  • [ ] 触摸目标 ≥ 44×44px
  • [ ] 使用语义化 HTML 元素

开发交付

  • [ ] 令牌以所需格式导出
  • [ ] 框架集成已记录
  • [ ] 设计工具已同步
  • [ ] 组件文档完整
技能包地址：https://github.com/openclaw/skills/tree/main/skills/alirezarezvani/ui-design-system/SKILL.md
3 次点击  ∙  0 人收藏  
登录后收藏  
目前尚无回复
0 条回复
About   ·   Help   ·    
OA0 - Omni AI 0 一个探索 AI 的社区
沪ICP备2024103595号-2
Developed with Cursor