Latest / AI Fire Daily / #599 Neil: Build Your Own Claude Website Builder Skill In Claude Code

Transcript

#599 Neil: Build Your Own Claude Website Builder Skill In Claude Code · AI Fire Daily

• 0:00
  We treat artificial intelligence like it has
• 0:02
  a 10 -second memory. Yeah, we really do. I mean,
• 0:04
  we sit down at our keyboards every single morning,
• 0:07
  we open up a fresh chat window, and we just type
• 0:10
  the exact same instructions we typed yesterday.
• 0:13
  Hoping for a slightly better result this time,
• 0:15
  right? Mm -hmm. But usually getting the same
• 0:16
  generic output. It is this endless, repetitive
• 0:20
  loop. We explain our brand over and over again.
• 0:24
  We clarify our design preferences repeatedly.
• 0:27
  And I have to make a vulnerable admission here.
• 0:29
  I still wrestle with prompt drift myself. Oh,
• 0:31
  man. We all do. Prompt drift is very real. Just
• 0:34
  to define that quickly, it is when an AI slowly
• 0:38
  forgets your original instructions over time.
• 0:40
  Yeah, exactly. You start with a great prompt,
• 0:42
  right? But by the fifth or sixth message, the
• 0:45
  AI forgets the core rules. It just drifts back
• 0:48
  to its default behaviors. It does. Welcome to
• 0:51
  the Deep Dive, by the way, everyone. Today, our
• 0:53
  mission is completely transformative. We're taking
• 0:56
  Claude and we're turning it from a one -off prompt
• 0:58
  engine into a reusable web designer. A permanent
• 1:01
  expert colleague. Exactly. A permanent colleague.
• 1:05
  We are going to build what is called a Claude
• 1:07
  code skill. We will test it out on a baseline
• 1:10
  project. Then we are going to run an AI self
• 1:14
  -QA loop. Right. And finally, we will package
• 1:17
  it all up. for future use. It is a totally new
• 1:20
  paradigm for how we work with these tools. I
• 1:22
  am excited to get into it. So let us look at
• 1:24
  the root of the problem first. That repetitive
• 1:26
  setup we were talking about, left to its own
• 1:29
  devices, Claude builds very fast. But the results
• 1:32
  are incredibly generic. We have all seen the
• 1:35
  standard AI website. Oh, we definitely have.
• 1:37
  I mean, you know the exact look before the page
• 1:40
  even finishes loading. I do. It is always a basic
• 1:43
  hero section at the top, usually three text cards
• 1:45
  right below it, a simple call to action, and
• 1:48
  some standard floaty animations that do not really
• 1:51
  mean anything. Yeah, that lack of human soul,
• 1:53
  it comes from how the model defaults to basic
• 1:56
  web frameworks. It basically averages out the
• 1:59
  entire internet, which means you get the most
• 2:02
  average design possible. To solve this, the source
• 2:04
  text introduces a specific workflow. We used
• 2:07
  something called Claude Code to create a reusable
• 2:10
  skill, specifically a skill named ScrollSight
• 2:13
  Designer. Right, and we should probably clarify
• 2:16
  what that tool actually is for people who have
• 2:18
  not used it. Good call. Claude Code is a tool
• 2:21
  letting Claude work directly inside your code
• 2:23
  editor. Perfect definition. So you open this
• 2:26
  tool inside your project folder, and you feed
• 2:29
  it a very specific setup prompt. You are telling
• 2:32
  it to create a skill .md file. And that file
• 2:36
  becomes the permanent brain of the operation.
• 2:38
  Exactly. It is the permanent brain. You are essentially
• 2:41
  instructing Claude to act like an experienced
• 2:43
  web designer and a senior front -end developer,
• 2:45
  but you do not just tell it what to do. No. No.
• 2:48
  You spend a lot of time telling it what to avoid.
• 2:51
  The negative constraints. I love this part. This
• 2:53
  is where the engineering really happens. You
• 2:55
  have to explicitly ban specific AI trends. Right.
• 2:59
  You tell the skill to avoid repeated card grids.
• 3:01
  You ban Heavy gradients. No random glowing effects
• 3:05
  behind every single button. Yes, please. Yeah.
• 3:07
  And no useless animations. Everything has to
• 3:10
  serve the content. Each website needs to feel
• 3:13
  completely different. So it cannot just use that
• 3:15
  same three -column template every time. Exactly.
• 3:18
  It is like giving someone a master recipe book
