造物云设计系统 · 执行标准 V2.3
版本：2026-10-20。保留紫蓝、冷灰、晶体标识与品牌字体；规范以共享代码为准。
1. 来源与接入
- 令牌：tokens.css；公共布局与组件：design-system.css；展示：design-system.html。
- 先加载 tokens.css，再加载 design-system.css。默认暗色，根节点 data-theme="light" 切浅色。
- 展示页和本指南同步发布；禁止承诺未迁移页面自动更新。
- 存量官网首页、产品页待逐页迁移；不要未经回归直接给全站替换样式。
2. 容器与响应式
容器全部 border-box，最大宽度包含内边距。标准页 1180px；文档页 1280px；首页宽幅及导航、页脚 1600px。正文上限 680px、标题 760px。
| 视口 | 页边距 | 栅格 | 卡片 | 页面/区块间距 |
|---|---|---|---|---|
| 320–359 | 16 | 4栏/16沟槽 | 1列 | 48/40 |
| 360–767 | 20 | 4栏/16沟槽 | 1列 | 48/40 |
| 768–1023 | 32 | 8栏/24沟槽 | 2列 | 72/48 |
| 1024–1599 | 40 | 12栏/24沟槽 | 3列 | 96/64 |
| ≥1600 | 40+居中余白 | 12栏/24沟槽 | 默认3列 | 96/64 |
- Hero、表单并排区域、内容侧栏在小于768px时单列。不得靠隐藏正文解决拥挤。
- 官网导航小于1440px默认折叠；1440px以上仍需检查真实文字宽度，拥挤时继续折叠。高度移动56px、其余64px；滚动收紧不得导致内容跳动。
- 表格与代码允许区域内滚动，必须可键盘聚焦、有区域名称；页面不允许横向溢出。
- 图片 max-width:100%、height:auto；长 URL 自动换行；不锁定正文卡片高度。
- 200%文字缩放与320px等效窄视口需可读；固定底部操作区考虑 safe-area-inset-bottom。
3. 字体与间距
Noto Sans SC 承担中文，Space Grotesk 承担数字和拉丁标签。不要用全局替换破坏中文回退。
Display clamp(32px,2.5vw + 20px,60px)，H1 28–40，H2 24–32，H3 20–22；正文16/1.7；UI14；辅助13；标签11。展示标题默认600，关键数字可700；正文400，UI500。
间距命名按4px倍数：sp-1=4、2=8、3=12、4=16、5=20、6=24、8=32、10=40、16=64、24=96。页面节奏走响应式语义令牌，不写固定96px覆盖移动端。
4. 颜色、材质与图表
accent用于品牌、链接与强调；action-bg/action-fg专供主按钮。暗色白字按钮底#5B5FE0，浅色#5A4FE6，分别约5.05:1和5.68:1；不得用白字+暗色accent承担普通小字按钮。
fg为正文，fg2为辅助信息，fg3仅纯装饰。图例、占位提示、必要元信息不属于纯装饰；透明色按合成背景实测。
语义色仅状态反馈。分类图表用chart-1至5，并辅以标签、线型、标记。数值必须有单位，示意数据明确标注；不把示意增长写成经营事实。
实面承载正文与操作；玻璃用于导航、轻浮层、品牌展示。无backdrop-filter时使用足够实的表面降级。
5. 组件契约
按钮：zw-btn基础，primary/ghost变体，pill仅营销CTA。操作圆角12px，卡片18px、大面板22px。最小命中区44px；跳转用a、操作用button。每任务区一个主要动作，不以视口计数。
状态：默认/hover/focus-visible/active/disabled/loading/error。原生disabled禁用button；链接禁用须移除跳转并处理键盘，不能只加aria-disabled。提交加载用aria-busy并防重复。
表单：常驻label、输入至少16px、帮助文字关联aria-describedby；错误设aria-invalid并给出解决办法。失败保留输入；成功与异步错误用live region播报。
导航：菜单按钮aria-expanded、aria-controls；Enter/Space打开、Escape关闭、恢复焦点。当前页aria-current。触屏不依赖hover。
弹窗：原生dialog或完整dialog语义、命名、焦点进入与圈定、Escape关闭、返回触发点，背景不可交互。展示图示不等于行为组件。
卡片：无跳转的卡片不加点击暗示；避免嵌套链接；正文不因hover跳动。
6. 动效与可访问性
时长150/250/700ms；卡片hover最多上移3px，触屏禁用抬升。尊重prefers-reduced-motion，关闭循环、入场位移和smooth scroll。入场失败仍显示内容。
普通文字至少4.5:1，大号文字按WCAG门槛判断，不能把14px加粗误当大字。焦点2px描边+至少2px偏移；不只靠颜色表达状态。
7. 品牌与语气
品牌标不拉伸、不改三面明度、不拆白底板；安全距至少标记高度的1/4。单标最小20px，横向组合24px；字标视高为标记0.62倍。资源继续使用brand目录与logo-guide.html。
文案具体、专业、说明下一步；错误说清问题和修复方式。产品事实、客户案例、增长数字需有来源。
8. 发布与验收
- 320/375/640/768/1024/1280/1600/1920宽度无页面级溢出；抽测359/360、767/768、1023/1024、1279/1280边界。
- 明暗主题、键盘Tab、焦点、减弱动效；长文案、无数据、错误、禁用、加载状态。
- 令牌/组件/展示/指南同版本；破坏性改动有迁移映射，旧变量先弃用再移除。
- 新增令牌写明用途与适用场景，禁止为单个页面无理由复制新值。
- 部署前备份并比对远端；部署后核验资源内容与状态码。
9. 版本与迁移
V2.1 / 2026-10-20：沿原章节整合响应式与契约，新增Agent读取流程、skill包与版本清单；品牌及共享API保持兼容。
V2.0 / 2026-10-20：统一冲突口径，新增响应式矩阵、共享组件CSS、主按钮语义色、独立图表色、可交互布局预览。
保留旧令牌名；fs-display/h1/h2/h3改流式值，fg2提高可读性。外部使用方先回归，勿盲目替换生产依赖。
V1 / 2026-08：初版。
10. Agent执行协议
- 稳定入口：https://www.zaowuyun.com/design-system.html 。先读 https://www.zaowuyun.com/design-system-manifest.json 确认当前发布版本和文件摘要。
- Skill：https://www.zaowuyun.com/zaowuyun-design-skill.md 。读取规则不需要安装；支持skill的环境可以安装完整包。
- 规则优先顺序：用户任务与仓库约束 → 当前执行规范 → 令牌值与组件API。数值以当前令牌为准；发现冲突报告并修复源，不自行混用旧版本。
- 使用已有品牌与内容结构，新增规则归入对应章节；不把迭代日志或版本专属区块放在内容最前方。
- 开工说明采用版本、页面类型与任务范围；选择容器与断点，再实现组件。官网框架和操作界面各按用途约束，不强迫全部玻璃或胶囊。
- 默认仅修改用户要求范围。未迁移的业务页不声称已合规；静态弹窗与导航示意不视为行为实现。
- 验收记录：320/375/640/768/1024/1280/1600/1920及相关断点两侧；明暗主题；长文案；键盘Tab与Escape；减弱动效；空/加载/错误状态。按实际涉及组件选择行为验收，不声称未执行的结果。
- 交付列明规范版本、文件、实际验证、例外与遗留；发布前备份、核对并发变更，发布后核对线上内容。
- 品牌下载资源见 https://www.zaowuyun.com/logo-guide.html 。内嵌字标可用currentColor，下载的SVG锁版需按背景选择正确深浅版本。
- 版本记录：https://www.zaowuyun.com/design-system-changelog.md 。令牌删除或品牌色破坏性改变需主版本及迁移说明；兼容扩展升次版本；修正升补丁。
11. 场景与图像 · V2.3
先确认受众、页面类型、核心任务、已有资产，再选择品牌表达/产品操作/内容阅读模式。模式仅调整排版材质，保留品牌身份。
实现与图像规则：https://www.zaowuyun.com/design-system-usage.html 。原始Markdown https://www.zaowuyun.com/design-system-usage.md 。
研究来源与取舍：https://www.zaowuyun.com/design-system-research.html 。研究不是替代当前执行规范的另一套样式规则。
新语义别名surface-canvas/content/raised、text-primary/secondary、border-default及control-min-height与旧变量共存。
三种模式通过data-zw-mode及zw-mode-heading/zw-mode-surface显式选择；不自动改变存量页面。
产品截图需真实并记录版本、日期；流程/界面示意与合成图标记其性质，不能把演示当实现。每个新资产记录用途、来源/权利、日期、alt与背景适用性。
组件发布需用途、API、变体/状态、行为、适用范围及验证。当前基础CSS可用；营销导航/弹窗仍为契约和示意。
Agent按任务读取相关章节；审查交付给出文件位置、问题、用户影响、建议、验证与例外。外部skill默认审美/技术栈不能覆盖本品牌及项目约束。
基础行为模块 · V2.3
开合导航与原生dialog示例使用design-system.js；模板挂载后调用ZaowuyunUI.mount(root)，卸载时调用返回的清理函数。需支持原生dialog。
表单仅在本地模拟校验、成功、失败与重试，不发送请求。完整营销导航仍需单独实现，演示不等同生产服务接通。