English | Tiếng Việt
If you find this useful, you can support the project via MoMo (Vietnam):
A ui-ux skill for Claude Code: builds and polishes app UIs (dashboards, lists, tables,
forms, settings, modals) using your project's own component library and colors.
Overview: evondev-uiux.vercel.app/en/ui-ux
/plugin marketplace add evondev/evondevKit
/plugin install evon@evondevkitIn the VS Code extension or the desktop app, /plugin isn't available: type / → Manage
plugins → Marketplaces, add evondev/evondevKit, then install evon from the Plugins tab.
Invoke with /evon:ui-ux.
Update
- Terminal:
/plugin marketplace update evondevkit, then/reload-pluginsto apply it in the open session. - VS Code, desktop app:
/→ Manage plugins → Marketplaces →evondevkit→ refresh icon. - From any shell:
claude plugin marketplace update evondevkit.
/reload-plugins only reloads what's already downloaded; it doesn't fetch a new version.
To skip updating by hand: Marketplaces → evondevkit → Enable auto-update. Claude Code
then pulls the latest version every time it starts.
Uninstall
/plugin uninstall evon@evondevkit
/plugin marketplace remove evondevkitThe first line removes the skill, the second removes the source too (run it if you won't reinstall). Afterwards, start a new session so the skill is no longer loaded.
- VS Code, desktop app:
/→ Manage plugins → Plugins tab →evon→ Uninstall; to remove the source, go to Marketplaces →evondevkit→ remove. - From any shell:
claude plugin uninstall evon@evondevkit, thenclaude plugin marketplace remove evondevkit.
Run at the project root (bunx works in place of npx):
npx skills add evondev/evondevKitThe command asks which tools to install for, then copies the skill into
.agents/skills/ui-ux/, the folder Cursor, OpenCode, Codex, Antigravity and omp all read
(ZCode gets .zcode/skills/ui-ux/). To preselect tools, add -a, e.g.
-a cursor -a zcode. To share it across all projects, add -g.
| Tool | Invoke |
|---|---|
| Cursor, Antigravity | /ui-ux Build an orders list… |
| Codex | $ui-ux Build an orders list… |
| ZCode | $ui-ux Build an orders list… (or pick it from the / menu) |
| OpenCode | Use the ui-ux skill to build an orders list… |
| omp | /skill:ui-ux Build an orders list… |
Without the name, the tool turns the skill on when the prompt matches its description.
ZCode doesn't show the skill yet? Open Settings → Skills and click Refresh.
Update: npx skills update. Uninstall: npx skills remove ui-ux at the project root; if you
installed with -g, use npx skills remove -g ui-ux. The skill is tested most on Claude; other tools work but may
differ in places.
Beta. Works well for light-theme app UIs: tested on 70 prompts across real projects. Most testing so far used Vietnamese prompts. English prompts follow the same flow but have had less testing. Currently testing: adding dark mode to existing apps. The skill keeps changing as tests come in; get the latest as in Update above. To hear about new versions, click Watch → Custom → Releases on GitHub. Each release has a few lines on what changed in Releases.
The skill isn't perfect. It does its best within its own set of rules. Taste varies, and every project has its own quirks: after it builds, tweak by hand or ask your AI to adjust.
If something looks off, open an issue with a link or screenshot of the screen and the prompt you used.
By default the skill works like a designer: brief → you approve → 2–3 wireframes → you pick → build. Same in English or Vietnamese. To take a different path, say so in the prompt:
| You want | Type | The skill |
|---|---|---|
| Build or redo a screen (default) | /evon:ui-ux Build an orders list: order ID, customer, total, status. or /evon:ui-ux Redesign the jobs page. |
Brief → you approve → 2–3 wireframes → you pick → builds. Wireframes have a top bar: toggle concise text, no repeats, toggle color, try accent colors, preview mobile (☰ is clickable, bottom bar when there are few items), preview empty / error states, read pros and cons, copy a feedback line. Reply ok to build the recommended option |
| Build right away, no wireframes | /evon:ui-ux Just build the notification settings screen. |
No wireframes (saves tokens): the skill picks the option it would recommend and builds it. On delivery it says which layout it chose and why |
| Lock a design system before building many screens | /evon:ui-ux Build a design system for a clinic management app first, no screens yet. |
Tokens and seven base components (button, badge, input, card, list row, modal, empty state) on a /design-system page. No wireframes, one stop for your approval. If the project uses shadcn or its own kit, it adjusts that kit. Later screens are assembled from exactly this set |
| Find what's wrong with a UI | /evon:ui-ux Review this page, what's off: http://localhost:3000/orders |
A table of issues with before/after screenshots. Reply fix 1, 3 before it changes anything |
| Tidy up, keep the brand and layout | /evon:ui-ux Rebuild this page, keep the brand. |
Swaps controls, tightens cards, keeps your colors. Browse-to-pick pages and dashboards (formula B of P12) get an extra colored-version line. Reply ok or drop 7 |
| Switch fully to the skill's style | /evon:ui-ux Rebuild completely in the skill's style, drop the old style. |
Same as above, but changes the colors too, keeping only the logo and accent color |
| Clean up code, keep the look | /evon:ui-ux Refactor the /settings CSS to Tailwind, keep the UI identical. |
Swaps classes, removes old CSS, compares before and after screenshots |
Anything smaller than a screen (fix a component, add a dropdown, fix a bug) the skill just does, no wireframes.
- Give it a running localhost link. The skill opens the page, measures and screenshots from 375 to 1920px. No link? Send a screenshot.
- One page per turn, with a specific route.
- For new screens, describe real data: columns, fields, empty and error states.
- Have a wireframe? Attach it and note "this image is just a wireframe".
- Want the skill to find issues itself? Don't list them.
- Give wireframe feedback by block number: each block has a small number in the corner, so say "drop block 3", "move block 2 to the top".
- The skill handles the look, you handle the logic: API calls, saving data, number formatting are on you.
- Use realistic sample data. Cartoon images make any UI look like a draft.
- The issue table ends with a "Đối chiếu probe" (probe cross-check) line. If it's missing, the skill didn't run its measurements.
- A full redesign comes with five self-check lines on delivery. If they're missing, reply "redo the five self-checks".
- Your components and library (shadcn, MUI, in-house kits): it uses yours and doesn't layer another kit on top.
- Brand colors: kept, unless you say "drop the old style".
- Style: flat by default. Want glassmorphism, gradients or a dark background? Say so in the prompt.
- Works without Tailwind or without a
package.json(plain HTML, WordPress).
Developing the skill: see DEVELOP.md (Vietnamese). License: MIT.