Design System Documenter for ChatGPT: Explain When to Use Each Token
Turn supplied design variables into developer documentation. Explain semantic roles, appropriate components, short examples, and accessibility checks.
中文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-system-documenter/SKILL.md from the pinned GitHub source. Keep the name, description, and instructions for design-system-documenter 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-system-documenter 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
Fictional tokens `--surface-muted`, `--text-primary`, and `--focus-ring` serve secondary panels, body text, and keyboard focus. Write a reference table and examples. No values are available.What to check
Preserve names and usage. Assign each token to the appropriate example. Point readers to theme values and keep contrast unverified.
Original SKILL.md on GitHub · Updated
Frequently asked question
Is a table of token names and colors enough?
It is a start. Add usage context and cases where a token should be avoided, then provide a check for component and theme combinations.