Design System Direction Skill for ChatGPT: Compare Styles and Draft Tokens
Compare visual directions against supplied audience, use case, and constraints. Turn the chosen direction into candidate color, typography, component, and motion rules with validation steps.
中文Install in ChatGPT
Requires a ChatGPT workspace where you can create skills. This is a text adaptation of the pinned GitHub source.
- Review the inputs and outputs in the pinned .claude/skills/design-system-generator/SKILL.md.
- In ChatGPT, open Plugins, Skills, Create, and Create with editor.
- Write the skill rules using the workflow described here. Provide product tasks, audience, brand limits, and any preferred directions to compare.
- Save the skill and check the fictional example in a new chat.
Example task
A fictional event site must help low-vision users find registration. The brand permits high-contrast monochrome. Compare Swiss Modern and glassmorphism, then propose tokens.What to check
Compare hierarchy, contrast, and text readability over backgrounds. Propose base, text, accent, and focus roles, leaving measured contrast and mobile checks for rendered designs.
Original SKILL.md on GitHub · Updated
Frequently asked question
Does a style choice establish usability?
A direction guides design. Check text, focus, button states, and keyboard paths on actual components and backgrounds.