设计系统及其文档

1）设计系统是什么，为什么需要

设计系统是接口的单一真理来源：一组令牌，组件，实践和文档，可提供UX可预测性，开发速度和可扩展性。

• 所有产品中视觉和行为层的一致性。
• 速度：重新使用组件，减少咆哮成本。
• 质量：通用A11y模式，本地化，测试，内容标准。
• 可管理性：明确责任、发布、路线图。

2）设计系统架构（图层）

1.设计令牌（基金会）： 颜色，打字机，尺寸，半径，阴影，缩进，状态以及语义令牌（'color。surface.warning`, `space.xs`).

2.UI组件：按钮,输入字段,模态窗口,dropdowns,表格,敬酒,横幅,alerts,空状态,骨架。
3.模式和构图：KYC表格，支付漏洞，零结果，分步向导，内容卡。
4.内容海德（microcopy）：音调，术语词典，错误/成功模式，推杆/横幅。
5.基础架构：A11y、测试、本地化、版本、贡献者（贡献）方面的海德。

3）设计令牌： 原理

语义>"原始"样式。使用"颜色"。text.muted'而不是'#6B7280'。
主题化和平台。源令牌→平台映射（Web，iOS，Android，电子邮件）。
在令牌级别上对WCAG进行浅色/深色主题和对比。

全球和上下文量表： '空间。2`, `radius.md`, `elevation.1`, `opacity.disabled`.

代币转化：更改-通过降级策略和迁移注释。

4）组件： 文件中的要求和页面组成

• 描述和目的。何时使用/不使用。
• 变体/状态。尺寸，视图（初级/次级/ghost），失明，加载，破坏。
• 可用性。角色，键盘导航，"aria-"，对比度，焦点环。
• Microcopy的文本和示例。有效标签/播放器，错误，帮助。
• 代码示例。最小API, controlled/uncontrolled。
• 与表单和i18n集成。长行，数字/货币/日期的案例。
• 反例子。错误的使用模式。
• 测试矩阵。视觉快照，单位/交互式，屏幕阅读器。

5）构图模式（回收）

注册表/CUS：分步向导、进度、inline+summary验证、错误模式。
支付漏洞：方法选择，佣金，时限，符号方法规则，确认和状态。
空状态：上下文值+CTA,零搜索结果。
成功/错误消息：状态层次结构，视觉令牌，吐司/横幅/调制解调器。

导航和过滤器： 全局搜索,快速预设,标签.

模式页面必须显示可复制组件的构图，并带有microcopy和A11 y注释。

6）内容海德（voice&tone, microcopy）

声音：专业，清晰；语气取决于上下文（讨价还价、付款、安全）。
单一术语词典：付款，奖金，限额，KYC-一个产品值。
模板：CTA、错误、警告、成功、空状态、通知。
本地化第一：按地区划分的字符串长度、数字/货币/日期的股票。
A11 y词汇：清晰的标签，aria描述，没有歧义。

7）可用性（A11y）作为系统标准

基本标准：WCAG 2。1 AA用于对比，焦点始终可见，从键盘导航。
角色和属性：组件描述了"role"，"aria-label"，"aria-describedby" 和敬酒/Alert的轻度区域。
屏幕阅读器：短语的示例，阅读顺序，正确状态（"assertive/polite"）。
测试过程：自动检查+手动脚本。

8）本地化与国际化

组件代码+上下文描述旁边的i18n键。
通过格式化实用程序的数字/货币/日期；不要在模板中硬编码文本。
长度测试："长德语"，"窄移动"，RTL变体。
语言语气：关键步骤（付款/安全）的音调映射。

9）文档： 结构和导航

1.导言：任务,原则,责任区.

2.令牌：颜色，打字机，网格，尺寸，阴影，状态，主题。

3.组件：带过滤器的目录（按角色、按平台、A11 y）。

4.模式：情景（表格，付款，空状态，成功/错误）。

5.内容海德：声音和语气，字典，微观流行模式。

6.可用性：标准，支票单，测试案例。

7.本地化：原则，示例，市场术语表。

8.集成和代码：安装、版本、示例、"如何迁移"。

9.贡献：贡献过程,设计评论,代码评论,定义完成。

10.Changelog和Roadmap：发行版，发行版，开发计划，已知问题。

10）管理和流程（政府）

角色：系统所有者（DesignOps/UX Platform），主流（设计/FE），顾问（BE，A11y，本地化）。
更改委员会：评估请求、优先级、API/令牌匹配。
过程：RFC到新组件，内部问题形式，SLA到错误。
Done的定义：设计（Figma）↔代码（UI包）↔码头（示例+海德）↔测试。

