混合架构哲学
我们拒绝为了技术而技术。在这个项目中，架构的选择完全服务于场景的复杂度。这种"双模"策略让我们既能保持极致的轻量，又能承载复杂的交互。
Alpine.js for Simplicity
用于单点功能工具（如邮件生成、SEO优化）。无构建步骤，引入即用，保持代码极致简洁，如同编写原生 HTML 一样直观。
Vue.js for Complexity
用于深度交互应用（如写作助手、思维导图）。利用 Vue 的响应式系统和组件化思维，管理复杂的状态流转与界面更新。
所有工具共享同一个智能内核。V3 负责快速生成与对话，R1 负责深度推理与逻辑拆解。
0 服务器依赖。 您的 API Key 和聊天记录仅存储在浏览器 LocalStorage 中。我们无法看到您的任何数据。
Vibe Coding 实践手册
"Vibe Coding" 是一种无需深究底层、凭借直觉与 AI 协作的快速开发流。 本项目采用了单文件 HTML 架构，正是为了极致的 Vibe Coding 体验。
Copy & Paste
不要从零开始。浏览我们的工具库，找到一个功能或界面最接近你想法的 HTML 文件（例如 `chat_writer.html`），直接复制一份。
Prompt with AI
将文件扔给 AI (Cursor, Windsurf, 或 ChatGPT)。用自然语言描述你的修改需求。
Run & Iterate
双击打开 HTML 即可运行。没有 `npm install`，没有复杂的构建报错。不满意？继续告诉 AI 修改，直到感觉对味 (Vibe Check Passed)。
常用 Snippets
获取全局 API Key
所有工具都通过读取 localStorage 中的 `global_llm_config` 来共享 Key。在你的新工具中，这样获取 Key：
// 从 localStorage 读取配置
const config = JSON.parse(localStorage.getItem('global_llm_config') || '{}');
const apiKey = config.deepseek;
if (!apiKey) {
alert('请先在首页设置 DeepSeek API Key！');
return;
}调用 DeepSeek API
标准的 Fetch 调用模板，支持流式输出 (Streaming) 的处理稍复杂，建议直接参考 `chat_writer.html` 中的 `fetchStream` 实现。
const response = await fetch('https://api.deepseek.com/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: "deepseek-chat",
messages: [
{ role: "system", content: "你是一个专业的文案助手..." },
{ role: "user", content: userInput }
],
temperature: 0.7
})
});
const data = await response.json();