designing-tuis

Translate TUI designs into layout trees and BubbleTea, Ink, or Textual code.

17|2|Updated May 15, 2026
One-click install
npx skills add https://github.com/albert-lv/designing-tuis --skill designing-tuis
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: designing-tuis
Source: https://github.com/albert-lv/designing-tuis/tree/main
Command: npx skills add https://github.com/albert-lv/designing-tuis --skill designing-tuis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the difficulty of translating visual design concepts or screenshots into consistent, accessible, and framework-portable Terminal User Interface (TUI) code.

Core Features & Use Cases

  • 3-Phase Decomposition: A structured protocol to ground, plan, and generate TUI layouts from any visual or descriptive input.
  • Multi-Framework Support: Generate code for BubbleTea (Go), Ink (Node.js), or Textual (Python) using a unified schema.
  • Accessibility & Stability: Ensures WCAG-compliant color usage and prevents common TUI rendering artifacts like ghosts or flicker.
  • Use Case: Rapidly prototype a new CLI dashboard by providing a screenshot, then generate the corresponding BubbleTea code with responsive layout logic.

Quick Start

Use the designing-tuis skill to decompose the attached screenshot into a layout tree and generate the corresponding BubbleTea framework code.

Frequently Asked Questions about designing-tuis

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a screenshot into terminal user interface code?

To convert a screenshot into terminal user interface code, this Skill uses a 3-phase decomposition protocol to extract a structured layout tree and then generates framework-specific code for BubbleTea, Ink, or Textual.

Can I generate TUI layouts from text descriptions instead of images?

Yes, you can generate TUI layouts from text descriptions. The Skill translates descriptive input alongside screenshots or sketches into a unified schema before producing the final framework-specific code.

Does this TUI generator support BubbleTea, Ink, and Textual frameworks?

Yes, this TUI generator supports BubbleTea for Go, Ink for Node.js, and Textual for Python. It uses a unified schema to map the extracted layout tree into framework-specific code for each.

How do I prevent rendering artifacts like ghosts and flicker in TUI?

To prevent rendering artifacts like ghosts and flicker in TUI, the Skill enforces rendering stability and character-grid precision during the layout generation phase to ensure consistent terminal output.

What is the best way to ensure WCAG-compliant color accessibility in terminal interfaces?

The best way to ensure WCAG-compliant color accessibility in terminal interfaces is to use a generator that validates color contrast. This Skill automatically satisfies WCAG color accessibility requirements during the code generation process.

What do I need to build a responsive CLI dashboard from an image?

To build a responsive CLI dashboard from an image, you need a screenshot or sketch input. The Skill grounds the visual input, plans the responsive layout tree, and generates the corresponding framework code.