Design Hunt
Browse 8 reference sites with the Playwright MCP browser, in one of
four modes. Always confirm the mode with the user before opening
browser sessions — browsing is slow and visible.
The 8 sites
The 4 modes
Ask the user which mode they want. Default to inspiration if
unclear.
Mode 1 — inspiration
Goal: see what's trending, gather visual references.
- Ask the user: what domain? (e.g., "landing page for SaaS",
"e-commerce for fashion", "portfolio for photographer")
- Open 2–3 sites most relevant to the domain:
- Creative / portfolio / brand → awwwards, behance
- Component-level UI → dribbble, tailwindui, shadcn
- Full templates → templatemonster, themeforest, framer
- Search each site for the domain keyword.
- Take 1 screenshot per site (the search results or first result).
- Return: 3–5 links to specific designs, with one-line "why it fits"
per link. No code.
Mode 2 — extract
Goal: pull a specific component or style from a site for reuse.
- Ask the user: which URL, and which component (hero, nav, card,
pricing table, footer…).
browser_navigate to the URL.browser_snapshot to see the DOM tree.- Use
browser_evaluate to extract:
- The component's outerHTML
- Its computed styles (color, font, spacing, radius, shadow)
- Any CSS variables / Tailwind classes on the element
- Return: the HTML + a minimal CSS/JSX snippet that reproduces the
component. Attribute the source URL in a comment.
Do not copy an entire page verbatim — extract the specific
component the user asked about.
Mode 3 — screenshots
Goal: build a local library of references.
- Ask the user: which sites, how many designs, what domain.
- For each site: navigate, search, take screenshots of the top N
results.
- Save each screenshot to
~/Desktop/design-references/<site>/<date>/
with a slugified name.
- Return: a list of saved paths + a one-line caption per file.
# Save path pattern
~/Desktop/design-references/<site>/<YYYY-MM-DD>/<slug>.png
Mode 4 — replicate
Goal: rebuild a seen design 1:1 in the user's stack.
- Ask the user: which URL, and which stack (HTML/CSS, React +
Tailwind, React + shadcn, etc.).
browser_navigate to the URL.browser_take_screenshot of the full page (and key sections).browser_snapshot to capture the structure.browser_evaluate to extract computed colors, fonts, spacing.- Rebuild the page in the requested stack, using the user's existing
project conventions if available.
- Attribute the source URL in a comment at the top of the file.
Important: replication is for learning and personal reference.
Don't republish someone else's template as your own — credit the
source. For commercial work, buy the template or build an original
design inspired by it.
Workflow (all modes)
- Confirm mode with the user (inspiration / extract /
screenshots / replicate). Default: inspiration.
- Confirm scope — which sites, what domain, how many results.
- Open browser with
browser_navigate. Resize to a sensible
viewport first (default 1280×800 desktop, or 390×844 mobile if
the user asked for mobile).
- Capture what you need (snapshot, screenshot, evaluate).
- Close the browser with
browser_close when done — browser
sessions are heavy.
- Return the result in the mode's specific format.
Anti-patterns
- Don't open the browser without confirming the mode and scope first.
- Don't take 50 screenshots "just in case" — disk fills up.
- Don't extract a full page's HTML and call it "extract component".
- Don't replicate a paid template 1:1 for a commercial project.
- Don't forget to close the browser.
- Don't skip attribution — always credit the source URL.
Verification
Before returning, confirm:
Additional resources
- For per-site navigation tips, search syntax, and extraction
snippets, see reference.md.
1---2name: design-hunt3description: Hunt advanced web design templates across 8 reference sites — awwwards.com, dribbble.com, behance.net, templatemonster.com, themeforest.net, framer.com/templates, tailwindui.com, and ui.shadcn.com — using the Playwright MCP browser. Four modes: inspiration (browse trends), extract (pull components/CSS), screenshots (save references to disk), replicate (rebuild a seen design in code). Use when the user says "find design for X", "найди шаблон для Y", "покажи трендовые дизайны Z", "вытащи компонент с сайта", "сделай скриншоты дизайнов", "реплицируй дизайн", or invokes /design-hunt.4---56# Design Hunt78Browse 8 reference sites with the Playwright MCP browser, in one of9four modes. Always confirm the mode with the user before opening10browser sessions — browsing is slow and visible.1112## The 8 sites1314| Site | Best for | URL |15|------|----------|-----|16| awwwards.com | Award-winning creative sites of the week | https://www.awwwards.com |17| dribbble.com | UI shots, component concepts | https://dribbble.com |18| behance.net | Full design case studies | https://behance.net |19| templatemonster.com | Ready-made templates (paid + free) | https://www.templatemonster.com |20| themeforest.net | Premium templates (Envato) | https://themeforest.net |21| framer.com/templates | Modern Framer templates | https://www.framer.com/templates |22| tailwindui.com | Tailwind CSS components | https://tailwindui.com |23| ui.shadcn.com | Modern React component library | https://ui.shadcn.com |2425## The 4 modes2627Ask the user which mode they want. Default to **inspiration** if28unclear.2930### Mode 1 — inspiration3132Goal: see what's trending, gather visual references.33341. Ask the user: what domain? (e.g., "landing page for SaaS",35 "e-commerce for fashion", "portfolio for photographer")362. Open 2–3 sites most relevant to the domain:37 - Creative / portfolio / brand → awwwards, behance38 - Component-level UI → dribbble, tailwindui, shadcn39 - Full templates → templatemonster, themeforest, framer403. Search each site for the domain keyword.414. Take 1 screenshot per site (the search results or first result).425. Return: 3–5 links to specific designs, with one-line "why it fits"43 per link. No code.4445### Mode 2 — extract4647Goal: pull a specific component or style from a site for reuse.48491. Ask the user: which URL, and which component (hero, nav, card,50 pricing table, footer…).512. `browser_navigate` to the URL.523. `browser_snapshot` to see the DOM tree.534. Use `browser_evaluate` to extract:54 - The component's outerHTML55 - Its computed styles (color, font, spacing, radius, shadow)56 - Any CSS variables / Tailwind classes on the element575. Return: the HTML + a minimal CSS/JSX snippet that reproduces the58 component. **Attribute the source URL** in a comment.5960**Do not** copy an entire page verbatim — extract the specific61component the user asked about.6263### Mode 3 — screenshots6465Goal: build a local library of references.66671. Ask the user: which sites, how many designs, what domain.682. For each site: navigate, search, take screenshots of the top N69 results.703. Save each screenshot to `~/Desktop/design-references/<site>/<date>/`71 with a slugified name.724. Return: a list of saved paths + a one-line caption per file.7374```bash75# Save path pattern76~/Desktop/design-references/<site>/<YYYY-MM-DD>/<slug>.png77```7879### Mode 4 — replicate8081Goal: rebuild a seen design 1:1 in the user's stack.82831. Ask the user: which URL, and which stack (HTML/CSS, React +84 Tailwind, React + shadcn, etc.).852. `browser_navigate` to the URL.863. `browser_take_screenshot` of the full page (and key sections).874. `browser_snapshot` to capture the structure.885. `browser_evaluate` to extract computed colors, fonts, spacing.896. Rebuild the page in the requested stack, using the user's existing90 project conventions if available.917. **Attribute** the source URL in a comment at the top of the file.9293**Important:** replication is for learning and personal reference.94Don't republish someone else's template as your own — credit the95source. For commercial work, buy the template or build an original96design inspired by it.9798## Workflow (all modes)991001. **Confirm mode** with the user (inspiration / extract /101 screenshots / replicate). Default: inspiration.1022. **Confirm scope** — which sites, what domain, how many results.1033. **Open browser** with `browser_navigate`. Resize to a sensible104 viewport first (default 1280×800 desktop, or 390×844 mobile if105 the user asked for mobile).1064. **Capture** what you need (snapshot, screenshot, evaluate).1075. **Close** the browser with `browser_close` when done — browser108 sessions are heavy.1096. **Return** the result in the mode's specific format.110111## Anti-patterns112113- Don't open the browser without confirming the mode and scope first.114- Don't take 50 screenshots "just in case" — disk fills up.115- Don't extract a full page's HTML and call it "extract component".116- Don't replicate a paid template 1:1 for a commercial project.117- Don't forget to close the browser.118- Don't skip attribution — always credit the source URL.119120## Verification121122Before returning, confirm:123124- [ ] Mode was confirmed with the user.125- [ ] Browser was closed at the end.126- [ ] For `extract` and `replicate`: source URL is in a comment.127- [ ] For `screenshots`: files exist on disk at the stated paths.128- [ ] For `inspiration`: 3–5 links with one-line justifications.129- [ ] No more than ~10 screenshots per session unless asked.130131## Additional resources132133- For per-site navigation tips, search syntax, and extraction134 snippets, see [reference.md](reference.md).
viamagic333-lang