suta

A UI skill for Claude Code and Codex, with layout, color and motion guidelines and code for 57 patterns.

I built suta to reduce the repetitive cards, excessive colors and unnecessary decoration I kept seeing in AI-generated UI.

한국어 · Live demo · Install · Full guide

Same request, model and settings in Claude Code. Top: without suta (one run). Bottom: run 3 of 4 with suta 0.8. Results vary; generation took longer with suta. Method, all results and limitations · Photo credits

Installation

Claude Code — run in the chat:

/plugin marketplace add Guksu/suta
/plugin install suta@suta

Codex — run in a terminal, then approve suta's post-edit check in /hooks:

codex plugin marketplace add Guksu/suta
codex plugin add suta@suta

Other agents / skill only — installs the guidelines and patterns without the plugin's post-edit check:

npx skills add Guksu/suta --skill suta

Install options and migration · Updating · skills.sh listing

Try it

After installing, ask your agent:

Use suta to build a login screen with email, password, a sign-in button and a password reset link. Keep it simple and make it usable with a keyboard.

The agent reads the guidelines and adapts the pattern code to your project. The plugin also checks layout and motion after edits. Skill and pattern documentation is in Korean; English usage notes are in the full guide.

Try the patterns in the live demo. Browser checks are still needed; static checks cannot catch every UI problem.

Follow development

I use suta in my own work and will keep fixing issues and updating the guidelines and patterns. If something feels wrong, open an issue with your request and what happened.

Releases · Screen comparisons · Benchmark · Contributing

License

The code is MIT (© 2026 Guksu). Licenses for the photos in the comparison image are in Image credits.