Tui Design
Agent skill for designing, mocking, building and auditing terminal UIs
Install
npx skills add diegomarino/tui-designclaude mcp add tui-design -- npx skills add diegomarino/tui-design{
"mcpServers": {
"tui-design": {
"command": "npx",
"args": [
"skills",
"add",
"diegomarino/tui-design"
]
}
}
}Install command taken from the project's README or registry entry. Always review code before running it.
README excerpt
Read full README on GitHub →tui-design
An agent skill that designs, mocks, builds and audits terminal UIs with evidence instead of taste: full-screen apps, interactive CLIs and pickers, and plugin panels or popups inside a host (tmux, Neovim, k9s, lazygit, …).
Every sketch is a .mock frame on the real cell grid — linted at a declared size and rendered to PNG
before anyone sees it. Not for web or native GUIs, terminal-emulator themes, editor themes, or shell prompts.
Concept C of the worked example: a linted .mock at 120×30 and
256 colors, built with mockkit.py and scored on the visual-craft rubric.
Every design comes back as a self-contained HTML gallery: each frame in every state, size and theme, with keyboard navigation, side by side, and TXT / ANSI / SVG / PNG export. The reference frames are published at https://diegomarino.github.io/tui-design/.
What you get
| You ask for | You get |
|---|---|
| opinions on a TUI or screenshot | findings ordered by user harm, each with evidence and what it needs |
| a new screen or redesign | three concepts → linted frames × state × size → HTML gallery |
| code, a prototype, or a theme in a stack | a starter (Ink, Textual, Bubble Tea, Ratatui, gum) plus cell-level compare |
| a measured audit | live capture or screenshot → description → 135-check report |
| only colors | 44 tokens, contrast at truecolor and 16 colors, exporters |
Try it
- "Sketch a log viewer for our job runner at 80×24 and at a 60-column split."
- "Review this screenshot of my TUI. What would you change first?"
- "Map Gruvbox onto my Textual app's theme and check contrast at 16 colors."
Install
npx skills add diegomarino/tui-design # into the current project
npx skills add diegomarino/tui-design -g # for your user, all projects
npx skills add diegomarino/tui-design#v0.1.0 # pinned to a release
Or copy only skills/tui-design/ into .claude/skills/ or .agents/skills/ (~2.1 MB of references,
scripts, themes and starters). Scripts need Python 3.11+; PNG rendering needs rsvg-convert (librsvg).
Full requirements and more prompts: Getting started.
What it does
Similar plugs
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
Turn any codebase, with its docs, SQL schemas, configs, and PDFs, into a queryable knowledge graph. A /graphify skill for Claude Code, Cursor, Codex, and Gemini CLI: local…
Why use many token when few token do trick. Viral skill + proxy for coding agents that cuts 65% of tokens by talking like a caveman.
Production-grade engineering skills for AI coding agents.