Open Design系列教程（三）：实战案例篇——从0到1设计一个攀岩者网站

系列目录

– （一）部署篇 —— 从零安装到跑起来

– （二）核心概念篇 —— 模式 × Skill × Design System × Agent

– （三）实战案例篇 ← 你在这里

写在前面

前两篇我们搞定了安装和概念。这篇动手干：完整走一遍从需求到成品的全流程。

案例目标：为「攀岩者」（climbing.top）设计一个现代感的网站首页。

你将学到：

如何写一个好的设计需求
如何选择 Skill 和 Design System
如何通过 API 调用生成设计
如何调优和迭代
最终导出可用的 HTML 文件

第一章：需求分析

1.1 了解你的网站

在动手之前，先明确网站定位：

维度	内容

|—|—|

网站名	攀岩者
域名	climbing.top
定位	个人博客，攀岩技巧、户外散文、诗歌、随笔
已有内容	~70 篇原创文章
目标用户	攀岩爱好者、户外运动者
风格偏好	暗色、山野感、杂志排版

1.2 拆解首页板块

一个攀岩者网站首页需要：

Hero 区 —— 大标题 + 标语 + 背景图
精选文章 —— 3-4 张文章卡片
攀登攻略 —— 分级路线指南
关于板块 —— 网站介绍 + 数据统计
Footer —— 导航 + 联系方式

1.3 写需求 Prompt

好的 Prompt 要具体、有约束、有参考：

设计一个攀岩爱好者社区网站首页，要求：

深色主题，配色灵感来自山脉（深海军蓝/炭灰/橙色点缀）
Hero 区：大字标题”攀岩者”，标语”向上攀登的每一步，都是与自己的对话”
精选文章区：4 张卡片，分类标签（攀岩技巧/户外散文/装备评测/诗歌）
攀登攻略区：5 个分级指南（入门→进阶→高级→专家）
关于板块：统计数据（70+文章、15条路线、5年更新）
Footer：导航 + climbing.top 域名
杂志风排版，中文内容
单个 HTML 文件，CSS 内嵌

Prompt 技巧：

✅ 写明配色偏好
✅ 写明具体内容（标题文字、数字）
✅ 写明板块数量和结构
✅ 写明输出格式（单 HTML 文件）
❌ 不要写”帮我做个网站”（太模糊）

第二章：选择配置

2.1 选择 Agent

`bash

# 查看可用的 Agent

curl -s http://127.0.0.1:3456/api/agents | python3 -c “

import sys, json

agents = json.load(sys.stdin)[‘agents’]

for a in agents:

status = ‘✅’ if a[‘available’] else ‘❌’

print(f”{status} {a[‘name’]} ({a[‘id’]})”)

“

选择 hermes —— 已安装、免费、中文支持好。

2.2 选择 Skill

候选 Skill	适合度	理由

|—|—|—|

`web-prototype`	⭐⭐⭐⭐⭐	通用网页，最灵活
`saas-landing`	⭐⭐⭐	偏营销，不太适合博客
`blog-post`	⭐⭐⭐	只有文章页，没有首页结构

选择 web-prototype —— 最通用，适合任意网页结构。

2.3 选择 Design System

候选	效果

|—|—|

Neutral Modern	中性现代，百搭
Linear	深蓝紫科技感
Anthropic	温暖橙专业感

选择 Neutral Modern（默认） —— 先看中性效果，后续可以换。

第三章：方式一 —— Web 界面操作

3.1 启动 Open Design

`bash

~/.local/bin/start-open-design.sh

3.2 打开浏览器

访问 http://127.0.0.1:4567

3.3 选择配置

在顶部三个下拉框中：

Agent：Hermes
Skill：web-prototype
Design System：Neutral Modern

3.4 输入需求

在底部输入框粘贴我们的 Prompt：

设计一个攀岩爱好者社区网站首页，深色主题，配色灵感来自山脉（深海军蓝/炭灰/橙色点缀）。Hero 区大字标题”攀岩者”，标语”向上攀登的每一步，都是与自己的对话”。精选文章区 4 张卡片，分类标签。攀登攻略区 5 个分级指南。关于板块含统计数据。Footer 含 climbing.top 域名。杂志风排版，中文内容，单个 HTML 文件。

3.5 回答问题表单

Agent 会弹出初始化问题表单：

问题	回答

|—|—|

做什么	单页原型 / 营销页
给谁看	攀岩爱好者、户外运动者
视觉风格	现代极简 + 杂志风（选 2 个）
品牌方向	自动选（或指定 Neutral Modern）
规模	5-6 个板块，单页
其他要求	深色主题、山野配色、中文

3.6 等待生成

左侧：Agent 实时输出流
右侧：HTML 实时渲染
时间：约 1-3 分钟

3.7 导出

生成完成后：

点击 Save to disk
或下载 HTML / PDF / ZIP

第四章：方式二 —— API 调用（推荐）

API 方式更适合自动化和批量操作。

4.1 基础调用

