AI / Design Communication & Image Prompting
Spacing and Hierarchy Spec for Developers
Write spacing, type size, and hierarchy so developers do not have to guess
Turn this design into specs a developer can use directly: [design description or screenshot]. Requirements: 1) Define a spacing scale (e.g. 4/8/12/16/24/32) and state which steps this page actually uses; 2) By section, list the outer margin, section gap, element padding, and the gap between text and icons; 3) Specify the hierarchy of font size, line height, and weight, plus which text may wrap and how it aligns after wrapping; 4) Mark which values must be exact and which can be flexible; 5) Give the values for narrow screens. Do not just say 'keep spacing consistent'.
How to use
Run through this before handoff; it saves the developer coming back to ask how much space goes where.
Good for
- The design is going to implementation and you keep getting asked how much space goes here — writing the spacing scale, type hierarchy, and the exact-versus-flexible boundary in one pass ends that.
- You need consistency across pages or platforms (web and mini-app) — give narrow-screen values inside the same scale so each platform does not invent its own.
Not for
- The design is still moving and the structure is not frozen — the annotations will be invalidated by the next revision; wait until the structure settles.
- What is needed is component code (flex parameters, breakpoint logic) — the handoff supplies values; how to implement them is the developer's call.
Example
Input
A card-list page: title bar at top, filter row, card list (each card has a thumbnail, title, two-line description, and bottom actions)
What you get
Defines the scale 4/8/12/16/24/32 and states that this page uses only 4, 8, 16, and 24. Values are given by section: 16 page side margins, 56 title bar height, 12 between filter row and list, 16 card padding, 12 between thumbnail and text. Type hierarchy is written as 17 title with 24 line height and 14 description with 22 line height, truncated at two lines. It marks what must be exact (card padding, tap target of at least 44) versus flexible (card gap 8 to 12), then gives narrow-screen values.
Common mistakes
- Writing only 'keep spacing consistent' or 'see the design file' — the developer is still guessing, which is the same as no handoff.
- Fixing every value in pixels — responsive layouts and long copy break immediately; where flexibility is needed, write the rule.
Try tweaking it like this
- Add 'flag which values fall off the 8pt grid and why' — exceptions carry a reason, so maintenance does not snap them back to the grid.
- Replace 'narrow-screen values' with 'a breakpoint table for three widths' — phones, tablets, and desktop in one pass, with less follow-up.