Communitygithub.com

Gentle-Programming/gentle-ai-tui-design

触发词:终端UI设计、TUI重塑、Gentle Shell外观、IDE终端化、侧边栏/状态栏打磨、TUI评审。通过可视化证据设计、评审和优化终端用户界面。

gentle-ai-tui-design 是什么?

该技能专注于为终端界面(如面板、侧边栏、状态栏、卡片和提示框)提供设计、评审和优化服务,尤其针对Gentle Shell项目。其核心理念是打造一种“终端内的IDE”体验——风格密集、宁静、开发者优先,摒弃复古TUI的装饰性外观。技能通过强制性的视觉循环(截图对比)和严格的规则(如每行必有用、层次靠色彩而非空白)来确保每次修改都基于真实视觉证据,而非代码或记忆。支持的命令包括 `document`(加载设计上下文)、`shape`(新设计或重构)、`critique`(评审当前界面)、`distill`(精简布局)等,每个命令都对应具体的加载文档。最终输出包含目标、执行命令、前后对比截图、问题优先级标签(P0-P3)以及执行的检查项。该技能适用于任何需要终端UI设计的项目,但特别强调在Gentle Shell项目中遵循其设计哲学。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Gentleman-Programming/gentle-shell/tree/HEAD/skills/tui-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

激活合约

用于设计、评审或优化终端界面(面板、侧边栏、状态栏、卡片、提示框),尤其针对Gentle Shell。目标感觉是终端内的IDE:密集、宁静、开发者优先,绝不做复古TUI的装饰。不适用于网页(参见 gentle-design)。

硬性规则

  • 绝不要仅凭代码或记忆评判终端UI:务必截取截图(references/visual-loop.md),并在每次改动前后查看对应的PNG。
  • 在进行任何UI编辑之前,先阅读 references/terminal-craft.md;这是底线,而非建议。
  • 运作模式:熟悉胜过表达。使用IDE术语(窗格、树、标签页、状态栏、命令面板);品牌体现在调色板、密度和一项标志性动作上。
  • 每一行都有成本。层次结构来自颜色角色、字重和对齐,绝不要依靠空行或嵌套方框来表示。
  • 每个屏幕只陈述一个事实。标题中显示的数据不要在面板中重复。
  • 一个命令,一个目标。优化保留系统;重构替换系统。永远不要打磨一个即将被抛弃的外观。
  • 渲染保持轻量:渲染路径中不要有I/O或重计算,缓存键覆盖所有影响输出的因素(样式、宽度、主题)。
  • 原型(通过 gentle-design)必须能在终端中表达:以 ch 为单位的等宽字元网格,仅使用前景/背景颜色、粗体/暗淡/斜体/下划线/删除线、制表符和字形。

决策门

场景命令加载项
尚无产品/设计上下文documentreferences/design-doc.md
新界面或重构shape,然后原型,再实现references/commands.md
“看起来如何/哪里有问题”critiquereferences/critique.md
过于拥挤、浪费空间、冗余distill / layout / quieterreferences/commands.md
平坦、无层次、难以阅读typeset / colorize / bolderreferences/commands.md
边界情况、窄终端、长文本harden / adaptreferences/commands.md
提交前最终检查polishreferences/commands.md

执行步骤

  1. 如果项目有 DESIGN.md 则加载其上下文;否则先提议执行 document。
  2. 使用视觉循环,按定义的尺寸(宽屏180x50,断点140,窄屏80x24)捕获当前状态。
  3. 针对一个命名目标运行所选命令;先记录发现,再修改代码。
  4. 修改后重新捕获,对比之前的PNG和需求摘要;最多迭代3轮,然后报告。
  5. 每个优化命令结束时都执行 polish 检查,并运行仓库的针对性测试(渲染计数、溢出)。

输出合约

返回:目标、执行的命令、前后对比PNG路径、按P0-P3标签标记的已修复发现、未解决的发现以及执行的检查项。

参考资料

  • references/terminal-craft.md:底线规则和终端反模式。
  • references/commands.md:针对终端适配的命令手册。
  • references/critique.md:计分评审和严重性评定量规。
  • references/design-doc.md:终端产品的DESIGN.md框架。
  • references/visual-loop.md:截图工具和比较循环。
  • NOTICE.md:归属说明。

Individual skills in this repo

This repo contains 9 individual skills — each has its own dedicated page.

Gentleman-Programming/gentle-ai-issue-creation

Create and triage GitHub issues from repository evidence. Trigger: issue creation, bug reports, feature requests, or issue approval.

Gentleman-Programming/gentle-ai-judgment-day

Trigger: judgment day, judgement day, dual review, adversarial review, juzgar. Run explicit blind dual review with at most two scoped fix/re-judgment rounds.

Gentleman-Programming/gentle-ai-rdd-defect-workflow

Trigger: RDD, receipt-driven development, review authority, receipt/lineage, correction/recovery, delivery gate/kill switch, bounded review defects. Guide work.

Gentleman-Programming/gentle-ai-skill-creator

Trigger: /skill-creation, skill creation, skill creator, create skill, new skill. Create LLM-first skills with valid frontmatter.

Gentleman-Programming/gentle-ai-skill-improver

Trigger: improve skills, audit skills, refactor skills, skill quality. Audit and upgrade existing LLM-first skills.

Gentleman-Programming/gentle-ai-skill-registry

Trigger: update skills, skill registry, actualizar skills, after skill changes. Index available skills by trigger and path.

Gentleman-Programming/gentle-ai-work-unit-commits

Plan commits as reviewable work units. Trigger: implementation, commit splitting, chained PRs, or keeping tests and docs with code.

Gentleman-Programming/gentle-design

Trigger: design a screen or page, mockup, landing page, UI directions, artboards, try a different approach, design system sync. Write self-contained HTML design directions under design/<slug>/.

Gentleman-Programming/release

Release gentle-pi through GitHub and npm. Trigger: release, publish, npm publish, GitHub release, version bump.

相关技能