What is the ux-design skill?
The ux-design skill is a SKILL.md in the civitai/civitai repository that gives an agent a UX methodology: five core principles, a five-phase process, text-based flow and wireframe formats, a heuristics checklist and writing rules. It is a method document, not a visual design generator, and one section depends on another skill.
The ux-design skill starts from one sentence template: when a situation arises, I want a motivation, so I can reach an outcome. That jobs-to-be-done frame anchors everything else, so the agent designs around tasks and not around feature lists.
It lives in a skills folder of the Civitai repository, which is a web application for sharing AI models. The skill is not about that product. It is a general UX method that the team keeps beside its code.
The five principles and five phases
- Principles: jobs to be done, progressive disclosure, recognition over recall, error prevention over recovery, and feedback within 100 milliseconds.
- Phase 1, research: interviews, competitive analysis, job mapping and two or three personas.
- Phase 2, information architecture: content inventory, site or app map, and user flows with error and edge paths.
- Phase 3, interaction design: wireframes, interaction patterns and responsive considerations.
- Phases 4 and 5, visual design and validation: design system, mockups with all states, prototypes, usability tests, A/B tests and analytics.
Formats and templates it provides
- A user flow diagram notation with boxes for screens, brackets for decisions and a legend for optional paths.
- A wireframe annotation layout using numbered notes that describe behavior, not only appearance.
- A state diagram format listing states and the triggers between them.
- Markdown templates for a user story, a screen specification and a user flow.
Who the ux-design skill is for
Best for
- Planning a feature before code exists, with flows, screen specs and acceptance criteria written down first.
- Reviewing an existing design against Nielsen's ten heuristics, WCAG principles and an emotional design check.
- Drafting microcopy, button labels and error messages. For deeper copy work, see ux-copy.
Not for
- Producing finished visual designs. It specifies structure and behavior, so pair it with wireframe-spec for layout detail.
- Reviews that need no setup. Its external consultation section calls a separate agent-review skill that is not in this folder.
- Form-specific questions. Those are better served by form-design.
Use it with UiChemy
The skill outputs documents, not WordPress pages. Once flows and screens are settled and drawn in Figma, UiChemy Figma to WordPress converts them into an editable build. Click Get Started on uichemy.com, then compare the result with your screen specifications.
Keep the written output in step with design work: component-spec details each part's states, and critique gives a second review pass before you convert. The skill's state diagrams make a good input for both.
How to install UX Design Skill: Flows, Wireframes and Heuristic Reviews
git clone https://github.com/civitai/civitai.gitGet the skill folder
The skill is a single SKILL.md in .claude/skills/ux-design of the Civitai repository. Cloning with
git clone https://github.com/civitai/civitai.gitfetches the whole web application, so you may prefer to open the folder on GitHub and copy the file.Copy it into your skills folder
Place the ux-design folder where your agent loads skills from. The skill needs nothing else for its principles, process, templates and checklists.
Optional: set up the review helper
The Running UX Reviews section calls a node script in a separate agent-review skill. That helper is not in this folder, so copy it as well or skip that section.
Ask for UX work
Describe a flow, a screen set or a usability review. The skill description says to use it for flows, wireframes, interaction patterns and UX feedback.
Check that it loaded
Ask for a user flow for a signup screen. The reply should state the job to be done, give a happy path and error paths, use the text flow notation, and add a screen specification with states and accessibility notes.
Key features
- Jobs-to-be-done templateA fill-in sentence for situation, motivation and expected outcome, with a worked example about generating comic panels. Mapping prioritizes jobs by frequency times importance.
- Progressive disclosure levelsFour levels from the core action, to basic options, to advanced controls, to expert features, so complexity appears only when a user needs it.
- Recognition over recallThe skill contrasts typing a numeric weight with a slider that previews the effect, and shows a labelled subtle-to-strong control as the better pattern.
- Error prevention examplesRather than showing an error after a click, disable the primary action until its precondition is met. Feedback should appear within 100 milliseconds of any action.
- Five-phase processResearch and discovery, information architecture, interaction design, visual design, and validation, each with a numbered checklist of activities and outputs.
- Text-based diagram formatsFlow diagram, annotated wireframe and state machine notations written in plain text, so an agent can produce and edit them inside a Markdown file.
- Heuristics checklistNielsen's ten usability heuristics, four WCAG principles (perceivable, operable, understandable and one on assistive technology support) and three emotional design levels: visceral, behavioral and reflective.
- Microcopy and error rulesBe concise, specific, helpful and human. Error messages say what happened, why and how to fix it. Button labels use action verbs, not Submit or OK.
- Informative loading statesProgress text that names the stage, in place of a bare spinner, with example messages tied to ranges of completion.
- Output templatesReady-made Markdown for user stories with acceptance criteria, screen specifications with a component and states table, and user flows with happy, alternative and error paths.
Frequently asked questions
What is the ux-design skill?
It is a UX methodology packaged as an agent skill in the civitai/civitai repository. It covers five principles, a five-phase design process, text diagram formats, a heuristics checklist, microcopy rules and templates for user stories, screens and flows.
How do I install the ux-design skill?
Copy the ux-design folder from the repository's skills directory into your agent's skills directory. The README has no install command for it, and cloning pulls the whole Civitai application, so downloading the single SKILL.md from GitHub is lighter.
Which AI coding agents does it work with?
The README does not say which AI coding agents it supports. The skill sits in a .claude/skills folder with a standard SKILL.md header, and its review commands call a node script at .claude/skills/agent-review/query.mjs, so a setup that can run node commands is needed for those.
Does the skill need anything beyond SKILL.md?
Only for one section. The Running UX Reviews part calls query.mjs from an agent-review skill with a model flag and a system prompt. Without that helper, the principles, process, templates and checklists still work as plain guidance.
Is the skill tied to the Civitai product?
The wording is general, but its examples come from Civitai: comic panel generation, character locking and model weights. Treat those as illustrations and swap in your own product when you apply the templates.
What heuristics does the checklist include?
Nielsen's ten usability heuristics, from visibility of system status to help and documentation. It also adds four WCAG principles and three levels of emotional design. Each item is a checkbox the agent can tick through when evaluating a design.
What do the UX writing rules say?
Keep copy concise, specific, helpful and human. Use action verbs on buttons, such as Save Draft, and avoid Submit or OK. Errors follow what happened, why, and how to fix it. Loading text should name the current stage.
What license does it use?
The repository metadata and README list Apache License 2.0. Check the LICENSE file in the repository before copying the skill into a product, and note that the license covers the whole Civitai repository, not only this folder.