-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathproject_for_agents.html
More file actions
180 lines (166 loc) · 11.5 KB
/
project_for_agents.html
File metadata and controls
180 lines (166 loc) · 11.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100HTML 项目导读（供 AI Agent 阅读）</title>
<meta name="description" content="面向编程助手与自动化 Agent 的仓库说明：架构、目录、不变量与改动注意事项。低样式、结构化 HTML，便于解析与检索。">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://100html.com/project_for_agents.html">
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon-180.png">
<style>
/* 刻意保持轻量：无 UI 框架，方便 Agent 抓正文与结构 */
:root { color-scheme: light dark; }
body {
font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Sans SC", sans-serif;
line-height: 1.55;
max-width: 52rem;
margin: 0 auto;
padding: 1rem 1.25rem 2.5rem;
color: #111;
background: #fafafa;
}
@media (prefers-color-scheme: dark) {
body { color: #e8e8e8; background: #141414; }
pre, code { background: #252525; color: #eee; }
th, td { border-color: #444; }
h1 { border-color: #444; }
}
h1 { font-size: 1.35rem; font-weight: 700; border-bottom: 1px solid #ccc; padding-bottom: 0.4rem; margin-top: 0; }
h2 { font-size: 1.08rem; font-weight: 700; margin: 1.6rem 0 0.5rem; }
h3 { font-size: 0.98rem; font-weight: 600; margin: 1.15rem 0 0.4rem; }
p, li { font-size: 0.92rem; }
ul, ol { padding-left: 1.25rem; }
li { margin: 0.2rem 0; }
code, pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82rem; }
code { background: #e8e8e8; padding: 0.12em 0.35em; border-radius: 3px; }
pre {
background: #e8e8e8;
padding: 0.75rem 1rem;
border-radius: 6px;
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
}
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.5rem 0 1rem; }
th, td { border: 1px solid #bbb; padding: 0.4rem 0.55rem; text-align: left; vertical-align: top; }
th { font-weight: 600; background: rgba(0,0,0,0.04); }
dl { font-size: 0.92rem; margin: 0.5rem 0; }
dt { font-weight: 600; margin-top: 0.5rem; }
dd { margin: 0.2rem 0 0 1rem; }
.meta { font-size: 0.85rem; color: #555; margin: 0.35rem 0 1rem; }
@media (prefers-color-scheme: dark) { .meta { color: #aaa; } }
.path { word-break: break-all; }
nav.top { font-size: 0.88rem; margin-bottom: 1rem; }
nav.top a { color: #2563eb; }
@media (prefers-color-scheme: dark) { nav.top a { color: #93c5fd; } }
hr { border: 0; border-top: 1px solid #ccc; margin: 1.5rem 0; }
</style>
</head>
<body>
<nav class="top"><a href="index.html">← 返回 100HTML 首页（人类用）</a></nav>
<header>
<h1>100HTML / html-gemini-project-new — 面向 AI Agent 的项目导读</h1>
<p class="meta">
文档用途：当你在对话中「获得了本仓库源代码」时，可把本页 <strong>文件路径</strong> 或 <strong>URL</strong> 提供给编程类 Agent，作为结构与约定的一页式索引。
形态：纯静态 HTML + 极少量内联样式（非 Markdown 单文件），便于工具同时利用 DOM 结构与可读正文。
</p>
</header>
<main>
<section aria-labelledby="how-to-use">
<h2 id="how-to-use">一、推荐给 Agent 的引用方式</h2>
<ul>
<li>仓库根目录相对路径：<code class="path">project_for_agents.html</code></li>
<li>部署后公开 URL（若站点根与仓库一致）：<code class="path">https://100html.com/project_for_agents.html</code></li>
<li>与面向新手的教程区分：人类步骤说明见 <code class="path">tools/ai_basics/guide.html</code>；本页侧重 <strong>仓库事实、目录、改动约束</strong>。</li>
</ul>
</section>
<section aria-labelledby="summary">
<h2 id="summary">二、项目是什么（事实摘要）</h2>
<table>
<thead>
<tr><th>维度</th><th>说明</th></tr>
</thead>
<tbody>
<tr><td>形态</td><td>500+ 个 <strong>单文件 HTML 微型产品</strong>（含二级索引子页面）+ 聚合首页 <code>index.html</code>；多数用 CDN 引入 Tailwind / Vue 3 / Alpine.js，无构建步骤。每个文件都是可独立运行的完整应用，覆盖输入 → AI 处理 → 输出的闭环。</td></tr>
<tr><td>模型</td><td>工具侧统一对接 <strong>DeepSeek API</strong>；常用模型名 <code>deepseek-chat</code>（V3）、<code>deepseek-reasoner</code>（R1）。不将「其他厂商模型」写进产品事实 unless 代码中真实存在。</td></tr>
<tr><td>鉴权</td><td>用户 API Key 存浏览器 <code>localStorage</code> 的 <code>global_llm_config</code>（JSON）。请求从用户浏览器发往 DeepSeek，仓库不托管统一后端账号系统。</td></tr>
<tr><td>语言</td><td>面向用户文案以中文为主；代码标识符多为英文。</td></tr>
</tbody>
</table>
</section>
<section aria-labelledby="philosophy">
<h2 id="philosophy">二.五、设计理念（Agent 理解项目时的关键上下文）</h2>
<p>本项目的核心理念：<strong>每一个 HTML 文件不只是一个工具，而是一个能独立交付价值的微型产品。</strong></p>
<ul>
<li><strong>单文件完整闭环</strong>：用户打开 HTML → 输入需求 → 调用 API → 流式生成 → 复制/导出 → 完成。一个文件即一个最小可行产品（MVP），无需后端、无需构建、无需部署。</li>
<li><strong>HTML 是起点，不是终点</strong>：先用 HTML 实现完整流程并理解 API 对接模式，再决定是否升级为独立后端或前后端项目。这条路径适用于人类开发者和 Agent Skills 构建。</li>
<li><strong>对 Agent 的意义</strong>：Agent Skill 的核心模式（接收输入 → 调用 API → 处理输出 → 交付结果）与 HTML 工具完全一致。本仓库中的工具既是可用产品，也是 Agent 生成新工具时的参考范本。</li>
<li><strong>Vibe Coding 友好</strong>：大量工具本身通过 AI 编码工具（Cursor / Claude Code）生成。Agent 可以复制已有工具、修改 Prompt 和 UI，快速生成新的微型产品。</li>
</ul>
<p>当 Agent 被要求创建新工具时，应将其视为构建一个<strong>可独立运行的微型产品</strong>，而非单纯的代码片段。</p>
</section>
<section aria-labelledby="layout">
<h2 id="layout">三、目录与关键文件（Agent 优先读这些）</h2>
<pre><code>仓库根目录/
├── 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 # 根目录下单文件工具（历史与独立页）</code></pre>
<p>首页通过 <code>data/categories.js</code> 里的 <code>toolSources</code> 数组并行加载各 <code>tools/<name>/tools.js</code>；每个 tools.js 通常向 <code>window.toolCollections</code> 合并条目。</p>
</section>
<section aria-labelledby="invariants">
<h2 id="invariants">四、改动代码时的硬约束（高优先级）</h2>
<ol>
<li><strong>不要整体覆盖 localStorage</strong>：保存 <code>global_llm_config</code> 时必须与已有对象 <strong>合并</strong>（浅合并即可的典型模式：读出 JSON → 展开旧对象 → 再 <code>setItem</code>），禁止 <code>setItem</code> 仅写入本工具字段导致其它键丢失。</li>
<li><strong>DeepSeek 流式接口</strong>：SSE 解析需兼容 <code>delta.reasoning_content</code>（R1）与 <code>delta.content</code>；Endpoint 多为 <code>https://api.deepseek.com/v1/chat/completions</code>，以仓库内现有工具为准。</li>
<li><strong>新增对用户的工具</strong>：除新增 HTML / tools.js 外，通常需更新 <code>index.html</code> 卡片或通过 <code>tools.js</code> 注册并由分类承载；并遵守既有 UI 模式（见 <code>CLAUDE.md</code> / <code>specs/</code>）。</li>
<li><strong>deploy</strong>：若项目使用脚本部署，编辑根目录 HTML 源文件，勿直接依赖 <code>dist/</code> 为唯一真理源（以仓库说明为准）。</li>
</ol>
</section>
<section aria-labelledby="tech">
<h2 id="tech">五、技术栈速查</h2>
<dl>
<dt>UI / 样式</dt>
<dd>Tailwind CSS（CDN）、少量自定义 CSS；图标常见 Font Awesome 或 Lucide（因页面而异）。</dd>
<dt>脚本框架</dt>
<dd>较新工具倾向 Alpine.js；较早或复杂页用 Vue 3（CDN）。以目标 HTML 头部引用的库为准。</dd>
<dt>运行方式</dt>
<dd>静态打开或任意静态托管；无 Node 构建必填项。</dd>
</dl>
</section>
<section aria-labelledby="human-docs">
<h2 id="human-docs">六、人类可读的长文档（按需）</h2>
<ul>
<li><code>CLAUDE.md</code> — 助手开发指南、API 模式摘录</li>
<li><code>specs/README.md</code> — 规范索引</li>
<li><code>tools/ai_basics/guide.html</code> — 终端用户上手</li>
<li><code>docs/update/</code> — 按日期的变更说明</li>
</ul>
</section>
<section aria-labelledby="prompt-hint">
<h2 id="prompt-hint">七、可粘贴给 Agent 的短提示（示例）</h2>
<pre><code>请先阅读仓库根目录 project_for_agents.html（或打开该文件），
遵守其中「改动代码时的硬约束」再修改本仓库。
实现功能时对照已有单文件 HTML 的写法，并保持 global_llm_config 的合并写入策略。</code></pre>
</section>
</main>
<hr>
<footer>
<p style="font-size:0.85rem;color:#666;">本页随仓库维护；与对外营销文案不一致时，以源码与 CLAUDE.md 为准。</p>
</footer>
</body>
</html>