Big Idea

The argument in one line.

A single reference image can be turned into a canonical, agent-readable design system in minutes, and a small claude.md rule is what stops that system from drifting once building starts.

Who This Is For

Read if. Skip if.

READ IF YOU ARE…

You build products with AI coding agents (Claude Code, Codex, Cursor) and your UI ends up looking generic or inconsistent.
You want a repeatable way to lock in visual direction before writing any application code.
You're comfortable installing an open-source skills package and running it inside an existing coding-agent workflow.

SKIP IF…

You already have a mature design system or work from real Figma files with a design team.
You're looking for a no-code or drag-and-drop design tool rather than something that outputs markdown and HTML for a coding agent.

TL;DR

The full version, fast.

Everyone can ship something with AI coding agents now, but most of it looks and feels generic because there's no consistent design system underneath. The creator's open-source BuilderOS package includes a design-system skill: give Claude Code one image, Figma file, or website reference and it interviews you on light/dark mode, color approach (monochrome vs. accent), typeface pairing, and anti-patterns to avoid, then generates two paired files -- design.md (the canonical rules, in Google's open design-doc format) and design.html (a live visual mirror of every token and component). A small addition to claude.md then instructs the coding agent to always check design.md before touching the UI, reuse existing tokens instead of inventing new ones, and update both files together whenever either changes -- so the design system never drifts as the actual product gets built out.

Free for members

Chat with this breakdown — free.

Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.

Create a free account →

Chapters

Where the time goes.

00:00 – 01:06

01 · Cold open + the design problem

States the thesis: anyone can build with AI, but few can make it look and feel professional. Introduces himself and the video's plan.

01:06 – 03:32

02 · Introducing BuilderOS

Shows builder-os.dev, the npx install command, and the GitHub repo. Frames BuilderOS as a free, open-source skills package.

03:32 – 05:15

03 · How the design-system skill works

Explains that the skill takes any image/Figma/URL reference and outputs a paired design.md + design.html, plus a claude.md consistency rule.

05:15 – 06:28

04 · Picking a reference image

Chooses a minimal, editorial, hard-edged monochrome UI reference for his own product, eyedropper, reasoning that an invisible design layer suits a tool meant to host other people's design systems.

06:28 – 08:26

05 · Prompting Claude Code with the reference

Pastes the image into Claude Code running Fable 5 on high effort and sends the design-system skill prompt.

08:26 – 10:51

06 · Answering the skill's clarifying questions

Walks through the Q&A: light-only mode, pure monochrome (no accent color) for color/emphasis, and a first pass at typeface direction.

10:51 – 11:11

07 · Comparing candidate typefaces

Rejects Inter as generic, tests Archivo at large sizes and finds it lacks character for the Swiss aesthetic he wants.

11:11 – 12:10

08 · Finding Panchang on Fontshare

Goes to Fontshare for a free display font, lands on Panchang, and tests it against his product name 'eyedropper' to judge how the logotype would actually look.

12:10 – 13:01

09 · Sponsor break: Product Studio

Mid-roll pitch for his paid coaching program teaching people to go from app idea to paying customers.

13:01 – 16:16

10 · Locking the final font + anti-pattern rules

Confirms Archivo + JetBrains Mono + sparing all-caps Panchang for headings/logo, then answers the anti-pattern question: avoid generic SaaS softness, avoid all-caps overuse, avoid decorative color.

16:16 – 17:47

11 · Reviewing the generated design system

The skill outputs a complete design.md and design.html: color palette, spacing scale, radius (none), elevation, buttons, inputs, dos and don'ts -- matching the brief closely.

17:47 – 18:19

12 · Wiring claude.md to enforce the system

Adds a design-system section to a claude.md base template (credited to a widely-starred community CLAUDE.md), instructing the agent to treat design.md as canonical and keep design.html mirrored.

18:19 – 19:12

13 · Recap

Recaps the workflow: design.md + design.html from a reference, plus claude.md rules, to keep an AI-built product's UI professional and drift-free.

19:12 – 19:55

14 · Closing CTA

Points to BuilderOS install link and his Skool community for deeper BuilderOS training.

Atomic Insights

Lines worth screenshotting.

A design system built before any application code exists is far cheaper to adjust than one retrofitted after the product is built.
Feeding a coding agent a single reference image plus a structured Q&A produces a usable design system in well under 30 minutes.
Pairing a machine-readable design.md with a human-visible design.html lets you review and edit the same system in two different ways without them falling out of sync.
A one-paragraph claude.md rule -- treat design.md as canonical, keep design.html mirrored, reuse tokens instead of hardcoding values -- is what prevents visual drift across a long agentic build.
Choosing pure monochrome over an accent color was a deliberate choice to keep the design system itself invisible so a user's own branding could sit on top of it.
Testing candidate fonts against the actual product name/logo text, not lorem ipsum, is how the creator picked a display face (Panchang) that a generic sample wouldn't have revealed.
High effort mode was recommended over extra/max for Claude Fable 5, since max reportedly burns tokens without a proportional quality gain, especially when working from detailed spec documents.

Takeaway

Lock your design system before you write application code

WHAT TO LEARN

A design system generated from one reference image, split into a canonical rules file and a visual mirror, stays consistent through a long AI-assisted build only if the coding agent is explicitly told to treat one file as the source of truth.

Settling on visual direction before building any product screens means later changes are small style tweaks instead of a full re-skin.
A canonical rules file paired with a human-browsable visual version lets you review a design system two ways without the two drifting apart.
Testing candidate fonts against your actual product name reveals problems a generic type sample won't show you.
An explicit agent rule to reuse existing design tokens instead of inventing new ones is what prevents visual inconsistency from creeping in over a long build.
Choosing a genuinely minimal, low-decoration visual language (no color-as-decoration, hard edges, restrained type) is itself a defensible design position, not just a lack of design.

Glossary

Terms worth knowing.

design.md: A markdown file, following Google's open-source design-doc format, that defines a product's typography, color, spacing, and component rules in a format a coding agent can read and follow.
design.html: A rendered, browsable HTML file that visually mirrors design.md -- showing actual component states, hover effects, and type scale -- so a human can review the same system a coding agent is reading.
BuilderOS: An open-source collection of Claude Code / coding-agent skills (installed via npx skills add) built by the video's creator, covering tasks like generating a design system from a reference.
claude.md: A rules file that Claude Code automatically reads before every prompt in a project, used here to instruct the agent to keep the design system consistent as the codebase grows.

Resources

Things they pointed at.

01:18toolBuilderOS ↗

08:15toolPanchang (Fontshare) ↗

08:35productProduct Studio ↗

12:13linkGoogle's design-doc format

Quotables

Lines you could clip.

00:46

“Everybody can build something with AI, but not everyone can build something that looks and feels incredible to use and will actually get real customers.”

sharp framing of the real gap in AI-built products→ TikTok hook↗ Tweet quote

11:05

“We definitely don't wanna use Inter because that is very kinda design sloppy.”

blunt, opinionated aside creators repeat→ IG reel cold open↗ Tweet quote

16:17

“This is pretty much spot on for exactly what we were looking for here.”

payoff moment showing the generated system matching the brief→ newsletter pull-quote↗ Tweet quote

The Script

Word for word.

Read-along

Don't just watch it. Burn it in.

See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.

metaphor

00:00We have just got access back to Claude Fable five, and I wanna show you how to get the most out of Fable five whilst you have access. And what I wanna show you today is how to solve one of the biggest problems if you're building with AI right now. Because everybody can build something with AI, but not everyone can build something that looks and feels incredible to use and will actually get real customers.

00:20And so in this video, I wanna break down exactly how I create design systems using Fable five and Claude code and how you can do this in just a matter of minutes using these custom skills that I've created. And in this video, I wanna walk through how I create design systems, how to use this design system skill to create your full design system in minutes, and how to actually use your design system inside of AI coding agents like Claude Code.

00:45If you don't know me, my name is Chris and for the last fifteen years I've been designing apps and advising startups on product and design and I've helped hundreds of people to build and launch real apps and products and get real customers all using AI tools like Claude code, Codex, and Cursor. And with that said, let's get straight into the video and show you how to set up your design system with Claude Fable five.

01:06So in this video, we're gonna be setting up a full design system using my system for building with AI which called Builder OS. You can get Builder OS by going to builder-os.dev and just installing it with this n p x skills add command here or you can go over to GitHub and install it from the GitHub repository as well.

01:22It's completely open source so totally free. You can install it in any project and get up and running in a matter of minutes. And the skill that we're gonna be looking at inside of BuilderOS today is the design system skill.

01:33And this is the skill that I use to create any design system from any image reference, website URL, or Figma design. And the skill basically takes any design that you have and it translates it into two files. First, a design.md following Google's open source well established design system format.

01:51And this design dot m d file is gonna be a markdown file that outlines all of the styles and definitions for your design system inside of your code base. And then on top of that, it also creates a design dot HTML file, which is a visual reference of your design system so that you can see exactly what is going on inside your design dot m d.

02:10Have a look at all the components, what everything looks like, all the hover states, everything to do with your entire design system. And then on top of that, I'm gonna show you how you can make sure that your coding agent, I e Claude code, stays consistent with your design system using a small rule that you can add to your Claude dot m d file.

02:27And if you don't know what Claude dot m d, basically Claude dot m d is a rules file that Claude code will follow in any prompt that you send to it inside of a project. It's basically a set of rules are injected before your prompt gets to Claude so that it knows exactly what to do and how to work inside of your project. So let's jump over to Claude code where I have BuilderOS already set up inside of my project.

02:49And I've got it set on Claude Fable five here. And where I would recommend starting with Fable five is to use it on on the high effort level. From what I have heard about Fable five, people are getting better results from high than they are with extra and max just uses an insane amount of tokens.

03:04So if you really wanna get the maximum usage out of Claude Fable five, then high is a really, really good balance of effort to use with the model. And especially if you're using detailed spec documents and plans before, you're gonna get really, really good results with Fable five on high effort. So that's what we're gonna use here.

03:21If I look inside of this eye dropper projects that we've got here, we can see that inside of the files in dot agents, we've got our design system skill set up. So BuilderOS is installed in this project and this skill is basically gonna take an image or a Figma or a website URL reference and turn it into a design dot m d and a design dot h t m l file.

03:40It's gonna extract the visual language from this image reference that we provide it, and it's gonna ask us maybe some follow-up questions, and then it's gonna turn that into a design dot m d. It's basically gonna be the foundation for our design system.

03:52So let's go back to a new session here inside of this project. And all I'm gonna do is say, can you use the design system skill inside of this project with this image reference? And then what I'm gonna do is I'm gonna find an image reference of a design style that I wanna recreate.

04:07Now for the app that I'm building, which is called eyedropper, which is gonna basically be a dashboard with an MCP where you store your design system so that any of your team members can access that design system with their coding agents via MCP. Basically, I wanna go for something that is minimal, clean, but still have a high level of design polish to it because what I'm trying to create in this product is an invisible UI layer that the user can put their own design system, their own design rules on top of.

04:34And so the direction that I'm gonna go here with this is something that's a little bit more interesting, a little bit more editorial compared to a lot of other user interfaces out there. Something in line with this where we have very strong typographic rules, we have very strong layout and structure with very hard edges and we're just using a black and white color palette here.

04:54Again, something a little bit like this that is more kind of editorial feeling that user can kind of put their own design system on top of. So I'm gonna take this reference here. So let's take this let's actually take this reference here because I think this is clearer and cleaner in terms of, like, what the menu looks like and having the type more visible here as well.

05:14And then what I'm gonna do is I'm just gonna go back to Claude code. I'm gonna paste this image in. And so it says and so the prompt here says let's use the the design system skill inside of this project with this image reference.

05:25This is using Fable five on high. Now that we have access to Fable five again, let's send this off. Claude code is gonna use this design system skill and then it's gonna create our design dot m d file.

05:35Maybe ask us a couple of questions off the back of that. And this is gonna be the foundation for our design system. And the reason that we're creating this design dot HTML file as well alongside this is because that's gonna be the visible version of our design system that we can look at and make any amends or tweaks to.

05:51And we can do that inside of this project. And I'm doing this before I've actually built the application here as well. So I would recommend figuring out your design style or figuring out rough design direction before you actually build any products, before you build your app that you're working on because that's gonna make it way easier to do any changes later because you're not gonna have to change the entire style of the whole application.

06:11You're just gonna have to make small tweaks here and there. And also, we're gonna add in a rule to claude.md that's gonna automatically check against our design dot m d files and make any updates as we change our design as we go so that our design dot MD and design dot HTML always stays in sync in our project.

06:28So now Claude Coder's gonna ask us a few follow-up questions based on the design reference that we've pasted in here. So it's asking, should the design system be light mode, dark mode, or both? I'm gonna go for light only to start off with.

06:39Reference is pure monochrome. How should interactive emphasis and color work in the app? Either pure monochrome, which where black is the accent, solid black for primary actions, weight scale of hierarchy, semantic states, get muted, desaturated, hues, used sparingly, boldest, and the most on reference choice.

06:56We do monochrome plus one signal color, like a acid yellow or signal orange, like a very bold saturated color, which could be good from a branding point of view. Or we do monochrome plus plus a restrained accent. So I'm actually going for pure monochrome here because we wanna keep this as minimal amount of kind of impact as possible because we want the design system for the user to actually shine here and take precedent.

07:23So I'm gonna go with pure monochrome. Which type face direction for the condensed grotesque look? Archivo plus JetBrains mono.

07:30Oswald plus inter plus mono. We definitely don't wanna use inter because that is very kinda design sloppy. Let's have a look at these fonts first to see what they look like.

07:39I already know what JetBrains mono looks like, but let's have a look at archival. So this is archival here. Let's have a look what it looks like when it's big and bold.

07:47And I wanna just put in eye dropper here to see what this looks like at thicker weights as well. It's okay. It doesn't have like a ton of character and it doesn't it's not necessarily the the closest to the Swiss design that we were going for.

08:03And maybe it works better as like body copy to make tabs something more readable like this sort of size. And I maybe wanna go with something that's a little bit more of a display font at larger sizes. So I think let's go with number one, archival plus JetBrains mono.

08:19I think we could also do a more, like, character full display font just dotted around here and there. So I'm gonna go to font share, which is my kinda go to for free, well designed fonts. And there's one that I wanna look for specifically.

08:35Quick break in the video to talk about how you can make five to 50 k from your app or product idea inside of my program, the product studio. Now in the product studio, I teach people the exact process to go from idea to live products with real paying customers. The program walks you through the entire process from start to finish, from finding the right idea, figuring out the business strategy, building your design system and product identity, to building the full products with AI coding agents, and launching it to real paying customers with a strategy that is tailored to your specific products.

09:08Plus you get a load of ongoing support to help you actually reach that five to 50 k target as well. So if you're interested in learning more about how you can launch your products and make between five to 50 k, then you can click the link in the description down below to apply to the product studio. And I'll see you there.

09:25Let's get back to the video. Which is this Pan Chang font here because if if I write in eyedropper here, I think that looks really good. And especially if that's the logo at a small size, I think that could work really really well, especially with the other fonts.

09:38So I'm gonna say let's go with Panchang very sparingly for large headings in caps in a heavy weight. Let's go with option one of archivo plus JetBrains mono, but also add in Panchang from font share very sparingly in a bold way and all caps for top level headings and the eyedropper logo.

10:03And what I'm gonna do is I'm just gonna paste in the link here to the font as well. So let's go with that. And then the last question here is which anti patterns must this design never drift into?

10:12And these are they become our enforceable don't rules inside of our design.md. So we never wanna do this generic Sass softness. I don't mind about decorative shadows and depth.

10:23I think we might wanna add some of those sparingly. Let's make sure we're not using color to decorate anything. And I think we can we're alright with going with lowercase here.

10:30I don't wanna keep everything in caps because I feel like it is a bit too aggressive. So we can change that slightly from the reference that we've provided here. Let's submit those answers.

10:39So now Fable five has created our full design system here, and you can see this is pretty much spot on for exactly what we were looking for here. We've got the typography choices we made. We've got this eye dropper font as the logo at the top level here.

10:54We've got this monochrome color palette with muted error and success and warning states here. We've got spacing scales, radius, which is none, elevation and depth, components, which are these buttons and the hover states here, inputs. And this is all looking pretty much spot on for exactly what we wanted.

11:10We also have the dos and don'ts from the design. N pulled out in our HTML document here as well. And so now we have our design dot HTML here and our design dot m d file, which is down here, which is basically the the design dot m d format from Google, including everything we need for our coding agent to follow our design system that we have here in this HTML file.

11:34And now I wanna show you one final thing that you can do here with this design system now that Fable five has created this in just a matter of minutes from our reference image. And I've just dropped this claw dot n d file into this project. So let me show you what it actually does.

11:49So here you can see the claw dot n d that I'm using inside of this project, and this is the extra rules. It's gonna keep your design system in check and also update your design dot n d and design dot HTML anytime there are changes that are made by your AI coding agent and make sure that they're just staying consistent throughout working on your entire project because we don't want our design styles to drift.

12:10Now this Claude the m d is taken from CarParty's for rule Claude the m d file, and this is one that I use all the time, but it basically just reduces the amount of errors and bugs made by your AI coding agents significantly and and has been proven to do so and has over a 170,000 stars, I think, on GitHub.

12:27So it's a really good one to use as just a generic claude.md inside of every coding project. I've added in one extra section at the bottom here called design system, and this basically says the design system is defined by two paired files that live in the code base, design dot n d and design dot h t m l.

12:42Design.nd is canonical and design dot h t m l mirrors it. If the two ever disagree, treat design dot m d as correct, but bring design dot HTML dot back in line. And here are the rules.

12:51Follow design.md for any front end work. Before writing or changing any u UI, read the file and build it. Reuse documented tokens, components, and patterns instead of inventing new ones or hard coding values that already exist, and then review front end changes against designer MD and propose new patterns if there are any, and then keep designer MD and designer HTML consistent so that the two files must always describe the same design system whenever you change one, update the other one in the same commit so that they never drift.

13:20And after editing either, verify that they still match. And this is the rules that's gonna keep everything in check here. So to cover off everything that we've created here, we've built our design.md.

13:30We've built our design.html design system here to follow inside of our project, and we've got our claude.md rules that instruct our coding agent exactly how to follow this design system and keep design.md and design.html in check as we're building out our products.

13:48And that is how you can create a professional design system in under half an hour here. We've done it with Fable five inside of Claude code so that you can ensure anything that you build with AI has a professional looking design that doesn't drift, who maintains a high level of quality that doesn't look like AI slob.

14:06So that is how I've been building my design systems using my Builder OS set of skills, creating a design dot MD and design dot HTML file from an image reference, a Figma file, or a website URL, and then adding those rules into claude.md to maintain consistency across my entire project and make sure that your AI coding agent or Claude code in this instance is always following those front end rules whenever it builds any front end changes to your user interface.

14:33And those two files paired together work really, really well because you can see the design system visually in your design.html. You can make any changes to it visually to the design.html and then get it to reflect those changes back in design.md. And so you have full control over your entire design system inside of your project.

14:51And if you wanna get started with this, you can just get BuilderOS by clicking the link in the description down below. And I teach BuilderOS inside of my community on school as well, so you can learn exactly how this whole system works in more detail. If you enjoyed this video, don't forget to like and subscribe.

15:07Thank you for watching, and I will see you next time.

The Hook

The bait, then the rug-pull.

With Claude Fable 5 temporarily back at subscription pricing, the creator uses the window to show how to fix the part of AI-built products that usually gives them away: inconsistent, generic-feeling design.

Frameworks

Named ideas worth stealing.

03:33concept

Design.md + Design.html pairing

design.md is canonical
design.html is the visual mirror
update both together, verify they still match

A two-file contract where a machine-readable rules file and a human-browsable visual reference are kept forcibly in sync via an agent rule, so the design system never silently drifts.

Steal forany AI-coded project (mod-creator, MCN+ apps) that wants a lightweight, agent-enforced design system without a full Figma pipeline

CTA Breakdown

How they asked for the click.

VERBAL ASK

19:20product

“you can just get BuilderOS by clicking the link in the description down below. And I teach BuilderOS inside of my community on school as well”

Soft, single closing CTA stacked with a free open-source install path and a paid community upsell; low-pressure and consistent with the rest of the video's tone.

MENTIONED ON CAMERA

01:18toolBuilderOS ↗

08:15toolPanchang (Fontshare) ↗

08:35productProduct Studio ↗

FROM THE DESCRIPTION

PRIMARY CTAWhere the creator wants you to go next.

OTHER LINKSAlso linked in the description.

Storyboard