UX Design Skill for Claude Code that plans, writes, and wireframes your site.
It asks for project context, plans your page structure, and writes the actual copy. Every decision comes with reasoning and the alternatives it rejected.
-
A full site plan with sitemap, section structure, and narrative.
-
Understands 16 page types, 13 UX frameworks, and 50+ section patterns.
-
Each decision shows its reasoning, confidence level, and what it ruled out.
-
No backend, no accounts, no subscription. Pay once, works everywhere.
-
Built on the open AGENTS.md spec. Works in Claude Code, Codex, and Gemini CLI.
We planned this site using our UX Design Skill,
and the whole trail is public.
Every artifact opens in the browser, and each one has a markdown source you can download.
View the examples on desktop. Mobile clips the side panel where the decisions live.
Project plan
Project context, strategy, and a template inventory for every subpage. The single file each session starts from.
Messaging canvas
ICP, category, alternatives, pillars, narrative, headlines, and first-draft copy for hero, value props, FAQ, and CTAs. The strategic frame and the actual sentences on one board.
Wireframes
Section sketches with real copy, plus before-and-after wireframes for an audited site.
Pre-redesign UX audit
A wireframe of the previous site with per-section diagnosis notes and benchmarks against industry standards. The starting point for the whole redesign.
Three core features
that make this skill different.
A site plan with reasoning, before Figma or vibe coding.
Sitemap, section structure, and narrative in a single file. Every decision shows its reasoning and the alternatives it rejected. Lands in your workflow before you ever open Figma.
A site plan with reasoning, before Figma or vibe coding.
Sitemap, section structure, and narrative in a single file. Every decision shows its reasoning and the alternatives it rejected. Lands in your workflow before you ever open Figma.
Files that move straight into Figma AI, Cursor, and Claude.
Markdown, HTML, and Excel. Each artifact drops into the next tool in your workflow without conversion. The plan lives in your project files, not in a chat history.
Files that move straight into Figma AI, Cursor, and Claude.
Markdown, HTML, and Excel. Each artifact drops into the next tool in your workflow without conversion. The plan lives in your project files, not in a chat history.
Built-in UX expertise. You still make every call.
16 page types, 13 UX frameworks, and 50+ section patterns baked in. The skill applies the methodology, but every checkpoint shows you the options and the trade-offs. The decision stays yours.
Built-in UX expertise. You still make every call.
16 page types, 13 UX frameworks, and 50+ section patterns baked in. The skill applies the methodology, but every checkpoint shows you the options and the trade-offs. The decision stays yours.
Four steps from brief
to a finished wireframe with real copy
You brief the skill on what you're building
It asks about your goal, your audience, and the context. Then it writes back a hypothesis file with confidence tags on anything it had to guess.
You pick the page format and archetype
Two or three options, each with its consequences spelled out. The call stays yours. The site plan lands in a file with reasoning under every choice.
You lock the positioning and the copy
Value, proof, and headlines on a messaging canvas. A finished copy doc for the site, written in your audience's language. Not marketing mush.
You generate wireframes with real copy
An HTML sketch you preview in the browser, section by section, with design notes and rejected alternatives next to every decision.
See the UX Design Skill in action
This skill understands UX design through built-in processes and a UX knowledge base.
menu_book The skill's knowledge map arrow_forwardPage types (16)
- B2B SaaS Subscription products
- B2B Services Agencies, consulting
- B2B Industrial Manufacturers, distributors
- E-commerce Online stores, DTC
- Portfolio Studios, freelancers
- Local Business Local services
- Marketplace Two-sided platforms
- Community Groups, forums
- Course Courses, training
- Media Publishers, blogs
- Event Conferences
- Nonprofit Foundations, NGOs
- Enterprise Enterprise tools
- Government Public institutions
- Documentation Knowledge bases
- Service Utility Online utilities
UX frameworks (13)
- Design Psychology Don Norman
- Hierarchy of User Needs Aarron Walter
- Usability Heuristics Jakob Nielsen
- LIFT Model Conversion Optimization
- CCD Customer Centric Design
- Emotional Targeting 223 triggers
- Buyer Legends Narrative framing
- FAST Architecture Persuasion sequencing
- Narrative Arc Hook, tension, evidence, resolution
- ResearchXL Structured UX research
- Messaging Hierarchy B2B 5-layer model
- Awareness Model 5 levels of awareness
- Funnel Psychology Awareness, consideration, decision
Section patterns (50+)
- Hero Page opener variants
- Navigation Sticky, mega menu, mobile
- Social proof Testimonials, logos, case studies
- FAQ / objections Accordion, 4 purchase barriers
- Forms Lead capture, contact, RFQ
- Pricing Tiers, anchor pricing, decoy
- Comparison Tables vs. competitors
- Case study Result + quote + metrics
- Pricing page Pricing psychology, tiers
- Comparison vs. pages, switcher proof
- Trust bar Logos, badges, certifications
- Stats block Metrics, scale, impact
- Sticky CTA Floating, bottom bar
- Mid-page CTA Contextual call
- + 35 more
92 knowledge files covering methodology, patterns, and worked examples. From design psychology to conversion patterns.
What about the free skills on GitHub?
We checked the ecosystem. The popular free UX skills for Claude Code fall into four buckets. Each one does its job well. None of them runs a whole site project from brief to wireframes.
Styles and components, stack-specific generators
You get ready-made styling and components for your framework: React, Vue, SwiftUI, or Flutter.
e.g. ui-ux-pro-max-skillUX references, WCAG, Nielsen, accessibility
You ask about a standard or pattern mid-flow with the AI model and get an answer with the source.
e.g. ux-mcp-serverUX prompts you can copy and run
You grab a prompt from the library, adapt it to your project, and plug it into your own flow.
e.g. claude-code-ui-agents, LibreUIUXUX research with a formal methodology
It walks you through user research with an unbiased methodology.
e.g. VoltAgent ux-researcherThis is the only skill that runs the whole site project from brief to wireframes
It takes you through every stage, from the first question about client context all the way to wireframes ready for handoff.
- Discovery (context capture)
- Audit of your current site
- Site plan and information architecture
- Wireframes with real copy
Why Claude Code alone isn't enough,
and why writing your own skill isn't either.
| UX skill (this product) RECOMMENDED | Claude Code alone ALTERNATIVE | Your own skill ALTERNATIVE | |
|---|---|---|---|
| UX methodology | 16 page types, 13 frameworks, 50+ patterns built in. | None. The model applies whatever you put in the prompt. | You write it yourself. Time cost plus risk of inconsistency. |
| Time to launch | 5 minutes (drop the folder into .claude/skills). | 0 minutes, but 0 methodology. | 80 to 160 hours of writing and testing. |
| Cross-model (Claude, ChatGPT, Gemini) | Yes. Works in any tool with any model (Claude Code, Codex, Gemini CLI, Cursor). | Claude only, inside Claude Code. No model choice. | Yes, if you design it against the open spec yourself. |
| Reasoning next to every recommendation | Yes. Reasoning and rejected alternatives next to every decision. | No. The model answers without a trail. | You'd need to design the decision log yourself. |
| Cost | From $189, one-time payment. | Claude Pro / Max subscription. | Your time. |
What this skill doesn't do
It doesn't make strategic decisions for you.
It shows the options with trade-offs. You make the call.
It doesn't pretend to know everything.
Every decision flags its confidence level wherever the AI is guessing.
It doesn't replace experience.
It shortens the path to a first version that you develop your own way.
Three packages, one-time license
Solo
1 user
- 92 knowledge files
- 16 page types
- Skill files in current version
- 6 months of updates
- Community Discord
Studio
Up to 5 users
- 92 knowledge files
- 16 page types
- Skill files in current version
- 6 months of updates
- Community Discord
Agency
Unlimited users
- 92 knowledge files
- 16 page types
- Skill files in current version
- 6 months of updates
- Community Discord
- 1× consultation with the author
14-day refund. Not a fit? Return it.
Get the free UX audit skill and run it on your own site
Get something concrete before you commit to the full version. Just give it a URL. The skill takes it from there.
A single audit workflow from the full skill. Audits any of the 16 page types.
By submitting your email you consent to receive product and service updates (per our Privacy Policy).
Stage 1: Site scan and a wireframe of the current state
A wireframe of your current site as HTML you preview in the browser.
Stage 2: Audit with diagnosis and annotations
Findings as section-level annotations directly on the wireframe.
Stage 3: Benchmark vs industry standards
Each finding shows the current state, the industry standard for that site type, and a confidence level.
Not just a prompt.
~25,000 lines of code
and a real system architecture.
UX Design Skill is an operating playbook plus 92 domain knowledge files, loaded on demand. The architecture took months to get right. What ships is the third iteration. The first two missed the bar.
Changelog and updatesKnowledge separated from instructions.
AGENTS.md defines the logic. The references/ folder holds the raw subject knowledge.
Files loaded on demand.
The skill detects the page type at runtime and loads only the matching data pack. Keeps the context window lean.
One skill, full cycle.
A single skill runs the path from discovery to wireframe. Context doesn't get dropped on a handoff.
Checkpoints at every stage.
Forced checkpoints mean a mistake caught early costs exactly zero.
Assumptions first, questions second.
Confidence tiers let the skill act proactively while keeping you in control.
Copy drives design.
The skill plans the content structure and real copy first, instead of falling back on empty placeholders.
Files as project memory.
Project state lives in markdown files, independent of the volatile chat session.
The audit gives you the diagnosis.
The skill generates recommendations from the audit. You apply the changes.
One folder.
Runs on the platforms you already use.
Claude Code
Full file access, direct deliverable writes
VS Code / IDE
Integrates with your working environment
Claude / ChatGPT in the browser
As a project instruction
Runs in the browser. Not all Claude Code features are available here.
Custom GPTs / Gemini Gems
Compatible as a knowledge plus instruction set
Runs in the browser. Not all Claude Code features are available here.
The package is the full toolkit.
Full skill definition with 6 workflows
92 domain knowledge files (16 page types, 14 areas)
Python script for Excel generation
Installation and setup
No extra dependencies. Drop in the folder, open your platform, start your first project.
Install it like a WordPress plugin
A folder of markdown files drops into your AI environment. Claude Code, Cursor, ChatGPT, Claude Projects, or Alice. No backend, no accounts, no onboarding queue.
Download the folder
After you buy, you get a zipped folder with the skill files.
Drop it into your environment
The folder goes into your project directory (e.g. .claude/agents/ for Claude Code), following the per-platform instructions.
Use it in your next session
The skill picks up automatically on your next session with the model. No extra configuration.
Questions we usually get
What makes this different from ChatGPT or Claude?
What makes this different from ChatGPT or Claude?
Chatbots answer in fragments. They ask one question at a time, lose context after two threads, and have no UX methodology. This skill lives in your project files in one folder. Decisions from the first conversation come back in the wireframe section. Every hypothesis gets a confidence tag. Every step ends with two or three options and their consequences. The output is real artifacts (HTML in your browser, markdown on demand), not a chat history you have to copy-paste.
Do I need to know UX to use this?
Do I need to know UX to use this?
No. Sixteen domain knowledge packs, thirteen frameworks, and 50+ section patterns are built in. The skill loads the right set once it detects the page type. Your role is the strategic decisions (who you serve, what the goal is) and the final pick at every checkpoint. The technical UX side is done for you. That's why a generalist designer can take a project in a domain they don't know cold. That said, UX knowledge makes a real difference. AI models are good at exploring lots of options, but they don't always pick the best one. That's where your experience comes in.
What exactly am I buying? Is it a subscription?
What exactly am I buying? Is it a subscription?
A one-time license. Pay once, own forever. Six months of free updates are included (twelve months in pre-sale). When the update window closes, your installed copy keeps working with no time limit. You can extend updates or stay on the version you have. No accounts, no server logins, no risk of the vendor cutting off access.
How does install work?
How does install work?
You download a folder of markdown files into your environment (Claude Code, Cursor, ChatGPT, Claude Projects, Alice). Install is like adding a WordPress plugin. A folder in your project directory, the skill starts up on your next conversation with the model. Full documentation is in the package after purchase. A pre-purchase preview is available for skeptics who want to see the flow before paying.
Can I test it before buying?
Can I test it before buying?
Yes. The free audit version. You download the package, run it locally on your own site, and you get: a wireframe rebuilt from your existing site (lo-fi HTML), a quality audit across six dimensions (completeness, consistency, quality, language, cognitive load, site-level consistency), and concrete section-by-section change proposals. No account, no email. Decide to buy after a real test on your own project.
What if the skill doesn't help me?
What if the skill doesn't help me?
You have 14 days to return it, no questions asked. If the skill doesn't meet your expectations or you decide it isn't giving you the results you want, return it and get a full refund. You don't have to justify your decision. There's no "maybe try again." The call is yours.
Who's behind this
Tomasz Maciąg,
Founder of Fuse Collective, a branding agency.
I've spent 15 years working in UX across strategy, research, and design. I built the UX Design Skill because I needed a process I could repeat across every client project. I use it every day.
Walk into Figma with the plan,
the copy, and the decisions.
Launch pricing through May 30, 2026.