evondevKit README

The project's README from github.com/evondev/evondevKit. As one markdown file: README.md.

evondevKit

English | Tiếng Việt

evondevKit / ui-ux: UI dashboard without the AI hassle

If you find this useful, you can support the project via MoMo (Vietnam):

MoMo QR code to support evondevKit

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

Install

Claude Code

/plugin marketplace add evondev/evondevKit
/plugin install evon@evondevkit

In 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

/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 evondevkit

The 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.

Cursor, OpenCode, Codex, Antigravity, ZCode, omp

Run at the project root (bunx works in place of npx):

npx skills add evondev/evondevKit

The 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.

Usage

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.

Tips

Checking the result

What the skill keeps

Developing the skill: see DEVELOP.md (Vietnamese). License: MIT.

evondevKit (evondev/evondevKit)

Searching Database…

412 ·GitHub
EvondevKit
Что это?evondevKit — навык UI/UX для Claude Code и других ИИ-агентов для кодинга, который строит и полирует интерфейсы приложений — дашборды, списки, таблицы, формы, настройки, модалки — используя собственную библиотеку компонентов и цвета вашего проекта.
Это отдельное приложение или то, что добавляется к моему кодинг-агенту?Это агентский навык/плагин, а не отдельное приложение — он подключается к инструментам вроде Claude Code, Cursor, OpenCode, Codex, Antigravity, ZCode или omp и управляет их существующей способностью строить интерфейсы.
Какие кодинг-агенты он поддерживает?Он работает с Claude Code, Cursor, OpenCode, Codex, Antigravity, ZCode и omp, вызываясь слэш-командами вроде /evon:ui-ux или /ui-ux в зависимости от инструмента.
Он работает с любым UI-фреймворком или нужен Tailwind?Он подстраивается под то, что у вас уже есть, — shadcn, MUI или внутренние киты — и работает даже без Tailwind и package.json для проектов на чистом HTML или WordPress. Он пока в бете, тестировался больше всего на интерфейсах приложений в светлой теме и в основном с вьетнамскими промптами.
Как выглядит типичный запрос на сборку?По умолчанию он работает как дизайнер: пишет бриф, ждёт вашего одобрения, предлагает 2-3 варианта вайрфреймов на выбор (с переключателями плотности текста, цветов, мобильного превью, состояний empty/error), затем собирает выбранный вариант.
Может ли он провести аудит существующего экрана вместо создания нового?Да — попросите его разобрать страницу, и он вернёт таблицу проблем со скриншотами до/после, а вы можете ответить чем-то вроде 'fix 1, 3', чтобы применить только эти правки.
Он сохранит мои фирменные цвета и существующие компоненты?Да, по умолчанию он сохраняет фирменные цвета и переиспользует существующую библиотеку компонентов, не навязывая свой вид, если вы явно не попросите отбросить старый стиль.
Как обновить или удалить навык?В Claude Code выполните 'claude plugin marketplace update evondevkit', затем /reload-plugins, либо включите автообновление в меню Marketplaces; для других инструментов выполните 'npx skills update' или 'npx skills remove ui-ux' для удаления.
What are similar projects?oil-ui, open-steps, taste-skill, appllama-skills, pstack-claude, skills, skills, ux-ui-agent-skills
Which topics is it in?shadcn-ui, ui-design, claude-code-plugin, claude-code-skill, agent-skill, claude-skills, tailwindcss, component-library, design, skill, cursor, skills
Creator
evondev
Size
3.6 MB
Stars
412
Updated
CommitOct 14Releasev0.3.18Oct 05
Age
27d
Commits · 90 Days