Design within what exists
Change a screen with the patterns it already has, not new ones.
Install for
$ npx skills add tonygorb/skills --skill design-within-what-existsPick your agents from a list.
$ npx skills add tonygorb/skills --skill design-within-what-exists -g -a claude-code -yInstalls into ~/.claude/skills/.
Download design-within-what-exists.zip
Open CustomizeSkills and upload it.
$ npx skills add tonygorb/skills --skill design-within-what-exists -g -a codex -yInstalls into ~/.agents/skills/.
$ npx skills add tonygorb/skills --skill design-within-what-exists -g -a cursor -yInstalls into ~/.agents/skills/.
$ npx skills add tonygorb/skills --skill design-within-what-exists -g -a github-copilot -yInstalls into ~/.agents/skills/.
$ npx skills add tonygorb/skills --skill design-within-what-exists -g -a gemini-cli -yInstalls into ~/.agents/skills/.
$ npx skills add tonygorb/skills --skill design-within-what-exists -g -a opencode -yInstalls into ~/.agents/skills/.
$ npx skills add tonygorb/skills --skill design-within-what-exists -g -a windsurf -yInstalls into ~/.codeium/windsurf/skills/.
Your agent uses it when you say
- “redesign this”
- “restyle this page”
- “add a new state”
- “make it match the rest”
What it does
Read what's already there, reuse it, and only then design what's missing.
How it works
- 1Open the live screen first, at the size where it's used most
- 2List what it already uses: buttons, spacing, type, colours, empty and error states
- 3Reuse before you invent
- 4Show one or two options and let the user pick before building
- 5Build only the option that was picked
Design within what exists
Read what's already there, reuse it, and only then design what's missing.
Steps
- Open the live screen first, at the size where it's used most.
- List what it already uses: buttons, spacing, type, colours, empty and error states.
- Reuse before you invent. If something new is needed, name it and say why.
- Show one or two options and let the user pick before building. If the structure itself needs
rethinking, run
concept-labinstead. - 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.