nk-design：实践指南

团队讨论nk-design时，我会先把用途说清楚：一句话：一个工作数据工具，其第一个屏幕与分数一致，并且每一行都显示其来源。团队若要把它用于数据与知识处理，应先处理数据结构、更新策略和可追溯性会决定结果是否可信，否则试用结果很容易失真。短测时我会用一份规模可控且答案已知的数据集试跑，并保留模式兼容、增量更新、查询结果和来源追踪的结果，方便团队复盘。整体来看，它适合需要保留数据来路与变更记录的使用者拿来做对照测试，最终决定仍应回到真实结果和维护状态。

名称：NK设计 描述：在设计系统中用一句话（审查队列、账本、跟踪器、管理面板）构建一个单文件数据工具，其中每个数字都显示它来自哪里以及未检查的内容。该页面除了派生值之外还带有出处芯片、第一个屏幕上的调节栏（其各部分是实时计算并相加的）、从不单独依赖于颜色的固定状态词汇、合成数据的演示标记以及说明未验证内容的页脚。三个调色板和 light/dark 来自一个令牌文件，在第一次绘制之前恢复。发送令牌文件、工作起始页和带有 15 个机器规则的 scripts/ui_check.py。当需要仪表板、队列、分类帐、跟踪器或内部工具时，当演示必须在三十秒内作为真实产品读取时，或者查看此类页面时，请使用。不是营销网站风格，也不是组件库。 许可证：MIT 元数据： 出处：作者自己的产品系列设计系统（2026-09），在四个公共数据工具发布后重建，具有不同的外观且没有可见的来源；见出处 版本：0.1.9

证据可见的设计

当数据工具的数字可以在屏幕上追踪、累加和质疑时，人们才相信数据工具，而不是当 它很漂亮。 这项技能将其转化为页面满足或不满足的规则：每个派生值都有一个 在它旁边的出处芯片中，第一个屏幕在一个调节栏上打开，其总和是实时计算的， 状态词是固定词汇，模拟动作这么说，页脚说的是未经验证的内容。

路径。 此技能中的命令以 ${…SKILL_DIR} 开头：此技能自己的文件夹，即包含此 SKILL.md 的文件夹。 Claude Code 会填写该内容。如果您的代理显示所写的占位符（Codex、Cursor、Gemini CLI 等），请在运行命令之前将其替换为该文件夹的绝对路径。如果放任不管，它就会扩展为空，路径就会断裂。

当这适用时

• 有人用一句话描述了一种数据工具（“一个三人记账的发票审核队列”） 公司”）并且想要一个可以工作的页面，而不是一个模型。
• 构建仪表板、工作台、管理面板、审核队列、分类帐、跟踪器、导入器、“内部工具”。
• 一个演示，必须在三十秒内让陌生人相信它是一个产品并且作者知道 已经检查和尚未检查的内容。
• 查看这样的页面：首先运行检查器，然后运行浏览器列表。
• 不适用于营销网站、登陆页面或一般视觉修饰：签名仅表示某些内容 数据被加载、计算并决定。

程序