`bash

curl -s –max-time 300 -X POST http://127.0.0.1:3456/api/chat

-H “Content-Type: application/json”

-H “Accept: text/event-stream”

-d ‘{

“message”: “设计一个攀岩爱好者社区网站首页，深色主题，配色灵感来自山脉（深海军蓝/炭灰/橙色点缀）。Hero 区大字标题”攀岩者”，标语”向上攀登的每一步，都是与自己的对话”。精选文章区 4 张卡片，分类标签。攀登攻略区 5 个分级指南。关于板块含统计数据。Footer 含 climbing.top 域名。杂志风排版，中文内容，单个 HTML 文件。”,

“agentId”: “hermes”

}’ > /tmp/output.txt 2>&1

4.2 跳过问题表单

在 Prompt 开头加”直接生成，不要提问”：

`bash

curl -s –max-time 300 -X POST http://127.0.0.1:3456/api/chat

-H “Content-Type: application/json”

-H “Accept: text/event-stream”

-d ‘{

“message”: “直接生成，不要提问。设计一个攀岩爱好者社区网站首页…”,

“agentId”: “hermes”

}’ > /tmp/output.txt 2>&1

4.3 指定 Skill

`bash

curl -s –max-time 300 -X POST http://127.0.0.1:3456/api/chat

-H “Content-Type: application/json”

-d ‘{

“message”: “你的需求…”,

“agentId”: “hermes”,

“skillId”: “web-prototype”

}’ > /tmp/output.txt 2>&1

4.4 提取 HTML

生成完成后，从输出中提取 HTML：

`bash

# 从 SSE 事件流中提取文本内容

grep ‘”type”:”text_delta”‘ /tmp/output.txt | sed ‘s/^data: //’ | python3 -c “

import sys, json

text = ”

for line in sys.stdin:

try:

d = json.loads(line.strip())

text += d.get(‘delta’,”)

except: pass

# 找到 HTML 起始位置

