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

Turn any website into a reusable design 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 sites often and don't want to retype the prompt every time

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

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

  • You build sites for multiple clients and want a fast, repeatable way to document each look

  • 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 (vibe, aesthetic, layout philosophy)

  • A color palette with hex codes and semantic roles

  • Typography (font families, weights, type scale)

  • Spacing and layout rules (grid, containers, padding scale)

  • UI component breakdowns (buttons, cards, nav, 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

Going Further

  • The manual one-off version of this — Guide: Turn Any Website Into a DESIGN.md File Your AI Coding Agent Can Build From (No-Code Builds)

  • Build more custom commands like this one — Guide: Set Up 3 Custom Slash Commands (AI Foundation)

  • Use the captured design to build and sell sites — Guide: Find Local Businesses With No Website and Sell Them One You Build in Minutes (No-Code Builds)