0 你需要准备什么
- 一台能上网的电脑或手机，推荐用 Chrome / Edge / Safari 等现代浏览器。
- 一个 DeepSeek 开放平台 账号（用于申请 API Key，按官方计费规则使用）。
- 无需安装 Node、无需本地服务器——每个工具就是单个 HTML 文件，双击或通过静态站点打开均可。
这些不只是工具，每一个都是微型产品
100HTML 里的每一个 HTML 文件，都能完成从用户输入 → AI 处理 → 结果输出的完整闭环。 它不依赖后端服务器，不需要安装环境，打开浏览器就能交付价值——本质上，一个文件就是一个最小可行产品（MVP）。
一个文件，一个闭环：
用户打开 HTML → 输入需求 → 调用 DeepSeek API → 流式生成结果 → 复制 / 导出 → 完成
为什么这很重要？当你想从 Web 上抽离或构建自己的工具工作流时，最好的方式是先用 HTML 把整个流程实现，在这个过程中理解如何与 API 对接。这是所有工具开发的核心能力。
然后呢？在 HTML 原型跑通之后，你可以选择升级——搭建独立后端，或用前后端框架构建更复杂的工具网站和产品。HTML 单文件是起点，不是终点。
不想写代码？完全没问题。你也可以让 Claude Code、Cursor 等 AI 编码工具帮你直接生成完整工具。本项目里的大量工具，本身就是通过 Vibe Coding 创建的。无论哪条路径，理解底层原理都会让你走得更远。
第一次使用？按下面顺序做即可
1 申请 DeepSeek API Key
- 打开 DeepSeek 开放平台，登录后在「API Keys」页面创建密钥。
- 妥善保存 Key（形如
sk-…），不要发到公开群组或贴到 GitHub。 - 费用与额度以 DeepSeek 官方说明为准；本站工具只是把 Key 存在你的浏览器里用来调用 API。
2 在首页保存「全局配置」
回到 100HTML 首页，右上角点 快速开始 → 打开配置面板，把 Key 填进 DeepSeek API Key，选好默认模型后点保存。
为什么一般只要在首页填一次 Key？
设计思路就是这样：你在首页保存好 DeepSeek 的 Key 之后，再打开本站其它工具页面时，它们会自动去读同一份「已保存的设置」，通常不用每个页面再填一遍，省去重复操作。
有没有例外？极少数页面可能因为历史版本或暂时 bug，页面上还留着「单独填写 Key」的入口——若你碰到了，就按该页面自己的提示再填一次即可；这不是常态，大部分工具都跟首页配置通用。
Key 会去哪？Key只存在你自己这台电脑的浏览器里（相当于浏览器帮你本地记一笔账），用来只跟 DeepSeek 官方接口通信；100HTML 这边没有统一服务器替大家收 Key，也不会把你的 Key 转发到其它莫名其妙的地方。
拷页面给同事能不能用？可以。你把某个工具对应的 HTML 文件复制、发给同事后，对方只要在自己浏览器里同样配置好 DeepSeek Key（或先用首页保存一次），一般就能直接用了——工具本质是静态网页，不依赖我们单独再开一台「会员后台」。
（给动手改代码的同学一句备注：项目里把这份设置存在浏览器的 global_llm_config 里；保存时要在原有内容上追加，别把整份设置一把覆盖成只剩 Key，以免冲掉别的条目。）
3 找到想用的工具（搜索 / 分类 / 平台标签）
- 首页顶部有搜索框，可搜工具名或描述里的词；桌面端可用 ⌘/Ctrl + K 聚焦搜索。
- 按分类圆钮能缩小范围；按平台（如小红书、公众号）可筛选带对应标签的工具。
- 点进任意卡片即打开工具页面；若提示没有 Key，回到首页再检查配置是否保存成功。
4 选哪个模型？（V4 Flash 还是 V4 Pro）
deepseek-v4-flash
DeepSeek V4 Flash，适合大多数写作、改写、对话，响应快，当作默认即可。
deepseek-v4-pro
DeepSeek V4 Pro，适合复杂推理；界面里可能会单独展示「思考过程」再出正文，属正常现象。
隐私与数据放在哪
Key 只在你自己浏览器里，对接的是 DeepSeek。我们不会替你统一保管 Key，也不会把 Key 发到第三方；你使用 AI 功能时的请求，按 DeepSeek 的规则由他们处理。
对话内容：本站工具大多是纯前端页面，没有「我们站上的聊天数据库」替你长期存记录；具体数据如何留存，以 DeepSeek 官方说明和你本地浏览器习惯为准。使用前请阅读并遵守 DeepSeek 服务条款与当地法规。
想改界面或自己写工具？先看技术栈
仓库里很多页面是单文件 HTML：Tailwind、图标与脚本用 CDN 引入，复制即用。复杂交互的新工具可能用 Alpine.js，老工具常用 Vue 3，按页面头部引用判断即可。
Alpine.js · 轻量
适合表单少、状态简单的工具；手写 HTML 感强，改起来快。
Vue 3 · 复杂界面
适合多面板、长流程、强响应式布局的「重型」工具。
智能内核
DeepSeek V4 Flash / V4 Pro
官方 API
全站工具共用同一套 Key 与模型配置逻辑，便于你 fork 后做自己的 Agent Skills 页面。
进阶 · 不写脚手架也能迭代
Vibe Coding：用 AI 改单页 HTML
已会用工具后，若你想克隆一个页面改成自己的 Agent 工作流，可以按下面三步：复制模板 → 用 Cursor / ChatGPT 等描述改动 → 本地打开 HTML 反复试。 这与「新手四步」不冲突；不会写代码也可以只完成前几步，照样使用成品工具。
1
复制模板
在仓库或首页里选一个功能接近的 .html，复制为新文件（例如从写作类工具开始）。
2
自然语言改需求
把文件交给 AI，说清楚界面与交互，例如：「保留左侧表单，右侧改为 Markdown 预览，并加导出 TXT」。
3
本地打开迭代
无需 npm install，双击即用；不对味就继续让 AI 改，直到交互顺手。
自写工具时常用代码片段
以下与站内多数工具一致：从 global_llm_config 读 Key，请求走 DeepSeek 官方 /v1/chat/completions。
读取全局 DeepSeek Key
写「保存配置」的代码时：要在原有设置上补上新字段，不要一口气整份覆盖成只有 Key，否则可能清掉其它工具写进去的内容。
try {
const config = JSON.parse(localStorage.getItem('global_llm_config') || '{}');
const apiKey = config.deepseek;
if (!apiKey) {
alert('请先在 100HTML 首页配置 DeepSeek API Key！');
return;
}
// 使用 apiKey ...
} catch (e) {
alert('配置文件解析失败');
}调用 DeepSeek（非流式示例）
生产环境推荐使用 流式 SSE，可参考站内 chat_writer.html 等文件的实现。
async function callDeepSeekOnce(userInput, apiKey) {
const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: 'deepseek-v4-flash',
messages: [
{ role: 'system', content: '你是一个专业的中文写作助手。' },
{ role: 'user', content: userInput }
],
temperature: 0.7
})
});
if (!response.ok) throw new Error('API 请求失败');
const data = await response.json();
return data.choices[0].message.content;
}准备好打开第一个微型产品了吗？
先完成首页 Key 配置，再从搜索或分类里任选一个工具——每一个都能独立完成从输入到输出的完整闭环。
想自己做工具？试试 Vibe Coding，复制一个 HTML 文件就能开始迭代你自己的微型产品。