4 Crazy Ways Claude Fable 5 Builds Stunning Websites
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Everyone has access to the same AI models, but nobody has built the processes around them.
00:00:05You might have heard the phrase that the model doesn't matter anymore, the harness does.
00:00:09Harnesses are basically the processes that you build for your AI model to follow.
00:00:13But here's the thing you need to understand.
00:00:14Models keep evolving, so the harness you built three months ago is already obsolete.
00:00:19At the time of recording, the best model out there is Fable 5 Anthropics flagship model,
00:00:24but don't worry, we'll guide you through different ways that make sure that your harness
00:00:27keeps evolving for any model out there.
00:00:30So Anthropic actually has an official skill for front-end design,
00:00:34and the reason it exists is a problem that they named themselves.
00:00:37What happens is that the model drifts toward the safest and most average version of the design
00:00:42that you asked for.
00:00:43They call it converging on the distribution, which basically means that it builds the thing
00:00:47it's seen a thousand times before.
00:00:49Now with how powerful these latest models have been advertised, you might think this isn't
00:00:53a problem anymore, but that's not what I've found.
00:00:56For example, in this prompt, we simply asked it to build a landing page for a plantation website.
00:01:01To nudge it in the right direction, we told it to be as creative as possible and not focus
00:01:06too much on the content itself.
00:01:07We also explicitly told it not to load any skills because we have multiple skills available
00:01:13in our system and we wanted to make sure it wasn't taking advantage of them.
00:01:16This is what it ended up creating.
00:01:18Now it's not a bad design by any means, but it's certainly not the best either.
00:01:22For example, there are some contrast issues and a few of the images don't load properly.
00:01:26But when we use the skill here, things changed quite a bit.
00:01:29Now there's nothing special in the skill.
00:01:31There aren't any references or any external resources.
00:01:34It's literally just a prompt.
00:01:35Using that alone, it produced a much better design.
00:01:37The design was significantly more polished and aesthetically pleasing.
00:01:41It included subtle animations and a lot more attention to detail.
00:01:45Overall, the result was noticeably better than what the model would normally generate on its own.
00:01:49With every new model, these AI companies release new prompting guides for people using the model APIs.
00:01:55And using Fable 5's guide, we modified the design skill.
00:01:58You can just copy the general purpose design prompt and the prompting guide.
00:02:02Paste them both into Claude, tell it that you've got the prompting guide for the model
00:02:06and ask it to create an updated version based on that.
00:02:09It analyzes the prompt and gives you a rewritten version for the new model.
00:02:12And you can actually see the new site looks way better.
00:02:15It's structured much better and it turned all the different elements into cards.
00:02:19We think it looks so much more creative than what Claude normally puts out because of tiny details
00:02:24like how the CTA section got turned into a postcard letter with a stamp on top of it.
00:02:29It's these tiny details that make it look so much more creative.
00:02:32Now, there's another reason these companies put out prompting guides.
00:02:35A lot of the time, the models have behavioral issues and the guides tell you how to fix them.
00:02:39When Opus 4.8 shipped, Anthropic pointed out that the model tended to default to a particular design style.
00:02:45Their fix was to ask the model for multiple design alternatives first, then let you pick which direction to go with.
00:02:51But when Fable 5 came out, this issue wasn't mentioned in its prompting guides anymore.
00:02:56And from what we saw, the model still falls back to that same style.
00:02:59It doesn't happen every single time.
00:03:01But from our testing, roughly two out of three generated sites still end up with very similar styling.
00:03:07So it was never really fixed.
00:03:08That's why it's worth looking at the docs for previous models, too.
00:03:11You'll often find useful things that just didn't make it into the latest guide.
00:03:15So using the prompt guide for Opus 4.8, we switched to a different design skill
00:03:20that actually asked us what kind of design direction we wanted.
00:03:23Based on that, it generated this design.
00:03:25This looks good, too.
00:03:26But honestly, a better approach is to use design.md files here.
00:03:30These files contain brand language that you just drop onto your page.
00:03:33Get design.md is a really good source where you can get files of many brands.
00:03:38But even then, use them after the model has already generated the landing page.
00:03:42And this is specifically for landing pages because if you actually look inside design.md files,
00:03:47they lock everything down, right down to the font.
00:03:50And as you saw in the examples, the font is a big part of what made those sites look so much more creative.
00:03:55There are two levels when it comes to adding in animations.
00:03:58The marketing UI and the functional UI.
00:04:00Using the design skill on functional UI like dashboards will make it look beautiful,
00:04:05but people won't actually be able to use it.
00:04:07So for adding animations, we use two things.
00:04:10For marketing pages, this skill already tells the model to add CSS-based animations,
00:04:15but GSAP animations are way better.
00:04:17This is where another step from the prompting guide comes in.
00:04:20Effort is the main lever that controls the model now.
00:04:22For simple tasks, you can keep it from low to medium,
00:04:25but for tasks like adding in animations, using X-High is a much better option,
00:04:30and will give you fewer retries.
00:04:32In our marketing UI skill, there's a rule that specifies when GSAP should be used.
00:04:36Whenever that condition is triggered, it automatically loads the GSAP skill as well.
00:04:41We actually used that setup on the same landing page shown here.
00:04:44Even with that limited planning on our part, it did a surprisingly good job.
00:04:48It nailed the placement where the screen animation plays inside the postcard,
00:04:52and the seasons transition one after another.
00:04:55It's a good example of how these specialized skills can handle a lot of the implementation details
00:04:59automatically.
00:05:00We've achieved this skill system through a lot of trial and error.
00:05:03And by that, I mean repeatedly hitting the 5-hour usage limits.
00:05:07If you want to skip all of that, you can get it from our Community AI Labs Pro.
00:05:11The link's going to be in the description.
00:05:12So, as we've already mentioned, there are two kinds of UIs.
00:05:15The entire workflow behind functional UI is completely different from marketing UI.
00:05:20For example, planning is the first step, and it matters a lot.
00:05:23We're not going to dive deep into that in this video, but once you have your plan ready,
00:05:27you can give it to Claude.
00:05:27After that, instead of having it build the app, you should ask it to build the mockups using HTML.
00:05:33Our process starts with the design.md.
00:05:36If you've already decided what design.md you want to use, that's great.
00:05:40If you don't have one, that's okay too.
00:05:42You can move on without it.
00:05:43For example, if you look at our custom-built community,
00:05:45you'll immediately notice that the design on the outside and the design on the inside are completely
00:05:50different.
00:05:51In our case, everything was planned using HTML mockups first.
00:05:54We started by creating a design.md, which was partially inspired by Notion.
00:05:58Using that design system, we built all of the screens as mockups before writing the actual application.
00:06:04Once we finalized and validated those mockups, we converted them into this fully functional application.
00:06:09Now, before we move on the most important part in designing functional UIs, let's have a
00:06:13word from our sponsor.
00:06:14A lot of people using Claude Code recently noticed their costs going through the roof.
00:06:18Honestly, that's why Kimi caught my attention.
00:06:20They built an open-source model that's really good at coding at around 1/8th the price of Opus.
00:06:26Their latest model, Kimi K2.6, just hit number one on Sweebench Pro,
00:06:30basically the hardest real-world coding benchmark right now.
00:06:33They didn't just release the model, they built products on top of K2.6 that are genuinely useful.
00:06:38You can generate production-ready websites with good front-end design,
00:06:41create full slide decks from a single prompt, and even handle databases and authentication out of the box.
00:06:47But the craziest feature is probably Agent Swarm.
00:06:49You can spin up 300 AI agents in parallel on a single task.
00:06:53Instead of one agent slowly handling everything, you get an entire AI team working simultaneously.
00:06:58And all of this runs on an open-source model that costs far less than the closed-source
00:07:03alternatives people have been paying for.
00:07:05So, if you're using Claude Code or Cursor every day and your API bill has been getting painful
00:07:09lately, Kimi is worth trying.
00:07:11If you sign up through our link, you'll also get an extra 10% quota bonus on your first purchase
00:07:16before June 30th. Click the link in the description and start building.
00:07:19Now, there's another really important part of designing functional UIs, which is experimentation.
00:07:24Over time, we've tried a lot of different approaches to solve this problem.
00:07:28Initially, we used task lists with multiple agents working in parallel,
00:07:32where each agent would generate a different variation of the UI.
00:07:35The goal was to experiment with multiple designs and figure out which approach actually worked best.
00:07:40Later, we started using sub-agents for this workflow, but it doesn't matter anymore.
00:07:45With a million tokens of context, you can do it with the primary agent as well.
00:07:48We also built something internally called the Gallery Viewer.
00:07:51The purpose of the Gallery Viewer is simple.
00:07:53When you generate multiple HTML mockups, they shouldn't get lost among dozens of files.
00:07:58Instead, they're automatically opened together in a single view, making them easy to compare
00:08:03side-by-side. For example, when we were building the community platform, we didn't initially know
00:08:08what a community interaction space should look like. We knew we wanted a community experience,
00:08:12but there were many different ways users could interact with one another. So rather than committing
00:08:17to a single design, we experimented using HTML mockups. We tasked the agent to create multiple
00:08:22community channel UIs as HTML mockups, so we could compare them. The agent would then create multiple
00:08:28versions automatically and open them inside the Gallery Viewer. From there, we could compare each
00:08:33variation and decide which direction was the strongest. One thing you'll notice in this example
00:08:37is that the designs don't all look visually consistent. Ideally, they should share the same design
00:08:42language while exploring different interaction patterns. The reason that didn't happen here is
00:08:46because there was no design.md provided. When a design.md exists, the model uses it as a source of truth for
00:08:53colors, spacing, typography, components, and overall styling. So all of the generated mockups stay
00:08:59visually consistent while still exploring different UX approaches. There are also a few smaller details that
00:09:04can make a big difference, such as adding animations to functional UIs. We've documented a set of animation
00:09:10guidelines in our own skill and you're welcome to copy them if you'd like. They've worked quite well for us so
00:09:15far and we're continuously refining them. One thing I'd strongly recommend, however, is not overdoing
00:09:20animations in the functional part of your application. Excessive animations might look impressive at
00:09:25first, but they often make productivity-focused interfaces feel more distracting. Once you've
00:09:29finalized the design, the next step is to use the ShadCN skill. I've already connected the functional UI
00:09:35skill to the ShadCN skill, so it handles most of the workflow automatically. Previously, we had much more
00:09:40elaborate workflows. We would generate a detailed implementation plan specifically for the ShadCN
00:09:45MCP and we'd use that plan to build the entire interface. While that approach worked, it also
00:09:50added a lot of complexity. Today, the workflow is significantly simpler. All you need is the final
00:09:55HTML mockup and the ShadCN skill. The reason this works so well is that the ShadCN skill already contains
00:10:01a huge amount of context and implementation knowledge packaged by the creators of ShadCN themselves.
00:10:06Because of that, it can take a finalized HTML mockup and reproduce it almost one-to-one using
00:10:11actual ShadCN components. So at this stage, you don't need to worry about creating complicated
00:10:16implementation plans or conversion workflows. If you like these design processes, subscribe to the
00:10:21channel and click the hype button as well. We post content that helps you learn new ways to optimize
00:10:26different processes in different businesses with AI. Your support here would mean a lot to us.
00:10:31The guide also asks you to make self-verification explicit for these models. You can put a prompt in
00:10:36the Claude.md that asks the agent to verify its output. Now, instead of using the main agent,
00:10:41you should use a sub-agent that can verify the output. And to verify it, you need something
00:10:46that you can compare against. For that, always point the sub-agent to your design.md.
00:10:50Another thing that's mentioned in the guide is that models perform better when they have context about
00:10:55your task. For design, this means having knowledge about what the product actually is.
00:10:59Now, a lot of frameworks have set up a separate product.md, but in our opinion,
00:11:03when you set up a Claude.md, it has sufficient context for the model to understand what your
00:11:09project is about. So what the functional UI skill does is whenever it gets a new task,
00:11:13it makes the model read the Claude.md as well. In addition to that, it also contains a mox folder
00:11:18which has all the HTML files so that you can reference them whenever you're adding new elements to your
00:11:24app. On top of that, it would be great if you have the design.md as well. These are the files
00:11:28you need to have in your project. Nowadays, a lot of SaaS apps can be easily cloned.
00:11:32We ourselves use custom-built software for team management. We've built our own version because
00:11:37we don't have to host a lot of people. In that case, you don't really have to make it from scratch.
00:11:42You just need to make sure you're cloning their UI as perfectly as you can. With newer models,
00:11:46their ability to understand images has gotten so much better, so the workflow here becomes really easy.
00:11:51In cloning, there are two different modes. Mode B is for marketing UI. For this,
00:11:56there's a really useful CLI tool called single-file CLI. Using it, you can capture everything on a page,
00:12:01including the HTML, CSS, and even the images used on that website. If the site contains multiple pages,
00:12:07you can also fetch its sitemap.xml file, which is essentially a map of the website. Using that sitemap,
00:12:13the model can discover and fetch the other pages as well. The problem starts when you run into pages that are
00:12:19behind authentication. For example, if you wanted to clone Notion's UI, you couldn't simply point the
00:12:23tool at Notion's website. When you provide Notion's URL, you're only going to get the landing page.
00:12:28What you actually want is the application interface behind the login screen. Fortunately, models have
00:12:34become very good at understanding interfaces from images, so in those situations, screenshots are the
00:12:40best option. You have to capture the different states of the interface very carefully. Let's say you have a
00:12:45page open, you'll want screenshots showing what happens on hover and how different interactions affect the layout.
00:12:50Let's take another example. Suppose you open a page where two pages are in one column. If you only provide this,
00:12:56the model is not going to know that you can make two columns. You need to be extremely thorough and provide all the
00:13:01context the model needs. Once you've captured the screenshots, don't paste the images directly into the prompt. Instead,
00:13:07drag them into Claude. This gives the system access to the image paths that Mode A can use. Mode A will
00:13:13then gather all of those screenshots, place them inside the clone folder and use them as reference material.
00:13:19Those screenshots effectively become the foundation for the cloning process. From there, you can generate an
00:13:25initial HTML version of the interface and then move on to building the final application.
00:13:29That brings us to the end of this video. If you'd like to support the channel and help us keep making videos
00:13:35like this, you can do so by using the super thanks button below. As always, thank you for
00:13:39watching and I'll see you in the next one.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video