| name | decisions-design-references |
| description | Playbook for Aceternity UI, Refero MCP, Mobbin MCP, and Godly when building or polishing web UI — what each source is for and how agents should use it. |
Design Reference Sources
DecisionsAI does not replace these products — it tells agents which tool for which job and how to wire MCPs.
Quick pick
| Need | Use |
|---|
| Paste-ready React/Tailwind/Motion components | Aceternity UI — ui.aceternity.com |
| Real shipped screens + DESIGN.md tokens | Refero MCP — refero.design/mcp (Pro) |
| Pattern library + flows (mobile/web) | Mobbin MCP — api.mobbin.com/mcp (Pro, OAuth) |
| Visual inspiration only | Godly — godly.website (manual screenshots/links) |
| ECC implementation taste | frontend-design, frontend-design-direction |
“10x” — if someone lists five sites and the fifth is “10x”, it is usually slang or a misheard name, not a fifth MCP. Ask the user for the exact URL unless they confirm a product.
Aceternity UI (no MCP)
- Site: https://ui.aceternity.com
- Stack: React, Tailwind CSS, Framer Motion
- Workflow: open the component page → copy the published code → adapt to project structure (paths, imports, design tokens).
- Agent tip: put the component URL in the prompt: “Implement the bento grid from ui.aceternity.com/components/…”
- Do not invent Aceternity APIs — only use what’s on the page.
Refero (official MCP + optional skill)
- MCP docs: https://refero.design/mcp
- Library: styles.refero.design (DESIGN.md extracts)
- Requires: Refero Pro; browser OAuth on first MCP call.
- MCP gives: search over 130k+ screens and flows with structured metadata (patterns, layouts).
- Optional skill:
npx skills add https://github.com/referodesign/refero_skill
- Example prompts:
- “Find onboarding flows from fintech apps”
- “Show how Linear handles empty states”
- “Extract typography and spacing for a dense settings page”
- Paste extracted tokens into the repo as CSS variables or tailwind theme extension.
Mobbin (official HTTP MCP)
Godly (gallery only)
- Site: https://godly.website
- No API, no MCP.
- Workflow: user or agent picks 1–3 gallery pages → attach screenshots or URLs → describe what to borrow (typography mood, color, density).
- Do not claim Godly integration — treat as human-curated mood board.
Decisions integration
- Ideation first:
decisions-ui-ideation
- Setup:
~/.decisions/harness/mcp-setup-design.sh and mcp-recommendations.json
- Workflows: UI steps should list this skill +
frontend-design
- Evidence: in result packets, list references used (Refero query, Mobbin pattern, Aceternity URL, Godly link).
When MCP is unavailable
- Use repo existing UI as primary reference.
- Aceternity component URLs for concrete components.
- Godly links/screenshots for direction.
- State in
Blockers: or Summary: that Refero/Mobbin need Pro + MCP setup — do not fake live search results.