You stare at the screen. The Figma canvas is
completely blank. Or maybe you just generated
another landing page using an AI tool. Right.
And it has that same generic purple gradient.
You know the exact look I am talking about. It
looks perfectly competent, but it feels, well,
entirely soulless. It lacks any real perspective.
Yeah, it's totally flat. Beat. Welcome to the
Deep Dive. I am really glad you're joining us
today. We are unpacking something that completely
changes how we think about creativity and systems.
We really are looking at a fundamental shift
today. Our mission is decoding a methodology
called Claude Code Design. We're exploring how
you take abstract design rules, you know, the
things we normally just call taste, and turn
them into a repeatable plain text system. Which
sounds impossible at first. It does. But the
promise here is massive. Because once you build
this underlying architecture, you never have
to start from zero again. That concept of codifying
taste is exactly what hooked me. So let's start
by looking at the baseline problem we are all
facing. Everyone recognizes current AI design.
Oh, absolutely. It defaults to a highly specific,
totally forgettable aesthetic. It is the digital
equivalent of elevator music. You ask an AI to
make a modern website, and it immediately outputs
a massive, centered hero section. Always. Below
that, you inevitably get three perfectly spaced
feature cards. The buttons are always softly
rounded. Right. And there's usually a subtle
drop shadow on everything. It's clean, sure.
But it has absolutely no point of view. It is
technically proficient, but artistically vacant.
And the root cause isn't a lack of computing
power. The source material points directly to
vague prompting. Yeah, the classic five -word
prompt. We sit down and type, you know, make
a modern fintech site. And that is simply not
enough structural information. You really can't
expect a machine to invent your brand's soul
from a five -word prompt. It's just going to...
guess. I still wrestle with prompt drift myself.
I'll sit there late at night tweaking an AI prompt
for hours. Oh man, we've all been there. I'll
adjust the wording, ask it to make things sleeker
or more dynamic. My eyes will literally start
to hurt from staring at the variations. And after
all that manual labor, the final result still
looks artificially generated. That frustration
is universal right now. The fix. requires a completely
different approach. We have to translate our
visual preferences into strict, measurable rules.
Right. We need to dictate the exact typography
scales. We need to define the spacing tokens.
We really need to establish strict boundaries
for layout and colors. It reminds me of working
with a master chef. If you walk into a Michelin
starred kitchen and just tell the chef, cook
me something good. They're going to play it safe.
Exactly. They will probably fall back on a standard
safe dish. They don't know your palate. But if
you hand them your grandmother's specific family
recipe, complete with exact ratios for spices
and precise resting times, you are guiding their
technical expertise. That chef analogy perfectly
captures the dynamic. You aren't just handing
them the ingredients. You are defining the technique.
The source material contrasts this beautifully.
The weak prompt just asks for a modern website.
But the better prompt. acts like that detailed
recipe. It demands a, quote, clean fintech landing
page with sharp pricing cards, dark navy accents,
and strict sans serif typography. That specific
language bridges the gap. You're stripping away
the AI's ability to guess. You dictate that headlines
must be oversized. You force the layout to maintain
massive open sections. You restrict the color
palette to three specific hex codes. Right. It
forces the output out of that generic purple
gradient territory. Which brings up an interesting
philosophical point about the tools we use. So
is it that the AI lacks the capability to design
well, or do we just lack the vocabulary to instruct
it? It is entirely about our instructions. The
AI has the capability. It just needs us to define
the boundaries of taste. Right. We just need
to translate visual taste into specific text
rules. Exactly. So if the fix is giving the AI
a highly specific technical recipe, how do we
actually write that document? That leads us straight
into the mechanics of text -based design. Two
sec silence. This is where the methodology gets
incredibly practical. We are looking at a real
-world repository called Awesome Designer AI.
It's a GitHub tool that basically acts as a library
of plain text design systems. That's the part
that feels so counterintuitive to me. High -end,
nuanced visual taste things that usually require
a senior art director to understand can actually
live inside a simple markdown text file. Yeah,
we're talking about a specific file usually named
design .md. This mundane little text document
becomes Claude's ultimate design c***. Wow. It
means your brand's visual identity is no longer
locked inside proprietary software. It isn't
trapped in a messy Canva template or, you know,
a complex Figma file. It lives as raw code. I
was reading through the awesome designer AI examples
in the source, and it is fascinating how they
break down major brands. Stripe is a great example
to unpack here. Oh, Stripe is perfect. Stripe
is widely considered the gold standard for clean
sauce design. Stripe's design language is entirely
focused on projecting trust and technical competence.
Their plain text system doesn't just say, look
trustworthy. It defines specific, measurable
rules. It dictates crisp pricing layouts. Right.
It enforces rigid rules around using massive
amounts of white space to let the content breathe.
Then you look at Spotify's rules, which are fundamentally
opposed to Stripes. Spotify's text file dictates
deep, rich, dark themes. Completely different
vibe. It forces the AI to use bold, vibrant neon
accents that pop against that dark background.
The rules actively encourage heavy visual contrast.
You also have SpaceX in that repository. Their
brand is about scale. and drama so their text
rules demand cinematic layouts the markdown dictates
sweeping product sections that stretch across
the entire viewport an apple system is predictably
minimal the text file aggressively enforces a
product first hierarchy The typography rules
are incredibly rigid, stripping away anything
that distracts from the core device being showcased.
And Claude Ries' design .md file internalizes
these strict constraints and then actually builds
functional assets. It's wild. It writes the code
for fully responsive pricing pages. It generates
perfectly formatted HTML slide decks. It builds
interactive website sections that perfectly match
the Codify brand. I do have to push back a little
bit on the mechanics here, though. I am slightly
skeptical that a plain text document can truly
capture an abstract vibe. Take SpaceX's cinematic
feel. Okay, yeah. How does Claude know what cinematic
actually means just from reading text without
any visual aids? Claude already has broad training
on those concepts. The text just sets the strict
boundaries and constraints for it to apply that
training. Got it. Text defines boundaries and
Claude fills in the creative execution. That
is the perfect way to summarize it. Knowing these
pre -made templates exist in a GitHub repository
is fantastic. But relying on someone else's templates
isn't enough if you want to build a unique brand.
You have to build a custom system for your specific
workflow. Building your own system is where the
real leverage is. The source outlines a very
precise five -step framework to codify your own
work. Step one is choosing the format. Right.
You have to be strategic here. You must pick
the task with the highest return. You shouldn't
pick the most exciting task or the one you enjoy
doing the most. You pick the bottleneck. Exactly.
If you're running a YouTube channel, your biggest
bottleneck might be creating HTML slide decks
for your educational videos. So you codify that.
Yeah. If you run a creative agency doing client
work, your highest return task is probably generating
pristine client proposals. You build the system
around the task you repeat constantly. Once the
format is chosen, step two is adding your tools
and integrations. Crucial step. Claude shouldn't
be forced to guess what your brand looks like.
You have to feed it context from your actual
business operations. You plug it into your existing
ecosystem. You connect it to your GitHub repositories.
You link it to your Gmail to understand your
communication style. You feed it massive amounts
of meeting transcripts. Whoa, imagine generating
hundreds of perfectly branded slide decks just
from meeting transcripts. You finish a one -hour
Zoom call, and the system automatically outputs
the client presentation. That is the reality
of this. workflow. But to get that level of accuracy,
the source highlights a critical tool for this
step called FireCrawl. Let's define that quickly
for the audience. FireCrawl is a tool that copies
website data into text for AI. It acts as a bridge.
It crawls your existing live website. It pulls
down your exact logo files. It maps out your
entire DOM structure. Wow. Yeah. It extracts
your precise brand colors and topography scales.
Yeah. It basically turns your live website into
data Claude can read. Which leads us directly
into step three, providing references. Tools
like Firecrawl give the AI factual information.
But references give the AI taste. Right, because
information isn't enough to make something beautiful.
You have to show Claude what your version of
excellent looks like. How do you practically
do that within a text -based workflow? The source
mentions using mid -journey. Yeah, you can generate
conceptual images in mid -journey that capture
your desired aesthetic. You feed those images
into Claude. Claude's vision model analyzes the
flat image. It maps out the spatial relationships,
extracts the implicit color hierarchy, and translates
those visual cues into... to structural code
rules. You can also use your own historical assets.
You feed it your best performing Canva templates
or past agency designs. You are giving it a visual
target to aim for before it writes a single line
of code. Which brings us to step four, generating
the first version. The crucial mindset shift
here is that you are only aiming for an 80 %
draft. Because expecting perfection on the first
output will just lead to frustration. Exactly.
The goal of step four is purely structural. You
want the layout to be logically sound. You want
the typography to match your brand rules. You
want the primary colors placed correctly. You're
just trying to escape the terror of the blank
page. A flawed 80 % draft gives you something
tangible to react to. Reacting to a draft is
always faster than creating from scratch. That's
why step five is so important. Step five is refine
and save as a skill. This step is where the actual
magic of codification happens. The feedback loop.
But you can't use traditional client feedback
here. You can't just tell Claude, make it pop
or make it feel more dynamic. No, vague feedback
breaks the system completely. Your feedback must
be hyper -specific. You have to speak in structural
rules. Instead of saying, it looks too busy,
you tell Claude, limit the layout to three hex
codes. Instead of saying make it smoother, you
command it to use slower motion on the CSS transitions.
You're literally tweaking the machine's parameters.
Reduce padding by 20 pixels. Increase the contrast
ratio on the subheaders. Like stacking Lego blocks
of data. Yes. And once you dial in those parameters
and the output looks perfect, you save that entire
prompt chain as a reusable workflow. It becomes
a permanent skill in your library. Beat. I am
curious about step two again, though. Why is
Firecrawl necessary if you can just attach a
screenshot of a website? Well, screenshots are
totally flat. Firecrawl pulls the exact text
codes, typography, and HTML stature. Ah, Firecrawl
pulls exact code and colors, not just a flat
image. Exactly. That underlying data makes the
whole system robust. Sponsor. All right, let's
zoom out now. We've mapped out this exact step
-by -step framework for codifying taste. What
does this mean for the industry at large? We
are witnessing a fundamental paradigm shift.
The source material refers to this as the code
first design future. Code first design. That
phrase carries a lot of weight. It changes the
entire objective of creative work. Under this
model, you aren't actually making a design. You
are building the machine that makes the design.
Right. You spend your energy defining the rules
once, and then you let Claude execute the layout
generation over and over again at near zero marginal
cost. Let's break down the impact on different
professions. For independent creators and startup
founders, this shift is incredibly empowering.
Historically, custom design has always been a
massive bottleneck. It's expensive, it's slow,
and it requires specialized talent. With a codified
system, founders can launch new products infinitely
faster. They maintain impossibly clean, consistent
visuals across all their platforms. And they
save thousands of dollars on routine, one -off
design tasks. What about developers? This seems
like a massive structural change for engineering
teams. Developers no longer need to spend years
mastering the intricacies of Figma to build beautiful
products. But they do have to acquire a new hybrid
skill. The source describes it as coding plus
taste. Coding plus taste. They need to understand
the underlying principles of visual hierarchy.
They have to learn how to articulate design critique
technically. A developer can't just look at a
generated layout and say, make it look better.
Right. They need the vocabulary to say, use stronger
typographic hierarchy here or increase the negative
space around the primary call to action. They
act as the art director, guiding the creative
direction, while Claude acts as the production
designer, writing the actual code. And what is
the impact on larger established teams? This
might be the most practical application of all.
Think about traditional corporate brand guidelines.
Usually a company spends $50 ,000 on a rebrand.
And they get a beautifully designed PDF that
sits completely dead on a shared hard drive.
Exactly. Nobody ever actually follows the PDF
rules when they are rushing to finish a sales
deck on a Friday afternoon. That is the reality
of corporate design. But Clawed Code takes those
dead PDF guidelines and turns them into living,
usable engines. You transform a static reference
document into an active system that automatically
generates your daily deliverables. It builds
your internal dashboards, your client proposals,
your quarterly reports. It enforces strict brand
consistency automatically without requiring a
senior designer to review every single slide.
But I do have to push back on behalf of professional
designers here. If the machine handles all the
execution and the guidelines are enforced automatically,
does human taste actually matter anymore? Yes,
the creative work is still there. You still need
judgment and taste, but now taste becomes a system.
So where does Figma fit into a world where Claude
does all the heavy lifting? Figma is simply the
final polished step. It is definitely not the
starting line anymore. Exactly. Use Claude for
the fast draft, Figma for the pixel perfect finish.
That hybrid approach is how the best teams will
operate moving forward. Two sec silence. This
has been a thoroughly fascinating shift in perspective.
The core truth we are uncovering is that good
design doesn't have to be this ethereal, abstract
concept trapped inside a creative director's
head. No, it doesn't. It doesn't have to be stuck
in a massive, disorganized Figma file full of
disconnected layers. It is so liberating when
you realize those visual rules can be extracted.
They can be codified. They can be written down
in plain text. They can be turned into a highly
repeatable system that scales your specific visual
identity. A landing page isn't just a page anymore.
It is a localized output of a much larger system.
That systemic thinking is the future. It leaves
me with one final, slightly provocative thought
to consider. Let's hear it. If our current modern
visual taste can be perfectly codified into Markdown
and perfectly replicated by Claude at scale,
what happens to the value of current design trends?
Will the most valuable design skill of tomorrow
simply be having a wildly unique, undefinable
perspective that an AI hasn't been trained on
yet? That is a profound question to end on. It
really challenges us to find the human element
in our work. I encourage you to look at the very
next document or presentation you create this
week. Ask yourself, am I just doing a one -off
chore or can I turn this into a system? Thank
you for joining us on this deep dive.