start = text.find(‘<!DOCTYPE')

if start == -1:

start = text.find(‘<html')

if start >= 0:

html = text[start:]

end = html.rfind(”)

if end >= 0:

html = html[:end+7]

with open(‘climbing-homepage.html’, ‘w’) as f:

f.write(html)

print(f’保存成功: {len(html)} 字节’)

else:

print(‘未找到 HTML’)

“

第五章：迭代优化

5.1 第一轮生成的结果

第一轮生成的页面已经很不错：

✅ 深色主题
✅ Hero 区有大标题和标语
✅ 文章卡片有分类标签
✅ 攻略区有分级标签
✅ 统计数据展示

5.2 可能需要调整的地方

问题	调整方式

|—|—|

标题字号太小	在 Prompt 中写”标题要大号醒目”
配色不够山野	换 Design System 为 Linear 或 Anthropic
卡片布局不好看	在聊天中说”把卡片改成 2×2 网格”
缺少真实图片	在 Prompt 中写”使用 Unsplash 攀岩图片”
Footer 太简单	在聊天中说”Footer 加上导航链接和社交媒体”

5.3 换 Design System 对比

同一个 Prompt，换不同的 Design System：

`bash

# Linear 风格（深蓝紫科技感）

curl -s -X POST http://127.0.0.1:3456/api/chat

-H “Content-Type: application/json”

-d ‘{

“message”: “你的需求…”,

“agentId”: “hermes”,

“designSystemId”: “linear”

}’

# Anthropic 风格（温暖橙专业感）

curl -s -X POST http://127.0.0.1:3456/api/chat

-H “Content-Type: application/json”

-d ‘{

“message”: “你的需求…”,

“agentId”: “hermes”,

“designSystemId”: “anthropic”

}’

5.4 继续对话修改

在 Web 界面的聊天框中继续输入：

“把英雄区的背景改成山脉剪影”

“文章卡片加悬停效果”

“攻略区的难度标签用不同颜色区分”

“统计数字加动画效果”

“Footer 加上微信公众号二维码”

第六章：最终产物

6.1 生成的文件

最终产出 climbing-homepage.html，包含：

板块	内容

|—|—|

Header	Logo “攀岩者” + 导航（文章/攻略/社区/博客）+ CTA 按钮
Hero	大标题 + 标语 + 山脉背景 + 双按钮
精选文章	4 张卡片（攀岩技巧/户外散文/装备评测/诗歌）
攀登攻略	5 个分级指南（入门→专家）
关于	统计数据 + 网站介绍 + 山峰装饰图
Footer	导航 + climbing.top

6.2 技术特点

单文件：HTML + CSS + 少量 JS 全部内嵌
响应式：适配桌面和移动端
暗色主题：深海军蓝/炭灰底色，橙色点缀
中文字体：Noto Serif SC 衬线体做标题，Inter 做正文
OKLch 色板：使用现代 CSS 色彩空间

6.3 文件大小

约 22-24 KB，加载速度极快。

第七章：部署到 WordPress

7.1 方案一：作为自定义首页

`bash

# 上传到服务器

scp climbing-homepage.html ubuntu@climbing.top:/tmp/

# SSH 到服务器

ssh ubuntu@climbing.top

# 备份原首页

cp /var/www/html/wordpress/wp-content/themes/your-theme/front-page.php

/var/www/html/wordpress/wp-content/themes/your-theme/front-page.php.bak

# 替换为新首页

cp /tmp/climbing-homepage.html

/var/www/html/wordpress/wp-content/themes/your-theme/front-page.php

7.2 方案二：作为独立页面

在 WordPress 后台：

创建新页面 → 粘贴 HTML
设置为静态首页

7.3 方案三：保持 WordPress，仅参考设计

把生成的设计作为参考，用 WordPress 主题和页面构建器复现。

第八章：举一反三

8.1 其他场景的 Prompt 模板

SaaS 产品落地页：

设计一个 AI 写作助手的营销落地页。

Hero 区：标题”用 AI 释放你的创造力”，副标题”从想法到成稿，只需 60 秒”

功能区：3 个核心功能卡片（智能改写/多语言/一键排版）

定价区：3 个方案（免费/Pro/Enterprise）

CTA：底部大按钮”免费试用”

风格：现代科技感，蓝紫渐变

数据仪表盘：

设计一个电商数据后台仪表盘。

左侧导航：首页/订单/商品/用户/设置

顶部 KPI：4 个指标卡片（今日订单/销售额/转化率/新用户）

主区域：折线图（7 天趋势）+ 柱状图（品类分布）

右侧：最近订单列表

风格：暗色主题，Linear 风格

PPT 演示文稿：

做一份 10 页的 AI 行业分析 Pitch Deck。

内容：

封面：AI 改变世界
市场规模：2025 年 AI 市场达 5000 亿美元
技术趋势：大模型/多模态/Agent
竞争格局：OpenAI/Google/Anthropic
我们的方案：…
商业模式：…
团队介绍：…
融资需求：…

风格：杂志风，深色主题

8.2 Prompt 进阶技巧

技巧	示例

|—|—|

指定配色	“使用 #FF6B35 作为主色调”
指定字体	“标题用思源宋体，正文用 Inter”
指定布局	“文章卡片用 2×2 网格”
指定动效	“卡片悬停时放大 105%”
指定图片	“Hero 区使用 Unsplash 山脉图片”
指定内容	“标题文字必须是’攀岩者’”
指定约束	“不要使用 JavaScript 动画库”
跳过提问	“直接生成，不要提问”

总结

三步走流程

明确需求 → 写好 Prompt
选择配置 → Agent + Skill + Design System
生成迭代 → 看效果 → 调整 → 再生成

核心要点

Prompt 越具体越好：写明配色、板块、内容、格式
Design System 是关键：同一个需求，换 Design System 效果完全不同
迭代是常态：一次生成很难完美，多轮对话调整
善用 API：批量生成、自动化流程

文件位置

~/Documents/Hermes/

├── OpenDesign教程01-部署篇.md

├── OpenDesign教程02-核心概念篇.md

├── OpenDesign教程03-实战案例篇.md

└── climbing-homepage.html # 本次生成的攀岩者首页

*系列教程完 | 基于 Open Design v0.7.0 | 2026-05-22*

Open Design系列教程（三）：实战案例篇——从0到1设计一个攀岩者网站

写在前面

第一章：需求分析

1.1 了解你的网站

1.2 拆解首页板块

1.3 写需求 Prompt

第二章：选择配置

2.1 选择 Agent

2.2 选择 Skill

2.3 选择 Design System

第三章：方式一 —— Web 界面操作

3.1 启动 Open Design

3.2 打开浏览器

3.3 选择配置

3.4 输入需求

3.5 回答问题表单

3.6 等待生成

3.7 导出

第四章：方式二 —— API 调用（推荐）

4.1 基础调用

4.2 跳过问题表单

4.3 指定 Skill

4.4 提取 HTML

第五章：迭代优化

5.1 第一轮生成的结果

5.2 可能需要调整的地方

5.3 换 Design System 对比

5.4 继续对话修改

第六章：最终产物

6.1 生成的文件

6.2 技术特点

6.3 文件大小

第七章：部署到 WordPress

7.1 方案一：作为自定义首页

7.2 方案二：作为独立页面

7.3 方案三：保持 WordPress，仅参考设计

第八章：举一反三

8.1 其他场景的 Prompt 模板

8.2 Prompt 进阶技巧

总结

三步走流程

核心要点

文件位置

评论

发表回复 取消回复

更多文章

攀岩运动简介

Day06——晚课 传统编程vs AI编程：思维方式的革命性转变

AI专家养成计划·午课 5月22日速报

Open Design系列教程（三）：实战案例篇——从0到1设计一个攀岩者网站

Open Design系列教程（二）：核心概念篇——模式×Skill×Design System×Agent

发表回复取消回复

Day06——晚课传统编程vs AI编程：思维方式的革命性转变