hamelsmu

hamelsmu / design-research

Public

Claude Code skill for comprehensive website design research using browser-automation agent teams

58
2
100% credibility
Found Mar 10, 2026 at 52 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
AI Summary

This repository offers a ready-to-use prompt for an AI assistant to break down a website's design into detailed notes on colors, layouts, components, and responsive behavior for easy recreation.

How It Works

1
💡 Spot a beautiful website

You fall in love with a site's look and feel and want to create something just like it.

2
🛠️ Get your AI helper ready

Add a simple browser connector and window organizer to let your AI assistant explore websites like you do.

3
🚀 Launch the design team

Start your AI assistant linked to your browser, all set for a deep dive.

4
🔗 Share the website address

Give your AI the site's web address and tell it to study the design thoroughly.

5
👥 Watch the experts collaborate

Multiple AI specialists work together in real-time, checking colors, layouts, buttons, and how it acts on phones.

6
📝 Collect the full guide

Your AI pulls everything together into one easy-to-read document with exact measurements and tips.

🎉 Recreate the magic

With all the precise details in hand, you confidently build your own version that looks and feels perfect.

Sign up to see the full architecture

5 more

Sign Up Free

Star Growth

See how this repo grew from 52 to 58 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is design-research?

This Claude Code skill automates comprehensive design research on any website using browser-automation agent teams. Feed it a URL—like a SaaS dashboard or course platform—and it dispatches 10 specialized agents to capture hex colors, typography stacks, component inventories, layouts, responsive breakpoints, UX patterns, and even accessibility details, outputting a single structured markdown reference. It leverages the Claude Code CLI (install via npm for free on Mac, Windows, or Linux) and Chrome extension to inherit your login sessions, skipping auth hassles for gated sites.

Why is it gaining traction?

Unlike manual inspections or screenshot tools, it runs parallel agents in tmux split-panes for real-time visibility, handling complex sites in 10-15 minutes with precise CSS measurements and Tailwind equivalents. Developers dig the Claude Code skills integration for one-command audits (`/design-research URL`), plus GitHub-friendly output for design research journals or handoffs—beating clunky browser devtools or paid design research jobs.

Who should use this?

Frontend devs cloning beloved UIs, indie hackers reverse-engineering competitors, or UX teams auditing responsive behavior on authenticated apps. Ideal for those already in the Claude ecosystem doing claude github integration or code reviews, not solo pixel-pushers.

Verdict

Try it if you're deep in Claude Code (check pricing at claude code preis for heavy token use), but at 33 stars and 1.0% credibility, it's raw and experimental—great docs, zero tests, suits tinkerers over production. Solid for quick design research wins once tmux and Chrome setup clicks.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.