Buttons
Prompt “Build me a button set: primary, outline, icon-only, delete, with hover, focus, loading, and disabled states.”
New: works like a designer
UI dashboard without the AI hassle
evon:ui-ux reads your codebase and shows a brief and 2–3 wireframes for you to pick from. Only then does it build, with your project's own components, and check its work with a script.
/evon:ui-ux Redesign the jobs page.Works with
- Claude Code
- Cursor
- Codex
- OpenCode
- Antigravity
- ZCode
- npx
- bunx
Passed 70 test prompts from a single button to full pages
- approved components
- 30
- components built without a template
- 8
- composite blocks
- 10
- full pages
- 22
Counted from the skill's test list, Sep 29, 2026.
0109Features
What it does
One skill, three kinds of work
No commands to memorize. The skill reads your prompt and works out what to do. By default it works like a designer; if you want something else, just say so.
01
Build new
By default the skill goes through every designer step. Tell it to skip the wireframes to save tokens. Building several screens? Lock in a design system first. Anything smaller than a screen, it just does.
- New
Work like a designer
The default whenever you ask for a screen to be built or redesigned. It writes a brief, works out what the screen is for, and shows 2–3 wireframes with real content. It builds once you pick.
Sample prompt
/evon:ui-ux Redesign the jobs page. - New
Just build it, no wireframes
Saves tokens. The skill picks the option it thinks fits best and builds it straight away. At handover it tells you which layout it chose and why.
Sample prompt
/evon:ui-ux Build the notification settings screen, just build it. - New
Design system first
Locks in color, type, spacing, and seven base components on one page. Approve it once, and every later screen is built from that set. Already on shadcn or your own kit? The skill tunes that instead.
Sample prompt
/evon:ui-ux Build a design system for a clinic management app first, no screens yet. Anything smaller than a screen
Fix a component, add a dropdown, fix a bug, change a color. The skill still reads your codebase first, then just does it, no wireframes.
Sample prompt
/evon:ui-ux Add a status filter dropdown to the orders table.
02
Redo existing UI
All four start by measuring your page. They differ in how much the skill is allowed to change.
Review the UI you have
Give it a localhost link. It opens the page, measures from 375 to 1920px, and sends back an issue table with before / after shots. It only fixes after you reply “fix 1, 3”.
Sample prompt
/evon:ui-ux What's wrong with this page: http://localhost:3000/ordersRebuild, keep the brand
Keeps your page layout and colors. Swaps home-made controls for proper components and tidies each card. Reply “ok” or “drop 7”.
Sample prompt
/evon:ui-ux Rebuild this page and keep the brand.Redo in the skill's style
Like keeping the brand, but the colors switch to the skill's tokens too. Only your logo and main accent stay.
Sample prompt
/evon:ui-ux Rebuild this fully in the skill's taste, drop the old style.- New
Add dark mode to an existing app
A Light / Dark / System toggle that remembers the choice and never flashes white on load. The skill switches colors through tokens, then re-checks tables, forms, overlays, and charts on dark. Tested on one real project, 7/7 items.
Sample prompt
/evon:ui-ux Add dark mode to the app, with a light / dark toggle in the header, following the OS by default.
03
Clean up code
Only the code underneath changes. The interface stays exactly the same.
- Beta
Clean the code, keep the look
Swaps classes, deletes unused CSS, and compares screenshots before and after so not a pixel shifts. This part is new and hasn't been tested yet.
Sample prompt
/evon:ui-ux Refactor the /settings CSS to Tailwind and keep the UI identical.
0209Process
Designer mode
Brief, wireframes, then build
Ugly screens are usually a structure problem, not a color problem: overloaded cards, filters far from the table, two buttons fighting. A designer catches these at the wireframe, before fixing them costs anything.
- U1
Brief
Reads the repo, README, and routes first. Only asks what it can't find out on its own.
- U2
What the screen is for
Why people come here, what they compare, and what they click at the end.
Stop 1: you edit the brief or reply “ok”
- U3
2–3 wireframes
Options that differ in layout, not just in color. Real content, and every block is numbered so feedback is easy.
Stop 2: you pick, e.g. “C + D”
- U4
Build it
Codes the option you picked, with your project's own components. Runs the check script and fixes what it finds, up to three rounds. Anything left gets explained at handover.
OptionABCColorDesktopMobileState: With data
Why option A
Recommended- Pros
- Late orders are quick to find: search and filters sit right above the table.
- Cons
- Less room for overview charts.
- Best when
- People come here to process orders, not to check totals.
Right on the wireframe you can switch options, turn on color, try accents, check mobile, see the empty and error states, read pros and cons, and copy feedback by block number.
0309Before / after
A real screen
From the old screen to a wireframe, then the finished screen
The 68Lane room listing screen in three steps: the original, the wireframe the skill offered to pick from, and the screen built from it. Drag the handle to compare.
68Lane · Room listings
Drag across the frame, or focus the handle and use the ← → keys.
0409Review and measure
Check script
Measured by a script, not eyeballed
The script opens the real page, hovers, tabs through, opens every menu, measures contrast, and tries every screen width. Every issue it reports goes in the table, or gets a written reason for being skipped.
The skill lists the issues, you pick what to fix. It can point out anything, but it only fixes what you approve. Issues are graded against your project's conventions, not the skill's taste.
| # | Issue | Proposed fix |
|---|---|---|
| 1 | Secondary text at 3.2:1 on cards Broken | Use a muted color at 4.6:1 |
| 2 | Nav wraps at 860–1000px Broken | Move secondary items into a menu |
| 3 | Three corner radii on one card type Off-system | Back to the project's radius |
| 4 | Two filled buttons competing Taste | Keep one primary, outline the other |
You reply: fix 1, 2
- Broken
- Measurably wrong: contrast, overflow, wrapping, unclickable.
- Off-system
- Breaks your own project's conventions.
- Taste
- Suggestions from the skill's taste, unchecked by default.
Measured at six widths. 375, 768, 1024, 1280, 1440, and 1920px. Add --sweep to scan every width from 1440 down to 375 and find exactly where it breaks.
| Check | 1920 | 1440 | 1280 | 1024 | 768 | 375 |
|---|---|---|---|---|---|---|
| Text contrast ≥ 4.5:1 | ||||||
| No horizontal scroll | ||||||
| Nav stays on one line | ||||||
| Popovers stay on screen | ||||||
| Hover is visible |
Sample report. The script also checks selected items, focus rings, and the state right after a click.
0509Showcase
Built screens
One prompt, this screen
Each tile shows the original prompt and the screen the skill built from it, captured as-is. You can still customize it however you like afterward.
Status badges
Prompt “Build me order status badges: pending, shipping, delivered, cancelled.”
Date picker
Prompt “Build me a date picker, and a date range picker with presets for 7 days, 30 days, and this month.”
Charts
Prompt “Build me a chart set: monthly revenue line, grouped comparison bars, a proportion donut, and a small sparkline in a stat card.”
Modal with form
Prompt “Build me an invite-member modal with a form inside and cancel and send buttons.”
Timeline
Prompt “Build me an order activity timeline: created, confirmed, packed, shipped, with one failed delivery step.”
File tree
Prompt “Build me a document folder tree with collapsible branches, an empty folder, and a very long file name.”
Nested comments
Prompt “Build me a comment section with nested replies, a deleted comment, and a comment that's still sending.”
Tag input
Prompt “Build me a recipient email input where Enter turns each address into a tag, including an invalid email.”
Screens shown in Vietnamese. The skill writes UI copy in your project's language.
0609Taste
The skill's taste
No “make it pretty”, just concrete rules
Each rule lives in one file, and many came from bugs found in testing. Here are four you can see on screen right away.
P6 · M12
Flat by default
Light gray page, white cards. No gradients or glass effects just for looks.
M3 · I1 · I3
One primary button
Buttons are outlined by default. Each area gets one button filled with the accent, so the one that needs to stand out actually does.
M13 · M15
Borders, not shadows
Cards on the page are separated by a 1px border. Shadows are only for things that float above the page, like modals and dropdowns.
R1 · T15
Holds up at 375px
Long labels wrap, and the page never scrolls sideways.
Want a different style? Say so in one line
Flat gets the most care. Other styles keep the same contrast and hierarchy but are less polished. If your project already has its own style, the skill follows it and tells you when it hands over.
Default
- Flat, thin borders
From your project, or on request
- Elevated
- Dark
- Colorful
Doable, rarely right for dashboards
- Glassmorphism
- Gradient
0709Install
Install
Set up in a minute
Pick the tool you use. All of the skill's testing ran on Claude Code.
Claude Code
- 01
Add the marketplace, then install the evon plugin.
/plugin marketplace add evondev/evondevKit/plugin install evon@evondevkit
- 02
Invoke the skill with this command, or just write a prompt: it turns on when the prompt is about app UI.
/evon:ui-ux
- 03
Pull the latest version when a new release is out.
/plugin marketplace update evondevkit
Cursor
- 01
Run one of these in your project root: npx if you have Node, bunx if you use Bun. The skill lands in .agents/skills/; add -g to install it for every project.
npx skills add evondev/evondevKit -a cursorbunx skills add evondev/evondevKit -a cursor
- 02
Invoke the skill with this command in the Agent chat, or just write a prompt: it turns on when the prompt is about app UI.
/ui-ux
- 03
Pull the latest version when a new release is out, again with either command.
npx skills updatebunx skills update
Codex
- 01
Run one of these in your project root: npx if you have Node, bunx if you use Bun. The skill lands in .agents/skills/; add -g to install it for every project.
npx skills add evondev/evondevKit -a codexbunx skills add evondev/evondevKit -a codex
- 02
Invoke the skill with this command (or pick it from /skills), or just write a prompt: it turns on when the prompt is about app UI.
$ui-ux
- 03
Pull the latest version when a new release is out, again with either command.
npx skills updatebunx skills update
OpenCode
- 01
Run one of these in your project root: npx if you have Node, bunx if you use Bun. The skill lands in .agents/skills/; add -g to install it for every project.
npx skills add evondev/evondevKit -a opencodebunx skills add evondev/evondevKit -a opencode
- 02
Just write a prompt: the skill turns on when the prompt is about app UI. To be sure, start the prompt with "use the ui-ux skill".
- 03
Pull the latest version when a new release is out, again with either command.
npx skills updatebunx skills update
Antigravity
- 01
Run one of these in your project root: npx if you have Node, bunx if you use Bun. The skill lands in .agents/skills/; add -g to install it for every project.
npx skills add evondev/evondevKit -a antigravitybunx skills add evondev/evondevKit -a antigravity
- 02
Invoke the skill with this command, or just write a prompt: it turns on when the prompt is about app UI.
/ui-ux
- 03
Pull the latest version when a new release is out, again with either command.
npx skills updatebunx skills update
ZCode
- 01
Run one of these in your project root: npx if you have Node, bunx if you use Bun. The skill lands in .zcode/skills/; add -g to install it for every project.
npx skills add evondev/evondevKit -a zcodebunx skills add evondev/evondevKit -a zcode
- 02
Invoke the skill with this command (or pick it from the / menu), or just write a prompt: it turns on when the prompt is about app UI. If the skill doesn't show up, open Settings → Skills and click Refresh.
$ui-ux
- 03
Pull the latest version when a new release is out, again with either command.
npx skills updatebunx skills update
0809Coming soon
Roadmap
What I'm working on, coming soon
Things I'm not promising yet. Until testing is done, this page won't say they're there.
- Coming soon
Landing page
Hero, features, pricing, FAQ. Sections picked by what visitors should do: start a trial, buy now, book a demo, or join a waitlist.
Not taught yet, still does it if asked
- Coming soon
E-commerce
Product listings, product pages, cart, checkout.
Not taught yet, still does it if asked
- Coming soon
Blog
Post lists and reading pages: type size, line length, table of contents, code blocks.
Not taught yet, still does it if asked
- Coming soon
More styles per component
Take input focus: right now the skill uses a ring. I'm trying an underline-only style with no ring, plus a few others, so you can pick the one that fits your app.
Researching
0909FAQ
FAQ
Common questions
Is it ready for real work?
Yes, as a beta. Light-theme app screens have passed 70 test prompts on real projects. Dark mode for an existing app has been tested on one project. I haven't tested Cursor, Codex, OpenCode, Antigravity and ZCode myself yet, so if you hit a bug there, let me know. If something looks off, open a GitHub issue with a link or a screenshot of that screen. Get the latest version with /plugin marketplace update evondevkit (Claude Code) or npx skills update (other tools).
What if I don't like the result?
The skill isn't perfect. It does its best within its rules, but taste differs from person to person and every project has its quirks. Once it's built, edit by hand or ask the AI to change it, whichever you like. Talk to it like you'd give feedback to a designer: “bolder headings”, “more breathing room”, “drop block 3”.
Is it free?
Yes. The skill is open source under the MIT license.
Does it ask a lot of questions?
Designer mode stops exactly twice: to approve the brief and to pick a wireframe. Everywhere else it takes a default and tells you when it hands over. Say “just build it” to skip the wireframes too. Building a design system first stops only once, for you to approve the design system page.
How long should my prompt be?
One sentence is enough to start, and every prompt on this page is that short. The skill reads your codebase and gives you a brief to adjust before it builds. For a closer result, add who uses the screen, the main thing they do there, and what the real data looks like (a few sample rows, which columns matter). Skip words like “beautiful” or “modern”, the skill already takes care of that.
What if my project already has a design system?
The skill uses your components. With shadcn, Radix, MUI, Ant, or an in-house kit, it uses those and only adjusts tokens to fit. Your brand colors stay unless you say “drop the old style”.
Do I need Tailwind?
No. If your project uses CSS Modules, SCSS, or styled-components, it follows that. For plain HTML, WordPress, or PHP, it translates its samples into HTML and classes first.
Does it do dark mode?
Yes, as a beta. Adding dark mode to an existing app has been tested on one real project, all 7 items (theme toggle, tables, app shell, overlays, forms, charts, sign-in screen). By default the skill still builds light screens; it only does dark mode when you ask. Everyone's taste in dark themes differs, so if you want changes after it's built, just say so.
Does it build landing pages?
It will if you ask, but it hasn't been taught them yet. The skill is taught for screens inside an app: dashboards, lists, tables, forms, settings, modals, and pages people browse to choose something, pricing tables included. For landing pages, e-commerce, and blogs, it tells you so in one line before it starts. I'm working on these, see Coming soon.
Does it work in English?
Prompts in English work the same way, and UI copy follows your project's language. The skill's own rules are written in Vietnamese and the English test round hasn't run yet, so treat English output as early.
Get started
Ready to build your first screen?
Install it in Claude Code, Cursor, Codex, OpenCode, Antigravity or ZCode, then write your prompt like you're talking to a designer. Free and open source under MIT.
/plugin marketplace add evondev/evondevKit/plugin install evon@evondevkit