Communitygithub.com

felipebasurto/unslop-ui

去除界面和图表文案中的AI痕迹:眉题标签、01/02/03编号、冗余副标题、解释可见内容的说明文字、设计笔记、装饰性徽章、状态点、图表杂乱和可用直接标签替代的图例。对保留的每个字符串应用 /pstack:unslop 规则。

unslop-ui 是什么?

Unslop UI 是一个AI智能体技能,用于清理网页、应用界面、图表或仪表盘中的视觉文本和装饰元素,使其不再显得像AI生成的。它提供一个全面的规则集(U1-U16),涵盖界面文案(如删除眉题标签、装饰性编号、解释性说明文字、设计笔记、状态字符串、冗余标签、空洞标语)和装饰元素(如无实际状态的徽章和药丸、状态点、装饰性表情符号和图标)。对于图表和仪表盘,它优化图表标题、移除阅读说明、消除重复编码、精简图表框架,并用直接标签替换图例。该技能支持 Claude Code、Cursor 和 Codex 等代理,通过基于正则的计数脚本提供前后对比衡量,并与 `pstack:unslop` 规则集成进行自动文本编辑。它专注于只改可见文本和装饰,不触及逻辑、数据或布局结构,确保保留无障碍标注,并通过对数据来源文本进行原位修改或报告来处理。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/felipebasurto/unslop-ui/tree/main/skills/unslop-ui

在你喜欢的 AI 中提问

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

文档

Unslop UI

编辑网页、应用界面、图表或仪表盘的可见文本和装饰性元素,使其不再读起来像AI生成的。好的界面是用来使用的,而不是用来阅读的:只保留用户操作所需的词语,删掉其余的。

目标: $ARGUMENTS(如果为空,则使用此对话中更改的文件,或询问)。

来自 /pstack:unslop 的写作规则

将这些规则应用于你保留的每个字符串。通过编号引用它们。

!python3 ${CLAUDE_SKILL_DIR}/scripts/load_unslop.py

如果上面一行仍然显示命令而不是规则(除 Claude Code 之外的代理),则从本技能文件夹运行 python3 scripts/load_unslop.py,并应用其输出的内容。

界面规则

ID 是稳定的。在报告中以 U1 到 U16 引用它们。

界面文案

  • U1. 眉题标签。 标题上方的小写大写或字间距文本("PASSPORT"、"FEATURES"、"HOW IT WORKS")。删除它。标题已经说明了该部分的内容。
  • U2. 装饰性编号。 "01 02 03"、"01 // 功能"、"§"、"//" 前缀。删除,除非顺序是真实的并且用户会遵循它(结账步骤、编号安装指南)。
  • U3. 副标题反射。 每个标题下都有一个副标题,或者 H1 上方有一行文字。只有当副标题陈述了标题未提及的事实时才保留一个。"分析 / 更好地了解您的数据" 删除第二行。
  • U4. 机器人解释。 解释元素可见功能的说明文字、帮助文本和描述("点击下面的按钮开始"、"此图表显示随时间变化的收入")。删除。标题和说明文字保持在 5 个词以内。例外:空状态、错误消息和破坏性操作的确认,这些可以使用完整句子。
  • U5. 泄露的设计笔记。 关于屏幕如何工作或为何如此设计的文本、长括号内容、"(实时更新)"、"(由 AI 提供)"。删除它,或者如果用户确实会查找它,则将其移到工具提示中。
  • U6. 状态字符串。 用 "·" 或 "|" 连接的事实("12 个项目 · 更新于 2 分钟前 · 已同步 · v2.1")。保留用户操作的那个事实。将其他部分放在需要的地方,或者删除它们。
  • U7. 标记所有内容。 重复占位符、图标、按钮文本或章节标题的标签。选择一个提示。带有放大镜图标的搜索字段既不需要 "搜索" 标签,也不需要 "搜索..." 占位符(只需一个)。
  • U8. 断断续续和空洞的口号。 "一件。大事。"、"与众不同。"、"更快发布。少思考。" 重写为一个命名事物及其作用的句子,或者删除。

