Hermes Agent智能代理
作者CaVaN_9类型Prompt
作品介绍
本作品以Prompt精准驱动生成、全流程优化Hermes Agent安装导览单页，解决原页面样式混乱、交互生硬、控制台报错等问题，实现视觉与体验双升级。适用于AI工具部署指引、技术文档可视化、Prompt前端生成参赛场景。采用暗金科技风统一视觉风格，全设备响应式适配；搭载代码一键复制、Toast提示、FAQ平滑折叠、滚动导航高亮等流畅交互，零BUG无报错。单文件内嵌CSS/JS，无外部依赖，Prompt指令闭环可控，可直接复现完整成品，兼具实用性与参赛展示价值。
Prompt 内容
所有作品均通过 EdgeOne Makers Skill 生成并部署，具备CDN加速、安全防护能力，可按需接入后端服务。获取 Prompt 或 Skill后，在WorkBuddy中按指引操作（含 EdgeOne Makers Skill 安装步骤等），即可生成并上线你的同款网站。
你是顶级前端工程师+UI交互设计师，精通响应式单页开发、现代视觉设计、流畅交互实现，严格按照以下要求输出可直接部署、无外部依赖、零报错、风格高度统一的完整HTML单页文件（内嵌CSS+JS），用于AI Prompt赛道参赛，成品需满足视觉高级、交互顺滑、功能完整、新手友好四大核心标准。
一、页面核心定位
页面主题：Hermes Agent智能代理 安装部署导览页
目标用户：零基础安装用户
核心目标：解决原页面“文件不支持、样式混乱、交互生硬、控制台报错”问题，实现风格统一+交互全优化
二、视觉风格规范（强制统一）
1. 主色调：暗金色 #D4AF37 为主色，深灰 #1E1E2E 为背景，白色 #FFFFFF、浅灰 #F5F5F7 为辅助色，全页面色彩无冲突、无杂色
2. 布局：卡片式模块化、居中对齐、充足留白、层级清晰
3. 质感：圆角8–12px、轻阴影、滚动毛玻璃、平滑渐变，无生硬边框
4. 字体：无衬线字体（Inter/微软雅黑），字号层级分明，极致易读
5. 响应式：100%适配PC/平板/手机，移动端自动适配
三、页面结构（必须完整包含）
1. 顶部导航栏：固定定位，滚动时毛玻璃半透明效果
2. 欢迎Banner：主题标题+简短说明，高端视觉
3. 分步安装流程：步骤卡片、高亮当前步骤、清晰引导
4. 环境要求区：简洁列表，一目了然
5. 代码复制区：可一键复制，带复制成功提示
6. FAQ折叠面板：常见问题，点击展开/收起
7. 页脚：简洁版权信息，无冗余内容
四、交互优化（强制实现）
1. 代码一键复制：点击复制，弹出Toast轻提示（2秒自动消失）
2. FAQ平滑展开/折叠：带动画，无生硬切换
3. 导航滚动高亮：页面滚动时，导航自动定位当前区域
4. 回到顶部按钮：滚动显示，点击平滑返回顶部
5. 全局动效：元素加载渐入、hover微动、过渡动画统一
6. 零控制台报错、零样式冲突、零功能BUG
五、代码规范（强制遵守）
1. 单文件输出：HTML内嵌全部CSS/JS，无需外部链接/库
2. 代码整洁：缩进规范、注释清晰、无冗余代码
3. 兼容性：兼容Chrome/Firefox/Safari/Edge主流浏览器
4. 性能优化：图片懒加载、代码精简、加载极速
六、输出要求（最终交付）
1. 直接输出完整可运行的HTML代码，不添加任何解释文字、不省略代码
2. 保存为index.html可直接打开运行，页面完整可用
3. 成品符合参赛标准：视觉高级、交互流畅、功能完整、无缺陷、风格统一
Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Makers.感谢支持
如果你觉得这些作品很酷，给我们的 Github 仓库一个 Star