数据库客户端后端前端CLI桌面应用数据可视化AI 应用【免费下载链接】whodbWhere data access meets operational intelligence项目地址https://gitcode.com/gh_mirrors/wh/whodb点击查看免费下载whodb 仓库内置了一个名为impeccable的 Agent 设计技能.agents/skills/impeccable/其中typeset子命令专门负责在既有视觉身份内改进排版层次与字体使用。本文以 typeset.md 为主体完整拆解它的评估-设定-应用-验证四步工作流与 live-mode 参数契约并结合仓库中的 detect.mjs 检测器、反模式规则注册表 以及 whodb 前端真实的字体资产 brand-fonts.css说明这套方法如何落地为可执行、可复验的操作。读完本文你将掌握一套可复制的界面排版审查流程从角色定义、机械扫描到字号阶、行高、度量measure与字体交付的逐项调优标准。typeset 的定位改进而非替换身份SKILL.md 的命令表把typeset [target]归在 Enhance 类描述为Improve typography hierarchy and fonts——即它是对既有界面的增强而不是新作品CommandCategoryDescriptionReferencetypeset [target]EnhanceImprove typography hierarchy and fontsreference/typeset.mdtypeset.md 开篇即给出总原则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.md 流程并同步更新 DESIGN.md其余情况下应保留已确认的字体族family只改进其使用方式。这保证了 typeset 永远在调参而不是换品牌与 SKILL.md 中Refinement preserves; redesign replaces的原则一致。先选访客模式同一套排版不同的目标函数进入评估之前typeset 要求先按访客模式Visitor mode确定排版的目标函数Persuade Experience展示型字体可以承载品牌声音。当构图需要时使用果断的对比与响应式缩放responsive scale。Operate Read稳定性、可扫描性、度量measure优先。一个调校良好的单一字体族 固定的角色字号阶往往就是正确答案。Native遵循 ios.md 或 android.md 的平台规范包括平台文本缩放与无障碍行为。以 whodb 这类数据库客户端为例主界面属于 Operate/Read 场景表格、查询结果、元数据按此模式它应偏向单一字体族 固定角色阶而不是营销页式的大字号展示。事实上 whodb 的 DESIGN.md 中声明的类型系统正是这一取向fontFamily: Hanken Grotesk, Inter, ui-sans-serif, system-ui, sans-serif # 各角色统一 # 等宽角色 fontFamily: JetBrains Mono, ui-monospace, SF Mono, Menlo, monospaceDESIGN.md 还明确记录了一条易被误判的事实Hanken Grotesk carries the UI; Bricolage Grotesque is self-hosted and available (brand-fonts.css) but not currently applied anywhere in the product UI — treat it as reserved。这正是 typeset 评估问题Is every family necessary?每个字体族都是必要的吗的真实案例自我托管不等于被使用评估必须基于渲染证据而非文件存在。两次相互独立的评估typeset.md 要求在执行编辑前完成两次隔离的评估一次是人工排版评估一次是机械扫描。当有可用的子代理工具时两者应独立执行否则按顺序自己完成并且不要让检测器的发现先入为主地锚定设计判断。排版评估六个必须用证据回答的问题检查代表性页面与样式每个问题都要用文件、选择器或计算值作答而不是凭感觉Authority and fit权威与契合哪些字体、字重、角色是既定的它们契合产品与所选视觉世界吗还是未经审视的默认值每个字体族都是必要的吗Hierarchy层级标题、正文、标签、元数据、数据五类角色能否一眼区分相邻字号或字重是否太接近、以至于无法承担不同的工作Scale and consistency规模与一致性存在刻意的角色字号阶还是任意数值的堆砌同一重复角色在不同屏幕与状态下是否完全一致Reading阅读正文是否保持在 45–75 字符/行的舒适度量内行高、段落节奏、对比度、字距是否针对实际的字体、宽度、语言与底色调过Stress压力测试超长标题、本地化膨胀、浏览器缩放、窄容器、缺失字重、字体回退时会发生什么Delivery交付是否只加载了实际使用的字体资产回退度量、加载策略、可变字体设置是否避免了文字不可见与破坏性重排机械扫描detect.mjs 与 type 作用域第二项是机械扫描命令即文档给出的node .agents/skills/impeccable/scripts/detect.mjs --json --scope type [target files or dirs]从源码看这条命令的落地链路很清晰detect.mjs 只是一个 21 行的入口按候选路径定位detector/detect-antipatterns.mjs后await detectCli()--scope参数的合法值来自 antipatterns.mjs 中RULE_SCOPES——它由每条规则的scopes字段动态聚合而成因此--scope type会精确过滤出声明了scopes: [type]的规则filterByScopes 按至少命中一个请求 scope保留 finding扫描引擎还包含对 Google Fonts URL 的解析fonts.mjs 从fonts.googleapis.com/css2?family...中抽取并归一化字体族名用于核对页面实际加载的字体族与声明的一致性。--scope type会命中的代表规则均取自 antipatterns.mjs描述为原文摘录规则 id类别判定要点overused-fontslopInter、Roboto、Fraunces、Geist、Plus Jakarta Sans、Space Grotesk 使用过多而失去辨识度应选有性格的字体flat-type-hierarchyslop字号间隔太小、缺乏层级相邻档位应至少拉开 1.25 的比例tight-leadingquality行高低于字号的 1.3 倍正文建议使用 1.5–1.7line-lengthquality行宽超过约 80 字符难以阅读文本容器应加max-width65ch–75chtiny-textquality小于 12px 的正文难以阅读至少 14px理想 16pxundersized-ui-textquality链接、按钮、导航、表格单元等功能性文字低于 11px 属可读性失败加进 DESIGN.md 字号阶不能豁免此问题justified-textquality未启用连字断词的 justify 会产生白河正文应text-align: left或加hyphens: autowide-trackingquality正文 letter-spacing 超过 0.05em 会破坏自然字组宽字距只留给短标签all-caps-bodyquality长段全大文难以阅读失去升部/降部轮廓大写只给短标签与标题extreme-negative-trackingslop负字距压缩到字形失去形状展示字应光学收紧而非破坏性收紧design-system-font/design-system-font-sizequality使用了 DESIGN.md 未声明的字体 / 字号阶外的字面量字号属于漂移或应有意的扩展skipped-headingquality标题层级跳级h1 直接到 h3破坏屏幕阅读器的文档大纲文档对此的定位很克制A clean scan is a floor, not proof of good typography.扫描干净只是地板不是好排版的证明。检测器无法解释的动态或任意字号值仍要人工补查。两次评估完成后先综合synthesis再动手并记录各自单独发现了什么。动手之前先把类型系统声明出来typeset.md 要求编辑前必须先陈述五件事界面需要哪些角色roles这些角色之间预期多大的对比阅读的度量与密度measure and density哪些既有字体与字重具有权威性authoritative是否存在性能、本地化、无障碍约束。方法论核心是用最少的角色和字体族让层级无可置疑。刻意组合尺寸、字重、空间与色调来表达层级而不是让字号一个人扛所有工作。角色命名与 token 应描述用途而非数值——这与 whodb 的 DESIGN.md 按角色声明fontFamily的组织方式一致。Apply可直接执行的排版规则文档的 Apply 一节是全套可操作标准逐条继承如下正文底线保持正文舒适可读且可缩放。常规 Web 正文以1rem / 16px 为底线除非是密集角色、平台惯例或用户设置给出了正当理由。度量区间散文保持在45–75ch行高与度量反向调节——行越宽越需要更大的 leading。暗底浅字的三维补偿浅色文字放在深色表面时在三个感知轴上同时补偿略微更大的行高、略微更宽的字距、需要时升一档字重。行高没有万能比针对字体、宽度、语言与对比度调行高而不是套一个通用比率。跨屏一致同一重复角色在不同屏幕与状态下保持完全一致。启用字体特性内容受益时启用 tabular numbers等宽数字、代码与标签特性——这对 whodb 这类表格/结果集产品尤为关键数值列对齐依赖font-variant-numeric: tabular-nums。只加载用到的字体仅加载实际使用的字体资产与字重提供度量兼容的回退metric-compatible fallback避免阻塞文字渲染。展示区响应空间营销展示字体可以随可用空间变化而密集的产品界面与阅读界面要保持空间可预测性。保留平台缩放保留浏览器缩放、用户字体设置、Dynamic Type 与平台文本缩放。段落节奏二选一以段落间距或首行缩进作为主要段落节奏两者同时用通常会让边界被双重标记。两条收尾禁令不要让文字以牺牲可理解为代价成为装饰没有它能独自完成的清晰角色就不引入第二个字体族。字体交付这一点在 whodb 前端有现成的工程范例brand-fonts.css 以自托管可变 woff2 交付 Bricolage Grotesque、Hanken Grotesk、JetBrains Mono每个字族按 latin / latin-ext / cyrillic / vietnamese 等脚本切分unicode-range子集全部声明font-display: swap——这正是只加载使用到的资产 避免文字不可见两条规则的具体实现。字体文件位于 frontend/public/fonts。Verify用证据闭环再跑一次扫描验证清单每条都要求用渲染或源码证据作答禁止裸答 yes主、次、正文、元数据四类角色在不读文字的情况下即可辨识长文本在相关宽度与语言下仍然舒适排版属于该产品及其既定视觉世界加载过程不产生破坏性重排或文字不可见缩放、文本缩放、焦点、对比度、窄视口路径依然可用最终的机械扫描没有无法解释的 finding。验证后重跑一次--scope type扫描确认清零当层级站稳后typeset.md 将其移交$impeccable polish做收尾。Live-mode signature params可变字阶的参数契约typeset.md 的最后一段约束 live 模式浏览器内生成视觉变体下的签名参数每个变体声明一个粗粒度的scale参数并让字号阶对着var(--p-scale, 1)编写。{id:scale,kind:range,min:0.85,max:1.3,step:0.05,default:1,label:Scale}规则是scale参数是必选基线仅当它代表真实的系统级选择时最多加一个配对pairing或字重参数其余参数行为遵循 live.md 的参数契约——该契约定义了range驱动--p-idCSS 变量作者写var(--p-scale, 1)、steps驱动data-p-id属性、toggle同时驱动变量与属性存在性三种 kind以及每变体 0–4 个参数的预算。也就是说scale让整体字阶放大 10%–30%成为浏览器里一个零重新生成成本的滑块而 CSS 侧只需对var(--p-scale, 1)做乘数计算即可接入。小结typeset.md 的价值在于把排版好这个模糊判断拆成了可执行链条选模式 → 六问评估以文件/选择器/计算值为证据→ 机械扫描--scope type规则集兜底→ 声明系统 → 逐条 Apply 规则 → 证据化 Verify → live 模式以var(--p-scale, 1)参数化字阶。配合 detect.mjs 的可复用检测器与 whodb 前端 DESIGN.md brand-fonts.css 的落地范式这套流程既可作为 Agent 技能的执行手册也可以直接当作人工界面审查的检查单使用。赞分享数据库客户端后端前端CLI桌面应用数据可视化AI 应用【免费下载链接】whodbWhere data access meets operational intelligence项目地址https://gitcode.com/gh_mirrors/wh/whodb点击查看免费下载相关推荐WhoDB 的 Quiet 设计方法论impeccable 技能中 quieter 命令的原理与落地实践WhoDB 的 Quiet 设计方法论impeccable 技能中 quieter 命令的原理与落地实践 在 WhoDBWhere data access数据库客户端后端前端CLI桌面应用数据可视化AI 应用impeccable typeset 子技能解析构建可评估、可执行、可验证的排版系统impeccable typeset 子技能解析构建可评估、可执行、可验证的排版系统 typeset 是 impeccable让 AI harness 更AI 技能前端CLIdsh-pluginPollinations 代码审查方法论基于 AGENTS.md 的证据驱动 Review 工作流Pollinations 代码审查方法论基于 AGENTS.md 的证据驱动 Review 工作流 导读 本文讲解 pollinations 开源仓库中 AIAI 应用媒体生成后端前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考