装饰

  • U9. 无实际状态的徽章和药丸。 "LIVE"、"NEW"、"AI"、"Beta"、"Pro"、"🔥 热门" 等添加的调味内容。仅当徽章反映应用实际跟踪的数据时才保留(真正的直播是实时的,项目自上次访问以来确实是新的)。
  • U10. 状态点。 文本旁边的脉冲或彩色点(animate-pulse、小的 rounded-full 点)。仅当绑定到真实的实时状态时才保留。
  • U11. 装饰性表情符号和图标。 在标题、按钮、KPI 标签和列表项中。删除。仅当图标是控件本身(带有 aria-label 的图标按钮)或它携带文本未传达的含义时才保留。

图表和仪表盘

  • U12. 命名图表类型的图表标题。 "月度收入条形图" 变为 "月度收入",或发现:"自三月以来收入翻倍"。
  • U13. 阅读说明。 解释如何阅读图表的副标题或说明文字("每个条形代表一个月"、"悬停查看详情")。删除。
  • U14. 重复说明。 每个数量使用一种编码。一个条形、条形上的数字、其高度的网格线和轴刻度都表示相同的值,这多出了三个;一个带有箭头、百分比、单词 "up" 及其下方句子的 KPI("与上月相比收入增长 12%")是文本中的相同错误。保留读者需要的编码:轴和网格线用于形状,打印值用于重要的数字(通常只有最后一个点或最大值)。
  • U15. 与数据竞争的图表框架。 绘图区域周围的框架框、深色或密集的网格线、次要刻度、粗轴边框、3D、标记上的投影和发光、绘图区域后面的背景填充。删除它们,或者将必须保留的(少量网格线、一条基线)设为浅灰色的发丝线。数据在上面,标签在旁边,框架最浅。不要重新设计图表:相同的类型、相同的数据、相同的系列颜色。
  • U16. 可用直接标签的图例。 要求读者将颜色与名称匹配的图例框,当名称可以放在行尾或条形旁边时。直接标记系列,最好带有其最新值("今年 1,150"),并移除图例。对于超过四个系列或标记过于接近难以标记的情况,保留图例。

对于前后对比对,如果不确定删除到什么程度,请阅读 references/examples.md。

护栏

  • 仅更改可见文本和装饰性元素。不要触及逻辑、数据、颜色间距或布局结构。唯一的例外是 U15 下的图表框架,可以变细或变浅。
  • 当你删除一个元素时,也要删除它现在为空的包装器以及仅为其存在的任何边距或间距。一个仅用于分组且现在只包含一个子元素的包装器也要删除。
  • 永远不要删除 aria-label、alt、title(在图标按钮上)或仅屏幕阅读器可见的文本。如果被删除的可见文本是唯一的无障碍名称,则将其移到 aria-label 中。
  • 来自数据、属性、i18n 文件或 CMS 的文本:在其来源处(翻译文件、固定数据)编辑或报告它,不要在组件中硬编码替换。
  • 如果标记的案例有其存在的理由(真实状态、真实顺序、法律文本),则保留它并在报告中说明原因。

流程

复制此检查表并跟踪它:

- [ ] 1. 计数:python3 ${CLAUDE_SKILL_DIR}/scripts/count_tells.py <target>   (${CLAUDE_SKILL_DIR} 是此文件所在的文件夹)
- [ ] 2. 读取每个可见字符串和装饰性元素;用 U1-U16 或 unslop 规则编号标记每个问题
- [ ] 3. 编辑
- [ ] 4. 使用相同的命令再次计数
- [ ] 5. 报告

计数器是一个正则启发式方法。它找到候选项并给出一个前后数字。它会遗漏 U3、U4、U5、U7、U8、U12、U13 和 U14,这些需要阅读。对于 U15 和 U16,它只看到代码形式(阴影、粗轴边框和网格线、启用的图例)。它也会标记一些合法情况。你在第 2 步的阅读才是真正的检查。

报告格式:

规则之前之后
U1 眉题60
unslop 13 长破折号40

然后列出你有意保留的内容,每行一个,并附上理由。

相关技能