Review component alignment with a design system in ChatGPT
Use supplied tokens, components and state definitions to check naming, accessibility and gaps.
中文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-alignment` 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 an alignment record for ApplyButton using these Birch component details.
system="Birch components"; component="ApplyButton"; variant="primary"; label="Apply"; primitive="#483DA3"; focus="2px visible ring"; unsupportedState="loading"; naming="PascalCase component, kebab-case token"What to check
Record `button-background → color-action → #483DA3` and the visible 2px focus ring. Mark loading as a missing state and list keyboard operation and contrast as checks pending.
Original SKILL.md on GitHub · Updated
Frequently asked question
How can ChatGPT review component states and design token mappings?
Inventory existing components and tokens, then record primitive values, semantic aliases and component mappings. Document known or unverified loading, focus and keyboard behavior.