AI-generated UI is getting better with Claude Skills.
But it is also starting to look the same again, because everyone is using the same skills.
The real solution is not just to use a better skill.
It is to create your own custom skill that acts like a design system for your product.
This is a reusable source of truth that explains your product’s style, UX rules, brand personality, layout preferences, and design standards in a format AI tools can understand.
And once you create it, you can use it across Claude, ChatGPT, Gemini, Codex, or any other AI tool.
Step 1: Create a custom UI/UX skill in Claude
Start a new conversation in Claude, open the skill selector, and use the Skill Creator.
Then paste this prompt:
/skill-creator I want you to help me create a custom skill for a new UI/UX project.
The goal of this skill is to make Claude understand the product deeply, then generate UI/UX work that follows my unique style, UX preferences, product direction, brand personality, and design standards.
First, interview me with simple questions so you can understand the project and my preferences.
Claude will ask you questions about your product, visual style, UX preferences, brand direction, layout rules, components, and design standards.
If you already have product screenshots, upload them too. Claude can use them to extract your existing design language and turn it into a stronger skill.
Once the skill is created, export or copy the skill files into markdown files.
These files become your AI-friendly design system.
Step 2: Test the skill files multiple times
Now test the skill visually.
Use the skill files to generate the same screen multiple times.
For example, ask for a homepage, dashboard, onboarding flow, or product page.
Test it in Claude in multiple separate chats, or attach the same markdown files to other tools like ChatGPT, Codex, Gemini, or Google AI Studio.
Use the same prompt each time.
The goal is to see what stays consistent and what changes.
If the outputs feel like they belong to the same product, the skill is working.
If every tool makes different decisions, the skill needs more clarity.
Step 3: Refine the skill based on inconsistencies
The inconsistencies are the most useful part of the process.
If one version uses a top navigation and another uses a sidebar, your navigation rules need to be clearer.
If one version uses colorful gradient cards and another uses neutral sections, your visual rules need refinement.
If one layout feels dense and another feels too spacious, your spacing and density rules need more detail.
Go back to Claude and ask it to update the skill based on what you noticed.
For example:
Update the skill to always use a left sidebar navigation for desktop dashboards, with a collapsed icon-only state for smaller screens.
Or:
Update the skill to avoid large gradient cards. Use neutral surfaces, subtle borders, compact spacing, and a clean editorial SaaS layout.
Then save the new version and test again.
Repeat this until the output becomes consistent across multiple generations and multiple AI tools.
That is how you turn a Claude Skill into an actual AI-friendly design system.
Fable 5 vs Opus 4.8
I also tested Fable 5 against Opus 4.8.
When both models had clear requirements or a custom skill, the difference was not huge. Both followed the rules well.
But when I gave them an open-ended creative prompt with no skill, Fable produced a more original UI direction, while Opus leaned closer to the familiar AI-generated look.
So the takeaway is simple:
If you already have strong design rules, Opus is enough.
If you are starting from zero and want a more creative direction, Fable may be worth testing.
Watch the full breakdown here:
The future of AI product design is not just about using better models.
It is about giving those models better product context.
If you want AI to design consistently, you need to give it a system.
And if you want your product to stop looking like everyone else’s, that system needs to be your own.