Impeccable Makes Claude Build Sites That Don't Look Like AI

EnglishDeutschBahasa Indonesia日本語PortuguêsРусский中文
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology

Transcript

00:00:00This is Impeccable, a design quality tool chain that gives your harness the deep design knowledge
00:00:05it needs to create amazing looking websites by spotting 37 design anti-patterns to stop your AI
00:00:12from producing that same generic design that you've seen so many times. It even has the ability for
00:00:17humans to make very precise design tweaks in the browser. But is this another hyped up AI tool
00:00:22that gives you markdown files and burns your tokens or is it actually useful? Hit subscribe and let's
00:00:28find out. If you've watched my video on superpowers, the plugin that helps Claude write better code,
00:00:36well this is like that but for design in a good way. It gives a structured workflow to help AI
00:00:42produce amazing designs and websites no matter the agent or harness created by Paul Backhouse,
00:00:47an independent product engineer who actually made JQUI, if you're old enough to remember what that is,
00:00:53and has been tweeting about the progress of Impeccable for such a long time that I'm sure
00:00:58this is part of what's made it so popular. So let's give it a shot. I'm going to build a home
00:01:02page for my cinematic film tool using Impeccable to get the designs that exist in my head and put
00:01:08it onto a screen. We'll see how that goes. I'm going to use four key sub commands; teach, shape,
00:01:14craft and iterate. Well iterate isn't exactly a sub command but it'll make more sense later in
00:01:19the video. Let's go. So I've already installed the Impeccable skill using for sales skill.sh and I've
00:01:25created a blank directory which is where all the code and design files are going to go. So let's
00:01:29open up Claude code and the first thing I'm going to do is run the Impeccable teach sub command which
00:01:34is going to teach it who this product is for and it should create a project MD file that will contain
00:01:40important things like the product's purpose, brand identity and design principles. So if we hit enter
00:01:46it tells me that the product directory is empty and we go through a few round one questions. Now
00:01:51the important thing to realise here before you continue is the difference between a brand and
00:01:55a product. So the product design style is something like this with sans-serif fonts and a semi-bold
00:02:00hierarchy which is perfect for a utility or app whereas the brand design style has more of a
00:02:05serif display, more italics and it's ideal for an editorial/magazine. There's more information
00:02:10about the differences on the Impeccable website but for my specific use case this is going to be
00:02:15a product. So now I've written answers to the three questions I'm going to hit enter and it's going to
00:02:19present me with a few more questions like personality, references and audience. So now I've
00:02:24answered these three follow-up questions giving the names of sites that I like the look of as well as
00:02:28the audience. Once you've answered those questions Impeccable creates a product MD file and gives us
00:02:33a summary over here. Now at this stage it's asking if we want to run Impeccable document to create a
00:02:38design MD file or to trigger Impeccable shape which will help us come up with a design language for our
00:02:43homepage. For now I'm going to jump to Impeccable shape because I want to have an idea of the design
00:02:48first before creating the design document. So once we hit enter we have another round of questions to
00:02:53help us come up with a design brief. Now in some cases or with using some harnesses Impeccable will
00:02:59create something called a probe using an image model and this will be used to further enhance
00:03:04the design but since Claude Code doesn't have an image model I'm going to try and trick Impeccable
00:03:08to use GPT image 2. Let's see if that works. So now I've answered its questions to do with colour style,
00:03:14the page layout and the tech stack to use. I've told it that I have an open AI key in my shell
00:03:20and I want to use GPT image 2 to create a probe. Okay so it's actually finished making the probes
00:03:25and we can have a look at them to choose which one we want between A, B and C. So this is A which I
00:03:30really like the look of. This is B which also looks good but not as good as A. And then we have C which
00:03:35has done a great job of generating these AI images but I think the winner for me is definitely A.
00:03:40So I'll give it those details and after a while it gives me a design brief with a feature summary,
00:03:45a user action and so many other bits of information. So I'm going to answer the questions it's given me
00:03:50at the end and hopefully it will then create the design. So now that it's done the next step was
00:03:55for me to actually run Impeccable Craft but it offered to do it for me so I've just pressed yes
00:04:00and it's actually now creating the website using Astro and Tailwind. And after about five minutes
00:04:06it's finished coding up the design, made all of these Astro pages as well as a Tailwind configuration
00:04:11and gives me a detailed brief of what it's actually done which actually looks very impressive. I like
00:04:17the fact that I can copy here to get the URL, we get the alpha macOS first, the test video which doesn't
00:04:23work but great that it added it and we get some information about the product with this effect over
00:04:28here so we can drag the before and after which is a very nice touch. We even have some commands to
00:04:33install it and an FAQ at the bottom with an accordion that works. But there are a few issues
00:04:37I've spotted for example this close thing is very small and the layout here of the commands looks
00:04:43very odd. But now before we go to the iterate stage I want to create a DesignMD file so that I can make
00:04:49tweaks in another session and it knows everything about my design. So to do that I'll run Impeccable
00:04:54Document which when it's done creates a design document that contains everything from colours
00:04:59to the typography and even the CSS and styles that are used in my project. Now from here we're going
00:05:06to iterate our design which like I mentioned earlier isn't a single subcommand but can contain
00:05:10multiple things. So if I wanted to add animation I could add this animate subcommand to certain parts
00:05:15of the project, I could use bolder to make certain parts bolder so we can see the difference before
00:05:20and after or I could use any of these things in the refine section or get Impeccable to automatically
00:05:25polish the design. And the best way is to do this level of iteration instead of telling my harness
00:05:30what section I want to change and giving it one of these subcommands. Instead I could use Impeccable
00:05:35Live which is an alpha and it's triggered in Claude's code by running Impeccable Live. But what this does
00:05:39is it installs a bunch of scripts then connects to my site using Astro and starts a server on port 800
00:05:46that polls for any changes I make to my live site. So if I go to the browser and look at my site we
00:05:52can see I now have this pink overlay and if I click on a section say this section with text then I have
00:05:58the options I showed earlier to make things bolder, quieter, to add polish and so on or I could simply
00:06:03type in exactly what I want. So I could say make the text here bigger and if I hit go this goes
00:06:09directly to my agent and updates the code in my live site. We can see that my prompt has been sent
00:06:15to Claude's code so make the text bigger with the specific part of the site that needs this change.
00:06:20And I can continue going through parts of the site making changes like that until I'm happy.
00:06:25For example this section here with the programming text that's difficult to read I can give it a prompt
00:06:29pick the amount of variants I want and let Impeccable do its thing and now it looks much
00:06:34much better and it's even automatically applied it to every single part of the site that shows some
00:06:39code. So there we have it a quick run-through of how to create an impressive looking site from scratch
00:06:44using Impeccable, Claude's code and GPT image 2. If I'm being honest this is a tool for someone who
00:06:50wants to create something beautiful but doesn't want to get too deep into the design details. For
00:06:55that I would say use something like pencil where you can be very precise about the positioning the
00:06:59border radius and everything else when it comes to a design. If you want to know more about pencil
00:07:04check out this video I made earlier. Now even though Impeccable is model and harness agnostic
00:07:10I would say Claude's code probably isn't the best harness to use for it purely because Impeccable
00:07:15does use a lot of tokens especially if you have a huge product and design MD file which is used in
00:07:21every single Impeccable subcommand and Claude's code combined with the Claude models are very expensive.
00:07:26If I had a chance to run this experiment again I would most likely use Codex CLI or the Codex GUI
00:07:32which allows image generation and so there'd be no need for me to specify to use the GPT image 2 model
00:07:38because Impeccable will do that automatically since it's aware of the harness capabilities
00:07:43and Codex or the GPT models are much more generous with their usage limits. Now I'm going to try
00:07:47something that I've seen a lot of YouTubers do which is to direct you to a video that has been
00:07:53recommended by the YouTube algorithm based on your viewing history so go and check it out.

