KIN 中文文档

原则先于组件

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

01

内容优先

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

02

让结构一目了然

通过对齐、间距、表面层级和克制的分隔说明关系，而不是堆叠卡片。

03

数据需要上下文

重要数值必须说明定义、单位、时间范围和来源，并诚实展示未知或过期状态。

04

人始终掌控

高影响操作应说明范围和后果；建议、规则、事实与已经执行的自动化必须清楚区分。

05

高密度，不拥挤

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

设计基础

以下设计变量会随页面主题和高对比模式同步变化。

表面层级

不依赖厚重阴影建立层级

Canvas应用底层

Surface 1主要内容

Surface 2嵌入区域

Surface 3菜单和浮层

Surface 4最高表面

语义颜色

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

操作

监测

正常

观察

风险

离线

字体层级

紧凑的界面字级与清晰的正文

展示文字安静的智能32 / 38 · 600

页面标题当前工作与相关信息20 / 26 · 600

正文先把界面讲清楚，再考虑装饰。14 / 22 · 400

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

间距

4px 基础网格

48121620243248

图标库

Lucide · 按需导入 · 1.5px 描边

搜索

数据

阅读

电商

画布

AI

监测

导出

组件行为

这里可以直接打开登录、控件、动效、反馈、浮层和专业工作流示例；每种状态都有明确规范。

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

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

设计规范当前版本代码仓库2 分钟前

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

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

设计规范3.0.4 正式版

外观模式4

应用布局4

最近更新2026-08-20

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

打开核心组件示例打开运行时集成示例打开 AI 与专业工作流示例查看组件状态

布局服从任务

KIN 不把所有产品都做成三栏仪表盘。每种布局只保留当前任务真正需要的信息和控制。

情报工作台

切换记录时，保存视图、记录信息、事件、证据、属性和可撤销的复核结论始终可见。

打开完整示例

档案 / Atlas 记录2 分钟前更新

Atlas 记录

当前状态、最近变化和已核验来源同时可见。

已观测状态

82 / 100证据

3 个来源覆盖

09:42来源恢复监测

昨天记录已修订核验人

属性

风险观察

证据82 / 100

更新2 分钟前

AI 行为也需要明确规范

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

结论

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

依据

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

不确定性

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

操作

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

让编码工具遵循同一套设计规范

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

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

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

查看编码工具指南阅读接入指南

使用同一份事实来源

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

DESIGN.md当前开发中的原则、设计变量、行为、无障碍和交付要求。阅读 交付模型说明规范核心、Figma、运行时包和接入证据之间的责任范围。阅读 实施简报记录项目的路由类型、构图决策、代表性工作流、状态和上线条件。阅读 DTCG Tokens机器可读的主题、材质、字体、间距、圆角、动效和组件基础值。下载 Tailwind Tokens生成的 CSS 变量和 Tailwind 兼容主题值。下载 Figma Variables包含日间、夜间、日间高对比、夜间高对比模式及材质角色变量的创建数据。下载 材质层级全局连续、接触、抬升与浮动角色，以及高对比模式下的结构替代规则。阅读 状态示例输入框、数据行、反馈、对话框、焦点和命令菜单行为。打开 动效实验室键盘与指针操作、连续提示、可中断浮层、Sonner、手势和响应式抽屉。打开 AI 与专业工作流示例固定状态下的 AI 输入与结果、证据、复核、执行范围、媒体、后台任务和图表。打开 验证记录说明自动检查、截图、浏览器冒烟、缩放、RTL、强制颜色模式、触控和读屏人工复核的完成情况与限制。阅读 微交互规范成对状态、真实结果、进度、展开/折叠控件与减弱动效行为。阅读 组件术语组件规范名称，以及相近界面模式之间的实际区别。阅读 组件目录成熟度、覆盖范围、已知缺口和统一完成定义。阅读 最新稳定版 2.3.0版本说明与不可变源代码标签。查看

跨产品页面流程

登录、设置、偏好、恢复、搜索、支持和排期均提供独立示例。每个示例都会说明地址状态、失败路径、焦点行为、成熟度和需要由接入产品完成的部分。

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

为复杂工作建立清楚的界面。