Build a Reusable Claude Code Command That Turns Any Website Into a Design.md Style Guide

Website Style Stealer

By the end of this guide, you'll have a reusable /steal-style command in Claude Code that turns any reference site into a clean Design.md style guide your AI agent builds from.

Who This Is For

• You extract design systems from websites often and don't want to retype the prompt every time.

• You use Claude Code and want a one-command tool that captures any website's look.

• Your AI builds drift off-brand, and you want a consistent style guide to anchor them.

• You build websites for multiple clients and want a fast, repeatable way to document each design system.

• You want to turn a useful prompt into a permanent part of your workflow.

What You'll Build

A custom Claude Code slash command (for example, /steal-style) that, given a reference site, generates a structured Design.md containing:

• A design system overview including the vibe, aesthetic, and layout philosophy.

• A color palette with hex codes and semantic roles.

• Typography including font families, weights, and the type scale.

• Spacing and layout rules including the grid, containers, and padding scale.

• UI component breakdowns including buttons, cards, navigation, and forms.

What You'll Need

• Claude Code installed and running.

• A reference website you want to capture and its source if Claude can't fetch it directly.

• A few minutes to create one command file. No coding required.

Steal-Style Command Builder Prompt

I want a reusable /steal-style slash command in Claude Code that I can point at any reference website and get back a clean Design.md style guide my AI agent can build from — so I never have to retype this prompt again. Set it up with me:

1. Create a custom slash command called /steal-style that takes a URL as input.

2. When run, it should fetch and analyze the reference site's rendered output and extract: color palette (with hex codes), typography (font families, weights, sizes for headings/body), spacing and layout patterns, and reusable component styles (buttons, cards, nav, forms).

3. Output all of this into a single Design.md file, written clearly enough that any AI coding agent can read it and produce on-brand components without seeing the original site again.

4. Make the command idempotent — running it again on a new URL should overwrite or version the Design.md cleanly, not append duplicate or conflicting style rules.

5. Test it on one real site I give you, show me the resulting Design.md, and tell me if anything about the site's design was ambiguous or inconsistent enough that you had to make a judgment call.

Reference site to test on: [paste a URL whose design you want to extract].