• 3:20
  instead of teaching them how to bake a cake from
• 3:22
  scratch every single time they walk into the
• 3:24
  kitchen. That is a great way to look at it. You
• 3:26
  are establishing permanent standards that dictate
• 3:28
  how it thinks about design before it even touches
• 3:31
  a keyboard. How do we prevent the AI from slipping
• 3:34
  back into those bad generic design habits over
• 3:38
  time? By hard -coding negative constraints into
• 3:41
  the skill .md file so it knows exactly what to
• 3:44
  avoid. So we ban heavy gradients and random glows
• 3:47
  to keep it humid? Precisely. Those rules become
• 3:50
  its permanent baseline. So we have given Claude
• 3:52
  this master recipe book, but before it can bake
• 3:55
  the cake, it needs to know who is coming to the
• 3:58
  party. Right. The AI needs specific context.
• 4:01
  which triggers the next phase, the design interview.
• 4:05
  I absolutely love this part of the workflow.
• 4:07
  It flips the script entirely. Well, instead of
• 4:09
  you prompting the AI, the AI questions you. It
• 4:12
  asks about the visitor journey. It asks about
• 4:15
  the main goal of the page. It wants to know about
• 4:18
  the brand style. It even asks which sections
• 4:20
  should feel calm and which sections should feel
• 4:23
  more active. Let us unpack that for a second
• 4:26
  because that is fascinating. How does an AI interpret
• 4:30
  calm versus active? It translates those emotions
• 4:33
  into layout decisions. It's super clever. A calm
• 4:37
  section might mean lots of negative space. Like
• 4:40
  breathing room. Yeah, exactly. Slower transition
• 4:43
  speeds and muted colors. But an active section
• 4:46
  might use denser typography. Snappy micro interactions,
• 4:50
  higher contrast. Hold on, I have to push back
• 4:52
  here for a moment. Sure. If the whole point of
• 4:54
  using AI is speed, aren't we just killing our
• 4:57
  efficiency by forcing a 10 -minute design interview
• 5:00
  before a single line of code is written? Why
• 5:02
  not just let it start coding immediately? It
• 5:04
  is a fair question. But patience and planning
• 5:07
  yield premium results. I mean, speed without
• 5:10
  direction just means you arrive at a generic
• 5:12
  destination much faster. If you skip the planning,
• 5:15
  you get that default template again. You get
• 5:17
  the three cards and the glowing button. Yeah,
• 5:19
  exactly. The AI needs to architect the emotional
• 5:23
  flow first. It needs to know the story it is
• 5:25
  telling. OK, so the AI understands the theory
• 5:27
  now. It has the rules and it knows what we want.
• 5:30
  But to prove this workflow actually does anything,
• 5:33
  we need a starting point. We need a before picture
• 5:36
  for our test. Right, so we asked Claude to build
• 5:39
  a basic landing page first. It is for a dummy
• 5:43
  AI automation agency called Nexify. We instruct
• 5:46
  Claude to keep it very plain. just a hero section,
• 5:49
  a section about their services, a few key benefits,
• 5:52
  one testimonial, and a final call to action at
• 5:54
  the bottom. We specifically tell it not to use
• 5:57
  any advanced animations yet. Yeah. So it builds
• 5:59
  this incredibly clean, simple page, which is
• 6:02
  honestly entirely boring. Extremely boring. It
• 6:05
  is basically just text on a screen. It is the
• 6:07
  definition of a blank canvas. It is like a control
• 6:10
  group in a science experiment. Why build a boring
• 6:12
  baseline site first instead of applying the skill
• 6:14
  from scratch? We need a clear before state so
• 6:16
  we can actually measure how much the skill improves
• 6:18
  the user experience. We need a plain canvas to
• 6:21
  measure the AI's actual design upgrades. Exactly.
• 6:25
  Without a baseline, we cannot prove the skill
• 6:28
  actually works. We would not know if the AI made
• 6:30
  it better or just made it different. Because
• 6:33
  we now have that plain baseline, we can finally
• 6:36
  unleash the new scroll site designer skill. We
• 6:38
  can watch the transformation happen in real time.
• 6:41
  This is where the magic happens. The parameters
• 6:43
  we give it here are a really delicate balance.
• 6:45
  We instructed to redesign the Nexus 5 page. But
• 6:48
  we specify exactly what is kept and what is changed.
• 6:52
  We tell it to keep the Nexlify brand name. The
