impeccable typeset 子技能解析:构建可评估、可执行、可验证的排版系统

📅 发布时间:2026/9/8 15:47:37
impeccable typeset 子技能解析:构建可评估、可执行、可验证的排版系统 impeccable typeset 子技能解析构建可评估、可执行、可验证的排版系统【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccabletypeset是 impeccable让 AI harness 更懂设计的语言技能包中的排版专项子技能负责诊断并修复字体选择、层级、字号、字重与可读性问题使文本呈现有意图而非默认值堆砌的效果。本文基于仓库中的参考文档 typeset.md完整拆解其访客模式分流、双轨评估、系统设定、应用规则、验证清单与 Live 模式签名参数并结合 CLI 入口 与 CLAUDE.md 中关于detect规则引擎的说明给出可落地的排版改进工作流。读完后你既能按该流程手动治理任意前端项目的排版也能理解 impeccable Agent 在/impeccable typeset [target]命令背后的执行逻辑。定位typeset 在 impeccable 技能体系中的角色在技能主文件的命令表中typeset被归类为 Enhance增强类命令typeset [target]| Enhance | Improve typography hierarchy and fonts — 见 SKILL.md命令元数据 进一步给出了它的触发语义Improves typography by fixing font choices, hierarchy, sizing, weight, and readability so text feels intentional. Use when the user mentions fonts, type, readability, text hierarchy, sizing looks off, or wants more polished, intentional typography. 也就是说当用户提到字体、文字、可读性、层级、字号看着不对时harness 会路由到这份参考文档执行。文档开宗明义给出了第一条原则Typography carries information, hierarchy, and voice. Improve it inside the established visual world; do not replace the identity unless the user asked to.排版承载信息、层级与声音。要改进它但必须在既有视觉世界内改进——除非用户明确要求否则不得替换产品身份。这条原则贯穿全文也是它与重新设计类命令new-work的分界线。Visitor mode按产品气质分流排版策略文档要求先判断目标产品处于哪种访客模式再决定排版的激进程度模式组合排版策略Persuade Experience展示型字体可以承载声音voice。当构图受益时使用果断的对比度和响应式字号缩放Operate Read稳定性、可扫描性、行宽measure优先。单一调优过的字体族 固定角色刻度表role scale往往就是正确答案Native遵循 ios.md 或 android.md包括平台级文本缩放与无障碍行为分流有一个硬性判据如果排版替换会制造一个新身份就走 new-work.md 流程并同步更新 DESIGN.md否则保留已确认的字体族只改进其用法。这保证typeset永远是治理现有系统而非推翻重建。从 CLAUDE.md 可以看到配套的架构约束Live 模式、detectCLI 与设计 hook 均为 web-onlySKILL.md 的路由会跳过 nativeios/android/adaptive项目的detect.mjs扫描——这与参考文档中 Native 分支单独指向平台文档的设计相互印证。Two isolated assessments设计评估与机械扫描必须互相隔离这是全文最核心的方法论。文档要求在有子 Agent 工具可用且被允许时独立地运行两项评估否则由执行者按顺序自跑。关键纪律是Do not let detector findings anchor the design assessment. 不要让检测器的发现锚定设计判断。1. Typographic assessment人工/模型侧的排版评估检查有代表性的页面与样式并且每个问题的回答都必须落到一个文件、选择器或计算值computed value上共六个维度Authority and fit权威与适配哪些字体面face、字重、角色是既定的它们是否贴合产品与所选世界还是未经审视的默认值每个字体族是否都必要Hierarchy层级heading / body / label / metadata / data 五种角色能否一眼区分相邻的字号或字重是否过于接近以至于承担不了不同的职责Scale and consistency刻度与一致性存在的是有意图的角色刻度表还是一堆任意数值重复出现的角色是否在各屏幕、各状态下保持完全一致Reading阅读正文行宽是否保持在舒适的 45–75 字符行高、段落节奏、对比度、字距tracking是否针对实际的字体面、宽度、语言、表面做了调优Stress压力测试长标题、本地化文本膨胀、页面缩放、窄容器、缺失字重、字体回退时排版会发生什么Delivery交付是否只加载了实际使用的字体资源回退度量fallback metrics、加载策略与可变字体variable font设置是否会避免文字不可见或破坏性回流disruptive reflow2. Mechanical scan机械扫描脚本侧node .cursor/skills/impeccable/scripts/detect.mjs --json --scope type [target files or dirs]参数说明--json输出机器可读结果--scope type将扫描范围收窄到排版类反模式后接目标文件或目录。关于这个检测器的实现依据仓库内有明确的工程事实来自 CLAUDE.md规则引擎的源头是cli/engine/detect-antipatterns.mjsANTIPATTERNS数组 checkXxx逻辑它同时驱动 CLI、官网浮层与 Chrome 扩展同一检测器以 npm 包impeccable发布可直接用npx impeccable detect [file-or-dir-or-url...]运行--fast --json可只跑正则层并输出 JSON必须用node而非bun运行 detect CLI——Bun 的 jsdom 实现极慢含 HTML 文件的扫描可能挂起数分钟。这也解释了参考文档命令为何显式写node。机械扫描完成后还要人工补查检测器无法解释的动态或任意字体值然后综合两项评估再动手并记录各自单独发现了什么。文档给出了一句值得记住的结论A clean scan is a floor, not proof of good typography. 干净的扫描结果只是地板不是排版良好的证明。即扫不出问题不代表排版合格设计评估才是上限。Set the system动手前先声明系统编辑之前必须先书面声明五件事把隐式决策显式化界面需要哪些角色roles这些角色之间预期的对比度contrast目标行宽与密度measure density哪些现有字体面与字重是权威的authoritative是否存在性能、本地化或无障碍约束。配套的设计纪律用最少的角色数与字体族数让层级不可混淆刻意组合字号、字重、空间、色调四种手段而不是让字号独自承担全部层级工作角色名与 token 应描述用途而非数值例如按角色命名而不是18px/500。Apply十条可执行的排版规则文档的 Apply 小节给出了逐条可检查的操作规则完整继承如下规则说明正文下限保持正文舒适可读、可缩放。1rem / 16px 是普通网页正文地板除非高密度角色、平台惯例或用户设置有正当性理由行宽散文保持在45–75ch行高与行宽反向调节——行越宽一般越需要更多行高leading深色表面补偿暗色表面上的浅色文字需在三个感知轴上补偿略多的行高、稍多的字距、字体面需要时再加一级字重行高调优针对字体面、宽度、语言、对比度调行高而不是套用某个通用比例跨屏一致重复角色在各屏幕、各状态下保持一致字体特性当内容受益时启用数字numeric、表格数字tabular、代码code、标签label等 OpenType 特性字体加载只加载用到的字体资源与字重提供度量兼容的回退栈避免文字被阻塞缩放策略营销展示型字体可随可用空间响应但密集的产品界面与阅读面要保持空间可预测性保留缩放通道保留浏览器缩放、用户字体设置、Dynamic Type 与平台文本缩放段落节奏用段间距或首行缩进之一作为主要段落节奏两者叠加通常等于双重标记了段落边界并以两条禁令收尾不得为装饰牺牲可理解性不得在没有只有它能完成的角色时引入第二种字体族。Verify以证据验证而非口头确认验证清单共六项Primary / secondary / body / metadata 四种角色在不读文案的情况下即可被识别长文本在相关宽度与语言下依然舒适排版属于该产品与其既定世界加载过程不产生破坏性回流或不可见文字缩放、文本缩放、焦点、对比度、窄视口路径均保持可用最终一次机械扫描没有任何无法解释的发现。执行要求同样严格Answer each item with rendered or source evidence, then rerun the scan. Do not substitute a bare yes for verification.每一项都必须用渲染证据截图/浏览器或源码证据作答然后重跑扫描裸的yes不构成验证。当层级站稳之后文档指明交接去向/impeccable polish——即 typeset 完成后收尾打磨交由 polish 子技能。Live-mode signature paramsLive 模式下的签名参数当项目运行在 impeccable 的 Live 模式浏览器实时变体模式时每个变体variant都必须声明一个粗粒度的scale参数并让自身的字号梯度type ramp基于var(--p-scale, 1)编写{id:scale,kind:range,min:0.85,max:1.3,step:0.05,default:1,label:Scale}参数语义kind: range为滑杆型控件min 0.85/max 1.3限定缩放区间0.85x–1.3xstep 0.05控制步进粒度default 1表示默认不缩放。CSS 侧通过var(--p-scale, 1)的兜底值 1 保证参数未声明时排版不受影响。文档还给出两条克制原则只有当某个配对pairing或字重参数代表真实的系统选择时才最多再加一个参数声明须遵循 live.md 的参数契约parameter contract。这与 Apply 阶段最少的角色与字体族的纪律一脉相承——Live 面板上的每一个滑杆背后都应是一个可辩护的设计决定。多 harness 构建同一份参考文档的三种形态值得给 Agent/LLM 读者说明的一点工程事实这份typeset.md在仓库中存在三份同源副本仅路径模板不同——Cursor 形态 typeset.md命令写死为node .cursor/skills/impeccable/scripts/detect.mjs ...交接写死为/impeccable polish技能源形态 typeset.md使用{{scripts_path}}与{{command_prefix}}占位符插件形态 typeset.md展开为node skill-base-dir/scripts/detect.mjs ...。三者逐行 diff 后仅有这两处命令前缀差异说明 impeccable 用一套技能源skill/经模板化构建分发到 Cursor、Codex、Claude 等多种 harness 目录仓库根目录同时存在.cursor、.claude、.codex、.gemini等十余个目标目录。引用本文流程时请优先使用你所在 harness 对应目录下的实际路径。小结typeset子技能提供了一条完整的排版治理闭环分流Visitor mode→ 双轨隔离评估人工排版评估 detect.mjs --scope type机械扫描→ 显式声明系统角色/对比/行宽/权威字体/约束→ 十条应用规则 → 证据化验证 → 交接 polish。其方法论价值不在具体数值16px、45–75ch、0.85–1.3 只是起点而在三条纪律改进不得替换身份、机械扫描只是地板、每一项验证必须有渲染或源码证据。对于希望让 AI Agent 稳定产出有意图的排版的团队这份文档本身就是可以直接复制进 harness 的排版工程规范。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考