Skills / Design basics
Design basics
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".
Use this skill. Nothing to install.
Don't have an agent? · Raw file: skills/design-basics.md
Watch the first two minutes
This is how a session goes, including the part everyone is afraid to say out loud. Click through it.
Scripted example of a real session.
What if I just have bad taste?
The skill never asks for taste up front. It asks questions with checkable answers: what should be seen first, what belongs together, how many edges does this layout have, does any text disappear when you squint. Each answer becomes one concrete change, shown as a before and after, and you judge the pair with your own eyes. When you prefer your original, it stays and the trade-off gets stated in one line. Taste is what you have after enough of those comparisons; it is the output of the session and never the entry fee. Good pages to practice on:
What you end up with
Your artifact, visibly better, plus a record of what changed and why. Here is what that record looks like for a chess club announcement page.
- The before is described honestly. No invented horror story: centered everything, same-size everything, and decoration by default is what most first pages actually look like.
- Four moves, in order. Hierarchy, spacing, alignment, contrast. Each was one change on the real page, judged as a before and after by the owner.
- Improvement by removal. Most of the visible gain came from taking things away, and each removal got its one-line reason.
- The note keeps it fixed. Three lines in the file mean the next edit stays consistent instead of starting the drift again.
Questions people actually ask
Is this free?
The skill is free, no account, no catch. The agent you paste it into may or may not be: Gemini has the widest free tier, Copilot's free tier is enough to try it, ChatGPT and Claude free plans can also run it in a chat.
Do I need design software?
No. The lesson happens on whatever your artifact already lives in: an HTML page, a slide, a doc, a profile. A screenshot is enough to start. If you truly have nothing in progress, the skill builds a one-page real thing with you, like a club announcement, and teaches on that. It never demonstrates on fake content.
What if I like my version better?
It stays. The skill's rule is that your taste decides: it shows each change as a before and after, and if you prefer the original it keeps yours, states the trade-off in one line, and moves on. It does not win arguments.
Is this actual design theory or just tricks?
It is the four principles working designers reach for first: hierarchy, spacing, alignment, and contrast. The difference from a course is order: each principle gets named at the moment it fixes something on your own work, which is when it sticks.
How do I know it worked?
The done test is concrete: your artifact is visibly better and saved in the format you need, you can point to where each of the four moves happened on it, and a three-line note in the file records the fonts, colors, and spacing unit now in use.
Where to go from here
Keep sharpening the eye:
Make something worth fixing:
Curious? Read the full skill — the exact instructions your agent gets
--- name: design-basics category: design description: 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". --- # 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 background — if they squint and it disappears, darken or lighten it. One strong accent color at most. Teach: contrast is for the one thing that matters. After each move, ask if it looks better to them and why. If they prefer their original, keep it and say what the trade-off is in one line. Do not win arguments; explain and move on. ## The subtraction pass End by removing things: extra fonts down to two, extra colors down to two plus an accent, borders and shadows that decorate without separating anything. Each removal, one line on why. Most amateur design fails by addition; make them feel the artifact getting calmer as things leave. ## Done - Their real artifact, visibly better, saved or exported in the format they need - They can name the four moves and point to where each one happened on their own work - A three-line note (in the file or a comment) recording the fonts, colors, and spacing unit now in use, so the next edit stays consistent If they want to go further, suggest pick-fonts-and-colors for the palette or design-critique to practice judging work.