大家好，我是孟健。
很多想做独立开发或个人品牌的朋友，想做网页却卡在第一步：没有前端设计经验，直接让 AI 写的单页一股浓浓的「AI 味」，排版简陋得拿不出手。这篇文章带大家用 WorkBuddy 完整走通新手全流程：先生成基础版个人名片网页 card-v1.html，再调用开源设计技能 taste-skill 升级出带 Bento Grid 网格与暗黑质感的 card-v2.html，最后顺带拿到免费上线方案。
先去官网（workbuddy.cn）下载客户端，安装完成直接打开即可。
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 查看效果。
首屏的视觉质感有了明显改变：整个背景切换为暗黑极简配色，左侧的大号加粗姓名视觉冲击力明显提升，并配上了标语说明，右上角和首屏下方都加上了醒目的胶囊按钮。
向下滚动进入核心的便当盒网格（Bento Grid）区域：左侧是整块的实战数据墙（27 万行代码、3000 次提交、5.4 万关注、2000 份专栏），右侧则把《DeepSeek 极简入门与应用》做成了一张独立的立体实体书展示卡，旁边嵌有「加个微信」卡片。鼠标悬停时，卡片边缘有明显的微动效，层次比第一版更为丰富。
继续滚动到底部，字流、ShipSolo、ShipSite、健·行 AI 学习陪伴群这四大核心产品被排列在便当盒卡片里，每个卡片都配有浅灰色标签与功能描述。
最下方通栏放着标语：「一个人，也可以把想法做成产品。」
从蓝白单调卡片到这一版暗黑 Bento 布局，前后主要在于精准指定了设计扩展技能。
4. 拿到单文件后，如何免费部署上线？
拿到满意的单文件网页后，很多开发者或独立新手可能需要将它快速变成公网可访问的地址。
我切回 WorkBuddy，问了它关于部署与日常场景的问题：
这个名片网页我很满意！作为刚上手的新手，我还想问两个问题：第一，如果我想把这个本地 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 辅助整理，内容经作者实测与审校。
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。
Hello, I'm Meng Ken.
Many of the friends who want to be self-developing or individual brands are stuck in the first step: without front-end design experience, one single page written by AI has a strong "AI taste" and the layout is so poor. This article brings you through the entire beginner process using WorkBuddy: Mr. Card-v1.html, based on his personal card page, then calls on open source design skills, Taste-skill, and upgrades the card-v2.html with a Bento Grid grid and dark black sense, and finally gets the free-on-line program.
Go to workbook.cn to download the client and install it and open it directly.
1. Run a base card first naked (card-v1.html)
When you open the software, click on the top left " New Job " for the main interface. The left is the navigation bar, with the main dialogue input box in the middle.
Before I start, I'm going to click on the "Expert Skills Connector" on the left navigator and click on "Skill" to look at the skills management center inside. There are many off-the-shelf extension plugins, such as office document processing, browser automation and code development tools.
After seeing the ecology, click "New Job" to cut back to the dialogue interface. I'd like to test what pages it can write by default without any extra design plugins.
I put paragraph 1 prompt in the input box and gave it my real resume and project as a whole:
Please write me a personal card page for a single file, first written without calling for additional design skills, on the desktop or the current working directory, which is known as card-v1.html. Business cards use my real information and do not create or leave placeholders:
- Identity labels: full-time AI entrepreneur / one company operator / former factory (Tencent, byte beat) technology Leader, 10 years of technical and structural experience, graduated from Xi'an University of Transport
- Representative ' s work: led the preparation of DeepSeek ' s Introduction and Application, with cumulative sales exceeding millions
- Core products and projects:
ziliu.online: Self-study multi-platform content distribution tool
2. ShipSolo AI programming pilotage (shipsolo.cn): initiation and operation
3. ShipSite: Self-study website generator project
4. Health AI Learning Accompaniment Group: Create and operate a lifelong membership community with 500 square metres of shared office space in Hangzhou
- Operational data: 1 person completed 270,000 line codes and nearly 3000 submissions in 3 months in collaboration with several AI; 23 accounts across the network received cumulative attention of approximately 54,000; the first tabloid child column sold nearly 2,000
Requirements: Include a headchart area for personal profiles, a core achievement data card, representational product and project presentation, bottom social contact portal. When you're done, please tell me the path to the complete file you saved, how long this production took, and how much credits or token you consumed.
Clicking on the sending button at the bottom right corner, waiting for about one minute and 05 seconds, WorkBuddy is finished.
The interface gives a specific file path, shows the output of line 614 HTML/CSS/JS code, consumes 1.26 calculus and pulls a small window directly to the right for real-time preview.
Click the extension button at the top right corner of the preview area to open this card-v1.html in a separate browser window.
The screen contains a large-worded name, an identity label and two personal descriptions, with a business card preview on the right.
Scroll down and see six digital walls: 1 million volumes, 270,000 line codes, 3,000 submissions, 500 m2 space, etc., have been listed; and down is the book cover and text introduction for DeepSeek ' s Introduction and Application.
Scroll at the bottom is a list card of core products such as scripts, ShipSolo, and social contact portals and footers.
Looking at the effects of the whole, my assessment is that the content of the message is all right and the logical structure is perfect, but this conventional white-based blue card layout is flat, lacks a sense of detail and looks more like an initial page prototype.
2. Check skills, call for depth reconstruction
To improve the page layout, you don't have to kill yourself. If you do not know what design plugins are in the client, you do not have to look in the menu one by one, just send a sentence in the dialogue box and let it check itself.
Back to the main interface, I entered paragraph 2, prompt:
Please see what skills you have installed related to web design, front-end UI or visual aesthetic (Skill) to show me their names and uses; if none of them are available, recommend one of the best open-source front-end/web-design techniques, and install it directly and tell me the results and time-consuming.
Waiting for about 12 seconds, consuming the calculus 0.44, WorkBuddy put together six locally installed skills in a table.
The list contains texture-skills that specifically remove "AI" tastes, dynamic interactives, frontend-designs, etc., each of which is described.
Now that there's a ready-made taste-skill in the environment, I'm going to call it by name and re-enact it with the currently popular Bento Grid.
Enter paragraph 3 prompt in the input box:
The first version of the page (card-v1.html) is a little more common, and please call the page design you just listed (or just installed), Skyll, and help me redesign a version of the personal card page that is more advanced, layout and colourier, with the same information, plus the Bento Grid (Pilot Box Grid) layout, the suspension micro-activation and the ability to click on the pop-up WeChat 2-dimensional face window. Save in a new document called card-v2.html, not overwrite the first version. Tell me the full path of the new document, which visual details you have specifically improved, how long it takes, and how much credits or token you have consumed.
This recombining process is clearly more detailed when you click to send it.
WorkBuddy calls the Taste-skill, first setting up a dark dark dark colour and large word layout scheme, then starting with HTML and interconnecting styles. In the process, it automatically adapts the browser tool for the true rendering and validation of multiple screen widths and retrieves the map for integration into the overall design.
This step implemented about 8 minutes, 08 seconds, consumed ◇ 4.59 calculus and finally delivered 658 lines of code card-v2.html.
3. View new editions and details
Click on the generated card to also open the whole screen in the browser to see effects.
There has been a marked change in the visual quality of the screen: the whole background has been changed to a dark, very simple color, with a visible increase in the visual impact of the large size on the left plus a rough name, with signs, and a high-profile capsule button has been added to the upper right corner and below the front.
Scroll down into the Bento Grid area: the left side is the whole field data wall (270,000 line codes, 3,000 submissions, 54,000 attentions, 2,000 columns), while the right side makes DeepSeek a stand-alone physical book display card with a "plus WeChat" card. When the mouse is suspended, the edge of the card is clearly micro-activated, and the level is richer than the first edition.
The four core products, Scrolling Bottom, ShipSolo, ShipSite, Ken Ai, Learning Accompaniment Group, are arranged in lunchbox cards, each with a light grey label and functional description.
At the bottom, there's a sign: "One person can also make a product of ideas."
From a single blue and white card to this dark Bento version of the layout, the main reason for this is the precision of the design extension skills.
4. How do you deploy them online free of charge when a single document is available?
Once a satisfactory single file web page is available, many developers or independent beginner may need to quickly turn it into a publicly accessible address.
I went back to WorkBuddy and asked him questions about deployment and daily scenes:
I'm happy with this business card page. As the new beginner, I'd like to ask two questions: First, if I wanted to put this local HTML file on the Internet free of charge and turn it into an online business card that could be accessed by someone else, what would be the easiest way? Second, in addition to making web pages, what else can beginner do with WorkBuddy every day? You don't really have to do this. Just tell me what to do.
After consuming the calculus 0.15, it gives us the way to go online: The lightthing is that during the dialogue, WorkBuddy will be able to get access to the link in a few minutes; it will have to bind its domain name and host static files using Cloudflare Pages or GitHub Pages.
At the same time, it combes several light tasks that are applied daily: extracting table highlights from long files, recording to-do notes, and generating operational data tables in natural languages.
5. Summary of findings and experience
After running this light-weight stand-alone page, two practical experiences are more evident:
The first is the difference between default generation and the introduction of design skills: When the first version was freely generated, 1 minute 05 seconds out of 614 line codes, the layout being the usual blue and white template style; after the second version, although the code was only increased to 658 lines, it took latency to 8 minutes 08 seconds because of the addition of multi-scaling width measurements and visual review. If there is a higher demand for layout quality, the calibration time in this process is necessary.
This is followed by the calculation of power consumption: throughout the process, the generation of the initial version of consumption ◇ 1.26, the acquisition skills consumption ◇ 0.44, the depth re-engineering consumption ◇ 4.59, the deployment question and answer consumption ◇ 0.15, the cumulative consumption of 6.44. For scenes that require quick output using front-end single pages and do not want to devote effort to local construction, the overall cost is within acceptable range.
If you also have personal biographical data, product home page or project set that need to be collated, you can start by combing the core data and presentations, trying to generate them in conjunction with relevant design skills, and quickly building a suitable home page.
I'm Meng Ken, ex-Tencent T11, ex-byte technology Leader, now full time doing AI programming.
🔥 More AI programming field:
- GitHub：@mengjian-github
- Column: AI programming field
- The complete list: The comment section returns the business card page. I'll send you the collection.
You think it works? It's the greatest support for you.
The text is organized by the author with the help of AI, and is measured and revised by the author.
Auto-fetched and translated by AI Atlas. All rights belong to the original author.