Design Token Spec Skill for ChatGPT: Define Light and Dark Semantic Roles
Draft a light and dark token spec from supplied brand values and UI roles. Document color use, interaction states, and checks for unresolved values.
中文Install in ChatGPT
Use an eligible ChatGPT workspace with permission to create skills and, for uploads, upload permission. The installation path for this text-only adaptation was checked against OpenAI documentation. Workspace runtime verification is pending.
- Download .claude/skills/design-token-spec/SKILL.md from the pinned GitHub source. Keep the name, description, and instructions for design-token-spec together as a standalone text skill.
- In a ChatGPT workspace with skills and uploads enabled, open Plugins, Skills, Create, and Upload from your computer. Choose a skill package format accepted by the file picker. You can also choose Create with editor and enter the original name, description, and instructions.
- After the scan completes, check that design-token-spec appears in Installed. Type @ in a new chat, select the skill, and use the fictional example on this page to check the output.
Example task
A fictional directory uses #31578A for light-mode primary buttons. Its dark-mode primary color is undecided. Define page, text, button, and focus roles with approval status.What to check
Preserve the confirmed light button value and mark missing dark and other values open. State where each role applies and list contrast checks for text and focus.
Original SKILL.md on GitHub · Updated
Frequently asked question
Can one blue serve both links and primary buttons?
Give links and buttons separate semantic roles even if their initial values match. Review contrast and interactions independently so each role can evolve.