跳到技能内容
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
技能目录24 小时热门TOP100 技能每日更新
Skills 技能/vibeeval/vibecosystem/design-system-generator

用 ChatGPT 规划三层设计令牌

English

ChatGPT 安装步骤

  1. 在支持创建技能的 ChatGPT 工作区打开「插件 → 技能 → 创建 → 使用编辑器创建」。
  2. 对照固定版本 GitHub 原文,在编辑器新建技能,将 `design-system-generator` 的纯文本工作流程改写为技能说明。
  3. 保存后,在新对话输入 @ 并选中刚创建的技能,再用示例试用。

中文摘要

从产品类型和品牌色出发,规划原始色值、语义角色和组件变量,补上字号、间距和明暗主题。

SKILL.md 中文导读

可复现示例

为 Spruce 课程面板列一份设计令牌草案。
product="Spruce course dashboard"; accent="#3659B8"; spaceStepPx=4; mode="light and dark"; component="primary button"

工作步骤

  1. 整理产品类型、品牌色和字号间距偏好。
  2. 分别写原始、语义和组件层,记录明暗映射和待检查的对比度。

验收方法

把 `button-bg → action-primary → #3659B8` 写成明色模式的一组映射。保留 4px 间距基数,为暗色模式分别指定语义映射,并把对比度检查列为验收项。

GitHub 原文 · 更新日期 2026-11-14

适用环境

支持创建技能的 ChatGPT 工作区。使用以下虚构材料作为纯文本输入。

常见问题

ChatGPT 如何规划按钮设计令牌?

先定义原始色值,再把它分配给主操作的语义角色。按钮引用语义令牌,并为明暗模式分别记录映射。

技能信息

GitHub 仓库
vibeeval/vibecosystem

收集于互联网

相关指南

  • ChatGPT Skills 技能:怎么创建、安装和共享
  • ChatGPT 怎么上传 Skills 技能?文件与工作区检查
更多 ChatGPT 技能

相关推荐

  • skill-developer 技能

    vibeeval/vibecosystem

  • agentica-server 技能

    vibeeval/vibecosystem

  • github-actions-integration 技能

    vibeeval/vibecosystem

  • phase-gated-commits 技能

    vibeeval/vibecosystem

  • morph-apply 技能

    vibeeval/vibecosystem

  • postgres-patterns 技能

    vibeeval/vibecosystem

词映 AI 导航Skills 技能
工具分类全部工具已本地化技能选型指南AI 快讯