mcpField
T
tui-design-skill

tui-design-skill

github.com/podo设计与 UI29174 次安装1 天前更新
代码仓库

关于 tui-design-skill

tui-design-skill 是用于构建终端用户界面的设计技能，涵盖 Bubble Tea、Ratatui、Textual 和 Ink。内容包括布局、色彩、按键绑定、焦点管理及框架组件设计。

主要功能

  1. 01Bubble Tea 与 Lipgloss 设计模式
  2. 02Ratatui 终端应用设计指导
  3. 03Textual TUI 设计指导
  4. 04Ink 终端渲染模式
  5. 05色彩、布局、按键与焦点指导

适用场景

  1. 01设计基于组件的 Go 终端界面
  2. 02规划使用 Ratatui 的 Rust TUI
  3. 03构建交互式 Python 或 TypeScript 终端应用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/podo/design-agent-skills --skill tui-design-skill

安装后在 Claude Code 中输入/tui-design-skill确认已加载。

附带文件stub.yaml

详细介绍

tui-design-skill

目录占位条目 — 完整软件包：gfargo/tui-design-skill

决策树

  1. 软件包是否已安装？ 检查：是否存在 ~/.design-agent-skills/skills/tui-design-skill/SKILL.md。

    • 是 → 调用 tui-design-skill 并继续
    • 否 → 转到第 2 步

  2. 是否可以访问 shell？

    • 是 → 运行下方安装命令，然后调用该技能
    • 否 → 显示安装命令；在 Claude Code 中，以 ! 开头将其作为聊天消息发送 — 添加 -g 可全局安装，省略则仅安装到项目中

安装命令

/plugin marketplace add gfargo/tui-design-skill

安装后调用

  • 技能名称：tui-design-skill
  • 触发短语：“TUI design”、“terminal UI”、“Bubble Tea”、“Ratatui”、“Textual Python”、“Ink TypeScript”

功能

提供专业终端用户界面的设计知识，涵盖四大主流生态：使用 Bubble Tea 和 Lipgloss 构建基于组件的 TUI（Go）、使用 Ratatui 构建高性能终端应用（Rust）、使用 Textual 构建丰富的 TUI 应用（Python），以及使用 Ink 进行 React 风格终端渲染（TypeScript/Node.js）。内容涵盖终端颜色系统（真彩色、256 色、ANSI）、布局组合模式、按键绑定约定、焦点管理以及特定框架的组件设计。

不适用场景

  • Web UI 设计 — 请改用 frontend-design 技能
  • 需要使用特定框架，但不需要 TUI 布局约定时（该技能会加入带有明确主张的设计模式）
  • 只需解析简单的 CLI 参数，不需要交互式 UI 时

评论

支持 Markdown