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.
Installs into .claude/skills of the current project.
Are you the author of Decisions Ui Ideation?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/tensology-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.
