The design-taste skill: turn sites you love into your own system
TL;DR
The design-taste skill takes 1-3 sites you already like and pulls the real decisions out of them: hex codes, the font pairing, the size jump, the spacing steps, and what those sites deliberately never do. It writes all of it to ~/.claude/design.md plus a preview page you can open, so every future build starts from your look instead of a default one.
Nobody is born with taste. Taste is a set of decisions somebody already made and wrote down, so they stop re-deciding every time. That's the gap between your pages and the ones you bookmark.
The design-taste skill closes it. You name or paste 1-3 sites you love the look of, and it pulls out the actual decisions underneath: the page background, the text color, the one accent, the display font over the body font, how big the headline is compared to the body, how much air sits between sections. Then it writes those decisions to a file at ~/.claude/design.md.
That file is the point. Other skills in the same free repo read it, so your builds start looking like they came from the same person, because they did. It's free and public in our freeskills repo, and it's the one skill here that creates something the others use.
Turns sites you already love into one design file every later build reads.
Install the design-taste skill
Clone the repo once, then copy this folder into your Claude Code skills directory.
bashgit clone https://github.com/duncan-buildroom/freeskills.git
mkdir -p ~/.claude/skills
cp -r freeskills/design-taste ~/.claude/skills/Restart Claude Code or start a new session. That's the whole install. No API keys, no config.
Run it the first time
Type /design-taste. It asks one thing: name or paste 1-3 sites you love the look of, and finish the sentence about how you want people to feel when they land on your page. Screenshots work too. It won't take more than three references, because four is a mood board rather than a system.
Then it writes two files: ~/.claude/design.md with the palette, the font pairing and its Google Fonts embed line, the size scale, the spacing steps, and a don't list. The second is ~/.claude/design-preview/index.html, a page you open in your browser to actually see the swatches and the type in use. Open the preview, then give it one plain reaction, a feeling rather than code. It makes one round of edits and stops.
Build the system from sites you already love
The main run. Give it real references and be honest about the feeling you're after.
/design-taste
Sites I love the look of: [1-3 sites, names or URLs, e.g. a brand you buy from and a landing page you bookmarked].
What I'm building: [e.g. landing pages for my coaching offer].
I want people to feel [one word or phrase] when they land on my page.
I [do / don't] already have a brand color I have to keep: [hex or description].Start from nothing if you can't name a single site
Most beginners can't. The skill won't stall on it. It offers a set of named directions and you pick the one that sounds like you.
/design-taste
I can't name any sites I love. Give me the named directions and a one-line description of each, then I'll pick one.
What I'm building: [e.g. a link-in-bio page and a sales page].
I want people to feel [one word] when they land on it.Use the file on every build from now on
The file is worthless sitting on your machine. This is the line that makes it work, and you'll paste it hundreds of times.
Read ~/.claude/design.md and follow it. Use that palette, font pairing, scale, and spacing, and respect the don't list.
Now build: [whatever you're building].The 60-second version
Sixty seconds on what this skill does and why deciding once beats re-deciding on every build.
- 1Hook: there's a brand new free Claude skill that takes you from I don't have taste to a written design system saved on your machine that every future build reads.
- 2Mechanism: you hand it one to three sites you actually love the look of, and it pulls the real decisions out of them: the hex codes, the font pairing, the spacing steps, how big the headline is next to the body, and the things those sites deliberately never do. It writes all of it into one file on your machine, plus a preview page so you can see the whole system in one go.
- 3Transformation: you stop re-picking colors and fonts every single time. Everything you build starts looking related, and you get that back in one line at the top of any prompt.
- 4Close: free, and 54 more sit in the same repo. A look is one thing. Having enough built for it to matter is another, and that second part is what Claude Code Club is for. $9 a month, link's below.
Tonight: open your bookmarks, pick the two sites you like most, and run the skill on them. Ten minutes and you own a look.
Common questions
Do I need to know how to code?
No. You name sites you like and react to what comes back in plain words. Claude writes both files and saves them where they need to live.
What if I can't name any sites I love?
The skill offers a set of named directions and you pick one. It won't leave you sitting there staring at the question.
What if the sites I picked have nothing in common?
It tells you that out loud and makes you pick which one leads. Averaging two opposite looks is how pages end up generic.
I already have a brand color. Can I keep it?
Yes. Say so and that color becomes your accent, then everything else gets built around it.
What do I do with the file once it exists?
Start any build prompt with a line telling Claude to read ~/.claude/design.md and follow it. Other skills in the same repo, like make-it-designed, read it on their own.
Keep going
Want a look that's yours and a path to use it on?
Get 650+ plug-and-play skills, MCPs & prompts, plus 7,000+ members - $9/mo, cancel anytime.
Join the Club