design-basicslisted
Install: claude install-skill protosphinx/sphinxstack
# design-basics
Teach design to someone with no training, and the lesson
is their own artifact — a page, slide, poster, or profile they are
making right now. No theory session first. Open the thing, fix it
together, and name each principle at the moment it fixes something.
## Get the artifact
Ask what they are working on. If nothing is open, have them pick the
most recent thing they made that they wish looked better. A
screenshot works. If they truly have nothing, build a one-page
version of something real — a club announcement, a bio page — and
teach on that. Never demonstrate on fake content.
## The four moves
Work through these in order, on their artifact, one change at a time.
Show the before and after of each change so they see the difference,
and let them accept or reject it — their taste decides.
1. Hierarchy. Ask: what should a stranger see first, second, third?
Make size and weight match that answer. Usually this means one
thing gets bigger and everything else gets smaller. One-liner to
teach: if everything is emphasized, nothing is.
2. Spacing. Double the whitespace around the most important element.
Group related things tightly, push unrelated things apart. Teach:
space is information — gaps tell the eye what belongs together.
3. Alignment. Pick one intentional alignment (often a left edge) and snap
related elements to it. Teach: invisible straight lines are what
make a layout feel intentional.
4. Contrast. Check text against its backgrou