design-superskills

Claude Code skills for designers.
Your agent handles the grunt work around design, so you get more time to actually design.

Install · The skills

The design workflow is fun. But it comes with a bunch of grunt work: screenshotting competitors, pasting them into Figma and labelling every row, turning a wall of sticky notes into something you can share, tidying frames into sections, placing dev notes, writing a ticket for every screen.

design-superskills hands that work to Claude Code. It is semi-automated on purpose. You pick the references, write the notes and make the design calls. Claude does the capturing, sorting, writing up and filing.

The skills

You don't call skills by name. Describe what you want in plain words and Claude picks the right one. They work on their own, or one after another from first reference to dev handoff.

design-research

You pick the references. Claude screenshots them into Figma.

Name the sites or apps and the flow you care about. Claude opens them in a headless browser, walks the flow, captures each screen and places one labelled row per source in your Figma refs section, matching any rows you already arranged by hand.

If you want more than references, ask for:

• Observations next to each screen, through a UX lens (apps and admin UIs) or a marketing lens (public sites)
• An annotated HTML gallery with impact and opportunity scores
• A comparison across sources, with ratings and a verdict

"Put screenshots of these three onboarding flows into my Figma refs section"

"Capture basecamp.com's pricing flow as references, and add your observations next to the screens"

"Compare the onboarding of these two apps"

Apps and admin UIs (ux-reviewer): General UX · First-time user experience · Upsell and monetization · Custom (you describe the focus)

Public websites (marketing-reviewer): Marketing effectiveness · Visual design · Conversion flow · Content strategy · Custom

Reviewing a WordPress plugin? wp-plugin-research prepares the site (WP-CLI, a temporary admin user, first-run gates) and hands over to design-research.

research-synthesis

You leave notes on the refs. Claude turns them into directions.

Stick notes on your references the way you already do. Claude reads every sticky, dev note and text note in the section (or observations gathered in chat) and writes one document: problem statement, objectives, shared patterns, current state, scope, directions and feature ideas.

You get an HTML page and a Markdown copy you can send to your team. Every claim links back to the note it came from. It summarises; it never ranks the directions or picks one for you.

"Turn the notes in this refs section into a problem statement, objectives and directions"

"Synthesize my research into one doc I can send to my managers"

design-first-draft

Claude drafts each direction, so you never start from a blank canvas.

A starting point to react to, not the final design. Claude takes a synthesis (or interviews you on a project brief until the problem, objectives and directions are clear) and builds three to five first-draft screens per direction, in Figma or as HTML.

It looks for your design system in Figma and in code and confirms it with you first. With none, it proposes a few visual styles and builds with the one you pick. Each run ends with a summary of what it built with, QA results and gaps in the design system.

"Design first drafts for the four directions in this synthesis, in my Figma Designs section"

"Here is the project brief, help me shape directions and draft them in code"

You take it from there

The draft gets things started. Your judgement makes it good. No skill here; this is the part you keep.

design-organize

Claude sorts your screens into labelled sections.

Point at a messy page or section. Claude groups the screens by flow into labelled sections, names every screen and lays them out in clean rows. It can also re-format an existing layout or move screens between sections.

"Organize this page into sections by flow"

"Clean up and label these screens in Figma"

design-annotations

You drop notes anywhere. Claude places each by its screen.

Write dev notes wherever is quickest. Claude makes room under each screen and moves every note next to the screen it belongs to, using your design system's note component or a default template. It can also tighten the copy of existing notes so developers get behaviour, states and data sources, not guesswork.

"Place my dev notes by their screens"

"Add dev notes to the first 3 screens in this section"

"Improve the copy on existing dev notes"

dev-handoff

Claude turns each screen and its notes into a GitHub issue.

Point at a Figma section. Claude reads the screens and their dev notes, asks how you want the issues split, detects the issue type, and opens them on GitHub using your repo's issue templates (bug report, enhancement, new feature) and Figma links. Set FIGMA_TOKEN to attach frame PNGs too.

"Hand off the Signup section as issues"

"Turn these designs into tickets for the frontend team"

Install

Requirements

• Claude Code with plugin support
• agent-browser for screenshot capture
• Figma MCP (remote server) for everything that reads or writes Figma (see Figma setup)

Steps

1. Add the marketplace:

   /plugin marketplace add shub-rajput/design-superskills
   

2. Install the plugin:

   /plugin install design-superskills@design-superskills
   

3. Install agent-browser, if you don't have it:

   npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browser
   

4. Restart Claude Code. The session-start hook warns you if agent-browser is missing. Then try:

   "Put screenshots of stripe.com's pricing flow into my Figma refs section"

   Claude should pick up the design-research skill on its own.

Figma setup

Needed for design-research, research-synthesis, design-first-draft (Figma mode), design-organize, design-annotations and dev-handoff. These skills use the remote Figma MCP server, not the built-in Claude AI Figma integration.

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Restart Claude Code after adding it.

Optional for dev-handoff: set FIGMA_TOKEN in your environment to attach frame PNGs via the Figma REST API. Without it, issues link to Figma instead.

Permissions

The research skills run dozens of shell commands: browser screenshots, a local gallery server, Figma calls. Before the heavy steps, Claude asks how you want to handle them:

1. Auto mode (recommended): press Shift+Tab until the mode shows auto mode. Claude runs commands without asking each time. No settings file, no restart.
2. Your own allowlist: prefer to keep approvals on? Add Bash(...) rules to .claude/settings.local.json for the commands you trust.
3. Manual approvals: approve each command as it comes. Slow, but always works.

Updating

Auto-update (recommended): run /plugin marketplaces, select design-superskills and choose Enable auto-update. It's off by default for third-party marketplaces. When an update lands, run /reload-plugins.

Manual: run /plugin, find design-superskills under Installed, select Update now, then run /reload-plugins.

design-superskills/
├── skills/
│   ├── design-research/       # Capture any flow → Figma refs rows (+ optional observations, gallery, comparison)
│   │   ├── SKILL.md
│   │   ├── capture.md         # Login, capture notes, Figma placement recipe
│   │   └── review-layer.md    # Review brief, agents, placing observations, comparison
│   ├── research-synthesis/    # Canvas notes → problem, objectives, patterns, directions doc
│   ├── design-first-draft/    # Synthesis or brief → first-draft screens per direction (Figma or HTML)
│   ├── design-organize/       # Figma screen organization + labeling
│   ├── design-annotations/    # Dev note placement + copy improvement
│   └── dev-handoff/           # Figma designs → GitHub issues for dev handoff
├── agents/
│   ├── ux-reviewer.md         # UX analysis of app and admin UI screenshots
│   ├── ux-comparator.md       # Side-by-side app comparison
│   ├── marketing-reviewer.md  # Marketing/design analysis of public websites
│   └── marketing-comparator.md# Side-by-side website comparison
├── assets/                    # Icon
├── hooks/                     # SessionStart hook for agent-browser check
├── shared/
│   └── common-steps.md        # Shared steps: permissions, capture strategy, gallery, troubleshooting
├── templates/
│   └── gallery.html           # Figma-compatible HTML gallery template
└── CHANGELOG.md

License

MIT — Shubhang Haresh Rajput