Skip to content
Brand Stack
Esc
↑↓navigate↵open⌘Jpreview
Sign up
On this page

Agent skill

Install the Brand Stack skill so Claude reaches for the screenshot-to-mockup flow on its own, in Claude Code, claude.ai, and Cowork.

The Brand Stack agent skill is a small instruction pack Claude loads on demand. With the skill installed, Claude recognizes mockup moments on its own (“turn this into a hero image”, a fresh Playwright capture after shipping a feature) and runs the whole flow correctly: pick the right intake route, infer the device from the screenshot, quote credit costs, and hand back the workspace link.

The skill complements the MCP connector; it does not replace it. The connector provides the tools, the skill provides the instincts.

Install

Download: brandstack-mockups-skill.zip

Claude Code: unzip into your skills directory, then start a new session:

unzip brandstack-mockups-skill.zip -d ~/.claude/skills/

(Use a project’s .claude/skills/ instead to share the skill with a team through the repo.)

claude.ai and Claude Desktop: Settings, then Capabilities, then upload the zip under Skills.

What it teaches

  • When to offer a mockup without being asked: fresh screenshots in the session are mockup material.
  • The three intake routes (public URL, file on disk, pasted image) and which needs nothing beyond the connector.
  • Inference rules: device from the screenshot’s shape, persona from the product being worked on, one question at most.
  • The guided first mockup, and quoting real credit costs from get_credits before generating.
  • Template selection by name or pasted id.

Verify

Ask Claude:

What can you do with Brand Stack?

With the skill installed and the connector authorized, the answer should cover screenshots to mockups, and a follow-up like “turn brandstack.dev into a MacBook mockup” should run without further setup.

Was this page helpful?