1. 从起始页开始，而不是从空白文件开始：复制 ${CLAUDE_SKILL_DIR}/assets/starter.html 并 ${CLAUDE_SKILL_DIR}/assets/design-tokens.css 放入同一文件夹中。启动器已经工作：种子 合成行，根据它们计算的调节栏，可排序和可过滤的表，行检查器， 主题选择器和诚实的页脚。该页面仅消耗语义标记（--surface、--anchor、 --danger …);原始值存在于令牌文件中，而不是其他地方。
2. 将句子映射到启动器的三个部分：一行是什么（其字段、状态和源）， 第一个屏幕必须添加什么（调节栏的分段和总数），以及一个人 决定一行（检查员的行动）。更换数据发生器和标签；保持结构。
3. 保留七个不变量 (references/invariants.md)：锚带上的顶栏，标记由 规则，带有调节栏的签名板，每个派生值旁边的出处芯片， 状态词汇、诚实块、带有外观合约的一个代币文件。
4. 将大胆花在一处。 深锚色承载着顶栏、签名板、 页脚和一个主按钮；一点颜色保留在页面的一小部分；其他一切 聚合：一个显示标题的显示面，一个用于界面的 sans 面，一个用于数字的等宽面 标识符、小半径、阴影前的边界。
5. 使用给定的状态词汇（references/components.md §标签）：需要审核·已批准/已预订 / 已发送 · 拒绝/失败 · 草稿 · 模拟 · 排除 · 阻止。单词旁边的第二个通道 - 一个点， 复选标记或停止标志，绘制为 SVG 线，并且绝不作为符号或表情符号输入 - 绝不单独使用颜色。
6. 通过构建诚实（references/honesty.md）：合成数据被发明（可信） 虚构的名称，从来不是真正的客户或公司），并且页面标记为 Demo ·；页面上的每个数字都是根据加载的数据计算得出的；没有任何模拟显示已发送； 页脚包含关于此演示/此处未验证/来源。
7. 保持外观契约。 <head> 中的一个小脚本，在第一个样式表之前，读取保存的 调色板和方案（或URL中的?theme= / ?scheme=）并在之前设置data-theme / data-scheme 首先油漆。默认情况下不写入任何属性，因此所提供的页面两者都没有。采摘者住在一个 设置卡；一个 theme-color 元遵循所选表面。
8. 展示前检查：python3 ${CLAUDE_SKILL_DIR}/scripts/ui_check.py index.html 运行十五 规则（一个主按钮、令牌块之外没有硬编码颜色、可排序的表格、没有 transition: all 和一个简化的运动块，焦点永远不会默默地移除，诚实的话，演示标记， 存在芯片和调节栏，仅字体和 GitHub 主机、元标记、minmax(0,1fr)，无 真实的联系人、外观合同、绘制为 SVG 而不是键入字符的图标、每个标记的数字都打开其来源）。然后浏览器列表中references/acceptance.md （第一个屏幕为 1280×800，宽 375 像素，具有真实数据量、键盘路径、每个调色板的光线和 黑暗，对比度）。
9. 随页面一起发布：README 中的 1280 宽屏幕截图、演示链接、单行定位 带有保护子句的句子（“……——每一行都保持可追踪”）。

可点击的号码来源

在启动器中，可以单击调节栏中的每个数字：面板显示它计数或求和的行，以及它如何 已计算，未检查。每个条目的单词都存在于页面的 nk-sources 清单中； traceStrip() 每次决策后都会更新值和行。当您更换数据发生器时，请保留每个数字的 data-nk-src并重写其条目；显示派生值的芯片也可以携带一个派生值。 C15 拒绝没有以下信息的页面 层或带有一个条目，但未说明来自何处、如何以及未检查的内容。

该面板是 nk-design、nk-data-story、nk-deck、nk-model 和 nk-explorer 的共享数字源层 使用相同的三个文件（scripts/numsrc.py、assets/numsrc.js、assets/numsrc.css）：按 Tab 切换到数字，然后按 Enter 或 Space 打开它，Esc 关闭它并将焦点放回；打印出来的数字是纯文本。 python3 ${CLAUDE_SKILL_DIR}/scripts/numsrc.py check page.html checks a page: every marked number has an entry, every entry says 没有检查来自哪里、如何以及什么内容，并且运行时是逐字节传送的。

边界

• 检查器读取文件；它无法看到布局、渲染页面上的对比度或屏幕截图。 references/acceptance.md 列出了需要浏览器进行的检查以及如何进行这些检查。
• 令牌文件是一个起始调色板：更改品牌名称，如果更改颜色则保持对比度 对（文件中的每个文本颜色都是根据其主题的最硬表面解决的）。
• 没有外部组件库，也没有 CDN 脚本。网络字体是唯一可选的外部请求： 页面必须脱机打开，系统字体位于其位置，并且没有其他任何更改。
• 启动器仅传送合成数据。加载真实记录是用户的决定，它改变了什么 页脚有话要说。

出处

作者自己的产品族设计系统，2026-09。第一个版本是在四次公开之后编写的 每个数据工具都有不同的外观，并且没有一个显示其数据的来源；这 七个不变量、签名元素和诚实约束是为陌生人编写的 在前三十秒进行检查。当前版本保留了这些规则并修复了屏幕截图 第一个测量：几乎没有暗质量（渲染的浅色主题像素的 1.28% 低于 L* 40），并且没有 真实颜色（第 95 百分位数色度 0.090），因此它添加了深锚定表面和一点颜色，以及 调色板和 light/dark 选择在重新加载后仍然存在。没有复制外部设计系统；哪里有一个公众 方法通知了一个决定（一个重音规则，称为缓动曲线），参考文件是这样说的。