Using WorkBuddy to Build a Personal Card Webpage — Attaching an Open-Source Design Skill Changes the Result Completely

Hi everyone, I'm Meng Jian.

Many people who want to do indie development or build a personal brand get stuck at the first step when making a webpage: no front-end design experience, and pages directly written by AI carry a heavy "AI flavor" with crude layouts that are hard to show off. This article walks through the full beginner workflow with WorkBuddy: first generate a basic personal card webpage card-v1.html, then call the open-source design skill taste-skill to upgrade it into card-v2.html with a Bento Grid layout and dark, textured style, and finally grab a free deployment option.

Go to the official site (workbuddy.cn) to download the client, install it, and open it directly.

1. Run a bare-bones basic card first (card-v1.html)

After opening the software, click "New Task" in the upper-left to enter the main conversation interface. The left side is the navigation bar, and the center is the main conversation input box.

Before starting, I clicked "Experts·Skills·Connectors" in the left navigation bar, then clicked "Skills" to look at the skill management center (SkillHub). It contains many ready-made extension plugins, such as office document processing, browser automation, and code development tools.

After browsing the ecosystem, I clicked "New Task" to switch back to the chat interface. I wanted to test what kind of page it could write by default without attaching any extra design plugins.

I pasted the first prompt into the input box, handing it my real resume and projects in full:

Please write a single-file HTML personal card webpage (write it directly first, no need to call extra design skills), save it to the Desktop or current working directory, and name it card-v1.html. Use my real information; don't make things up or leave placeholders:
- Identity tags: Full-time AI entrepreneur / one-person company practitioner / former big-company (Tencent, ByteDance) technical leader, ten years of technical and architecture experience, graduated from Xi'an Jiaotong University
- Representative book: led the writing of "DeepSeek Minimal Introduction and Application", cumulative sales over one million copies
- Core products and projects:
  1. Ziliu (ziliu.online): self-developed multi-platform content distribution tool
  2. ShipSolo AI Programming Overseas Program (shipsolo.cn): initiated and operated
  3. ShipSite: self-developed website generator project
  4. Jian·Xing AI Learning Companion Group: founded and operated a lifetime membership community, and jointly landed a 500-square-meter shared office space in Hangzhou
- Practical data: 270,000 lines of code and nearly 3,000 commits completed solo in 3 months with multiple AIs; roughly 54,000 followers across 23 accounts on all platforms; first paid newsletter column sold nearly 2,000 copies

Requirements: include a personal intro hero image area, core achievement data cards, representative product and project display, and bottom social contact entry. After finishing, tell me the full saved file path, how long this took, and how many credits or tokens were consumed.

I clicked the send button at the bottom-right, and after about 1 minute 5 seconds, WorkBuddy finished generating.

The interface displayed the specific file path, showed 614 lines of HTML/CSS/JS output, consumed ◇ 1.26 compute, and pulled up a small live preview window on the right.

Clicking the expand button in the upper-right of the preview area opens card-v1.html full-screen in a separate browser window.

The first screen has large name text, identity tags, and two lines of personal description, with a card-style preview card on the right.

Scrolling down shows a six-cell number wall: 1 million copies sold, 270,000 lines of code, 3,000 commits, 500㎡ of space, and other data already listed; further down is a skeuomorphic book cover and text introduction of "DeepSeek Minimal Introduction and Application".

Scrolling to the bottom reveals list cards for core products like Ziliu and ShipSolo, plus social contact entry points and footer.

After viewing the overall result, my assessment: the information content matched perfectly without missing anything, and the logical structure was tidy. But this conventional white-background blue-text card layout is relatively flat and lacks textural detail; it looks more like an initial page prototype.

2. Check skills, call taste-skill for a deep rebuild

To improve the page layout, you don't need to grind through CSS yourself. If you don't know which design plugins are installed in the client, you don't need to hunt through menus one by one; just send one sentence in the chat box to have it self-check.

Back on the main screen, I entered the second prompt:

Please check which skills related to web design, front-end UI, or visual beautification you currently have installed (Skills), and list their names and uses for me; if there are none, please recommend a well-regarded open-source front-end/web design skill, install it directly for me, and tell me the result and time taken when done.

After waiting about 12 seconds and consuming ◇ 0.44 compute, WorkBuddy organized the 6 locally installed skills into a table and presented them.

The list included taste-skill, which specifically removes the "AI flavor", impeccable for motion effects and interaction, frontend-design for layout, and others, each with a description of its use.

Since the environment already had taste-skill, I called it by name directly and asked it to rebuild a version with the currently popular Bento Grid.

