making beautiful websites
how this works
The goal: take something you have already made — a page, an artifact, a tool — and make it genuinely beautiful. If you have nothing to improve, you will make a personal homepage from scratch — there is a prompt for that below, and every other step works the same way.
AI agents produce generic-looking design by default. Left alone, most AI-generated pages end up with the same fonts, the same colors, and the same layout. In this exercise you give the agent better direction: skills written by good designers, real reference sites, and clear rules about what to avoid. Vague requests like "make it prettier" do not work; specific direction does.
install design skills (2 minutes, on your own)
You will install two skills. The first teaches your agent visual design and how to detect the generic AI look. The second teaches it animation, and was written by Emil Kowalski, a design engineer known for his animation work.
Tell your agent to install both for you:
Install two design skills for me. First, add the plugin marketplace pbakaus/impeccable to Claude Code and install the Impeccable plugin from it. Second, install Emil Kowalski's skills by running: npx skills@latest add emilkowalski/skills. If any step is something only I can do, tell me exactly what to type and where. When you are done, list what got installed so I can confirm it worked.
pick your project and your references (5 minutes, on your own)
Open the thing you are going to make beautiful. If you are starting from scratch instead, first have your agent build a plain version, so you have something to improve and a before to compare against:
Build me a simple one-page personal homepage: who I am, what I am working on, and how to reach me. Ask me for the details you need, then build it. Keep the design completely plain for now — we will improve it in the next step.
Then find two reference sites whose look you want to copy — browse recent.design or siteinspire.com and take a screenshot of each one you pick. If you want a font direction too, typewolf.com shows real sites built around great typefaces.
Picking references matters more than anything else in this exercise. Asking the agent to make something look like a specific screenshot works well. Asking for something "modern and clean" does not, because vague descriptions are what produce the generic look.
run the beauty pass (15 minutes, on your own)
Give your agent your reference screenshots, then paste this prompt. Keep the original version of your page somewhere so you can compare at the end.
Run a beauty pass on this project. Work in phases and show me a screenshot after each phase. Phase 1 — Direction. Before touching any code, write a short design brief: one specific aesthetic direction based on the reference screenshots I give you, background and text colors as hex, one display font and one body font from Google Fonts (never Inter, Roboto, Open Sans, Lato, or Arial), one accent color (not purple or indigo), a spacing scale in multiples of 8, and one border radius. Save the brief to this project's AGENTS.md and follow it for everything below. Phase 2 — Remove the AI look. Remove every one of these if present: gradients, glassmorphism, glows, colored card borders, cards inside cards, a centered hero with a small badge above the headline, three identical feature cards with icons on top, numbered 1-2-3 steps, rows of statistics, emoji used as icons, and all-caps section labels. Use near-black instead of pure black, keep body text at 16px or larger, and give headings real contrast: big size jumps and big weight differences. Make one element bold and keep everything else quiet. Phase 3 — Motion. Add animation only where it has a clear purpose. Entrances use ease-out, never ease-in. Keep everything under 300 milliseconds. Animate only transform and opacity. Never animate anything triggered by typing. Respect prefers-reduced-motion. Then review every animation you added and delete any you cannot justify. Phase 4 — Critique. Screenshot the page at desktop and phone sizes. List the ten worst things about it, ranked. Fix the top three. Screenshot again, and show me the before and after.
Read each screenshot the agent shows you and give it specific feedback — for example: "the heading is too small," "the accent color is not doing anything," "remove that animation." Your corrections are what make the design better.
show your group (5 minutes)
Show each other what you made. For each person:
1. Show the before and the after, side by side.
2. Show the reference you used.
3. The other two answer honestly: what still looks AI-generated? Which single change made the biggest difference?
At the end, pick the best transformation at your table to show the room.
going deeper
The best short reads on this, all free:
1. The 16 tells of AI design — a study of 1,590 AI-built pages that measured exactly what makes them all look the same. Useful as a list of things to tell your agent to avoid.
2. Visual design rules you can safely follow — mechanical, checkable rules. Paste your favorites into your AGENTS.md and they apply to everything you build from now on.
3. Great Animations and You Don't Need Animations — Emil Kowalski's two essays: what makes motion feel good, and when to leave it out. His full course is at animations.dev.
4. rauno.me/craft — small interaction details from a highly regarded design engineer, with live demos you can try.