ux-ui-agent-skills: Get accessible, consistent screen designs from Claude
Added · Updated
Made by Thientan Soparat
View profile on GitHub (opens in a new tab)Make Claude design screens and components that follow design rules and pass accessibility checks.
For people who build app or web interfaces with AI.
What it does
The kit is a set of written rules, design tokens (named values for colors, spacing and type that keep a design consistent), skills and test scripts that an AI coding assistant reads before it builds an interface. The creators say it has no build tools or runtime of its own and includes 138 design systems for visual direction. After the AI writes a screen, 52 automatic checks, which the source calls gates, test things like color contrast, button size, layout on narrow screens and stray emoji.
How to use it
Input → action → output: install the kit, then ask Claude for something like a revenue dashboard or a settings page. The matching skill loads on its own, and you get HTML or component code built from the kit's tokens, which the gates can then check and report on.
Common use cases
- Ask for an analytics dashboard and get a page with a clear main figure, varied charts and readable contrast in light and dark mode.
- Point the accessibility audit at an existing screen and get a prioritized list of WCAG problems to fix.
- Generate a set of design tokens for your brand and get JSON files you can reuse across components.
Can I use this?
Requirements Add it as a Claude Code plugin with two commands, or use it from another MCP client (MCP is a way to plug tools into an AI assistant), Homebrew or npx. To run the browser-based gates, install Playwright and Chrome in the kit folder. The kit is MIT licensed, an open source license.
Caveat The gates catch measurable problems such as low contrast or tiny buttons; whether a design suits your product is still your call.
Worth knowing It is a set of instructions and checks, not an app: results depend on the AI model following them. Many of the checks open a real browser and fail if one is not installed.
Why it's here
Not trending this week
Last seen on the GitHub trending list on 28 October 2026. It stays on BuildTube so you can still find it.
- 3,136 people have starred it on GitHub.
Numbers checked on 8 November 2026; not refreshed since.
Behind it
View sourceBuildTube has not run or verified this project. Everything above is written from what the creator published.
Made this?
Quick questions
- What is ux-ui-agent-skills?
- The kit is a set of written rules, design tokens (named values for colors, spacing and type that keep a design consistent), skills and test scripts that an AI coding assistant reads before it builds an interface.
- What can I use ux-ui-agent-skills for?
- Ask for an analytics dashboard and get a page with a clear main figure, varied charts and readable contrast in light and dark mode; Point the accessibility audit at an existing screen and get a prioritized list of WCAG problems to fix; Generate a set of design tokens for your brand and get JSON files you can reuse across components
- Can I run ux-ui-agent-skills on my computer?
- The kit runs inside Claude Code as a plugin, or in another AI coding tool that reads AGENTS.md or connects over MCP, on your own computer; its browser-based checks also need Playwright and Chrome installed.
- What do I need to use ux-ui-agent-skills?
- Claude Code (installed as a plugin) or another AI coding tool that reads AGENTS.md or connects over MCP. The browser-based checks also need Playwright and Chrome installed.
- What license does ux-ui-agent-skills use?
- The kit is MIT licensed, an open source license.
More from this week
- agent-desktop Let AI agents read and click desktop apps
For developers building computer-use agents: agent-desktop lets an AI agent read and operate desktop apps on Mac, Windows or Linux from a command line.
- Stroq Check AI coding agent sessions for leaked keys
Stroq scans your recent Claude Code and Codex sessions for keys that left your machine.
- DeepTutor Study your own documents with a personal AI tutor
Read documents with page-by-page citations, practice daily and get video lessons from an AI tutor.
Explore by topic
Post this
Download share imageFor makers
Made this? Show it’s on BuildTube — add the badge to your README or embed the card on your site.
README badge (Markdown)
[](https://buildtube.app/p/gh-plugin87-ux-ui-agent-skills/)Embed card (HTML)
<iframe src="https://buildtube.app/embed/gh-plugin87-ux-ui-agent-skills/" width="560" height="240" style="border:0;max-width:100%" loading="lazy" title="ux-ui-agent-skills on BuildTube"></iframe>