Claude Code Can Now Follow a Real Design System

Today I've got a free library that gives your coding agent real design taste, a 20-minute restyle you can run this weekend, Canva's AI Connector for building designs from a chat, and a tiny open vo...

Happy Friday,

Let's get into it.

In This Email

» Save This: Refero Styles, a free design system library for AI agents

» Build This: restyle one page in 20 minutes with a single DESIGN.md file

» Try This: Canva's AI Connector, designs straight from your chat

» AI Update: Gradium open-sources Phonon, a 64 MB voice model

» Here's My Take: why taste is the new bottleneck

🔖 Save This: Give Your Agent Taste

Refero Styles

You ask your coding agent for a nice-looking page and you get the same purple gradient everyone else gets. I've been there more times than I'd like to admit.

Refero Styles fixes that. It hands your agent a design system to follow: the colors, fonts, spacing and components of a real product website, written as a plain-text file called DESIGN.md.

So what is a DESIGN.md? Think of it as a design brief an AI agent can read. Each style page gives you the same system five ways: a preview, the DESIGN.md, Tailwind v4, CSS variables and design tokens. Refero says the files work in Cursor, Claude Code, Codex, v0 and Lovable.

What it replaces: twenty rounds of typing "make it look more modern" into your prompt and hoping.

What it costs: browsing and copying the files is free, and you don't need an account. The Refero MCP server and Refero Skill, which let your agent search the full library on its own, are paid. The pricing FAQ says "Pro, Team, and Lifetime include Refero MCP." Team is $20 a month or $140 a year per seat.

One honest note on size. Refero says it has 2,000+ design systems. When the Academy checked the public sitemap it listed about 1,340, so treat the bigger number as Refero's own.

The trap: a DESIGN.md based on a famous brand makes your page look like that brand. Refero says its files aren't official brand guides. Borrow the system, then swap in your own logo, name, main color and images before anything goes public. Some brands also use paid fonts, so ask your agent for a close free Google Font instead.

→ Browse Refero Styles here

🛠️ Build This: Restyle One Page in 20 Minutes

Here's the exact workflow. You need a project folder and Claude Code (or any agent that reads a project file). Copy the prompts as they are.

Pick one style. Open Refero Styles, search for a look you like and pick one. One style per project, because mixing two gives you mud.
Save the file. On the style page, open the DESIGN.md tab, copy it and save it as DESIGN.md in the root of your project.
Tell your agent to use it. Open or create CLAUDE.md in the same folder and paste this in:
Before changing UI, read @DESIGN.md. Use its colors, typography, and spacing as visual references. Derive fields, copy, states, and behavior from this project.
Using Tailwind? Paste the Tailwind v4 tab into your CSS too, so the colors and fonts exist as real classes your agent can use.
Start small. Open Claude Code in that folder and ask for one section only:
Rebuild the pricing section using DESIGN.md. Keep our copy.
Make it yours. Swap in your own logo, name and main color, and keep the system's rhythm with a prompt like this:
Replace the logo, brand name and main color with ours. Keep the spacing and type scale from DESIGN.md.
Check, then roll it out. Compare the new section with the old one side by side. If it looks designed on purpose, do the next page.

That's it. One file, three lines, and a page that no longer looks like a template. The full walkthrough, with the optional paid MCP setup, lives in the Academy.

→ Follow the step-by-step lesson here

🎨 Try This: Designs Straight From Your Chat

Canva's AI Connector

Canva's AI Connector lets you search, create, autofill and export Canva designs from a chat. You ask for a deck or a social post, and you get back a design you can actually edit. It works with ChatGPT, Gemini, Copilot and Claude.

The trap: Canva Free costs $0, but per Canva's pricing page its Brand Kit is 3 colors only. Full brand fonts and colors need Pro at US$144 a year or higher.

How to try it Monday:

Connect Canva in the chat app you already use.
Paste in a one-page doc, then send this:
Turn this doc into a five-slide deck in Canva. One idea per slide, short headlines, and leave space for images.
Open the result in Canva and fix it there, instead of starting from a blank template.

→ Get the Canva setup guide here

🔊 AI Update: A Voice Model That Runs on Your Laptop

Gradium Phonon 31m

Gradium open-sourced Phonon on Oct 20. It's a family of small text-to-speech models that run on your own device, no cloud needed.

The English Phonon 31m model is Apache 2.0, 64 MB, and ships with 37 built-in voices. Gradium says it "starts speaking in just 7 ms on a laptop CPU." That's Gradium's own number, so test it on your machine before you build around it.

The trap: only the 31m model is free for commercial use. The 40m models, including the multilingual one, are CC BY-NC, so keep those for personal projects.

Why it matters: you can give an app or prototype a voice that works offline, with no per-minute bill. Phonon isn't in the Academy yet.

→ Try Phonon 31m here

💬 Here's My Take

AI made building fast. It didn't make building look good. That's why so many new sites feel the same: same layout, same gradient, same fonts.

Refero Styles is the cheapest design upgrade you'll make all year. One file, no plugin, and your next landing page stops looking like a template. Pair it with Canva for the slides and social posts, and you've covered most of what a small team ships each week.

My advice: pick one page this weekend and restyle it. Don't redo the whole site. Do one page, look at it next to the old one, and decide from there.

→ Start the Refero lesson here

📚 Go Deeper

The full walkthrough is in the AI Resource Vault: the Refero Styles lesson, with the exact CLAUDE.md lines and the optional paid MCP setup. Every Friday pick comes from the free AI Academy, where 5,000+ members share guides, tools and what's working for them.

Join the Free AI Academy →

Free, no card. Guides, tools and the people running them live here.

That's it for this week. I'd love to know: which page are you restyling first? Reply and tell me, I read them all.

See you Tuesday for the news.

From Drew and The AI Debrief team

P.S. Restyle one page with Refero and send us the before and after. Hit reply, we read every one.

P.P.S. New here, or missed one? Every past edition is in the archive.