KIN DESIGN SYSTEM / 3.0.0 DEVELOPMENT

为需要认真处理的工作，建立清楚的界面。

KIN 是一套开放的设计系统，适用于需要让用户阅读、比较、判断或执行操作的网站和应用。它为结构、主题、交互、无障碍、数据和 AI 辅助工作提供共用规则。

阅读开发中合同查看产品模式打开参考界面

许可: MIT
主题: 日间 · 夜间 · 跟随系统
无障碍: AA 对比度与状态目标
输出: DTCG · Tailwind · Figma Variables

原则先于组件

KIN 让决策保持一致，但不强迫每种产品使用相同布局或视觉模板。

内容获得注意力

视觉权重服从用户任务。完成定位以后，导航和装饰应主动退后。

让结构被感知

通过对齐、间距、表面层级和克制的边界解释关系，而不是堆叠卡片。

数据带有上下文

重要数值必须有定义、单位、时间范围、来源，以及诚实的未知或过期状态。

人保留控制权

高影响操作展示范围和后果；建议、规则、事实与已执行自动化始终能够区分。

高密度，不拥挤

专业界面优先删除重复说明和装饰，不以牺牲可读性或触控区域换取密度。

设计基础

下面的真实 Token 会随页面主题和高对比模式同步变化。

表面层级

不依赖厚重阴影建立层级

Canvas应用底层

Surface 1主要内容

Surface 2嵌入区域

Surface 3菜单和浮层

Surface 4最高表面

语义颜色

颜色表达含义，不负责装饰

操作

监测

正常

观察

风险

离线

字体层级

紧凑的应用字级与可读正文

Display安静的智能32 / 38 · 600

页面标题当前工作与上下文20 / 26 · 600

正文界面应先解决清楚，再考虑装饰。14 / 22 · 400

元数据来源核查于 2026 年 7 月 12 日12 / 17 · 400

间距

4px 基础网格

48121620243248

图标库

Lucide · 按需导入 · 1.5px stroke

搜索

数据

阅读

电商

画布

监测

导出

组件行为

这里可以直接打开登录、控件、动效、反馈、浮层与专业工作流参考；状态属于设计合同的一部分。

项目名称显示在工作区标题中。

来源地址请输入包含 https:// 的完整地址。

参考合同当前版本代码仓库2 分钟前

外部证据待复核3 个来源昨天

历史决策已过期来源不可用6 月 12 日

设计合同3.0.0 开发中

主题模式4

产品模式4

最近复核2026-07-16

操作反馈只有操作需要临时反馈时才延迟加载 Sonner。

打开核心组件参考打开运行时集成实验室打开 AI 与审核参考查看组件成熟度

产品模式服从任务

KIN 不把所有产品都做成三栏 Dashboard。每种模式保留其任务真正需要的信息与控制。

情报工作台

保存视图、对象身份、事件、证据、属性与可逆的审核决定始终保留在上下文中。

打开完整参考

对象 / Atlas 记录2 分钟前更新

Atlas 记录

当前状态、最近变化和已验证来源在同一上下文内保持可见。

已观测状态

82 / 100证据

3 个来源覆盖

09:42来源恢复监测

昨天记录已修订审核人

属性

风险观察

证据82 / 100

更新2 分钟前

AI 行为是一份产品合同

只有当来源、不确定性、范围和影响保持可见时，AI 才真正有用。AI 不是一种视觉皮肤。

结论

说明建议或结果，不把推断伪装成已确认事实。

依据

链接支持结果的记录、规则、输入与来源。

不确定性

暴露缺失、冲突、过期或由模型估算的信息。

操作

提供可预览的下一步，并在适用时说明范围、确认、审计历史与回滚。

给编码工具一份设计合同

固定准确的 KIN 版本，在项目内保留合同副本，并记录项目自己的决定，不依赖含糊的风格提示词。

在修改界面之前，完整阅读 DESIGN.md、DELIVERY.md 和 principles/visual-signature.md。

将它视为规范性产品设计合同。从真实用户任务、对象模型、数据状态和
现有组件开始。保留主题、移动端、键盘、无障碍、真实 API 和人类控制。
存在 kin.config.json 时先读取实施简报和路由/产品类型映射。编码前汇报
KIN 构图检查点；不得开始仍为草稿或尚未解决的代表性工作流。

查看 Agent Skill 阅读接入指南

使用同一份事实来源

规范文档和生成文件共同进行版本管理，并由 CI 检查。

DESIGN.md当前开发中的规范性原则、Token、行为、无障碍和交付合同。阅读 交付模型Contract-first 核心、Figma/运行时边界、未来包门禁与接入证据阶段。阅读 实施简报项目级路由类型、构图决策、代表性工作流、状态、证据与就绪门禁。阅读 DTCG Tokens机器可读的主题、字体、间距、圆角和组件基础值。下载 Tailwind Tokens生成的 CSS 变量与 Tailwind 兼容主题值。下载 Figma Variables包含日间、夜间和高对比模式的 create-only 请求体。下载 状态参考输入框、数据行、反馈、对话框、焦点和命令菜单行为。打开 动效实验室频率与输入路径、Tooltip 连续浏览、可中断浮层、Sonner、手势落点、慢速审查与响应式 Drawer。打开 AI 与专业工作流参考确定性的 Composer、证据、审核、执行范围、媒体、持久任务与可访问图表状态。打开 验证证据自动检查、截图、浏览器冒烟、缩放、RTL、Forced Colors、触控和读屏人工复核的边界。阅读 微交互合同成对状态、真实结果、进度、Disclosure 与 Reduced Motion 行为。阅读 组件术语组件规范名称，以及相近界面模式之间的实际区别。阅读 组件目录成熟度、覆盖范围、已知缺口和统一完成定义。阅读 最新稳定版 2.3.0版本说明与不可变源代码标签。查看

跨产品页面流程

稳定的访问、设置、偏好、恢复、搜索和支持参考旁，新增了候选排期工作台。每个参考都会说明 URL 状态、失败路径、焦点行为、成熟度和产品后端责任边界。

排期工作台登录与访问搜索与结果设置流程偏好设置恢复状态帮助与支持查看页面成熟度