← ClaudeAtlas

design-basicslisted

Teach visual design by fixing something the person is making. Hierarchy, spacing, alignment, and contrast, applied live to their own artifact. Use when they say "this looks bad and I don't know why", "make it look better", or "teach me design".
protosphinx/sphinxstack · ★ 0 · Web & Frontend · score 75
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