• 6:54
  core message stays. The primary call to action
• 6:57
  stays. And we maintain the current dark visual
• 7:00
  direction. But we change the execution completely.
• 7:03
  We ask for a premium scroll -driven experience.
• 7:06
  We want a better visual hierarchy. We want a
• 7:08
  memorable hero section. But again, referencing
• 7:11
  those negative constraints, we want it done without
• 7:13
  unnecessary effects. This skill starts adding
• 7:16
  scroll interactions. only when they support the
• 7:19
  content. It adds smooth reveals as you scroll
• 7:21
  down. It adds sticky elements that stay on screen
• 7:24
  while you read the text beside them. It makes
• 7:26
  the sections feel connected. They do not just
• 7:29
  look like separate stacked blocks anymore. No,
• 7:31
  not at all. It feels like a continuous journey,
• 7:34
  like you are moving through a space. What is
• 7:36
  fascinating here is the sequencing, the AI architects,
• 7:39
  the pacing across the entire page first. It thinks
• 7:42
  about the whole journey before writing a single
• 7:45
  line of CSS. Whoa, imagine scaling this to orchestrate
• 7:49
  a billion interactive queries. It is a massive
• 7:53
  shift in logic. It is acting like a true senior
• 7:55
  designer. It is orchestrating an experience,
• 7:58
  not just writing syntax. How does an AI know
• 8:00
  what a comfortable animation speed is for a human
• 8:03
  scrolling? It relies on established front -end
• 8:05
  web standards that optimize for accessibility
• 8:08
  and prevent motion sickness. It uses web standards
• 8:10
  to avoid giving users motion sickness while scrolling.
• 8:13
  Exactly. It respects the human nervous system.
• 8:16
  It mathematically maps comfortable timing based
• 8:19
  on standard human interface guidelines. We are
• 8:22
  going to take a quick break, but when we come
• 8:23
  back, we will get into how the AI actually checks
• 8:26
  its own work. Stick around. So we just watched
• 8:29
  our AI build a beautiful premium scroll experience.
• 8:33
  It looks incredible, but we cannot just assume
• 8:37
  the code is flawless. Oh, wait. We need verification.
• 8:40
  Trust, but verify. always, especially with AI
• 8:44
  -generated code. That brings us to the self -QA
• 8:46
  and the human feedback loop. This step in our
• 8:49
  workflow is fascinating. Claude actually uses
• 8:52
  its own QA checklist to review its work. It essentially
• 8:56
  grades its own homework before handing it in.
• 8:58
  It reviews the layout. It checks the mobile view
• 9:01
  to make sure nothing is broken on smaller screens.
• 9:03
  It tests the navigation and the links. It even
• 9:06
  proofreads the copy. And it checks the animation
• 9:08
  timing across different scroll states. It is
• 9:11
  not just looking at the static first screen.
• 9:13
  It is testing the movement. I found this specific
• 9:15
  detail incredible. Claude actually caught and
• 9:18
  fixed its own issues. Yeah, that part was wild.
• 9:20
  It found problems with keyboard navigation and
• 9:22
  focus styles. And it fixed them before showing
• 9:25
  the user the final result. That is massive for
• 9:27
  accessibility. It really is. Can you define keyboard
• 9:30
  navigation quickly? Sure. It is using the keyboard
• 9:33
  instead of a mouse to browse a website. So people
• 9:36
  who rely on the tab key can use the page without
• 9:38
  getting trapped. The fact that the AI caught
• 9:40
  that structural flaw automatically is huge. It
• 9:44
  is. But the AI isn't the final judge, right?
• 9:47
  The workflow introduces the human review next.
• 9:50
  Right. Because AI finds technical bugs, but humans
• 9:53
  judge the feel. the vibes exactly the vibes the
• 9:56
  subjective experience of navigating the website
• 9:59
  the author of the source text gave very specific
• 10:02
  human feedback they didn't just say make it pop
• 10:04
  right they looked at the finished site and made
• 10:07
  surgical adjustments. They asked to make the
• 10:09
  hero section more premium, but keeping the dark
• 10:11
  style. They asked to slow down some of the really
• 10:14
  fast growl animations. And they wanted to smooth
• 10:17
  out a specific transition. The visual jump between
• 10:20
  the light colored benefit section and the dark
• 10:22
  testimonial section felt too jarring. It is a
• 10:25
  perfect example of direct, actionable critique.
• 10:28
  You are guiding the AI's aesthetic choices. Is
