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 眉题 | 6 | 0 |
| unslop 13 长破折号 | 4 | 0 |
然后列出你有意保留的内容,每行一个,并附上理由。