I entered the third prompt:

The first version of the page (card-v1.html) was a bit ordinary. Now please call by name the web design Skill you just listed (or just installed), help me redesign a more premium-feeling personal card page with more striking layout and colors, keeping the information unchanged, and additionally add a Bento Grid layout, hover micro-interactions, and a click-to-pop-up WeChat QR code card modal. Save it as a new file called card-v2.html, don't overwrite the first version. When done, tell me the full path of the new file, the specific visual details you improved, how long it took, and how many credits or tokens were consumed.

After sending, this rebuild process was clearly more detailed and deeper.

After WorkBuddy called taste-skill, it first established a dark color scheme and large typography approach, then started writing HTML with inline styles. During this process, it automatically invoked browser tools to perform real render measurements and validation at multiple screen widths, and retrieved images to integrate into the overall design.

This step took about 8 minutes 8 seconds, consumed ◇ 4.59 compute, and ultimately delivered card-v2.html with 658 lines of code.

3. View the new finished product and details

Clicking the generated card again opens card-v2.html full-screen in the browser to view the result.

The visual texture of the first screen has clearly changed: the entire background switched to a dark minimalist color scheme, the large bold name on the left has significantly stronger visual impact, with a slogan added, and prominent capsule buttons added to the upper-right and below the first screen.

Scrolling down enters the core Bento Grid area: on the left is a full-block practical data wall (270,000 lines of code, 3,000 commits, 54,000 followers, 2,000 newsletter copies), and on the right "DeepSeek Minimal Introduction and Application" has been made into an independent three-dimensional physical book display card, with an "Add WeChat" card embedded beside it. On mouse hover, the card edges show obvious micro-interactions, with richer layering than the first version.

Continuing to scroll to the bottom, the four core products Ziliu, ShipSolo, ShipSite, and Jian·Xing AI Learning Companion Group are arranged in bento cards, each with a light gray tag and feature description.

At the very bottom is a full-width slogan: "One person can also turn an idea into a product."

From the blue-white monotone card to this dark Bento layout version, the main difference before and after was precisely specifying the design extension skill.

4. After getting the single file, how to deploy it online for free?

After getting a satisfactory single-file webpage, many developers or indie beginners may need to quickly turn it into a publicly accessible URL.

I switched back to WorkBuddy and asked it about deployment and everyday use cases:

I'm very satisfied with this card page! As a just-starting beginner, I also want to ask two questions: first, if I want to put this local HTML file online for free so it becomes an online card people can view by clicking a link, what's the simplest and easiest way? Second, besides making webpages, what are 3 practical things a beginner can do with WorkBuddy in just a few minutes that produce visible results? No need to actually deploy; just reply to tell me the methods.

After consuming ◇ 0.15 compute, it gave the deployment approach: the lightest option is to have WorkBuddy publish it directly in the conversation, getting an access link within a few minutes; to bind your own domain, use Cloudflare Pages or GitHub Pages to host the static file.

It also outlined a few lightweight everyday tasks: extracting table highlights from long documents, converting recordings into to-do meeting notes, and generating business data tables through natural language.

5. Hand-on test summary and reflections

Running this lightweight indie single page through WorkBuddy, two practical experiences stood out:

First, the difference between default generation and introducing design skills: in the first free generation, 614 lines of code came out in 1 minute 5 seconds, with a common blue-white template layout; in the second version with taste-skill attached, although the code only increased to 658 lines, because it added multi-width render measurement and visual review, the time extended to 8 minutes 8 seconds. If you have higher requirements for layout texture, the render calibration time in this process is necessary.

Second, compute consumption: throughout the flow, generating the initial version consumed ◇ 1.26, checking skills consumed ◇ 0.44, the deep rebuild consumed ◇ 4.59, and the deployment Q&A consumed ◇ 0.15, for a cumulative 6.44 compute. For scenarios where you need to quickly produce usable front-end single pages and don't want to spend effort configuring a local build environment, the overall cost is within acceptable range.

If you also have a personal resume, product homepage, or project collection that needs organizing, you can first sort out the core data and descriptions, then try generating with the relevant design skill, and quickly build a personal homepage suitable for display.

---

👋 I'm Meng Jian, former Tencent T11, former ByteDance tech leader, now doing full-time AI programming.

🔥 More AI programming practice:

• GitHub: @mengjian-github
• Newsletter: AI Programming Practice
• Full list for this issue: reply "card webpage" in the comments, and I'll send you how to get it

Found it useful? Like + Bookmark is the biggest support 🙏

This article was organized by the author with AI assistance; the content was tested and reviewed by the author.