Hey, it's Cindy 🌱 Here are the four places I pull from, and the one file that turns all of it into a page Claude Code can actually match.
btw the waitlist for AI System Club is now open! If you're keen on using AI to automate your content, video editing, job search, business or build AI agents, feel free to sign up (only if you want to hehe). Ps. the waitlist gets first dibs:)
Use it as a reference, not a photocopier. The goal is to pull the ingredients (colour palette, type, spacing, motion feel) and apply them to your own content, not to clone someone's live site pixel-for-pixel and ship it as yours. Steal the taste, not the trademark.
the 4 sources
Where to grab real taste
Each of these gives you a different artifact, and they are ordered from the one that sets the whole look to the one that nails a single component.
🎨 refero.design for the whole look. The styles section hands you a design.md for a real site: the exact colours, fonts, and spacing, already in the format Claude Code reads. Start here. (styles.refero.design, and the design.md examples.)
🌀 motionsites.ai for the motion. Animation is the thing Claude usually skips. Find a landing page whose movement you love and copy the prompt it gives you. (motionsites.ai.)
🧩 21st.dev for production-ready components. It hands you individual components (navbars, cards, pricing tables) as copy-paste prompts. (21st.dev.)
📌 Pinterest for the exact look of one component. Want a specific glassmorphism card or a certain button style? Search it, screenshot the result. A picture beats a paragraph of description. (pinterest.com.)
put it in one file
Build your style.md
Now collapse all of that into one reference Claude Code can read in a single pass. In your project folder, make a file called style.md and paste in, in order:
📄 The design.md from refero.design (your palette, type, and spacing foundation).
🌀 The motion prompt from motionsites.ai (how things should move).
🧩 Any component prompts from 21st.dev (the specific pieces you want).
🖼️ Your screenshots from Pinterest, dropped into the same folder as style.md so Claude Code can see them.
the build
Hand Claude Code the exact look
This is the money step. Point Claude Code at your style.md and the images, and tell it to treat them as your exact reference, not loose inspiration:
🚀 the style-reference prompt
Read style.md and every image in this folder. Treat them together as my exact style reference, not loose inspiration. Rebuild my landing page (the hero + first section) so the colour palette, typography, spacing rhythm, component shapes, and animation feel match the reference. List the specific design tokens you pulled (hex colours, font families, radii, shadows) before you write any code, then make the changes.
Asking it to list the tokens first is the trick: you get to sanity-check that it read the reference correctly before a single line of code is written.
what to pull
The 4 tokens that make or break the look
Colour palette The exact hex values, not "blue". A precise palette is the fastest way a page reads as designed instead of default.
Typography Font families, weights, and sizes. The wrong font undoes everything else, so lock this from the reference.
Spacing & radii The rhythm of gaps, padding, and corner rounding. This is the invisible thing that separates polished from cramped.
Motion feel How elements enter and respond. It is what Claude skips by default, which is exactly why motionsites.ai earns its place.
Once you have one style.md you love, keep it. Reuse it across projects, tweak the palette per brand, and Claude Code stops guessing your taste every single time. You built the reference once, now it is leverage.
the waitlist is now open
AI System Club is launching soon
Build AI systems with me through recorded lessons you can follow at your own pace. Join the waitlist for first access and the founding price.
btw this list gets first dibs the moment doors open :)