-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathindex.html
More file actions
341 lines (322 loc) · 17.3 KB
/
Copy pathindex.html
File metadata and controls
341 lines (322 loc) · 17.3 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenSpec — AI 原生规范驱动开发系统</title>
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
<link rel="shortcut icon" href="assets/favicon.svg">
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({id:"L8ugJYkwDPLPZWeU",ck:"L8ugJYkwDPLPZWeU"})</script>
</head>
<body>
<!-- 粒子背景 -->
<canvas id="particles-canvas"></canvas>
<!-- 顶部导航栏 -->
<header class="top-nav">
<div class="nav-brand">
<img src="assets/openspec_pixel_dark.svg" alt="OpenSpec" class="nav-logo" />
<span class="nav-title">OpenSpec</span>
<span class="nav-version">v2.x</span>
</div>
<nav class="nav-links">
<a href="#overview" class="nav-link">概览</a>
<a href="#getting-started" class="nav-link">快速开始</a>
<a href="#concepts" class="nav-link">核心概念</a>
<a href="#commands" class="nav-link">命令参考</a>
<a href="#cli" class="nav-link">CLI</a>
<a href="#workflows" class="nav-link">工作流</a>
<a href="#customization" class="nav-link">定制化</a>
<a href="https://github.com/radebit/OpenSpec-Docs-zh" target="_blank" class="nav-link nav-link-github">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
本项目
</a>
<a href="https://github.com/Fission-AI/OpenSpec" target="_blank" class="nav-link nav-link-github nav-link-upstream">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
官方
</a>
</nav>
<button class="mobile-menu-btn" id="mobileMenuBtn">
<span></span><span></span><span></span>
</button>
</header>
<!-- 侧边栏 -->
<aside class="sidebar" id="sidebar">
<div class="sidebar-content">
<div class="sidebar-section">
<div class="sidebar-section-title">入门</div>
<a href="#overview" class="sidebar-link active">项目概览</a>
<a href="#installation" class="sidebar-link">安装指南</a>
<a href="#getting-started" class="sidebar-link">快速开始</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">核心概念</div>
<a href="#concepts-philosophy" class="sidebar-link">设计哲学</a>
<a href="#concepts-specs" class="sidebar-link">规范 (Specs)</a>
<a href="#concepts-changes" class="sidebar-link">变更 (Changes)</a>
<a href="#concepts-artifacts" class="sidebar-link">产物 (Artifacts)</a>
<a href="#concepts-delta" class="sidebar-link">Delta 规范</a>
<a href="#concepts-schemas" class="sidebar-link">Schema 机制</a>
<a href="#concepts-archive" class="sidebar-link">归档机制</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">工作流命令</div>
<a href="#cmd-propose" class="sidebar-link"><code>/opsx:propose</code></a>
<a href="#cmd-explore" class="sidebar-link"><code>/opsx:explore</code></a>
<a href="#cmd-new" class="sidebar-link"><code>/opsx:new</code></a>
<a href="#cmd-continue" class="sidebar-link"><code>/opsx:continue</code></a>
<a href="#cmd-ff" class="sidebar-link"><code>/opsx:ff</code></a>
<a href="#cmd-apply" class="sidebar-link"><code>/opsx:apply</code></a>
<a href="#cmd-verify" class="sidebar-link"><code>/opsx:verify</code></a>
<a href="#cmd-sync" class="sidebar-link"><code>/opsx:sync</code></a>
<a href="#cmd-archive" class="sidebar-link"><code>/opsx:archive</code></a>
<a href="#cmd-bulk-archive" class="sidebar-link"><code>/opsx:bulk-archive</code></a>
<a href="#cmd-onboard" class="sidebar-link"><code>/opsx:onboard</code></a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">CLI 参考</div>
<a href="#cli-setup" class="sidebar-link">初始化与更新</a>
<a href="#cli-browse" class="sidebar-link">浏览命令</a>
<a href="#cli-validate" class="sidebar-link">验证命令</a>
<a href="#cli-lifecycle" class="sidebar-link">生命周期命令</a>
<a href="#cli-workflow" class="sidebar-link">工作流命令</a>
<a href="#cli-schema" class="sidebar-link">Schema 命令</a>
<a href="#cli-config" class="sidebar-link">配置命令</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">进阶</div>
<a href="#workflows" class="sidebar-link">工作流模式</a>
<a href="#customization" class="sidebar-link">自定义配置</a>
<a href="#supported-tools" class="sidebar-link">支持的工具</a>
<a href="#multi-language" class="sidebar-link">多语言支持</a>
<a href="#contributing" class="sidebar-link">参与贡献</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">实战指南</div>
<a href="#deep-understanding" class="sidebar-link">深入理解 OpenSpec</a>
<a href="#best-practices" class="sidebar-link">最佳实践</a>
<a href="#hands-on" class="sidebar-link">从零开始实践</a>
<a href="#faq" class="sidebar-link">常见问题 FAQ</a>
</div>
<div class="sidebar-section">
<div class="sidebar-section-title">关于文档</div>
<a href="#about" class="sidebar-link">关于</a>
<a href="#changelog" class="sidebar-link sidebar-link-sub">更新历史</a>
</div>
</div>
</aside>
<!-- 主内容区 -->
<main class="main-content">
<!-- ======================== HERO ======================== -->
<section class="hero-section" id="overview">
<div class="hero-glow"></div>
<div class="hero-content">
<div class="hero-badge">
<span class="badge-dot"></span>
AI 原生 · 规范驱动开发
</div>
<img src="assets/openspec_bg.png" alt="OpenSpec" class="hero-logo" />
<h1 class="hero-title">
让 AI 编码助手<br>
<span class="gradient-text">真正理解你的意图</span>
</h1>
<p class="hero-desc">
OpenSpec 是 AI-Native 的规范驱动开发系统，为 AI 编码助手提供轻量级规范层。
在第一行代码编写之前，先与 AI 对齐需求，让开发过程更可预测、更高效。
</p>
<div class="hero-philosophy">
<div class="philosophy-item">
<span class="phi-arrow">→</span>
<span>流动而非僵化</span>
</div>
<div class="philosophy-item">
<span class="phi-arrow">→</span>
<span>迭代而非瀑布</span>
</div>
<div class="philosophy-item">
<span class="phi-arrow">→</span>
<span>简单而非复杂</span>
</div>
<div class="philosophy-item">
<span class="phi-arrow">→</span>
<span>存量项目优先</span>
</div>
<div class="philosophy-item">
<span class="phi-arrow">→</span>
<span>从个人项目扩展到企业级</span>
</div>
</div>
<div class="hero-actions">
<a href="#getting-started" class="btn-primary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
快速开始
</a>
<a href="#concepts" class="btn-secondary">了解概念</a>
</div>
<div class="hero-stats">
<div class="stat-item">
<span class="stat-number">20+</span>
<span class="stat-label">支持 AI 工具</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number">MIT</span>
<span class="stat-label">开源协议</span>
</div>
<div class="stat-divider"></div>
<div class="stat-item">
<span class="stat-number">Node 20+</span>
<span class="stat-label">运行环境</span>
</div>
</div>
</div>
</section>
<!-- ======================== 实际演示 ======================== -->
<section class="content-section" id="demo">
<div class="section-header">
<span class="section-tag">演示</span>
<h2>三步完成一个完整变更</h2>
<p>OpenSpec 简化了从想法到实现再到归档的完整开发流程</p>
</div>
<div class="demo-terminal">
<div class="terminal-header">
<div class="terminal-dots">
<span class="dot dot-red"></span>
<span class="dot dot-yellow"></span>
<span class="dot dot-green"></span>
</div>
<span class="terminal-title">AI 对话 — 添加暗色模式</span>
</div>
<div class="terminal-body">
<div class="term-line"><span class="term-prompt">You:</span> <span class="term-cmd">/opsx:propose add-dark-mode</span></div>
<div class="term-line term-output">AI: 已创建 openspec/changes/add-dark-mode/</div>
<div class="term-line term-success"> ✓ proposal.md — 为什么做、做什么</div>
<div class="term-line term-success"> ✓ specs/ — 需求与验收场景</div>
<div class="term-line term-success"> ✓ design.md — 技术实现方案</div>
<div class="term-line term-success"> ✓ tasks.md — 实现任务清单</div>
<div class="term-line term-output"> 准备开始实现！</div>
<div class="term-blank"></div>
<div class="term-line"><span class="term-prompt">You:</span> <span class="term-cmd">/opsx:apply</span></div>
<div class="term-line term-output">AI: 正在实现各项任务...</div>
<div class="term-line term-success"> ✓ 1.1 创建主题上下文 Provider</div>
<div class="term-line term-success"> ✓ 1.2 创建主题切换组件</div>
<div class="term-line term-success"> ✓ 2.1 添加 CSS 变量</div>
<div class="term-line term-success"> ✓ 2.2 接入 localStorage</div>
<div class="term-line term-output"> 所有任务完成！</div>
<div class="term-blank"></div>
<div class="term-line"><span class="term-prompt">You:</span> <span class="term-cmd">/opsx:archive</span></div>
<div class="term-line term-output">AI: 已归档至 openspec/changes/archive/2026-03-10-add-dark-mode/</div>
<div class="term-line term-success"> ✓ 规范已更新。准备好下一个功能！</div>
</div>
</div>
<!-- Dashboard 图片 -->
<div class="dashboard-preview">
<div class="preview-label">OpenSpec 控制台</div>
<img src="assets/openspec_dashboard.png" alt="OpenSpec 控制台预览" class="dashboard-img" />
</div>
</section>
<!-- ======================== 为什么选择 OpenSpec ======================== -->
<section class="content-section" id="why">
<div class="section-header">
<span class="section-tag">价值</span>
<h2>为什么选择 OpenSpec？</h2>
<p>AI 编码助手功能强大，但当需求只存在于聊天记录中时，结果往往难以预测</p>
</div>
<div class="cards-grid">
<div class="feature-card">
<div class="card-icon">🤝</div>
<h3>先对齐再编码</h3>
<p>人与 AI 在写代码前先就规范达成共识，避免方向性偏差带来的大量返工</p>
</div>
<div class="feature-card">
<div class="card-icon">📁</div>
<h3>井然有序</h3>
<p>每个变更都有独立文件夹，包含提案、规范、设计和任务四个产物，清晰可查</p>
</div>
<div class="feature-card">
<div class="card-icon">🌊</div>
<h3>流动灵活</h3>
<p>随时更新任意产物，无需遵守僵化的阶段门控，按自己的节奏推进</p>
</div>
<div class="feature-card">
<div class="card-icon">🔧</div>
<h3>工具生态广泛</h3>
<p>通过 Slash 命令支持 20+ AI 助手，包括 Claude Code、Cursor、Windsurf 等主流工具</p>
</div>
</div>
<div class="compare-section">
<h3>与同类产品对比</h3>
<div class="compare-grid">
<div class="compare-card">
<div class="compare-vs">vs. Spec Kit (GitHub)</div>
<p>Spec Kit 全面但重量级，有严格阶段门控、大量 Markdown 文件、Python 环境依赖。<strong>OpenSpec 更轻量，让你自由迭代。</strong></p>
</div>
<div class="compare-card">
<div class="compare-vs">vs. Kiro (AWS)</div>
<p>Kiro 功能强大但锁定在其 IDE 内，且仅限 Claude 模型。<strong>OpenSpec 支持你现有的全部工具。</strong></p>
</div>
<div class="compare-card">
<div class="compare-vs">vs. 不用规范</div>
<p>没有规范的 AI 编码意味着模糊提示和不可预测的结果。<strong>OpenSpec 在不增加繁文缛节的前提下带来可预测性。</strong></p>
</div>
</div>
</div>
</section>
<!-- ======================== 动态加载区域（入门） ======================== -->
<!-- 安装 + 快速开始 -->
<div id="section-getting-started" class="dynamic-section">
<div class="section-loading"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>
</div>
<!-- ======================== 动态加载区域 ======================== -->
<!-- 核心概念 -->
<div id="section-concepts" class="dynamic-section">
<div class="section-loading"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>
</div>
<!-- 工作流命令参考 -->
<div id="section-commands" class="dynamic-section">
<div class="section-loading"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>
</div>
<!-- CLI 参考 -->
<div id="section-cli" class="dynamic-section">
<div class="section-loading"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>
</div>
<!-- 进阶（工作流/定制/工具/多语言/贡献） -->
<div id="section-advanced" class="dynamic-section">
<div class="section-loading"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>
</div>
<!-- 实战指南（深入理解/最佳实践/从零开始/FAQ） -->
<div id="section-practice-guide" class="dynamic-section">
<div class="section-loading"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>
</div>
<!-- 关于文档（关于/更新历史） -->
<div id="section-about" class="dynamic-section">
<div class="section-loading"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>
</div>
<!-- ======================== 已移除的静态内容（由动态加载替代）======================== -->
<!-- 以上静态内容已拆分为 sections/*.html，由 script.js 动态加载 -->
<!-- 页脚 -->
<footer class="page-footer">
<div class="footer-content">
<div class="footer-brand">
<img src="assets/openspec_pixel_dark.svg" alt="OpenSpec" class="footer-logo" />
<span>OpenSpec</span>
</div>
<div class="footer-links">
<a href="https://github.com/Fission-AI/OpenSpec" target="_blank">GitHub</a>
<a href="https://discord.gg/YctCnvvshC" target="_blank">Discord</a>
<a href="mailto:teams@openspec.dev">团队版</a>
</div>
<div class="footer-copy">
MIT 协议 · OpenSpec 由 Fission AI 维护
</div>
</div>
</footer>
</main>
<!-- 返回顶部按钮 -->
<button class="back-to-top" id="backToTop" onclick="scrollToTop()">↑</button>
<script src="script.js"></script>
</body>
</html>