用 ChatGPT 规划三层设计令牌
EnglishChatGPT 安装步骤
- 在支持创建技能的 ChatGPT 工作区打开「插件 → 技能 → 创建 → 使用编辑器创建」。
- 对照固定版本 GitHub 原文,在编辑器新建技能,将 `design-system-generator` 的纯文本工作流程改写为技能说明。
- 保存后,在新对话输入 @ 并选中刚创建的技能,再用示例试用。
中文摘要
从产品类型和品牌色出发,规划原始色值、语义角色和组件变量,补上字号、间距和明暗主题。
SKILL.md 中文导读
可复现示例
为 Spruce 课程面板列一份设计令牌草案。
product="Spruce course dashboard"; accent="#3659B8"; spaceStepPx=4; mode="light and dark"; component="primary button"工作步骤
- 整理产品类型、品牌色和字号间距偏好。
- 分别写原始、语义和组件层,记录明暗映射和待检查的对比度。
验收方法
把 `button-bg → action-primary → #3659B8` 写成明色模式的一组映射。保留 4px 间距基数,为暗色模式分别指定语义映射,并把对比度检查列为验收项。
GitHub 原文 · 更新日期
适用环境
支持创建技能的 ChatGPT 工作区。使用以下虚构材料作为纯文本输入。
常见问题
ChatGPT 如何规划按钮设计令牌?
先定义原始色值,再把它分配给主操作的语义角色。按钮引用语义令牌,并为明暗模式分别记录映射。