Change a screen with the patterns it already has, not new ones. Use when the user says \"redesign this\", \"restyle this page\", \"add a new state\" or \"make it match the rest\".
Installs into .claude/skills of the current project.
Are you the author of Design Within What Exists?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tonygorb-design-within-what-exists)
---
name: design-within-what-exists
description: "Change a screen with the patterns it already has, not new ones. Use when the user says \"redesign this\", \"restyle this page\", \"add a new state\" or \"make it match the rest\"."
license: MIT
metadata:
author: Tony Gorb
source: https://github.com/tonygorb/skills
category: design
cover: "reuse"
---
# Design within what exists
Read what's already there, reuse it, and only then design what's missing.
## Steps
1. Open the live screen first, at the size where it's used most.
2. List what it already uses: buttons, spacing, type, colours, empty and error states.
3. Reuse before you invent. If something new is needed, name it and say why.
4. Show one or two options and let the user pick before building. If the structure itself needs
rethinking, run `concept-lab` instead.
5. Build only the option that was picked.
## Before it's done
- Compare the new screen side by side with its neighbours.
- Remove every option and leftover you made along the way.
## Never
- Never change a shared colour or size for one screen.
- Never hide anything important behind hover only.
## What to hand back
The finished screen, what you reused, and anything new with the reason for it.
