章节索引5 个标题 · 点击展开＋
大家好，我是孟健。
很多想做独立开发或个人品牌的朋友，想做网页却卡在第一步：没有前端设计经验，直接让 AI 写的单页一股浓浓的「AI 味」，排版简陋得拿不出手。这篇文章带大家用 WorkBuddy 完整走通新手全流程：先生成基础版个人名片网页 card-v1.html，再调用开源设计技能 taste-skill 升级出带 Bento Grid 网格与暗黑质感的 card-v2.html，最后顺带拿到免费上线方案。
先去官网下载客户端，装好后直接打开。
1. 先裸跑一版基础名片（card-v1.html）#
打开软件后，点击左上角的「新建任务」进入对话主界面。左边是导航栏，中间是对话输入框。
在开始之前，我先顺手点了一下左侧导航栏的「专家·技能·连接器」，点「技能」看了看里面的技能管理中心（SkillHub）。这里面有很多现成的扩展插件，比如办公文档处理、浏览器自动化和代码开发类的工具。
看了一眼生态后，我点击「新建任务」切回对话界面。我想先测测在不挂任何额外设计插件的情况下，它自己默认能写成什么样。
我在输入框里粘贴了第 1 段提示词，把我的真实履历和项目完整给它：
请帮我写一个单文件 HTML 的个人名片网页（先直接写，不用调用额外的设计技能），保存在桌面或当前工作目录，文件名叫 card-v1.html。名片使用我的真实信息，不要编造或留占位符：
- 身份标签：全职 AI 创业者 / 一人公司实操者 / 前大厂（腾讯、字节跳动）技术 Leader，十年技术与架构经验，毕业于西安交通大学
- 代表著作：主导编写《DeepSeek极简入门与应用》，累计销量突破百万册
- 核心产品与项目：
1. 字流（ziliu.online）：自研的多平台内容分发工具
2. ShipSolo AI 编程出海领航计划（shipsolo.cn）：发起并运营
3. ShipSite：自研网站生成器项目
4. 健·行 AI 学习陪伴群：创立并运营终身制会员社群，在杭州联合落地 500 平方米共享办公空间
- 实战数据：3 个月内一人协同多个 AI 完成 27 万行代码及近 3000 次提交；全网 23 个账号累计关注约 5.4 万；首份小报童专栏售出近 2000 份
要求：包含个人简介头图区、核心成就数据卡片、代表产品与项目展示、底部社交联系入口。做完后请告诉我保存的完整文件路径、这次制作耗时多久，以及消耗了多少积分或 token。
点击右下角的发送按钮，等了大约 1 分 05 秒，WorkBuddy 就生成完了。
界面上给出了文件路径，显示共输出了 614 行 HTML/CSS/JS 代码，消耗了 1.26 算力，并在右侧直接拉起了一个小窗预览。
点击预览区右上角的展开按钮，在独立浏览器窗口里全屏打开这个 card-v1.html。
首屏有大字姓名、身份标签以及我的两句说明，右侧放了一个名片式的预览卡片。
向下滚动，能看到六格数字墙：100 万册销量、27 万行代码、3000 次提交、500㎡ 空间等数据都列上了；再往下是《DeepSeek极简入门与应用》的拟物书籍封面和文字介绍。
再滚到底部，是字流、ShipSolo 等核心产品的列表卡片，以及社交联系入口和页脚。
看完整体效果，我的评价是：信息一字不漏全对上了，逻辑结构也很工整，但这种常规的白底蓝字卡片排版实在太扁平、太单调了，看着就像一个没做完样式的草稿雏形，谈不上任何高级感。
2. 查技能，点名 taste-skill 深度重构#
要改掉这种扁平单调的感觉，不用自己去死磕 CSS。如果你不知道自己的软件里装了哪些设计插件，不用在菜单里一个个找，直接在对话框里发句话让它自查就行。
回到主界面，我贴进了第 2 段提示词：
请看下你现在已经安装了哪些和网页设计、前端 UI 或视觉美化相关的技能（Skill），把它们的名字和用途列出来给我看；如果一个都没有，请帮我推荐一个口碑最好的开源前端/网页设计技能，并直接帮我装好，完事告诉我结果和耗时。
只等了约 12 秒，消耗了 0.44 算力，WorkBuddy 就把本地安装好的 6 个技能整理成表格发了出来。
里面包含了专门去 AI 味的 taste-skill、做动效交互的 impeccable、做排版的 frontend-design 等等，每一项的用途都写得清清楚楚。
既然里面有现成的 taste-skill，我直接点名调用它，让它用目前流行的 Bento Grid（便当盒网格）重新做一版。
在输入框里贴入第 3 段提示词：
刚才第一版网页（card-v1.html）稍微有点普通，现在请点名调用你刚才列出（或刚装好）的那个网页设计 Skill，帮我重新设计一版更有高级感、排版和配色更惊艳的个人名片网页，信息保持不变，另外加上 Bento Grid（便当盒网格）布局、悬停微动效和点击弹出微信二维码名片弹窗的功能。请存成一个新文件叫 card-v2.html，不要覆盖第一版。做完告诉我新文件的完整路径、你具体改进了哪些视觉细节、耗时多久以及消耗了多少积分或 token。
点击发送后，这个重构过程明显比第一版严肃得多。
WorkBuddy 调用 taste-skill 后，先抽取了暗黑深色配色与大字视觉排版方向，接着开始编写 HTML 并内联样式。期间它会自动调用浏览器工具进行多档屏幕宽度的真实渲染测量和校验，并检索配图融入设计。
这一步足足跑了约 8 分 08 秒，消耗了 4.59 算力，最终交付了 658 行代码的 card-v2.html。
3. 查看新版成品与细节#
点击生成的卡片，同样在浏览器里全屏打开 card-v2.html。
打开首屏的第一眼，质感确实完全变了：整个背景换成了沉稳的暗黑极简配色，左侧的大号加粗姓名视觉张力很强，配上了用一个人加一群 AI 把想法直接做成能卖的产品的说明标语，右上角和首屏下方都加上了醒目的胶囊按钮。
向下滚动进入核心的便当盒网格（Bento Grid）区域：左侧是整块的实战数据墙（27 万行代码、3000 次提交、5.4 万关注、2000 份专栏），右侧则把《DeepSeek 极简入门与应用》做成了一张独立的立体实体书展示卡，旁边还嵌了一张加微信的卡片。鼠标移上去时，卡片边缘有明显的悬停微动效，层次感比第一版强了不止一个档次。
继续滚动到底部，字流、ShipSolo、ShipSite、健·行 AI 学习陪伴群这四大核心产品被整齐地排列在便当盒卡片里，每个卡片都有浅灰色的标签和细致的功能描述。
最下方通栏放着那句大字标语：「一个人，也可以把想法做成产品。」
从蓝白单调卡片到这一版暗黑高质感 Bento 布局，前后只花了我改动一段提示词的功夫。
4. 拿到单文件后，怎么免费上线？#
做完满意的单文件网页后，很多非技术出身的读者会不知道下一步该把文件往哪放。
我切回 WorkBuddy，问了它最后一个问题：怎么把这个本地 HTML 免费部署上线，以及新手日常还能用它做点什么。
这个名片网页我很满意！作为刚上手的新手，我还想问两个问题：第一，如果我想把这个本地 HTML 文件免费放到网上，变成一个别人点链接就能看的在线名片，最简单省事的办法是什么？第二，除了做网页，新手日常还能用 WorkBuddy 做哪 3 件几分钟就能见效的实事？不用真的执行部署，直接回复告诉我方法就行。只花了 0.15 算力，它就给出了上线办法：最省事的是直接在对话里让 WorkBuddy 把这个网页发布出去，几分钟就能拿到一个链接，不用注册域名也不用懂 git；以后想绑自己的域名，再考虑 Cloudflare Pages、GitHub Pages 这类静态托管。
顺带它还推荐了新手日常最省时间的 3 件实事：把长文档读成表格结论、录音转待办纪要，以及一句话生成能直接用的业务表格。
5. 实测下来的真实判断#
拿 WorkBuddy 做这种独立的单页小项目，跑完全程我有几个很直接的体会：
- 裸跑和挂技能完全是两个东西：第一版让它自由发挥，1 分 05 秒就跑完了 614 行代码，但排版就是个普通的蓝白大路货；第二版挂上 taste-skill，代码其实只多了 44 行（658 行），但因为中间加入了多档宽度渲染校验和细节审查，足足跑了 8 分 08 秒，耗时翻了快 8 倍。想让它出真正有质感的设计，这个等待时间省不掉。
- 算力成本算得过来：整套实测做下来，生成第一版花了 1.26 算力，查技能花了 0.44 算力，深度重构花了 4.59 算力，最后追问上线花了 0.15 算力，四个动作加起来总共消耗了 6.44 算力。对没有前端环境配置能力的新手来说，花几点算力换一个能直接上线的单文件网页，成本很划算。
如果你手里也有积累了一段时间的个人履历、做过的产品或写过的文章，不妨花半小时先把自己最硬核的几条数据整理出来。打开 WorkBuddy，照着上面的提示词把真实信息填进去，挂上设计技能跑一轮，你也能拿到一张拿得出手的高质感个人名片。
我是孟健。连载在公众号「孟健AI编程」，掘金和知乎的专栏都叫「AI编程实战」。
这篇是免费笔记。要按你的项目往下做，看领航计划。
Related