这篇教程演示如何在 OpenClaw 里安装并使用 open-design-artifacts，快速生成高质量网页设计稿。

本次示例会做两个页面：

  1. OpenClaw 技能市场官网首页：暗色科技感、精致、像开发者产品发布页。
  2. 沙发品牌设计网站：首页高级、有品牌感、适合家具品牌展示。

案例预览

案例 1 沙发品牌设计网站 高级家居品牌首页 案例 2 OpenClaw 技能市场官网 暗色科技感产品发布页

视频演示：

如果播放器加载较慢，也可以直接打开：Bilibili：OpenClaw 网页设计教程

一、准备工作

开始前，先确认你已经准备好：

  • 已安装并可以正常打开 OpenClaw。
  • OpenClaw 可以正常联网下载文件。
  • 当前 OpenClaw 支持安装 skill。

本教程使用的素材包地址：

1
https://img.ovov.fun/openclaw/open-design-artifacts.zip

open-design-artifacts 的作用是把 Open Design 风格的网页、移动端、PPT、后台界面等设计产物生成规则打包成 OpenClaw 可用的 skill。安装后，你可以直接让 OpenClaw 生成独立 HTML 页面。

二、让 OpenClaw 自动下载并安装 open-design-artifacts

这里不需要你手动打开终端下载，也不需要自己复制文件夹。

直接把下面这句话发送给 OpenClaw：

1
帮我下载并解压到本地 https://img.ovov.fun/openclaw/open-design-artifacts.zip 然后安装这个技能

OpenClaw 会自动完成这几件事：

  1. 下载 open-design-artifacts.zip。
  2. 解压压缩包。
  3. 找到里面的 open-design-artifacts skill。
  4. 安装到本地 skills 目录。
  5. 提示你重启或刷新 OpenClaw，让新技能生效。

安装完成后，可以继续对 OpenClaw 说：

1
确认 open-design-artifacts 是否已经安装成功，并告诉我可以怎么使用。

三、示例 1：生成 OpenClaw 技能市场官网首页

打开 OpenClaw，新建一个任务，输入下面这段提示词：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用 open-design-artifacts，做一个 OpenClaw 技能市场官网首页。

要求：
- 风格：暗色科技感、精致、像开发者产品发布页
- 页面目标：让用户理解 OpenClaw Skill Market 是什么，并愿意浏览、安装、发布技能
- 首屏需要包含：产品名、价值主张、主按钮、辅助按钮、技能市场预览
- 页面模块需要包含：
  1. Hero 首屏
  2. 热门技能卡片
  3. 安装流程
  4. 开发者发布能力
  5. 安全与本地运行说明
  6. 底部 CTA
- 输出为独立 HTML/CSS/JS 文件，可以直接在浏览器打开
- 视觉关键词：深色背景、玻璃质感、霓虹蓝绿色点缀、代码块、开发者工具感

这个提示词的重点不是只说“做一个官网”，而是把页面目标、模块结构、风格和输出形式说清楚。这样 OpenClaw 才能生成更接近产品发布页的结果。

四、示例 2：生成沙发品牌设计网站

继续在 OpenClaw 里输入第二段提示词：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
使用 open-design-artifacts，做一个沙发品牌的设计网站。

品牌方向：
- 高级感
- 温暖、克制、有生活方式气质
- 像高端家具品牌官网，不要像普通电商详情页

页面要求：
- 首屏突出品牌名和核心主张
- 展示一款主推沙发产品
- 包含材质、工艺、空间搭配、预约体验等模块
- 配色以米白、暖棕、深木色为主，少量金色点缀
- 字体排版要有高级杂志感
- 页面需要有清晰 CTA：预约体验、浏览系列
- 输出独立 HTML/CSS/JS 文件，可以直接打开预览

如果第一次生成的页面太普通，可以继续追加：

1
2
3
4
5
6
继续优化这个页面：
- 减少电商感
- 增强高端家居品牌调性
- 首屏更像品牌发布页
- 图片区域更大，留白更多
- 文案更克制，不要堆功能点

五、怎么判断生成结果好不好

网页设计类教程不要只看“能不能生成”，还要看结果是否符合目标。可以从这几个点检查：

  • 首屏有没有明确告诉用户这是什么。
  • 主按钮是否清楚，比如“浏览技能”“预约体验”。
  • 页面模块是否有递进关系，而不是随机堆卡片。
  • 风格是否统一，颜色、字体、按钮、卡片是否像同一个品牌。
  • 移动端是否能正常阅读。
  • 生成的 HTML 是否可以脱离工具直接打开。

如果不满意，不要重新从零开始，可以让 OpenClaw 基于当前结果继续优化。

六、常见问题

1. OpenClaw 没识别到 open-design-artifacts

先让 OpenClaw 自查：

1
检查 open-design-artifacts 是否已经安装，如果没有安装成功，请重新下载 zip、解压并安装。

如果 OpenClaw 提示已经安装，但仍然无法使用，重启 OpenClaw 后再试。

2. 生成页面风格不够高级

提示词里不要只写“高级感”。要补充具体方向：

  • 暗色科技感
  • 开发者产品发布页
  • 高端家具品牌官网
  • 杂志感排版
  • 克制留白
  • 少量强调色

越具体，结果越稳定。

3. 页面内容太空

补充真实模块和业务目标。比如技能市场页面要写清楚“浏览、安装、发布、版本、安全”；沙发品牌页面要写清楚“材质、工艺、空间、预约”。

七、总结

open-design-artifacts 适合用来快速生成网页原型、品牌官网、产品发布页和设计稿 HTML。它的关键价值不是替你写一句“做个网站”，而是让 OpenClaw 按更完整的设计产物结构输出页面。

这次教程的核心流程就是：

1
把安装指令发给 OpenClaw → OpenClaw 自动下载、解压、安装 skill → 重启或刷新 → 输入网页设计提示词 → 预览并迭代

后续你可以把同样的方法用于更多网页设计教程，比如 SaaS 官网、课程销售页、AI 工具落地页、作品集首页等。