Brand-to-DESIGN.md extractor (live site path)

Category: Vibe Coding Prompts

Document a website’s visual language.

Adapted and shared by Product with Attitude, with credit to awesome-claude-design.

Prompt / skill content

You are a senior design systems architect. Analyze the brand at {URL}
and produce a DESIGN.md file that captures its visual language for
coding agents to replicate.
Inspect: computed CSS of body, h1, primary button, primary link; hero
section tokens (color, type, spacing); font stack; distinctive visual
signatures (radii, shadows, motion, grid).
Output all 9 canonical sections: Visual Theme & Atmosphere, Color
Palette & Roles (CSS variables), Typography Rules, Component Stylings,
Layout Principles, Depth & Elevation, Do's and Don'ts, Responsive
Behavior, Agent Prompt Guide.
Rules: only describe what you can verify from rendered output. Never
hallucinate typography names; mark "unknown" if unclear. Color values
as hex with role names, not brand names. Each section under 150 words.

Where to get it

Read the original resource.

More in Vibe Coding Prompts

Source Code: Valentine’s Day scratch card app — Sharing the full source code to the Valentine’s Day scratch card app so you can build your own. Copy it, tweak it, ship…
Vibe coding: Drag-drop form builder for webinars and workshops — Every creator wants to design forms for events and workshops. Google Forms is the only free option, but it seems limite…
Vibe coding: AI Rules Files Generator — Generate an AI rules file for your coding environment, with plain-language explanations and beginner-friendly product t…
Vibecoding x Cybersecurity: Survival Guide — The cybersecurity critiques of vibecoding are valid. So instead of debating them, I partnered with an expert to map the…
Prompt Pack: 100 Most Common UI Elements For Vibecoders — A Notion library of 100+ common UI elements with ready-to-use prompts for building interfaces with AI. Entries cover wh…
Animation Pack 001: Hero Section - Breathing Gradient — Make Your Hero Section Feel Alive A tiny motion system for modern landing pages - subtle animation, stronger perceived …
Animation Pack 001: Hero Section - Breathing Gradient — Make Your Hero Section Feel Alive A tiny motion system for modern landing pages - subtle animation, stronger perceived …
Vibe coding: Instantly Fix 401 Errors. An Automated Debug Loop That Runs 30+ Checks and Finds Root Cause — An automated debugging prompt for persistent 401 authentication errors, developed while troubleshooting Google OAuth. I…

← Back to Attitude Vault