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.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video