大家好，我是孟健。
很多想做独立开发或个人品牌的朋友，想做网页却卡在第一步：没有前端设计经验，直接让 AI 写的单页一股浓浓的「AI 味」，排版简陋得拿不出手。这篇文章带大家用 WorkBuddy 完整走通新手全流程：先生成基础版个人名片网页 card-v1.html，再调用开源设计技能 taste-skill 升级出带 Bento Grid 网格与暗黑质感的 card-v2.html，最后顺带拿到免费上线方案。
先去官网（workbuddy.cn）下载客户端，安装完成直接打开即可。
1. 先裸跑一版基础名片（card-v1.html）
打开软件后，点击左上角「新建任务」进入对话主界面。左侧为导航栏，中间是主要的对话输入框。
在开始之前，我先点击左侧导航栏的「专家·技能·连接器」，点「技能」看了看里面的技能管理中心（SkillHub）。这里面有很多现成的扩展插件，比如办公文档处理、浏览器自动化和代码开发类的工具。
看完生态后，点击「新建任务」切回对话界面。我想先测试一下在不挂任何额外设计插件的情况下，它自己默认能写出什么样的页面。
我在输入框里粘贴了第 1 段提示词，把我的真实履历和项目完整交给了它：
text
请帮我写一个单文件 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 段提示词：
text
请看下你现在已经安装了哪些和网页设计、前端 UI 或视觉美化相关的技能（Skill），把它们的名字和用途列出来给我看；如果一个都没有，请帮我推荐一个口碑最好的开源前端/网页设计技能，并直接帮我装好，完事告诉我结果和耗时。
等待了约 12 秒，消耗了 ◇ 0.44 算力，WorkBuddy 就把本地安装好的 6 个技能整理成表格呈现了出来。
列表中包含了专门去除「AI 味」的 taste-skill、做动效交互的 impeccable、做排版的 frontend-design 等，每一项的用途都进行了说明。
既然环境里有现成的 taste-skill，我直接点名调用它，让它用目前流行的 Bento Grid（便当盒网格）重新做一版。
在输入框里输入第 3 段提示词：
text
刚才第一版网页（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 查看效果。
首屏的视觉质感有了明显改变：整个背景切换为暗黑极简配色，左侧的大号加粗姓名视觉冲击力明显提升，并配上了标语说明，右上角和首屏下方都加上了醒目的胶囊按钮。
向下滚动进入核心的便当盒网格（Bento Grid）区域：左侧是整块的实战数据墙（27 万行代码、3000 次提交、5.4 万关注、2000 份专栏），右侧则把《DeepSeek 极简入门与应用》做成了一张独立的立体实体书展示卡，旁边嵌有「加个微信」卡片。鼠标悬停时，卡片边缘有明显的微动效，层次比第一版更为丰富。
继续滚动到底部，字流、ShipSolo、ShipSite、健·行 AI 学习陪伴群这四大核心产品被排列在便当盒卡片里，每个卡片都配有浅灰色标签与功能描述。
最下方通栏放着标语：「一个人，也可以把想法做成产品。」
从蓝白单调卡片到这一版暗黑 Bento 布局，前后主要在于精准指定了设计扩展技能。
4. 拿到单文件后，如何免费部署上线？
拿到满意的单文件网页后，很多开发者或独立新手可能需要将它快速变成公网可访问的地址。
我切回 WorkBuddy，问了它关于部署与日常场景的问题：
text
这个名片网页我很满意！作为刚上手的新手，我还想问两个问题：第一，如果我想把这个本地 HTML 文件免费放到网上，变成一个别人点链接就能看的在线名片，最简单省事的办法是什么？第二，除了做网页，新手日常还能用 WorkBuddy 做哪 3 件几分钟就能见效的实事？不用真的执行部署，直接回复告诉我方法就行。
消耗了 ◇ 0.15 算力后，它给出了上线办法：最轻量的是在对话里让 WorkBuddy 直接发布，几分钟就能拿到访问链接；要绑自己的域名，再用 Cloudflare Pages 或 GitHub Pages 托管静态文件。
同时它也梳理了几个日常适用的轻量任务：长文档提取表格要点、录音转待办纪要，以及通过自然语言生成业务数据表格。
5. 实测总结与体会
用 WorkBuddy 跑完这种轻量级独立单页，有两点实际体验比较明显：
首先是默认生成与引入设计技能的差异 ：第一版自由生成时，1 分 05 秒输出了 614 行代码，排版属于常见的蓝白模板样式；第二版挂载 taste-skill 后，虽然代码仅增加至 658 行，但因为增加了多档宽度渲染测量与视觉审查，耗时延长至 8 分 08 秒。如果对排版质感有较高要求，这个过程中的渲染校准时间是必要的。
其次是算力消耗情况：整个流程中，生成初始版消耗 ◇ 1.26，检索技能消耗 ◇ 0.44，深度重构消耗 ◇ 4.59，部署问答消耗 ◇ 0.15，累计消耗 6.44 算力。对于需要快速产出可用前端单页且不想花费精力配置本地构建环境的场景，整体开销在可接受范围内。
如果你手头也有需要整理的个人履历、产品主页或项目集，可以先把核心数据与介绍梳理清楚，配合相关设计技能尝试生成，快速构建出一套适合展示的个人主页。
👋 我是孟健，前腾讯 T11、前字节技术 Leader，现在全职做 AI 编程。
🔥 更多 AI 编程实战：
- GitHub：@mengjian-github
- 专栏：AI编程实战
- 这期的完整清单：评论区回复「名片网页」，我把领取方式发你
觉得有用？点赞+收藏 就是最大支持 🙏
本文由作者借助 AI 辅助整理，内容经作者实测与审校。