Decisions Ui Ideation

---
name: decisions-ui-ideation
description: Run before implementing UI — research real product patterns (Refero/Mobbin MCP), pick a design direction, and output tokens or a short DESIGN.md before writing code.
---

# Decisions UI Ideation

**I am running research and direction-setting so the user gets designed UI, not generic AI layout.**

Do this before the first line of UI code unless the ticket already includes an approved design spec.

## 1. Clarify the job (30 seconds)

- What screen or flow? Who uses it daily vs once?
- What must be scannable first (status, CTA, content)?
- Existing design system in the repo — reuse tokens/components?

## 2. Gather references (pick what you have access to)

| Source | How |
|--------|-----|
| **Refero MCP** | Search screens/flows; pull DESIGN.md tokens (color, type, spacing). Pro plan. |
| **Mobbin MCP** | Pattern search for mobile/web; OAuth once. Pro plan. |
| **Aceternity UI** | Open `https://ui.aceternity.com` component page; copy or adapt the shown React/Tailwind/Motion code. |
| **Godly** | Browse `https://godly.website`; attach 1–3 screenshot links the user (or you) picked as mood references. |
| **Repo** | Read existing pages/components — match patterns before importing new visual systems. |

If MCPs are not configured, say so once, then use Aceternity URLs + Godly screenshots + repo patterns. Do not block on paid tools.

Optional: install Refero’s agent methodology: `npx skills add https://github.com/referodesign/refero_skill`

## 3. Commit a direction (write it down)

Produce a short artifact (comment in ticket, `DESIGN.md` snippet, or result packet section):

- **Tone** (one phrase): e.g. dense ops tool, editorial landing, playful consumer.
- **Layout idea**: hierarchy, grid, one memorable detail.
- **Tokens**: font pairing, 3–5 colors as CSS variables, spacing rhythm.
- **Motion**: none / subtle / one hero moment (match Aceternity only if motion fits).

Pair with `frontend-design` or `frontend-design-direction` for implementation rules.

## 4. Then implement

- Ponytail: minimal diff, reuse project components.
- Fallow on JS/TS: audit before ship.
- `browser-qa` / `decisions-playwright` after build.

## MCP setup

See `~/.decisions/harness/mcp-recommendations.json` and run `~/.decisions/harness/mcp-setup-design.sh` once for Mobbin/Refero CLI hints.