Review visual hierarchy in ChatGPT
Review a written interface brief for visual focus using type scale, accent color, spacing, and purposeful motion.
中文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` 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
Suggest changes to the Harbor signup page based on its written layout description.
page="Harbor signup"; currentHeadingPx=16; currentBodyPx=16; buttonAccentCount=3; cardGapPx=13; primaryAction="Reserve a seat"What to check
Make `Reserve a seat` the sole primary action. Suggest a 28px heading, a 16px body, one shared accent, and 16px card gaps. Reserve motion for state feedback.
Original SKILL.md on GitHub · Updated
Frequently asked question
How can ChatGPT check interface type hierarchy and spacing?
Use a clear size scale for heading and body, normalize card spacing, and reserve one accent for the primary action. Use motion for action feedback.