# DreamNight Design · Agent 执行规则

适用范围：本仓库，以及明确采用 DNDL 的消费项目。版本：1.1.0。

## 先读什么

1. 阅读 `DESIGN.md`，区分品牌强制原则与数值建议。
2. 阅读 `tokens.css`，使用现有值，不凭色名重新猜颜色。
3. 需要材质与动效时阅读对应工具；示例只用于理解语言，不复制整页布局。
4. 审查产品的真实内容、功能和技术栈，再设计页面。

## 必须遵守

- 默认直角。按钮、卡片、输入框、导航不得随意改成圆角或胶囊。
- 保留有意义的大面积品牌实色色块与表达性排版；不要退化为白色圆角卡片集合。
- 优先使用现有 Token。不要在各组件重复硬编码品牌色、字体、曲线与材质值。
- 原始色与语义色有不同职责。色块正文用 `--dn-text-on-color`；浅色次要小字用 `--dn-text-secondary`。
- 文字在实际背景上满足 4.5:1；大字满足 3:1。重要控件边界与焦点需可辨识。状态不能只用颜色表示。
- 展示真实且有价值的信息。拿不到动态数据时明确给静态回退，不编造更新时间、用户数、进度或实时状态。
- 阴影只解释层级。Acrylic 只用于合理覆盖层，必须有不透明回退，不替换所有实色色块。
- 动效解释状态，支持减少动态效果；禁止无意义持续运动与数据刷新时反复整页入场。
- 进入详情尽量保留底层上下文；关闭恢复滚动位置与触发元素焦点。方向与来源必须可理解。
- 键盘可操作，焦点可见，详情提供关闭与 Escape。动画或 API 不可用时功能仍然可用。
- 不修改品牌色板或核心语言来迎合某个模板；例外记录原因与影响范围。

## 留给产品的自由

页面布局、导航结构、色彩分配、信息密度、组件组合、内容形式、框架与状态管理方式由产品决定。

不强制 Metro 磁贴网格，不强制侧边栏，不复刻 JEVOS，不要求跨站无缝过渡、无限画布或无限滚动。不要为了品牌统一破坏既有功能。

间距、断点、产品网格可以是项目局部变量；不要把所有 CSS 属性升级为品牌 Token。自定义 Token 应有跨产品复用价值或明确语义，不得与现有 Token 重复。

## 修改本仓库

- `DESIGN.md` 管原则，`tokens.css` 管数值，其他文件引用它们。修改时同步文档、示例与测试。
- 新工具使用 `.dn-` 前缀，避免全局 reset 与接管产品布局。
- 只用静态本地资源构建基础示例；不引入无必要的框架、第三方 CDN、跟踪或网络数据。
- API 支持与用户偏好检查采用渐进增强。浏览器测试依赖放在外部工具环境，不提交 `node_modules`。
- 修改 Token 的名称 / 值 / 语义时评估兼容性；更新 `CHANGELOG.md`。旧版本项目无需即时升级。
- 不擅自提交、推送、添加远程、发布包或选择开源许可证。

## 交付前验收

- [ ] 所有八个品牌色与六个基础色准确，未为调对比度更改原始色板。
- [ ] 使用语义文字配对，并检查实际页面文字对比度；没有未经说明的 Muted 小字或色块白字。
- [ ] 有内容驱动的大实色色块；没有无理由圆角、胶囊或装饰性容器堆叠。
- [ ] 布局来源于当前产品，不把示例当强制模板。
- [ ] 桌面 / 移动可读，没有横向溢出，交互目标与焦点可用。
- [ ] Acrylic 关闭透明或模糊不可用时可读；强制颜色模式保留系统反馈。
- [ ] 减少动态效果时无非必要位移，交互不依赖动画回调。
- [ ] 详情可打开 / 关闭 / Escape；焦点被限制并返回来源，底层滚动与状态未被清空。
- [ ] 静态数据明确标注；无伪造动态信息、无限轮播或周期性重演入场。
- [ ] 运行基础检查与真实浏览器检查，注明未覆盖的情境，不声称全面无障碍认证。