Suta：为 Claude Code 和 Codex 减少 AI 生成 UI 同质化的技能

Layout, color and motion guidelines, with code for 56 UI patterns, for Claude Code and Codex.

I built suta because AI-generated UI kept repeating the same cards, excessive colors and unnecessary decoration. I wanted to reduce that design AI slop.

한국어 · 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, selects relevant patterns and adapts their code to your project. Plugin installs also report layout and motion issues after edits. The skill and pattern documentation are in Korean; one recorded check used an English request and produced English UI copy and a reply in English.

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.