• 10:31
  it really effective to let an AI grade its own
• 10:34
  homework during the QA phase? It is highly effective
• 10:37
  for catching objective technical errors. But
• 10:40
  you still need human eyes for the subjective
• 10:43
  experience. It catches technical bugs perfectly,
• 10:46
  but humans still have to judge the vibes. That
• 10:48
  is the perfect division of labor. AI handles
• 10:51
  the code compliance, and humans handle the emotion.
• 10:55
  We have perfected the Nexlify site at this point.
• 10:58
  It looks great. It works flawlessly. The animations
• 11:00
  are smooth. But the true value of this workflow
• 11:03
  is not the website itself. No, the website is
• 11:06
  basically just a byproduct of the experiment.
• 11:08
  Right. The true value is making the skill itself
• 11:11
  smarter for the next project. This is where the
• 11:13
  compounding value kicks in. We ask Claude to
• 11:16
  update the scroll site designer skill. We ask
• 11:19
  it to save the lessons learned from this specific
• 11:21
  Nexlify project. We save the better animation
• 11:23
  pacing rules. Yeah. We save the stronger scroll
• 11:26
  transitions. We add the new mobile spacing checks
• 11:29
  to its permanent memory. And we hard code those
• 11:32
  accessibility checks so it never forgets keyboard
• 11:34
  navigation again. But there is a crucial filtering
• 11:37
  rule here. This is arguably the most important
• 11:40
  part of the entire process. Claude must exclude
• 11:43
  all Nexlify specific details from the skill.
• 11:45
  Right. No specific copywriting, no brand colors,
• 11:49
  no specific business details. All of that must
• 11:52
  be stripped away. We do not want the next project,
• 11:55
  say a bakery website, to accidentally look like
• 11:58
  a dark mode AI automation agency. Exactly. And
• 12:02
  the way it does this is brilliant. It scans its
• 12:04
  own code base. It looks for specific text strings
• 12:07
  and hex codes. Hex codes being the specific numeric
• 12:10
  values used to define colors on websites. Right.
• 12:12
  So it finds the hex code for Nexlify's specific
• 12:15
  dark background. And it replaces it with an abstract
• 12:18
  variable, like primary background. Oh, I see.
• 12:20
  It actively separates the structure from those
• 12:22
  surface details. So final output is incredibly
• 12:24
  clean. It is just a portable folder on your computer.
• 12:27
  It is located at .clodskills scroll site designer.
• 12:30
  You can literally copy that folder and paste
• 12:32
  it into any future project folder you ever create.
• 12:34
  It is a highly trained digital employee that
• 12:37
  you can carry on a USB stick. It turns a painted
• 12:39
  house back into an adaptable blueprint. How does
• 12:43
  the AI separate the general design wisdom from
• 12:45
  the specific brand data of Nexlify. By analyzing
• 12:49
  the structural improvements made during feedback
• 12:51
  and actively stripping out any text or hex codes.
• 12:54
  It extracts the architectural lessons and throws
• 12:57
  away the specific paint colors. Perfectly said.
• 13:00
  It remembers how to build a better house, not
• 13:02
  who lived in it last time. So let us recap the
• 13:05
  big idea here. We are witnessing a fundamental
• 13:09
  paradigm shift in how we interact with large
• 13:11
  language models. We are no longer just prompting.
• 13:14
  Exactly. We aren't just typing instructions into
• 13:16
  a void anymore, hoping for the best. Right. We
• 13:19
  are building custom AI colleagues. These colleagues
• 13:22
  retain our specific standards. They keep getting
• 13:24
  better with every single project, and they completely
• 13:27
  eliminate that repetitive morning setup loop.
• 13:30
  The Goldfish memory is finally cured. It changes
• 13:32
  everything about digital workflows. It really
• 13:34
  does. And it leaves us with a massive question
• 13:37
  to ponder. If we can successfully codify a premium
• 13:41
  front -end developer into a portable folder,
• 13:44
  what other complex digital roles could you package
• 13:47
  up and carry from project to project? Could you
• 13:50
  build a persistent QA tester? Could you codify
• 13:53
  a senior data analyst? You could carry an entire
• 13:56
  virtual agency on a thumb drive. You never have
• 13:59
  to start from zero again. You just drop the folder
• 14:01
  in and your expert team is ready to work. It
• 14:04
  makes you wonder what else we can teach the Goldfish
• 14:05
  to remember. OTRO music.