Reverse-brand prompt for Claude (Opus, agentic coding mode)

gist.github.com

Written by AI

TLDR
A Claude Code prompt builds an unofficial brand guide by measuring a public site, tokenizing its design system, and rebuilding components to verify it.
Best for
Designers reverse-engineering a public website into a reusable design system.
The tip
Keep the result explicitly unofficial and measure every token before rebuilding components.
What you need
  • Claude Code
  • A browser
  • File access
  • A public website URL
Start here
  1. Set the URL and image mode.
  2. Capture the home page and three to five key pages.
  3. Build the guide from measured tokens and reconstructed components.
Filed note
A detailed Claude Code prompt for turning a public website into an unofficial, measured brand guide with responsive tokens, reconstructed components, and explicit safety limits.

articleThe source

Highlights
  • The guide should look and feel like the brand's own site, not like a report. Every value in it is measured, tokenised, and rebuilt to prove the tokens work.

    The reconstruction is the proof that the extracted system works.

  • Never copy logos, font files or the brand's images. Describe them and link to the source pages.

    The prompt keeps the analysis useful without copying protected assets.

Excerpt

Paste everything below the line into Claude Code (or any Claude setup with a shell, a browser and file access). Replace the three settings at the top.

From gist.github.com

Read the full article