UX/UI Agent Skills (XIAS)

UX/UI Agent Skills, also called XIAS, is an open-source UI design kit by Thientan Soparat (GitHub user plugin87). The README says it gives AI coding agents a set of design rules, design tokens, runnable Skills and 138 reference design systems, with output that can target React, Vue, SwiftUI, Flutter and other frameworks. Installed as a Claude Code plugin it brings 25 Skills; AI Inspiration World recommends only the local design and checking parts. design-screen designs whole screens; design-component specs a component following Atomic Design, with its anatomy, variants, states and accessibility needs; design-tokens produces three-tier tokens in DTCG format; design-code turns a design into code for the framework you name; a11y-audit audits against WCAG 2.2; ux-writing drafts interface copy such as error and empty states; /gate runs all 52 automated checks; and /critique hands the result to a critic whose job is to find faults. The checks cover text contrast on a real render in light and dark themes and in hover and focus states, axe accessibility testing, keyboard use, target size, reduced motion and no horizontal overflow at 280 pixels wide, and they flag a destructive button such as Delete that isn't in a danger colour. What sets it apart is that it keeps "is it correct?" apart from "is it good?": anything measurable goes to the check scripts, which only pass or fail, while taste goes to /critique, which works in a separate context, takes screenshots, clicks every control, never sees the conversation that produced the design, and argues for sending the work back.

Who it's for:product designers and front-end developers who build web or app interfaces with AI coding tools and care about accessibility and consistency. You'll need to be comfortable with tools that run commands, such as Claude Code or Codex; readers who never touch a command line will find it hard going.

Before you start: the README recommends installing it as a plugin with /plugin in Claude Code, which adds 25 Skills, a design critic agent and 3 hooks. The hooks check every file write for hardcoded values and emoji, and refuse to end a session that edited UI without running a single check. For Codex, Cursor and similar tools, npx ux-ui-agent-skills init --agent codex writes AGENTS.md and the full kit into your project; --force overwrites existing files, and --dry previews first. The hooks only work in Claude Code. 34 of the 52 checks open a real browser, so you need to install Playwright and Chrome in the kit folder yourself; without them, a check run on its own prints SKIPPED and exits normally, which is not a pass. The check scripts need Node and Python. The README itself says passing the checks means correct, not good-looking. We haven't reviewed or recommended scaffold-project, which generates a new project template that comes preconfigured with third-party Figma and Notion MCP servers (you supply FIGMA_API_KEY and NOTION_API_KEY) and shared permission settings that pre-approve every npm run command, a wider scope than read-only checks. Nor have we reviewed or recommended figma-integration, which pushes tokens and components to Figma and syncs in both directions, so it writes to your Figma account, and which is one of the Skills the AI can call on its own; if you don't need Figma sync, don't connect the Figma MCP. The 138 design systems are reference material, and you need to confirm your own rights to any brand logos and fonts they mention. MIT license.

Based on the project's public documentation. Not tested by AI Inspiration World.