先固定需求和内容
这组三个页面使用同一份需求：为一个虚构的项目管理工具“轻舟”制作介绍页，包含产品介绍、三项任务和三段功能说明。三份页面的主要文案与HTML结构相同，只调整视觉规则。
示例是 Moodalo 本次自制并实际渲染的前端页面，用于说明风格选择的影响；它们不是原品牌产品、官方模板或外部模型效果承诺，也不包含真实业务数据。
查看三份实际页面
Vercel
黑白层级、细线分隔、紧凑而清晰的工作区。
ElevenLabs
温暖纸色、舒展排版，克制使用蓝色与橙色。
Grafana Labs
浅灰画布、蓝色操作信号，渐变只用于展示区域。
观察哪些部分发生了变化
比较背景与内容面的关系、标题的大小与紧凑程度、分隔线和留白，以及强调色出现的位置。不要只比较“用了什么颜色”：同一颜色占多大面积、放在什么组件上，同样会改变页面气质。
这组演示使用本机可用的字体回退，不分发第三方字体，也没有逐像素复制原品牌页面。需要精确还原字体时，请先确认相应字体的可用来源。
把比较方法用于自己的项目
先固定功能和文案，分别套用少量候选规范，再按你的受众、内容密度和使用场景选择。确定方向后，将组件逐步统一，避免把三套规范混在同一个页面。
用于实际项目时，先把所选模板的 ZIP 文件或本地路径交给 Agent，由它解压并读取其中的 tailwind-v4.css、variables.css 和 design-tokens.json，使用已有定义；再打开 AGENT.md 的 Original website 核对原始网站，不能只根据演示图猜测。
选定一份模板后，可复制完整任务。比较多份模板时分别使用各自的 ZIP 与参考目录，不把几套参数混在一次实现里。
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。