Make it look better
A site or app that works but looks generic or dated.
What you get: Before and after for each change I approve: screenshots if you can take them here, otherwise exactly what I should look at on each page.
Paste this into Claude Code, in your project
You are helping me improve a project that already exists. Today's goal is to make it look better. Work through the steps in order and explain each in a sentence of plain English. Apart from installing the tools listed below on a separate branch, never change anything until I have agreed to it.
1. **Understand the project.** Read the code and tell me in two sentences what it is and how it runs. Then ask me, in one message: which pages or parts matter most, who they are for, and the one thing I want those people to do. Wait for my answers.
2. **Work safely.** Check that git has no uncommitted changes (if it does, ask me what to do), and that git has a name and email set (if not, ask me and set them for this project only). Then switch to a branch called `improve/design`, creating it if it doesn't exist, so everything can be undone.
3. **Install the tools**, for this project only, one line at a time. Skills copied in with git are pinned to the version that was safety-checked (one of them still fetches its latest rules when it runs); plugins install their current version. If Claude Code refuses a line or a commit, tell me and show me the exact command so I can run it myself in a terminal, then carry on.
- `claude plugin marketplace add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git --scope project && claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill --scope project`: Picks a style, palette and font pairing that fit the product. Its search needs Python 3.
- `d=$(mktemp -d) && git -C "$d" init -q && git -C "$d" fetch -q --depth 1 https://github.com/vercel-labs/agent-skills.git 063bee94c3f4df8453406c830b0a7df0f2860278 && git -C "$d" checkout -q FETCH_HEAD && mkdir -p .claude/skills && cp -R "$d/skills/web-design-guidelines" .claude/skills/web-design-guidelines && rm -rf "$d"`: Catches the interface mistakes that make a site feel off. It fetches the latest rules from Vercel each time.
- `d=$(mktemp -d) && git -C "$d" init -q && git -C "$d" fetch -q --depth 1 https://github.com/pbakaus/impeccable.git 489855d98d4502bc2f46af77d4de37e7ef650e10 && git -C "$d" checkout -q FETCH_HEAD && mkdir -p .claude/skills && cp -R "$d/.claude/skills/impeccable" .claude/skills/impeccable && rm -rf "$d"`: Critiques and polishes each screen. On first use it downloads a small helper program from its GitHub releases; without it, it falls back to plain guidance.
If a `claude plugin` line says the `claude` command is not found (usual in the Claude desktop app), don't run the other `claude plugin` lines or hunt for the command, but still run every other line. Instead, add these entries to `.claude/settings.json`, keeping everything already there:
```json
{
"enabledPlugins": {
"ui-ux-pro-max@ui-ux-pro-max-skill": true
},
"extraKnownMarketplaces": {
"ui-ux-pro-max-skill": {
"source": {
"source": "git",
"url": "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git"
}
}
}
}
```
Commit the installed tools on the branch, so throwing the branch away removes them too (plugins also stay downloaded in Claude Code's own folder; remove one with `/plugin`).
After committing: if the plugins installed, tell me to restart Claude Code so this same conversation resumes (in a terminal, `claude --continue`; in the desktop app, reopen this session). If you only added them to `.claude/settings.json`, tell me to install each from the **+** button → **Plugins** (trusting the folder if asked), then reopen this session. Either way I'll type "continue from step 4". If I can't install them, carry on without them and say what we'll miss.
4. **Look before changing.** Review the design of the main pages and propose a better look: style, colours, type, spacing and layout. If Impeccable wants to download its helper program, ask me first; without it, use its written guidance. Use what the installed tools say about doing this well; if they are not installed yet, say so and review from the code. First, if you notice anything urgent outside today's goal (lost data, a broken feature, a password or key in the code), list it under "Urgent, outside today's goal"; if a key or password was ever committed, tell me to rotate it, because deleting it does not remove it from git history. Then give me the findings ranked by impact, the biggest first, each in one line with why it matters. Stop and ask which to do.
5. **Change in small batches.** Do only what I picked, a few changes at a time. For each batch, show me every change as before and after, and wait for me to accept or reject each one. Then run the project's check (as `CLAUDE.md` describes it now). If there is none, or something can only be checked by a person (looking at a page, a screenshot you cannot take, a speed test you cannot run), say so, measure what you can from the code, tell me exactly what to look at, and wait for my "looks good". If a fix needs something only I can choose (a service, an account, something that costs money), stop and lay out the options with their trade-offs instead of picking one. Only then commit the batch with a clear message.
6. **Hand over.** What I end up with: Before and after for each change I approve: screenshots if you can take them here, otherwise exactly what I should look at on each page. Then tell me how to keep the changes (merge the `improve/design` branch) or throw them away (delete it), with the exact commands.
How it was tested
A fresh Claude agent pasted the prompt into a sample project and followed it to the letter, as in the Claude desktop app, where the claude command isn't available, on a computer without Node.js. Without the plugin installed, it switched it on in settings, ran the two pinned skills, and took body text contrast from 2.85:1 to 12.9:1 and a fake "click here" div to a real "Order flowers" link. Step 3's wording was tidied since.
Did this prompt work? It worked · I got stuck Opens a public GitHub issue; never paste keys or personal details.
What it installs, and why
- plugin
ui-ux-pro-max ↗
Picks a style, palette and font pairing that fit the product. Its search needs Python 3.
Safety-scanned 5 Oct 2026 at 477bcb2 · reviewed: safe with caveatsAdds seven design helpers (about 700 tokens per session) that only run when you ask for design work. The main one works fully offline; its logo and icon tools send prompts to paid AI services only if you give them an API key. Its search needs Python 3.
Works in: Chat (part) · Cowork · Claude Codeclaude plugin marketplace add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git --scope project && claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill --scope project - skill
web-design-guidelines ↗
Catches the interface mistakes that make a site feel off. It fetches the latest rules from Vercel each time.
709.6k installs · by the vendorSafety-scanned 5 Oct 2026 at 063bee9 · scan cleanWorks in: Chat · Cowork · Claude Coded=$(mktemp -d) && git -C "$d" init -q && git -C "$d" fetch -q --depth 1 https://github.com/vercel-labs/agent-skills.git 063bee94c3f4df8453406c830b0a7df0f2860278 && git -C "$d" checkout -q FETCH_HEAD && mkdir -p .claude/skills && cp -R "$d/skills/web-design-guidelines" .claude/skills/web-design-guidelines && rm -rf "$d" - skill
impeccable ↗
Critiques and polishes each screen. On first use it downloads a small helper program from its GitHub releases; without it, it falls back to plain guidance.
317.8k installs · rising ×1.33Safety-scanned 5 Oct 2026 at 489855d · reviewed: safe with caveatsThe first time it runs it downloads a small helper program, and it sends anonymous design choices to its website unless you set
Works in: Chat · Cowork · Claude CodeDO_NOT_TRACK=1. Re-reviewed at the newer commit: unchanged.d=$(mktemp -d) && git -C "$d" init -q && git -C "$d" fetch -q --depth 1 https://github.com/pbakaus/impeccable.git 489855d98d4502bc2f46af77d4de37e7ef650e10 && git -C "$d" checkout -q FETCH_HEAD && mkdir -p .claude/skills && cp -R "$d/.claude/skills/impeccable" .claude/skills/impeccable && rm -rf "$d"