1:27:43UI Collective · Tutorial
Designing With AI: Claude, Codex, Figma | Full Guide
An 87-minute practitioner guide to which AI tool belongs at which stage of the design process, and why using the wrong one burns tokens and time.
May 4thThe argument in one line.
A custom AI skill file solves the AI slop problem at the source -- it is a platform-portable design system that forces any model to produce consistent, brand-aligned UI, making the quality gap between models nearly irrelevant when requirements are specified.
Read if. Skip if.
READ IF YOU ARE…
- A product designer or solo builder who keeps getting generic-looking AI-generated UIs and wants to know why.
- Someone deciding whether to pay for Claude Fable or whether Opus 4.8 is good enough for day-to-day design work.
- A designer who wants AI-generated UI to stay on-brand across Claude, ChatGPT, Gemini, and Codex without re-briefing each platform.
- Someone already using Claude skills but who has not yet built one specifically around their product design language.
SKIP IF…
- You are a backend engineer with no interest in UI or design systems.
- You are looking for code architecture advice -- this video is entirely front-end and product design territory.
The full version, fast.
AI-generated UIs all started looking the same once Claude's built-in frontend skill became ubiquitous. The fix is not a better model -- it is a custom skill file that encodes typography, color, component patterns, and UX rules into portable markdown. Build it via Claude's skill-creator skill, test across multiple platforms until output is consistent, then iterate divergences back in. When requirements are fully specified, Fable 5 and Opus 4.8 produce nearly identical UI. Fable's real advantage only appears in unconstrained prompts where it avoids the default rounded-corner, neon-accent dashboard aesthetic that Opus falls into without guidance.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:56
01 · Intro -- the AI slop cycle
Claude skills fixed generic AI UI, but now everyone uses the same skills and output is homogeneous again. Custom skill files are the answer.
00:56 – 02:51
02 · Build custom UX/UI skills
Use Claude's skill-creator skill with a structured Q&A prompt to extract product identity, UX preferences, and brand rules. Export result as markdown files.
02:51 – 03:55
03 · Test skills on multiple AI platforms
Attach skill files to Claude, ChatGPT Codex, and Gemini. Run the same prompt on each platform and compare visual consistency.
03:55 – 04:51
04 · Refine your skill design system
Spot divergences, instruct Claude to encode the correct behavior into the skill file, save as new source of truth. Iterate until consistent.
04:51 – 07:28
05 · Claude Fable vs Opus -- front-end and custom skill tests
Test 1: frontend skill, simple travel UI. Test 2: custom skill. Both models produce nearly identical output under tight requirements.
07:28 – 10:32
06 · The complex UI test
14-requirement project management platform prompt. Fable delivers dark-mode multi-page Jira-like app in one shot; Opus matches on complexity. Drag-and-drop works in Opus, not Fable.
10:32 – 14:16
07 · The definitive test -- open-ended, no constraints
Budgeting platform, no skill, no requirements. Opus returns typical rounded SaaS UI. Fable produces Florin -- editorial serif, warm paper canvas, unconventional navigation.
Lines worth screenshotting.
- The AI slop problem is a documentation problem -- a well-written skill file makes any model produce brand-consistent UI.
- A skill file is just markdown, which means it works on Claude, ChatGPT, Gemini, and Codex without any platform lock-in.
- When strict UI requirements are encoded in a skill file, Fable 5 and Opus 4.8 produce output indistinguishable to the naked eye.
- Without a skill file, Opus defaults to generic SaaS aesthetics; Fable breaks out of that default even without instructions.
- The build-test-refine loop -- generate, spot divergences across platforms, encode the fix back into the skill -- is the core workflow.
- Sharing a skill file with a teammate means the AI always comes out consistent and on brand, regardless of who is prompting.
- Fable produced a full Jira-like project management system from a 14-requirement prompt in one shot, but Opus matched it on functional complexity.
- The drag-and-drop interaction worked in Opus but broke in Fable in the complex UI test -- feature parity is not guaranteed at higher cost.
- The clearest Fable advantage appeared only when given zero constraints and asked for something award-winning.
- Paying more for Fable on work that already has a skill file is wasted money -- save it for exploratory, brand-new product direction work.
When requirements are tight, documentation beats model upgrades.
WHAT TO LEARN
The AI slop problem is a documentation problem -- a well-written skill file makes any model produce brand-consistent UI, which means paying for a better model solves the wrong thing.
- A custom skill file is just markdown -- it works across Claude, ChatGPT, Gemini, and Codex, so you stay consistent without being locked to any one platform.
- Build skill files through a structured Q&A process, not by writing them from scratch -- let the skill-creator skill extract your preferences through questions.
- Test the skill on multiple platforms with identical prompts; divergences tell you exactly what rules are missing from the file.
- When requirements are fully specified, Fable 5 and Opus 4.8 produce visually indistinguishable UI -- the expensive model adds nothing under constraints.
- Fable's advantage is real but narrow: it only appears in unconstrained prompts where the model must invent brand direction without guidance.
- The practical split: use Opus for daily work with an existing skill file; use Fable when designing a new product from a blank slate and want the model to make creative decisions.
Terms worth knowing.
- Skill file
- A markdown document encoding UI/UX preferences, component rules, and brand guidelines so any AI model can read them and produce consistent output. Functions as a portable design system.
- AI slop
- Generic AI-generated UI output -- typically rounded corners, neon accents, centered layouts -- that looks indistinguishable from other AI-generated work because it defaults to the same aesthetic patterns.
- Skill-creator skill
- A built-in Claude skill that interviews the user with structured questions to extract their UI/UX preferences and outputs a downloadable skill file.
- Fable 5
- Claude's most capable model as of mid-2026, positioned above Opus 4.8 and priced higher, drawing usage credits at 2x the rate of Opus.
- Codex
- OpenAI's code-generation product, used here as a ChatGPT-based frontend code generator for cross-platform skill file testing.
Things they pointed at.
Lines you could clip.
12:12
“Opus comes up with AI slop if you don't give it a skill, but Fable is breaking out of that generic UI slop that you see everywhere.”
14:02
“If you have clear requirements, don't bother spending more money on Fable.”
01:35
“That way you're not locked down into one platform for the rest of the product's life.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
00:00We recently had an AI slob problem in the UI UX industry. All the generated designs were coming out similar. That was solved by Claude's skills, which made the generated UIs look better.
00:11But now everyone is using the same skills, and the new eyes are starting to look similar again. They're all looking better than before, but they just look like they're all using the same design language. In this video, I wanna show you how to build custom skills that include your product styling and your brand rules.
00:29You will have a skill file that acts like a product design system no matter where you use it, not just in Claude. And I'll show you how to refine it and make it the perfect resource for your product. I will also compare Fable five and OPUS 4.8.
00:42Fable is the most powerful AI model in the market right now, and I want to know if it's worth spending the extra cost or if OPUS is already good enough for building and designing products. I'm gonna compare it in multiple ways to have a clear answer. Let's start by building a new skill in Claude that includes all your UI and UX preferences, and this skill file can be used in any AI platform, not just Claude.
01:07It's a markdown file that you can give to any AI when building screens. That way you make sure that your design is always coming out consistent no matter what AI you're using. All you have to do is just give these skill files to ChatGPT or to Claude or Gemini, and your design will always come out consistent.
01:24That way you're not locked down into one platform for the rest of the product's life. It's a source of truth that will always guide your product's UI and UX. Let's start by opening a fresh conversation with Claude.
01:35Click on the plus button, and from the skill selector, you can select the skill creator skill. It's a skill to create skills. It just tells Claude what to do to capture all of the knowledge that you want to include in that skill.
01:48Then I want you to copy this prompt. It's included in the description. This prompt tells Claude to collect all the UI and UX preferences from you by asking you questions.
01:58And if you already have a product design, you can use your screenshots as a reference to build this skill file. Now I'm gonna go ahead and answer the questions here, and these questions are crafted to extract all of these details from you around UI and UX. And after answering all of the questions, you will have a downloadable skill file.
02:17Now to be able to use the skill file on other platforms, all you have to do is copy the contents of each of the files within this skill. If you look into the skill here, you will see there's three different files for me.
02:31It might be different for you. All I'm gonna do is simply copy and paste the contents of these files into a markdown file.
02:40You can use any text editor. I'm using cut editor here. All you have to do is paste it and save it as a markdown file.
02:46Now I have three files that include all the product identity that we came up with, but that's not enough. Now is the crucial part where you're gonna have to test this skill and see what it looks like visually.
02:58So just ask Claude to use this skill to build the homepage, or in my example, I'm building the dashboard here. And if you use another AI platform, try it there as well.
03:09I'm gonna try it with Gemini, with Google AI Studio, and with ChatGPT using Codecs.
03:15All you have to do is attach the three files and ask for a home page in each of these platforms. And if you're only using Clot, try the same prompt multiple times in separate chats.
03:25This process will help you identify what's consistent and what's changing. That way, you can tweak the skill file until you're 100% satisfied with outcome and to make sure that it's always consistent.
03:37Here are the results. Right off the bat, you can see it's very consistent across all AI platforms with Claude, with ChatGPT, and with Gemini.
03:49You can see how these skills really defined what the product will look like no matter what you're using. Now if you look closely, you're gonna see some differences, and that's where you're gonna have to make some decisions.
04:00For example, here, Claude added a top navigation menu, but ChatGPT added a side navigation menu.
04:08So now I can go back to Claude and adjust the skill file, and I will tell it exactly what I want the product to look like. If I wanted to have a side navigation, I'll just tell it to include that information in the skill file so that it always comes out with a side navigation. Do that with everything so that your product is fully defined and consistent at all times.
04:28All you have to do is tell Clot to modify the skill to include your new information, and then save the new files as your source of truth and as your design system. And you can share these files with anyone who is working on your project so that the AI always comes out consistent and on brand. So keep generating the same page with this skill file until you find that it's consistently exactly as you want it.
04:51Now since Claude released Fable, the most powerful AI model ever, I want to test its capability against Opus 4.8 to see if it's actually making a difference because the Fable model is much more expensive, and I want to know if paying more will have a better outcome or if it's a similar outcome.
05:12First, I'm gonna test it with the front end skill that we have in Claude, and I'm gonna test it with the skill that we just built. Then I will test it with a very complex prompt. And finally, I will test it with an open ended prompt without any skills to see how far it goes.
05:28So for the first prompt, I said, create a unique, creative, and user friendly UI for a travel web app. I set that to Fable, and I gave the same prompt to Opus 4.8.
05:39And by the way, this is using the front end skill in Claude. Now here's the page that Fable built.
05:45It looks really cool, and it has, uh, some animation in the board here. But you can see the front end skill is still in play here. Whenever I see a two colored title, I know that this is using the front end skill of Claude.
05:59The result is really interesting, but I don't know if it's much better than what we get with Opus. Here, there's the option to stamp it, and it adds a stamp on top of the card over the pass.
06:13And I have a Toast notification at the bottom here, and the more I add, the more it updates with the total at the bottom.
06:21Now the same prompt with Opus, and this is what we get. There's some animation in the board here, but it's disappearing.
06:33The responsiveness is not very good here. And we also have the cards at the bottom, and we can select them.
06:40Now both UIs look very similar even though I didn't specify any styling requirements, but it's using the front end skill. Now back in Fable, we also see that it's not very responsive.
06:51When I made it bigger, it started breaking the UI with the stamp here.
06:57So it didn't do a much better job than what Opus did. In fact, I think the Opus design looks a little bit better here. Now when using the skills that we just built, this is the UI that we got with Opus, and this is the UI that we got with Fable.
07:15So when we have strict requirements, it's gonna adhere to the requirements. It's not gonna build or design anything different.
07:22So they're both adhering very well to the requirements. Not much difference between Fable and Opus. Next up, I'm gonna give it a long, detailed, complex prompt to see how much of it it will be able to achieve.
07:34So this is the prompt. I'm asking for a project management platform. This is the perfect way to test for the complexity of the platform because there's different states and different notifications and projects and team members and the Kanban board.
07:52Let's see what it will create with this full prompt. This is fable five.
07:59There we go. It gave me a dark mode dashboard here, and we have multiple pages that are working.
08:11That's very detailed and thorough. We even have a file directory activity and different projects.
08:21That's cool. And each project will have a sidebar. This is a full on system just like Jira, and it did it with one shot.
08:29Everything is interactive. I can select move to in progress, and it has a notification at the bottom, which is beautiful.
08:39And we have the Kanban board here. I cannot drag and drop, though.
08:43Oh, here I have a filter for my tasks. This is really detailed. I can see the agents here that are running.
08:51And here we have the review for approval page. This is already very impressive. Now let's see if Opus can create this level of complexity.
09:01Here's the same prompt for Opus.
09:07And there we go. A contrast issue in the add new task at the top.
09:12So dashboard here looks very basic and very the design is very generic here. Let's see the board.
09:20Can we drag yeah. We can drag and drop here. So that functionality is working here, but it's not working in Fable.
09:27If I go to AI agents, I can see the animation for the agents that are working and the things to review here, approve, request change, and it's giving me the notifications at the bottom.
09:44And we have the assets and activity. So Opus was able to create that much complexity as well.
09:53So that wasn't limited to only Fable. Opus is capable of doing the same amount of complexity. Let's see if the keyboard shortcut works.
10:03It works. It added keyboard shortcuts as well. Here, we can search, and we have the sidebar.
10:10So, yeah, it seems like everything is implemented the same way in both models. Now under the hood, when it gets to engineering and security and roles and permissions I'm not a developer, so I cannot judge.
10:24But I'm only judging the front end here, and there's not much different between Opus and Fable so far.
10:32Now let's give it more freedom and ask for an open ended prompt to see how creative each one of those models can get. Alright. Let's start with Opus.
10:40I said build an award winning platform for personal budgeting. Do not consider any previous info you have about me because Claude tends to leverage previous conversations.
10:50I want to start with a clean slate, and I don't want to use any skills. And I said make the best decisions you see fit and deliver a fully interactive prototype.
11:00So we're looking for a personal budgeting platform. Let's see what Opus gave us. So right off the bat, Opus here is using the typical generic UI that you see everywhere with the rounded corners.
11:14A little playful with the fonts, which is nice, but the UI is very generic, and, uh, this is definitely not an award winning UI. Let's see.
11:25Different pages. I mean, it's it's user friendly. I'll give it that, but it's nothing special here.
11:33It's very, very typical to me. Has AI insights and ad transaction, very typical UI.
11:42Let's see if Fable can get more creative than that. Here's the Fable result.
11:50There we go. Now this looks more unique. Like, right off the bat, I can see it's not following any typical patterns of UI and usability.
12:00It's not using the generic look even though I didn't give it any skill. So just the raw model here is being very different than the AI slop we see everywhere.
12:12So Opus comes up with AI slop if you don't give it a skill, but Fable is breaking out of that generic UI slop that you see everywhere. So that's good to see. And you can see here it's not following the traditional navigation.
12:28The UI looks nice and clean. It's a little dense on the information, but it looks very clear and user friendly from, uh, how your eye can navigate through the whole UI from top to bottom.
12:43You can see the budgets clean on the side. There's a goal here at the side. I didn't give it any UI requirements here.
12:50This is all its own decisions, and I'm impressed.
12:55So if I'm designing a completely new product, I think I would lean more into Fable for designing the UI, the initial direction of the UI, because it does get more creative than Opus.
13:07There's a date at the top, and everything changes when I change the month. And it has everything you need for a budgeting app here. Let's see the new entry.
13:17There we go. We have expense, income.
13:19Simple, straightforward, user friendly, and beautiful.
13:23So this is the first time I actually see a clear difference between Opus and Fable when I don't give it any requirements, and I let it make the decisions without any restraints or skills. So, yeah, it feels like Fable is not defaulting to the usual AI aesthetic.
13:40It does get creative, and it considers unusual usability patterns, which is awesome.
13:46There you have it. Now you know how to create your AI friendly product documentation. This skill file is your product documentation that you can use with any AI.
13:57And now you know when to use Fable and when not to waste your money. If you have clear requirements, don't bother spending more money on Fable.
14:05But if you want to get creative, maybe give it a try and see what it comes up with. Let me know if you have any questions or observations.
14:12Always happy to hear your thoughts. Cheers.
The Hook
The bait, then the rug-pull.
When everyone reaches for the same built-in skill, the cure becomes the disease -- and the only way out is a design system you actually own.
Named ideas worth stealing.
00:56model
Build-Test-Refine skill loop
- Build via Q&A skill-creator
- Test across multiple AI platforms
- Refine divergences back into the skill file
Three-step workflow for turning vague aesthetic preferences into a consistent, platform-portable design system.
Steal forAny product with a defined visual identity that needs to survive AI platform switching
13:55concept
Fable vs Opus decision rule
With clear requirements: use Opus and save money. Without constraints -- designing a new direction from scratch: try Fable.
Steal forDeciding which model to use for any UI-generation task
How they asked for the click.
VERBAL ASK
14:05subscribe
“Let me know if you have any questions or observations. Always happy to hear your thoughts.”
Soft verbal sign-off, no hard CTA. Newsletter link in description.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
Visual structure at a glance.
