使用说明
使用说明

先装一个 AI 编辑器

这类软件就像「会写网页的 Word」。装好后,你用中文说想要什么,它帮你做。新手优先 WorkBuddy;下面也列出国内外常用工具,任选一个即可。

国内

Trae

字节跳动出品,中文项目友好。

trae.com.cn

Qoder

阿里出品的 AI 编程 IDE,适合自主写代码、改项目。

qoder.com

国外

Cursor

海外 AI 编辑器标杆,社区成熟。

cursor.com

Claude Code

Anthropic 出品,强于跟代码对话协作。

claude.ai/code
  1. 打开上面任一首选官网(推荐 workbuddy.ai
  2. 点下载,选 Mac 或 Windows
  3. 安装完成后打开,登录账号
  4. 装好就行,其他设置先不用管
不会选?直接装 WorkBuddy。后面步骤都按它来写。换了别的也没关系:打开本地文件夹 → 附上 design.md → 用中文说你想做什么。

解压你下载的压缩包

从 Vechooool 下载的一般是一个 zip 文件。双击解压,放到桌面等好找的地方。

最重要

DESIGN.md

设计说明书。告诉 AI 用什么颜色、字体、风格。后面主要靠它。

建议看看

设计套件预览

若有 HTML 预览文件,双击用浏览器打开,先感受一下风格。喜欢再继续。

可选

模版源码

有的包里还有现成网页代码。没有也没关系,有 DESIGN.md 就够用。

打开本地文件夹,并附上 design.md

打开 WorkBuddy 后:先把解压好的模版文件夹设为工作空间,再把里面的 design.md 拖到输入框,或通过「+」添加附件。 点击截图可放大查看。

示意 011 / 4

打开 WorkBuddy

进入主界面,底部就是输入框。找到「选择工作空间」。

示意 022 / 4

打开本地文件夹

点「选择工作空间」→「打开本地文件夹」,选中你解压出来的模版文件夹。

示意 033 / 4

附上 design.md

点输入框旁的「+」,选中文件夹里的 design.md;也可以直接把文件拖进输入框。

示意 044 / 4

确认已附上

输入框里出现 design.md 附件,就说明加成功了,可以进入下一步写需求。

工作空间选对、design.md 已附上后,就可以在同一个输入框里告诉 AI 你想做什么。

在输入框里说出你想做什么

像示意 04 那样:design.md 已经附上后,直接在输入框用中文写你想做的产品 / 页面,然后发送。不会写可以先复制下面示例,改成你自己的内容。

推荐先发(说明用途)
基于这个 md,帮我设计和制作一个(填写:如数据分析站点 / 品牌官网 / 产品介绍页)。
品牌名:(填写)
一句话介绍:(填写)
请严格按附件 design.md 的风格来做,并告诉我怎么预览。
更短的一句话版
基于这个 md,帮我设计和制作一个「(填写产品名)」的介绍网页,风格严格跟随附件。
改得不满意时
请再对照我附上的 design.md。当前感觉(太花 / 太素 / 字太小 / 按钮不对),请帮我调整,并说明你改了什么。
小技巧:关键是「附上 design.md + 说出你想做什么」。不满意就继续改,比如「标题大一点」「颜色亮一点」。

常见问题

一定要会写代码吗?

不用。会打字、会装软件就够了。看不懂报错,就复制给 AI 问「这是什么意思」。

一定要装 WorkBuddy 吗?

新手优先它。国内也可用 Trae、Qoder;国外可用 Cursor、Claude Code、Codex。装一个能打开本地文件夹、能添加附件、能聊天的就行。

找不到 DESIGN.md?

在解压文件夹里搜索 design.md。找到后拖到输入框,或点「+」添加附件。

还是不会?

发邮件到 hello@vechooool.com,说一下你卡在第几步。