11）贡献： 如何添加/更改

RFC模板：问题→选项→所选解决方桉→ A11y → i18n →迁移→风险。
Flow PR：设计评论→代码评论→ UX撰稿人→ A11y支票→发行说明。
向后兼容性规则：minor/patch用于非破坏性,major-在可能的情况下提供解压和自动迁移。

12）转化、发行、迁移

软件包的SemVer（"@company/ds-core"，"@company/ds-forms"，"@company/ds-charts"）。
发布注释：更改令牌、组件API、默认行为、断开更改、迁移粘合剂。
Deprecations：底座上的标记，linter规则，用于大规模替换的时尚代码。
设计对焦管道：单一源（JSON/YAML）→平台字条（CSS vars，iOS，Android）。

13）质量测试

单位行为和状态测试。
视觉快照（主题/状态回归）。
A11 y测试：自动+手动屏幕阅读器脚本。
关键流通E2E桉例（注册、付款、KYC）。
Perf预算：乐队/渲染限制和严重依赖禁令。

14）设计系统成熟度量标准

选项：使用DS的屏幕/存储库的百分比。
Velocity：从布局到交付的时间。
质量：1个版本UI/A11y缺陷。
一致性：DS以外的"一次性"组件/样式的数量。
Docs：对内部受众（设计师/开发人员/分析师）的NPS部件进行底座覆盖。

15）反模式

令牌作为没有语义的调色板（"只是颜色"）。
没有文档的组件，也没有极端情况的示例。
忽略A11y（没有焦点，对比度低，没有"aria"）。
破裂的转化，没有破裂和迁移海德。
组件中的隐藏逻辑（业务规则而不是UI行为）。
将组件复制到狭窄的桉例中而不是API扩展。

16）支票单

• 语义名称和用途。
• 两个主题中的AA对比。
• 记录了滑板和使用原理。

• 选项/状态已覆盖。
• A11 y描述，"aria-"，重点。
• microcopy示例（标签、错误、提示）。
• 代码和边缘桉例示例（长线、下载、空白）。
• 单位/visual/A11 y测试为绿色。

• 带有前/之后示例的发行说明。

[] Migration guide и deprecations.

• 更新了storize/Demo、文档中的链接。

17）"之前/之后"示例"

• 不同的主按钮：颜色/半径/缩进不匹配；不同的CTA文本。

• 带有令牌的单个"Button"："size=md"，"variant=primary"，"radius=lg"，"spacing=md"，动作+对象样式的文本。

• 技术信息，没有线索。

• 组件'不正确的日期格式。使用DD。MM。GGGG。'+自动焦点。

18）组件页面模板（骨架）

标题： Button

描述：启动动作；1个主屏幕。
变体：小学，中学，ghost，destructive；sm/md/lg尺寸。
状态：hover, focus, active, loading, disabled。
A11y：可从键盘访问；"aria-pressed"用于切换。
Microcopy："保存更改"，"继续验证"。避免"确定"。

代码（示例API）： "Button {variant, size, icon, loading}".

反示例：在层次结构的一个级别上双小学。
测试：视觉狙击，对比，聚焦环。

19）设计系统实施花花公子（rollout）

1.界面审核：颜色清单/打印/组件/模式。
2.令牌和主要组件的MVP：Button，Input，Select，Modal，Alert，EmptyState，Toast。
3.文档和故事书：实例,代码嗅探,gaids。

4.试点产品： 小部件更换,反馈收集.

5.迁移海德：时尚代码，破坏规则。
6.集扩展：表格,分页,表格论坛,向导步骤。
7.扩展：产品模式（付款、KYC）、与分析和A/B集成。
8.支持：问题渠道，SLA，内部购物中心。

20）快速文档模板

• 名称：'color。border.warning`
• 用途：警告框和警报/警告
• 对比：在色彩背景下的AA。surface.default`
• 不能：用于小字节文本
• 相关：'颜色。surface.warning`, `icon.warning`

模式模板： 空状态（noResults）

目的： 在没有错误感的情况下调整查询"

组成： 标题（opz。），文本（1-2句子），CTA，次要CTA，图标/插图

Microcopy： "po" {query}"一无所获。重置过滤器或重新定义查询"

A11y: `role="status"`, `aria-live="polite"`

最终的spargalka

语义令牌+学科A11y=基数。
组件页面完整：目的、选项、A11y、微拷贝、代码、测试。
模式=由具有成品文本和规则的组件组成的成分。
Docs是产品：版本，版本，迁移，贡献过程。
测量成熟度：成熟度、速度、缺陷、一致性、NPS内部命令。