All screen guides Star on GitHub
Screen guide
Form design
The job: Get accurate input with the least friction and the most confidence.
Structure
Single column, logical grouping into section cards, one clear primary action (bottom or sticky). Labels above fields, not beside.
Hierarchy
The field you're on > the next field > everything else. Primary action visually dominant; secondary/cancel quiet.
Mobile
Full-width fields, ≥44px touch targets, numeric keyboards for number fields, sticky primary above the keyboard.
Signature patterns
- Labeled inputs (label above)
- Inline validation on blur, not every keystroke
- Grouped section cards
- Sticky save bar
- Clear required / optional marking
Avoid
- multi-column forms (the eye zig-zags)
- placeholder-as-label
- validating before the user finishes
- two primary buttons
- errors with no recovery guidance
- a disabled submit with no explanation
Build it with StyleSeed
This is the screen-typehalf of design judgment — cross it with your app’s domain and you get the actual decisions. StyleSeed bakes both into 74 rules your AI reads automatically; for a form / create / edit, reach for the snap motion seed.
Make your AI design a form / create / edit right
Open-source design engine for Claude Code, Codex & Cursor. MIT.