Guksu/suta

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