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. The skill tells you itself when a newer version is out: once a day
at most, it reads the version file on GitHub (nothing is sent) and adds one line with the update
command to its reply. It never installs on its own. To turn this off, set
EVONDEVKIT_NO_UPDATE_CHECK=1. 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 |
| Phone app (beta) | /evon:ui-ux Build a coffee ordering mobile app: menu, cart, checkout. or send a phone screenshot |
Same as above, delivered as a clickable HTML prototype inside a phone frame; on a wide screen it opens a flow board, one row per flow. The prompt must say "mobile app", "phone app", "iOS" or "Android", otherwise the skill builds a web app. Reviewing an existing app and porting to React Native or Flutter are not well tested yet |
| Ask how the product should be designed, no building yet | /evon:ui-ux Analyze this e-learning product, how should it be designed? |
One report message: brief, main screens, what similar products usually do (researched for real, with what yours is missing marked as suggestions), three accent colors for the industry, a look that fits your users. No code changes. To build, follow up with build the … screen |
| 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 |
| Check whether newcomers get lost | /evon:ui-ux Review the onboarding flow: from sign-up to creating the first course. |
Walks each step, counts the steps to the main job, and lists where users get lost between screens (an empty screen with no next step, a save with no sign it worked, a different name on each screen). Fixes only the rows you pick |
| 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.