A Claude Code skill that helps you find real-world design references for your project. Describe what you're building, and it searches the web for apps, websites, or web apps that match your vision — then guides you through a structured design direction process.
/design-ref is a 6-phase interactive design consultant:
- Parse Brief — You describe your project; it extracts the design dimensions
- Initial Search — Finds 10 diverse real-world references using web search
- Screenshots — Captures live screenshots of your favorites (via Playwright)
- Preference Deep-Dive — Asks targeted questions about what you like/dislike
- Refined Search — Finds 10 more references, tightly aligned with your preferences
- Design Direction Synthesis — Outputs a comprehensive design brief (colors, typography, layout, motion)
The skill automatically matches references to your project type:
| You're building... | It finds... |
|---|---|
| Mobile app | Real mobile apps (Mobbin, App Store, Screenlane) |
| Website | Live websites (Awwwards, SiteInspire, Godly) |
| Web app / SaaS | Product UIs, not just marketing pages |
- Claude Code CLI installed
- Optional but recommended: Playwright MCP server configured for live screenshots
curl -fsSL https://raw.githubusercontent.com/oniani1/design-ref-skill/main/install.sh | bashirm https://raw.githubusercontent.com/oniani1/design-ref-skill/main/install.ps1 | iexCopy the files into your Claude Code config directory:
# Create directories
mkdir -p ~/.claude/skills/design-ref
mkdir -p ~/.claude/agents
# Copy files
cp skills/design-ref/SKILL.md ~/.claude/skills/design-ref/SKILL.md
cp agents/design-scout.md ~/.claude/agents/design-scout.mdThat's it — no registration, no config. Skills are just markdown files.
In any Claude Code session:
/design-ref A fitness tracking mobile app with a bold, energetic aesthetic
/design-ref Minimalist portfolio website for a photographer
/design-ref SaaS dashboard for project management, clean and professional
Or just run /design-ref with no arguments and describe your project when prompted.
The skill is two markdown files:
~/.claude/skills/design-ref/SKILL.md # The 6-phase interactive flow
~/.claude/agents/design-scout.md # Web research subagent
- SKILL.md defines the conversation flow, phases, and user interaction
- design-scout.md is a specialized subagent that searches design galleries, app showcases, and review sites to find real references
The scout agent searches across:
- For apps: Mobbin, Screenlane, App Store, scrnshts.club, pttrns.com
- For websites: Awwwards, SiteInspire, Godly, Minimal Gallery, OnePageLove
- Cross-industry: Always includes 2-3 references from outside your industry for fresh inspiration
rm -rf ~/.claude/skills/design-ref
rm ~/.claude/agents/design-scout.mdMIT