先选一个与你的页面接近的模板
从你要做的页面出发：产品介绍页、工具工作区，还是内容展示页？在首页用品牌、颜色、字体或氛围搜索，再进入详情比较预览。
模板保留原名，页面说明为中文。首个模板可由已验证的账号免费领取；确认后锁定这一份，可重复下载并查看全文。后续模板为 ¥9.9 / 份，一次付费。
领取或购买成功后，从详情页或“已购买”进入下载。把下载的 ZIP 文件或它的完整本地路径交给 Agent，由它解压并读取设计文件，无需你手动解压。
把 ZIP 交给 Agent 处理
让 Agent 检查压缩包结构，在当前项目内创建参考目录并解压，保留下载文件的原名。下面是处理结果示意，不需要你手动建立目录或逐个整理文件：
my-project/
design-reference/
DESIGN.md
DESIGN-compact.md
tailwind-v4.css
variables.css
design-tokens.json
AGENT.md先让 Agent 读取 AGENT.md 和 DESIGN-compact.md，理解整体风格；实现具体页面或组件前，再读取 DESIGN.md。原始下载文件和 Agent 说明保留原文。
AGENT.md 是本模板的使用说明，不要直接覆盖项目已有的 AGENTS.md 或其他规则文件。
实现前还必须让 Agent 同时读取 tailwind-v4.css、variables.css 和 design-tokens.json，使用文件中已有的实际定义。从 AGENT.md 的 Original website 取得原始网站地址，打开网站核对布局、排版和组件表现，不能凭印象猜测。
给 Agent 一份明确的任务
在项目根目录打开你正在使用的编程 Agent，复制下方整段提示词。只需替换 ZIP 的实际路径和页面需求，再发给 Agent；解压、读取和实施步骤都已包括。
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、CSS 和设计 Token 的实际定义，而不是自行猜值？
- 是否实际打开并参考了 AGENT.md 中的原始网站？
- 配色、文字层级、间距是否来自规范，还是 Agent 另选了一套？
- 按钮、输入框和内容区是否保持同一套规则？
- 手机上能否阅读、操作，是否出现横向溢出？
- 规范提及的字体或图片未包含在包内时，是否使用了明确的替代，而非声称已经附带？
发现偏差时，指出具体位置和对应规则，再让 Agent 修正。规范提供设计依据，最终页面仍需要结合你的真实内容和技术栈验收。