下载包里有什么
| 文件 | 主要用途 |
|---|---|
| DESIGN-compact.md | 先理解整体风格和主要规则。 |
| DESIGN.md | 读取更详细的设计说明及代码示例。 |
| tailwind-v4.css | 为使用 Tailwind v4 的项目提供样式定义。 |
| variables.css | 在普通 CSS 项目中参考或引入变量。 |
| design-tokens.json | 读取结构化颜色、字体与间距等参数。 |
| AGENT.md | 向 Agent 说明文件阅读顺序、实施要求及原始网站。 |
下载包包含上述六份设计规范资料。把 ZIP 文件或本地路径提供给 Agent，由它解压、定位并读取文件，再结合现有项目实现页面。资料用于指导实现，并非已经完成的业务应用。
无论项目采用哪种技术栈，先让 Agent 同时读取 tailwind-v4.css、variables.css 和 design-tokens.json，按文件中的真实定义应用颜色、字体、间距与组件参数，不能自行编造。还要打开 AGENT.md 的 Original website，参考原始网站的布局、排版和组件表现。无法读取或核对的部分先说明并请你确认。
要把这套资料用于当前项目，可复制完整任务，在“页面需求”中说明需要接入的页面与功能：
ZIP 文件：<填写 ZIP 文件的完整本地路径>
页面需求：<填写要实现的页面、文案和功能>
请在当前项目中完成以下任务：
1. 由你检查 ZIP 的目录结构，在项目内建立独立的设计参考目录，
解压并定位文件。保留原 ZIP 和已有项目文件；有同名内容时先说明，
不直接覆盖，也不要要求我手动解压或逐个搬运文件。
2. 读取解压后的全部六份文件：
AGENT.md
DESIGN-compact.md
DESIGN.md
tailwind-v4.css
variables.css
design-tokens.json
按 AGENT.md 的说明和阅读顺序理解设计规范。
3. 打开 AGENT.md 中 Original website 对应的原始网站，
实际观察布局、颜色比例、字体层级、间距与组件表现。
不要只凭品牌印象或自己的记忆设计。
4. 必须读取并使用 Tailwind、CSS 和设计 Token 中已有的真实定义，
包括颜色、字体、间距、圆角与组件参数，列出采用值的来源位置。
三份文件都要读取，再根据现有技术栈和版本选择接入方式，
不把样式不加检查地覆盖到全局，也不自行编造参数。
5. 先检查当前项目的技术栈、页面入口、项目规则与公共组件，
再按上方需求实现或修改指定页面。保留无关页面、已有功能和数据，
不扩展到本次需求之外的账号、后台或支付功能。
6. 打开实际页面，对照原始网站和设计文件检查桌面与手机布局，
检查文字、按钮、链接、组件一致性及是否出现横向溢出。
完成后报告修改的文件、启动与打开方式、参考网址、参数来源、
实际执行的检查及结果。
如果 ZIP 路径、文件、参数、字体或原始网站无法读取或核对，
请明确说明缺少什么、需要我确认什么；不要猜测或声称已经检查。复制后替换 ZIP 路径和页面需求，再发给 Agent。
已有 Tailwind 项目
先让 Agent 查看项目使用的 Tailwind 版本与现有入口。tailwind-v4.css 面向 v4，不应不检查版本就替换现有配置。已有项目先选一个页面或局部组件接入，避免一次覆盖全站基础样式。
将文件放入参考目录，明确要求 Agent 比较已有主题、识别同名变量，再决定合并或重命名。保留已有工作，不要直接用下载包覆盖项目。
普通 CSS 项目
检查 variables.css 的作用域与变量命名，再选择引用或合并。仅引入变量不会自动把页面变成模板风格，还需将颜色、字体、间距和组件样式应用到实际元素。
/* 示例路径；接入前先检查项目原有样式与变量 */
@import "./design-reference/variables.css";在不支持这种文件导入方式的构建环境中，按现有项目的样式加载机制接入。