律师AI工具箱（Lawyer AI Toolkit）是一款面向中国执业律师的一站式AI生产力门户，核心价值在于将大语言模型的底层推理机制转化为直观可视的交互体验，让技术门槛归零，让专业效率倍增。它覆盖了律师日常工作的七大核心场景：诉讼文书的快速起草、证据材料的智能整理与目录生成、银行流水的异常识别与资金路径追踪、千页卷宗的关键信息速读与争议焦点梳理、医疗事故与专利技术这类跨领域案件的辅助分析、日报周报等日常办公任务的自动化处理，以及批量案件的策略比对与诉讼走向预测。作品的亮点体现在五个层面：首先是AI推理流程的实时可视化，将LLM内部从输入到注意力机制再到缓存和输出的完整链路转化为动态SVG动画，数据虚线流动、缓存槽位实时闪烁、Token脉冲呼吸，让黑盒AI变得透明可感；其次是电影级的暗色质感设计，融合Apple官网的克制高级感与赛博朋克的霓虹氛围，以噪点胶片纹理叠加香槟金与冰蓝的精密Glow系统，营造出法律行业的权威感与AI的前沿感；第三是高密度信息与清晰层级的平衡，七大工具、四大模型推荐、三步上手指南通过非对称网格、横向滚动和时间线等布局策略保持了极佳的可读性；第四是丰富的微交互系统，磁性按钮跟随、卡片鼠标探照灯、数字滚动计数、AI旁白打字机、粒子浮动和几何圆环旋转共同赋予页面呼吸感；最后是主题可扩展架构，通过十二处占位符设计，整个页面可以无缝迁移至医疗AI、教育AI、金融AI等任意垂直领域而无需改动技术实现。
所有作品均通过 EdgeOne Makers Skill 生成并部署，具备CDN加速、安全防护能力，可按需接入后端服务。获取 Prompt 或 Skill后，在WorkBuddy中按指引操作（含 EdgeOne Makers Skill 安装步骤等），即可生成并上线你的同款网站。
Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills， then deploy to EdgeOne Makers.
帮我做一个【主题名称】的单页官网。
我想要那种很深很深的深色背景，不是纯黑，要带点质感和温度，像高端电影片头或者顶级科技产品发布会的那种氛围。颜色上用暗色打底，然后用一些高级的暖金色和冰蓝色做点缀，整体显得既专业又有科技感。文字要清晰易读但别太刺眼，别用纯白色。
页面从上到下大概分这几个部分：
1. 顶部导航栏
固定在最上面，滚动的时候有点毛玻璃效果，往下滚自动藏起来，往上滚再滑出来。左边放 logo 和品名，中间几个锚点链接，右边一个行动按钮。移动端就把中间链接收掉，只留 logo 和按钮。
2. 首屏（Hero）
这是最重要的视觉区，左右分栏。左边放文案，右边放一个动态的 AI 流程可视化，这是我最想要的核心效果。
左边文案区：顶部来一个小标签，比如【顶部标签】，然后是大标题，分两行，第二行我想做成那种空心描边字，鼠标放上去会填充发光，很酷。下面跟一句副标题概括核心价值。再下面放两个按钮，主按钮金色，次按钮幽灵边框。按钮要做成鼠标靠近时会微微跟着光标动的磁性效果，很细腻。
右边视觉区：先铺一层缓慢呼吸的光晕做背景，然后把 AI 推理流程画成动画，从左到右展示数据怎么流进去、经过中间的处理模块、再从右边输出。要有粒子在飘，连线要有虚线流动的效果，像数据真的在管道里跑。中间的处理模块要有旋转的圆环和闪烁的格子，看起来像在实时运算。SVG 下面再放一个 AI 旁白的打字机效果，一行一行循环出现，前缀有个闪烁的符号，像终端里的感觉。整体入场时左边从左滑入，右边从右滑入，有先后节奏。
3. 数据背书区
放几个大数字卡片，比如【数据1：70%】【数据1描述：效率提升】、【数据2】、【数据3】。数字要做得很大很醒目，用渐变色。滚动到视口的时候数字从 0 开始往上跳到目标值，带百分比后缀。卡片 hover 的时候顶部有条光带扫进来。
4. 功能展示区
标题区先放一个小编号标签【模块1标签】，然后是大标题【模块1标题：7大核心功能】。下面用卡片网格展示【功能数量】个功能，比如：
【功能1名称】，【功能1描述】
【功能2名称】，【功能2描述】
每张卡片包括图标、名称、一句话描述和几个标签。卡片 hover 时边框发光，整体往上浮起来。还有个细节：鼠标在卡片上移动时，卡片内部要有一个淡淡的光斑跟着鼠标走，像探照灯扫过表面。
5. 推荐区
标题【模块2标签】+【模块2标题】。做成横向可滑动的卡片条，每张卡片展示一个推荐项，比如【推荐项1】【推荐项2】等。支持手指滑动和鼠标滚轮横向滚动。卡片上有彩色标签区分类型。
6. 上手步骤区
标题【模块3标签】+【模块3标题】。用时间线的形式展示【步骤数量】步上手流程，比如【步骤1】到【步骤2】到【步骤3】。左边一条垂直的渐变时间线，右边是步骤节点，圆形编号徽章，hover 时变金色放大。
7. 行动号召区（CTA）
大背景区，上下有细边框。背景里放两个缓缓旋转的巨大光晕做装饰。文案号召用户行动，配一个醒目的金色主按钮。
8. 页脚
居中放免责声明，比如【页脚文案】。然后放品牌名和年份。
整体感觉上，我希望：
动画要丰富但不浮夸，滚动的时候各个区块依次淡入飘上来，有层次感，不要所有东西一起动。
顶部要有一条细细的阅读进度条，随着往下读慢慢变长。
当前看到哪个区块，导航栏对应的链接要高亮。
风格上参考【风格参考，例如：Apple 官网的克制高级感 + 赛博朋克的霓虹氛围】。
技术约束：
必须是单文件 HTML，所有 CSS 和 JavaScript 都写在里面。
可以用 Google Fonts 引入字体，但不要用 React、Vue、Tailwind 这些外部框架。
动画用 CSS 或原生 JS 实现，SVG 动画也用 CSS 控制。
要能在手机和电脑上正常看，响应式做好。
直接输出完整可运行的 HTML 代码。感谢支持
如果你觉得这些作品很酷，给我们的 Github 仓库一个 Star