---
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.
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.