Key Takeaway

Impeccable provides a structured design workflow that uses specific anti-pattern detection and live browser-based adjustments to force AI agents to produce unique, high-quality websites.

Highlights

  • Impeccable is a design quality toolchain that identifies 37 specific design anti-patterns to prevent generic AI-generated website layouts.

  • The tool utilizes four primary subcommands—teach, shape, craft, and iterate—to structure the design workflow from concept to code.

  • Impeccable creates a comprehensive DesignMD file containing documentation for project colors, typography, and CSS styles to maintain design consistency across sessions.

  • Impeccable Live, an alpha feature, connects to the site via Astro and allows users to make specific design adjustments directly in the browser by polling for live changes.

  • The tool is model and harness agnostic, though using it with Claude Code can result in high token consumption.

Timeline

Design Workflow and Setup

  • Impeccable detects 37 design anti-patterns to avoid generic AI outputs.
  • The workflow begins by running the 'teach' command to define product purpose, brand identity, and design principles.
  • Users differentiate between product design styles for utility apps and brand design styles for editorial content.

Impeccable serves as a design layer for AI agents, moving beyond simple code generation by enforcing structured design principles. The 'teach' command generates a project MD file that anchors the agent's understanding of the site's intent. This setup stage separates standard product layouts from editorial brand styles to ensure appropriate typography and hierarchy.

Prototyping and Implementation

  • The 'shape' command creates design probes, which can utilize external image models to visualize the design language.
  • The 'craft' command automates the generation of Astro and Tailwind CSS files.
  • A DesignMD file stores all project typography, color, and CSS specifications for future reference.

After defining the brief, the tool generates visual probes to establish the design direction. Once a design is selected, the 'craft' command produces the functional code base. The subsequent 'document' command creates a permanent record of the project's visual styles, ensuring the agent remains consistent throughout the development process.

Iterating and Polishing

  • The 'iterate' process supports various subcommands to inject specific changes like animations or bolder typography.
  • Impeccable Live provides a browser-based overlay for making precise, real-time tweaks that automatically update the codebase.
  • Token usage and model compatibility are key considerations when choosing a harness for Impeccable.

Refinement occurs through a mix of automated polish and direct human intervention. Impeccable Live creates a development server on port 800, allowing users to select elements on the live site and issue natural language prompts for immediate modification. While powerful, the tool consumes significant tokens, making lighter harnesses potentially more cost-effective than Claude Code for larger projects.

Community Posts

No posts yet. Be the first to write about this video!

Write about this video