Steal a Website's Design With AI (The One-File Fix)

Ask an AI to "make it look premium" and it has nothing real to anchor to. It guesses at the fonts, the spacing and the colors, and lands on the safe, average version of a website. Everyone who asks the same way gets the same forgettable result.

The fix isn’t a cleverer prompt. You hand your AI the real design language of a site you already love, and that fits in one file.

It’s called a DESIGN.md, and you get it from Refero Styles, a library of 2,000+ design systems pulled from real product websites. Each one captures the site’s colors, typography, spacing, components, and do’s and don’ts in a file written for AI to read.

Instead of describing "premium" in words the AI has to interpret, you give it the literal rules of a design a human already got right. It stops guessing and starts following.

01

Find a style you love

Go to styles.refero.design and scroll until something feels like the vibe you want. Pick a site close to your brand. A calm editorial site and a loud playful one produce completely different builds.

02

Copy its DESIGN.md

Open the style, click the DESIGN.md tab and hit Copy.md. Paste it into a plain text file and save it as DESIGN.md.

03

Load it as a skill

Make a folder called my-site-style. Put your DESIGN.md inside, plus a SKILL.md with the text below.

For Claude, zip the folder and go to Customize, then Skills, click +, then Create skill, then Upload a skill. Code execution has to be on in Settings. (Claude’s skill guide)

For Codex, drop the folder into .agents/skills in your project, or ~/.agents/skills to use it everywhere. (Codex’s skill guide)

my-site-style / SKILL.md

--- name: my-site-style description: Design system for building my websites. Use whenever building, styling or redesigning a website, landing page or UI. Follow DESIGN.md exactly for every visual decision. --- # My Site Style Whenever you build or edit a website, landing page or UI, read DESIGN.md in this skill folder first and follow it as the source of truth. Rules: 1. Use only the colors, fonts, type scale, spacing scale, radius and shadows defined in DESIGN.md. Do not invent new ones. 2. Build components (buttons, nav, cards, inputs) the way DESIGN.md describes them, and reuse them across every section. 3. Follow its do's and don'ts and its layout notes. 4. If DESIGN.md names a font I may not have a license for, use the closest free Google Font and tell me which one you swapped. 5. Don't copy the source site's logo, images, product names or written copy. Borrow the design language only. Use my content or clear [PLACEHOLDER] text. 6. Before you finish, check the page at mobile width (375px) and fix anything that breaks.

04

Build in agent mode

Open Claude Code, Claude Cowork or Codex, paste the prompt below and fill in the brackets. No skill set up yet? Just attach the DESIGN.md to the chat. It works the same, you’ll just re-attach it every time.

The Build Prompt

You are a senior web designer and front-end developer. Build my website using the design system in my DESIGN.md (loaded as a skill, or attached to this chat). Treat it as the source of truth for every visual decision. ABOUT ME / MY BUSINESS: [who you are, what you do, who it's for, in 2-3 sentences] THE SITE: [personal portfolio / landing page for X / small business site] SECTIONS: [hero, about, work samples or services, testimonials, contact] MY CONTENT: [paste your real headline, bio, services, links, or write "use clear placeholders"] BUILD IN: [a single HTML file / a React artifact / my repo in this folder] Steps: 1. Before writing code, read DESIGN.md and list back the exact colors, fonts, type scale, spacing scale and main components you'll use. Stop if anything is missing and tell me. 2. Build the hero section only. Show it to me. 3. After I approve, build the remaining sections one at a time, reusing the same components and spacing rhythm. 4. Check every section at mobile width (375px) and desktop (1440px) and fix anything that breaks. Rules: - Do not invent new fonts, colors or spacing values. If you need something DESIGN.md doesn't cover, pick the closest existing token and tell me. - Use my content, never the source site's logo, images, brand name or copy. - Keep it accessible: real text (not images of text), readable contrast, alt text on images. - At the end, list any place you had to deviate from DESIGN.md and why.

Plans

Codex is included on every ChatGPT plan, even Free. Claude Cowork and Claude Code need a paid Claude plan, starting with Pro.

Premium is mostly consistency. A real design system uses the same type scale, spacing rhythm and components on every section, so the site feels considered instead of assembled. Your AI can hold all of that in one file and never drift, which is exactly what it can’t do when you describe a look in one sentence.

Build one section at a time. Get the hero right against the design system, then move to the next. You stay in control and the AI stays locked to the rules.

One line I always keep in the prompt: borrow the design language, never the brand. No copied logos, images or copy.

Steal A Website’sPremium Design

Steal A Website’s
Premium Design