一、推荐给 Agent 的引用方式
- 仓库根目录相对路径:
project_for_agents.html - 部署后公开 URL(若站点根与仓库一致):
https://100html.com/project_for_agents.html - 与面向新手的教程区分:人类步骤说明见
tools/ai_basics/guide.html;本页侧重 仓库事实、目录、改动约束。
二、项目是什么(事实摘要)
| 维度 | 说明 |
|---|---|
| 形态 | 690+ 个 单文件 HTML 微型产品 + 聚合首页 index.html;多数用 CDN 引入 Tailwind / Vue 3 / Alpine.js,无构建步骤。每个文件都是可独立运行的完整应用,覆盖输入 → AI 处理 → 输出的闭环。 |
| 模型 | 工具侧统一对接 DeepSeek API;常用模型名 deepseek-chat(V3)、deepseek-reasoner(R1)。不将「其他厂商模型」写进产品事实 unless 代码中真实存在。 |
| 鉴权 | 用户 API Key 存浏览器 localStorage 的 global_llm_config(JSON)。请求从用户浏览器发往 DeepSeek,仓库不托管统一后端账号系统。 |
| 语言 | 面向用户文案以中文为主;代码标识符多为英文。 |
二.五、设计理念(Agent 理解项目时的关键上下文)
本项目的核心理念:每一个 HTML 文件不只是一个工具,而是一个能独立交付价值的微型产品。
- 单文件完整闭环:用户打开 HTML → 输入需求 → 调用 API → 流式生成 → 复制/导出 → 完成。一个文件即一个最小可行产品(MVP),无需后端、无需构建、无需部署。
- HTML 是起点,不是终点:先用 HTML 实现完整流程并理解 API 对接模式,再决定是否升级为独立后端或前后端项目。这条路径适用于人类开发者和 Agent Skills 构建。
- 对 Agent 的意义:Agent Skill 的核心模式(接收输入 → 调用 API → 处理输出 → 交付结果)与 HTML 工具完全一致。本仓库中的工具既是可用产品,也是 Agent 生成新工具时的参考范本。
- Vibe Coding 友好:大量工具本身通过 AI 编码工具(Cursor / Claude Code)生成。Agent 可以复制已有工具、修改 Prompt 和 UI,快速生成新的微型产品。
当 Agent 被要求创建新工具时,应将其视为构建一个可独立运行的微型产品,而非单纯的代码片段。
三、目录与关键文件(Agent 优先读这些)
仓库根目录/
├── index.html # 工具目录首页(Vue 3,异步加载 tools/*/tools.js)
├── project_for_agents.html # 本页(Agent 导读)
├── data/
│ ├── categories.js # 分类、platformTags、toolSources 注册表
│ └── sub_index_counts.js # 二级索引子页面计数(若有)
├── tools/
│ ├── ai_basics/
│ │ ├── guide.html # 新手必读(人类)
│ │ └── tools.js # 该分类下工具卡片数据
│ └── <category>/
│ └── tools.js # window.toolCollections 的一部分
├── docs/ # 人类文档、update 日志
├── specs/ # 规范索引
├── help/ # 帮助挂件等
└── *.html # 根目录下单文件工具(历史与独立页)
首页通过 data/categories.js 里的 toolSources 数组并行加载各 tools/<name>/tools.js;每个 tools.js 通常向 window.toolCollections 合并条目。
四、改动代码时的硬约束(高优先级)
- 不要整体覆盖 localStorage:保存
global_llm_config时必须与已有对象 合并(浅合并即可的典型模式:读出 JSON → 展开旧对象 → 再setItem),禁止setItem仅写入本工具字段导致其它键丢失。 - DeepSeek 流式接口:SSE 解析需兼容
delta.reasoning_content(R1)与delta.content;Endpoint 多为https://api.deepseek.com/v1/chat/completions,以仓库内现有工具为准。 - 新增对用户的工具:除新增 HTML / tools.js 外,通常需更新
index.html卡片或通过tools.js注册并由分类承载;并遵守既有 UI 模式(见CLAUDE.md/specs/)。 - deploy:若项目使用脚本部署,编辑根目录 HTML 源文件,勿直接依赖
dist/为唯一真理源(以仓库说明为准)。
五、技术栈速查
- UI / 样式
- Tailwind CSS(CDN)、少量自定义 CSS;图标常见 Font Awesome 或 Lucide(因页面而异)。
- 脚本框架
- 较新工具倾向 Alpine.js;较早或复杂页用 Vue 3(CDN)。以目标 HTML 头部引用的库为准。
- 运行方式
- 静态打开或任意静态托管;无 Node 构建必填项。
六、人类可读的长文档(按需)
CLAUDE.md— 助手开发指南、API 模式摘录specs/README.md— 规范索引tools/ai_basics/guide.html— 终端用户上手docs/update/— 按日期的变更说明
七、可粘贴给 Agent 的短提示(示例)
请先阅读仓库根目录 project_for_agents.html(或打开该文件),
遵守其中「改动代码时的硬约束」再修改本仓库。
实现功能时对照已有单文件 HTML 的写法,并保持 global_llm_config 的合并写入策略。