# @its-thepoe/design-and-refine

**Agent Skill** — **Design & Refine** workflow (0x Designer–style): explore **multiple UI directions**, compare them, fold in feedback, and land a clear plan plus memory for the next iteration.

## What it does

Guides the agent through reconnaissance, variation generation (layout, density, hierarchy options), side-by-side review (including a **design lab** route when your stack supports it), and synthesis into artifacts like `DESIGN_PLAN.md` / `DESIGN_MEMORY.md`. Includes a manual playbook for Cursor and other IDEs.

## Why it’s useful

- Breaks “single mockup” deadlock when direction is unclear.
- Makes tradeoffs explicit (who it’s for, what we optimized for).
- Leaves **durable notes** so the next session doesn’t restart from zero.

## Use when

- You’re **designing or redesigning** a page or component, exploring layout options, or stuck choosing a direction.
- You say **design lab**, **UI variations**, **0x designer**, or **design-and-refine**.

## Install into your agents

```bash
npx @its-thepoe/skills@latest install design-and-refine
```

## Contents

- `SKILL.md` — workflow  
- `reference.md` — stacks, design lab URL, tips  

## Docs

- [Repository](https://github.com/its-thepoe/skills)

## License

MIT