-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathhome.html
More file actions
335 lines (315 loc) · 17.2 KB
/
Copy pathhome.html
File metadata and controls
335 lines (315 loc) · 17.2 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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{%- assign page_title = page.title | default: site.title -%}
{%- assign page_desc = page.description | default: site.description -%}
{%- assign page_kw = page.keywords | default: site.keywords -%}
{%- assign page_url = site.url | append: page.url -%}
<title>{{ page_title }}</title>
<meta name="description" content="{{ page_desc }}">
<meta name="keywords" content="{{ page_kw }}">
<link rel="canonical" href="{{ page_url }}">
<!-- Open Graph -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{ page_url }}">
<meta property="og:title" content="{{ page_title }}">
<meta property="og:description" content="{{ page_desc }}">
<meta property="og:image" content="{{ site.og_image }}">
<meta property="og:site_name" content="{{ site.title }}">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ page_title }}">
<meta name="twitter:description" content="{{ page_desc }}">
<meta name="twitter:image" content="{{ site.og_image }}">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--primary: #171717;
--on-primary: #ffffff;
--ink: #171717;
--body: #4d4d4d;
--mute: #888888;
--hairline: #ebebeb;
--canvas: #ffffff;
--canvas-soft: #fafafa;
--canvas-soft-2: #f5f5f5;
--bg-card: #fafafa;
--bg-card-hover: #f5f5f5;
--border-soft: #eaeaea;
--link: #0070f3;
--link-deep: #0761d1;
--gradient-start: #007cf0;
--gradient-end: #00dfd8;
--rounded-sm: 6px;
--rounded-md: 8px;
--rounded-lg: 12px;
--rounded-pill: 100px;
--font-sans: -apple-system, BlinkMacSystemFont, Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-sans); color: var(--ink); line-height: 1.5; background: var(--canvas); -webkit-font-smoothing: antialiased; }
/* Nav */
.nav { height: 64px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(255,255,255,0.8); border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-size: 16px; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -0.5px; }
.nav-links { display: flex; gap: 8px; align-items: center; }
.nav-links a { color: var(--body); text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 12px; border-radius: var(--rounded-pill); transition: background 0.15s, color 0.15s; }
.nav-links a:hover { background: var(--canvas-soft-2); color: var(--ink); }
.nav-cta { background: var(--primary) !important; color: var(--on-primary) !important; font-size: 14px !important; font-weight: 500; padding: 6px 16px !important; border-radius: var(--rounded-sm); }
.nav-cta:hover { opacity: 0.9; }
/* Hero with background image */
.hero {
position: relative;
padding: 40px 24px 32px;
text-align: center;
overflow: hidden;
background: linear-gradient(135deg, #f0f4ff 0%, #e8f5e9 100%);
min-height: 280px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.hero-region { position: relative; }
/* hero bg/overlay removed */
.hero-content {
position: relative;
z-index: 2;
max-width: 680px;
}
.hero h1 {
font-size: 40px;
font-weight: 600;
letter-spacing: -1.5px;
line-height: 1.2;
margin-bottom: 16px;
color: var(--ink);
}
.hero .gradient-text {
background: linear-gradient(135deg, var(--gradient-start), #7928ca);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
padding-right: 0.08em;
margin-right: -0.08em;
}
.hero p {
font-size: 16px;
color: var(--body);
max-width: 520px;
margin: 0 auto 32px;
line-height: 26px;
letter-spacing: 0.3px;
}
.hero-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; height: 40px; padding: 0 22px; border-radius: var(--rounded-pill); text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.2s; border: none; cursor: pointer; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.15); transform: translateY(-1px); }
.btn-secondary { background: var(--canvas); color: var(--ink); border: 1px solid var(--hairline); }
.btn-secondary:hover { border-color: var(--ink); }
/* Steps */
.steps { padding: 48px 24px 64px; max-width: 1100px; margin: 0 auto; }
.steps h2 { text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -1px; margin-bottom: 32px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg); padding: 24px 20px; transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; }
.step-card:hover { background: var(--bg-card-hover); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.step-num { font-size: 11px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 12px; display: block; }
.step-card h3 { font-size: 15px; font-weight: 500; margin-bottom: 8px; letter-spacing: -0.3px; }
.step-card p { font-size: 13px; color: var(--body); line-height: 1.6; margin-bottom: 16px; }
.step-card a { color: var(--link); text-decoration: none; font-size: 13px; font-weight: 500; }
.step-card a:hover { text-decoration: underline; }
/* Playbook entry */
.playbook-entry { padding: 56px 24px 24px; background: var(--canvas-soft, #fafafa); }
.playbook-entry-inner { max-width: 1100px; margin: 0 auto; }
.playbook-headline{display:block;text-decoration:none;color:inherit;transition:opacity .15s ease}
.playbook-headline:hover{opacity:.86}
.playbook-headline:hover .playbook-headline-arrow{transform:translateX(4px)}
.playbook-headline-arrow{display:inline-block;transition:transform .2s ease;color:var(--link)}
.playbook-entry h2 { text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -1px; margin: 0 0 10px; }
.playbook-entry .section-sub { text-align: center; font-size: 14px; color: var(--body); margin: 0 0 32px; line-height: 1.6; }
.playbook-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 768px) { .playbook-grid { grid-template-columns: repeat(2, 1fr); } }
.pb-card { display: block; padding: 18px 16px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg); text-decoration: none; color: inherit; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.pb-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); text-decoration: none; }
.pb-emoji { font-size: 26px; display: block; margin-bottom: 8px; }
.pb-card h3 { font-size: 14px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.2px; color: var(--ink); }
.pb-card p { font-size: 12px; color: var(--mute); margin: 0; line-height: 1.4; }
.playbook-cta-wrap { text-align: center; }
.playbook-cta { display: inline-block; padding: 10px 22px; background: var(--ink); color: #fff; border-radius: 100px; text-decoration: none; font-size: 13px; font-weight: 500; transition: opacity 0.15s; }
.playbook-cta:hover { opacity: 0.85; text-decoration: none; }
/* Ecosystem */
.ecosystem { padding: 64px 24px; background: var(--canvas); }
.ecosystem-inner { max-width: 1100px; margin: 0 auto; }
.ecosystem h2 { text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -1px; margin-bottom: 32px; }
.eco-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.eco-card { background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg); padding: 32px 24px; transition: background 0.2s, box-shadow 0.2s, transform 0.2s; }
.eco-card:hover { background: var(--bg-card-hover); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.eco-icon { font-size: 22px; margin-bottom: 14px; display: block; opacity: 0.8; }
.eco-card h3 { font-size: 14px; font-weight: 500; margin-bottom: 6px; letter-spacing: -0.2px; }
.eco-card p { font-size: 13px; color: var(--body); line-height: 1.6; margin-bottom: 12px; }
.eco-card a { color: var(--link); text-decoration: none; font-size: 12px; font-weight: 500; }
.eco-card a:hover { text-decoration: underline; }
/* Docs links */
.docs-section { padding: 56px 24px 72px; max-width: 1100px; margin: 0 auto; }
.docs-section h2 { text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -1px; margin-bottom: 32px; }
.docs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.doc-link { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: var(--rounded-lg); text-decoration: none; color: var(--ink); transition: background 0.15s, border-color 0.15s; }
.doc-link:hover { background: var(--bg-card-hover); border-color: var(--mute); }
.doc-link-icon { font-size: 20px; flex-shrink: 0; opacity: 0.7; }
.doc-link h3 { font-size: 14px; font-weight: 500; margin-bottom: 2px; letter-spacing: -0.2px; }
.doc-link p { font-size: 12px; color: var(--body); }
/* Footer */
.footer { padding: 48px 24px; border-top: 1px solid var(--hairline); text-align: center; }
.footer p { font-size: 12px; color: var(--mute); }
.footer a { color: var(--body); text-decoration: none; }
.footer a:hover { color: var(--ink); }
/* Mobile */
@media (max-width: 768px) {
.hero h1 { font-size: 28px; font-weight: 600; letter-spacing: -1px; }
.hero { padding: 32px 24px 24px; min-height: 220px; }
.steps-grid, .eco-grid { grid-template-columns: 1fr; }
.docs-grid { grid-template-columns: 1fr; }
.nav-links a:not(.nav-cta) { display: none; }
}
</style>
</head>
<body>
<nav class="nav">
<div class="nav-inner">
<a href="/" class="nav-logo">ModelStudio for Developers</a>
<div class="nav-links">
<a href="/playbook/">岗位能力样板</a>
<a href="/blog/">Blog</a>
<a href="/showcase/">案例</a>
<a href="https://github.com/modelstudioai" target="_blank">GitHub</a>
<a href="{{ site.bailian_apikey_url }}" class="nav-cta" target="_blank">获取 API Key</a>
</div>
</div>
</nav>
<section class="hero">
<div class="hero-content">
<h1>Born open, <span class="gradient-text">ship AI together</span>.</h1>
<p>Explore tools · Build skills · Grow together.</p>
<div class="hero-buttons">
<a href="/guide/" class="btn btn-primary">开始使用</a>
<a href="https://github.com/modelstudioai" class="btn btn-secondary" target="_blank">GitHub</a>
</div>
</div>
</section>
<section class="steps">
<h2>三步开始</h2>
<div class="steps-grid">
<div class="step-card">
<div class="step-num">Step 1</div>
<h3>获取 API Key</h3>
<p>注册阿里云百炼平台，一个 Key 调用 Qwen、DeepSeek、Kimi 等多家模型。</p>
<a href="{{ site.bailian_apikey_url }}" target="_blank">获取 API Key →</a>
</div>
<div class="step-card">
<div class="step-num">Step 2</div>
<h3>在你的 Agent 中使用</h3>
<p>阿里云百炼 CLI 为 AI Agent 而生，每条命令即工具调用。支持在 Cursor、Qwen Code、Claude Desktop、Windsurf、Cline 等主流框架中直接使用；也可以通过 <a href="https://github.com/modelstudioai/openwork" target="_blank">OpenWork</a>（开源桌面 Agent）开箱即用。</p>
<a href="{{ site.bailian_cli_url }}" target="_blank">了解 CLI →</a>
</div>
<div class="step-card">
<div class="step-num">Step 3</div>
<h3>运行一个 Skill</h3>
<p>从 GitHub 加载精选 Skill，一句话驱动 AI 完成完整工作流。</p>
<a href="/skills/">查看精选 Skills →</a>
</div>
</div>
</section>
<section class="playbook-entry">
<div class="playbook-entry-inner">
<a class="playbook-headline" href="/playbook/">
<h2>不知道从哪开始？按岗位找你的能力样板 <span class="playbook-headline-arrow">→</span></h2>
<p class="section-sub">8 个岗位，每个都有「想清楚 → 动手做 → 检查对不对」的完整回路 + 30 分钟最小流程，复制即用。</p>
</a>
<div class="playbook-grid">
<a class="pb-card" href="/playbook/#kw"><span class="pb-emoji">📚</span><h3>知识工作者</h3><p>写报告 · 做调研 · 整理资料</p></a>
<a class="pb-card" href="/playbook/#dz"><span class="pb-emoji">🎨</span><h3>设计师</h3><p>出图 · 出视频 · 做海报</p></a>
<a class="pb-card" href="/playbook/#dev"><span class="pb-emoji">💻</span><h3>AI 开发</h3><p>接 API · 搭 Agent · 做产品</p></a>
<a class="pb-card" href="/playbook/#fin"><span class="pb-emoji">📈</span><h3>投研咨询</h3><p>拉数据 · 做估值 · 写研报</p></a>
<a class="pb-card" href="/playbook/#cs"><span class="pb-emoji">📞</span><h3>客服运营</h3><p>回复用户 · 处理工单</p></a>
<a class="pb-card" href="/playbook/#mkt"><span class="pb-emoji">📣</span><h3>内容营销</h3><p>写文章 · 出配图 · 做短视频</p></a>
<a class="pb-card" href="/playbook/#ops"><span class="pb-emoji">⚙️</span><h3>AI Ops</h3><p>用量 · 配额 · SLA</p></a>
<a class="pb-card" href="/playbook/#legal"><span class="pb-emoji">⚖️</span><h3>法务合规</h3><p>条款比对 · 出意见</p></a>
</div>
<div class="playbook-cta-wrap"><a class="playbook-cta" href="/playbook/">看完整 8 岗位样板 →</a></div>
</div>
</section>
<section class="ecosystem">
<div class="ecosystem-inner">
<h2>生态全景</h2>
<div class="eco-grid">
<div class="eco-card">
<span class="eco-icon">▶</span>
<h3>阿里云百炼 CLI</h3>
<p>命令行 AI 工具，一行指令调用文生图、视频、语音、RAG、搜索等全模态能力。为 AI Agent 设计，每条命令即结构化工具调用。</p>
<a href="https://github.com/modelstudioai/cli" target="_blank">GitHub →</a>
<a href="{{ site.bailian_cli_url }}" target="_blank">控制台 →</a>
</div>
<div class="eco-card">
<span class="eco-icon">⚙</span>
<h3>场景方案</h3>
<p>从真实需求出发的 AI 应用实践——Prompt 模板、效果复现、最佳实践，逐步覆盖更多行业场景。</p>
<a href="https://github.com/modelstudioai/livetranslatedemo" target="_blank">Live Translate Demo →</a>
<a href="https://github.com/modelstudioai/awesome-happyhorse-prompts" target="_blank">HappyHorse Prompts →</a>
</div>
<div class="eco-card">
<span class="eco-icon">🖥</span>
<h3>OpenWork（开源桌面 Agent）</h3>
<p>开源桌面 AI Agent 工作空间，内置阿里云百炼 CLI，安装即用，无需额外配置。</p>
<a href="https://github.com/modelstudioai/openwork" target="_blank">GitHub →</a>
</div>
<div class="eco-card">
<span class="eco-icon">✦</span>
<h3>Agent Skills</h3>
<p>可复用的 AI 能力模块，覆盖图文、视频、代码、文档等场景。任何兼容环境均可加载运行。</p>
<a href="https://github.com/modelstudioai/skills" target="_blank">GitHub →</a>
<a href="/skills/">精选列表 →</a>
</div>
</div>
</div>
</section>
<section class="docs-section">
<h2>文档与资源</h2>
<div class="docs-grid">
<a href="/guide/" class="doc-link">
<div class="doc-link-icon">▹</div>
<div><h3>完整教程</h3><p>从零跑通 OpenWork + CLI + Skills 全流程</p></div>
</a>
<a href="/workshop/" class="doc-link">
<div class="doc-link-icon">⚙</div>
<div><h3>Workshop 实验手册</h3><p>线下活动专属引导页，Step by Step 动手</p></div>
</a>
<a href="/showcase/" class="doc-link">
<div class="doc-link-icon">✦</div>
<div><h3>用户案例</h3><p>社区成员的真实使用案例与实践分享</p></div>
</a>
<a href="/faq/" class="doc-link">
<div class="doc-link-icon">?</div>
<div><h3>FAQ</h3><p>常见问题速查与踩坑记录</p></div>
</a>
</div>
</section>
<footer class="footer">
<p>Built with ♥ by <a href="https://github.com/modelstudioai" target="_blank">ModelStudio for Developers</a></p>
<p style="margin-top:8px;">
<a href="https://github.com/modelstudioai" target="_blank">GitHub</a> ·
<a href="/guide/">文档</a> ·
<a href="/showcase/">社区</a> ·
<a href="{{ site.bailian_cli_url }}" target="_blank">阿里云百炼</a>
</p>
</footer>
</body>
</html>