Plan three layers of design tokens in ChatGPT
Translate a product and brand brief into primitive colors, semantic roles, component variables, type, spacing, and light and dark themes.
中文Install in ChatGPT
A ChatGPT workspace with skill creation enabled. Paste the fictional material below as text.
- In a ChatGPT workspace with skill creation enabled, open Plugins → Skills → Create → Create with editor.
- Create a skill in the editor and adapt the text-only `design-system-generator` workflow from the pinned GitHub source into its instructions.
- Save the skill, then type @ in a new chat to select it and try the example.
Example task
Draft a token plan for the Spruce course dashboard.
product="Spruce course dashboard"; accent="#3659B8"; spaceStepPx=4; mode="light and dark"; component="primary button"What to check
Use `button-bg → action-primary → #3659B8` as a light-theme mapping. Keep the 4px base spacing step, map dark-theme semantic values separately, and list a contrast check as a validation item.
Original SKILL.md on GitHub · Updated
Frequently asked question
How can ChatGPT plan design tokens for a primary button?
Define primitive color values, assign them to semantic roles, and reference the semantic token from the button. Record the light and dark mappings separately.