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
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
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.
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
The code is MIT (© 2026 Guksu). Licenses for the photos in the comparison image are in Image credits.