# Restyle a UI component to match a reference design

Refactor a component's markup, styles, and accessibility to match a design-system reference while keeping its props, state, and logic intact.

- Topic: Software Development
- Framework: Few-Shot
- Level: Standard
- Tags: Design, Coding, Analyze, Fill-in Template
- Source: https://www.thinkwithprompt.com/prompts/restyle-a-ui-component-to-match-a-reference-design

## Prompt

```text
Help me restyle an existing UI component to match a reference component, without changing what it does.

**My component:** [PASTE the full source]
**Framework and styling:** [e.g. React + Tailwind, Vue + CSS modules]
**Reference to match:** [PASTE the reference component's source, or describe it - e.g. a component from my design system or a UI library]
**Things that must not change:** [props interface, data fetching, event handlers, analytics calls, test IDs]

Work in this order:
1. **Analyze my component first** - list its props and types, internal state, side effects, context it uses, events it emits, and any test selectors. Confirm this list before changing code.
2. **Analyze the reference** - structure, class names or tokens, variants, animations, and accessibility attributes (roles, aria-*, keyboard behavior, focus states).
3. **Map old to new** - a table of each element in my component and its equivalent in the reference; note anything with no equivalent.
4. **Refactor the visual layer only** - markup, classes, animations, accessibility. Keep the props interface and logic identical.
5. **Check behavior** - keyboard navigation, focus visibility, screen reader labels, reduced-motion support, dark mode, responsive sizes.

Return: the analysis, the mapping table, the updated component code, a short diff summary, and a checklist of what to test manually. If a reference behavior conflicts with existing logic, stop and ask rather than changing the logic.
```

## What to fill in

- PASTE the full source
- e.g. React + Tailwind, Vue + CSS modules

Free to copy and use. From ThinkWithPrompt (https://www.thinkwithprompt.com/), a library of 2,663 curated AI prompts.