零基础用 WorkBuddy 制作个人网页：从设计到发布

先确定要做什么样的个人主页

没有网页基础，也可以从一份已有简历开始，让 WorkBuddy 先整理页面设计，再生成一个可以在浏览器中预览的静态网页。整个过程包括准备资料、设计页面、生成 HTML、检查效果和发布。熟悉材料、提示清楚时，半小时可以完成一次基础尝试；实际耗时会因资料多少、修改次数和客户端功能而不同。

本文以求职用个人主页为例。页面内容应来自自己的经历和作品，工具负责协助整理与呈现；姓名、时间、项目和数字都要由本人确认。

准备简历、照片和可公开资料

如果已有 PDF 或 Word 简历，可以直接作为资料，不必重新输入。先复制一份供本次任务使用，移除不希望公开的电话、住址、客户名称和内部信息。准备一张愿意公开使用的个人照片；项目作品也只选取可以公开展示的部分。

没有现成简历时，可以准备一段自我介绍、工作经历、教育经历和项目说明。信息不全的地方先留空，让 WorkBuddy 提问；不要为了让页面显得完整而补造经历、业绩或联系方式。

先看设计稿，再调整页面内容

在 WorkBuddy 中选择“设计”，再进入“网站设计”。通过输入框左下角的“＋”添加简历或其他资料，检查输入框里的资料是否正确。图片素材可以选择先用色块占位，等页面布局确定后再换成自己的照片和作品；需要装饰插画时，再考虑 AI 生图。个人照片和真实项目作品应使用本人提供的素材。

如果暂时没有明确的设计想法，可以使用推荐风格；有具体偏好时，直接写明配色、布局和页面气质。以下指令可作为起点：

用这份简历帮我设计一个中文个人主页，包含自我介绍、代表项目、工作经历、教育经历和联系方式。采用黑白蓝配色，标题醒目，留白充足，排版整齐，并为个人照片留出位置。内容只使用我的资料，不要编造经历、业绩和数字；缺少的信息先向我确认。先展示设计稿。

如果 WorkBuddy 询问页面面向谁或需要哪些板块，按自己的实际用途回答。收到设计稿后，先核对姓名、经历和数字，再检查布局是否符合预期；有问题就指出具体位置和修改方向。

把设计稿生成静态 HTML 网页

设计稿出现在画布后，可以继续对话调整，也可以框选局部提出修改。画布适合检查和编辑设计，但它本身不一定是可分享的网站。确定设计后，要求生成 HTML 文件及页面需要的图片，并指定保存位置。

根据当前画布的设计稿，生成一个用于个人展示的静态 HTML 网页，提供 index.html 和必要的图片文件，保存到当前工作空间的 site 子文件夹。如果还没有选择工作空间，先提醒我选择。网页不需要登录、注册或数据库；电脑和手机上都要清楚易读，不能出现文字挤在一起或页面横向溢出。导航点击后能跳到对应板块，照片使用我提供的彩色原图。联系方式只保留我确认可以公开的内容。完成后告诉我文件保存在哪里，以及如何打开预览。

生成文件后，按 WorkBuddy 提供的方式打开 index.html 预览。看到本地文件地址，只表示当前网页文件在自己的设备上，并不代表它已经发布到网上。

按需增加克制的页面动效

如果第一版比较平，可以在现有页面上逐项增加动效。一次说明希望出现的效果和必须保留的内容，先检查修改结果，再继续提出下一项要求。下面的提示词可以按需要删改：

请在现有个人主页上补充下面的动效，保持黑白蓝配色、大标题、细分隔线和充足留白。只修改呈现方式，不改变我的姓名、经历、项目、联系方式和真实数字，也不要新增虚构业绩。

1. 开场与首屏：可加入简短黑底开场，姓名逐字出现，蓝色细线展开后开场退出；设置约 2.6 秒超时放行，结束后恢复页面滚动。首屏标题按行显现，照片、介绍和资料区域稍后依次出现，元素之间错开约 0.1 至 0.2 秒。

2. 标题关键词：从我的实际专业方向中选几个短词，在标题固定位置上下切换，约每 2.6 秒更换一次，过渡约 0.6 秒。关键词用蓝色，可加轻微闪烁的光标；预留宽度，避免切换时整行跳动。

3. 滚动入场与分隔线：板块首次进入屏幕时，从下方约 36 像素轻轻上移并淡入，持续约 0.9 秒；同组卡片依次出现，标题逐行揭示，分隔线从左向右展开。完成后保持可见，不要每次滚动都重复播放。

4. 专业词条：用已有专业关键词做横向无缝循环带，匀速滚动，一轮约 26 秒；鼠标悬停时暂停，移开后继续。不要新增资料中没有的资质或标签。

5. 关键数据：黑底数据区域的数字首次进入画面时从 0 增加到真实值，约 1.4 秒完成，先快后慢；保留单位、千位分隔和必要小数，最终显示准确数字，只播放一次。悬停数据块时轻微上移约 8 像素，上方细线变蓝。

6. 履历时间线：保留左侧竖向时间轴，蓝色进度线随滚动向下延伸，经过的节点变蓝并出现淡蓝光圈。当前职位和时间用蓝色突出，圆点对齐轴线，手机上也不能错位。悬停某段经历时，单位标题变蓝，要点向右轻移约 4 像素；不要额外添加可能造成溢出的年份刻度。

7. 照片、卡片和链接反馈：照片保持彩色与 3:4 比例，悬停时在框内放大到约 1.04 倍且不改变边框尺寸；加载失败时显示占位内容。专业卡片悬停时标题变蓝、顶部细线展开、右上角出现小箭头；个人资料行轻微右移，导航与证书文字的下划线平滑展开。反馈保持克制，不做大幅翻转或弹跳。

8. 导航与阅读进度：顶部导航固定，点击后平滑滚动到对应板块，标题不被导航遮住。导航底部的蓝色阅读进度线随页面滚动增长；向下滚动一段距离后显示“回到顶部”按钮。

9. 手机、键盘与减少动态：手机上照片、文字和时间线不能横向溢出，信息不能依赖悬停才看得到；键盘可操作控件要有清楚焦点。系统开启减少动态效果时，跳过开场，停止自动轮播、跑马灯和闪烁，数字直接显示最终值，正文直接可见。动画加载失败或脚本出错时，也不能把正文藏起来或锁住滚动。

完成后说明实际改了哪些效果，并检查桌面、手机和减少动态模式。

页面动起来不等于体验一定更好。保留真实内容优先，动效只服务于阅读层次；遇到不喜欢的效果，指出对应板块和行为，逐项调整即可。

预览并检查桌面和手机效果

先从页面顶部慢慢检查到页尾，再缩窄窗口模拟手机屏幕。重点核对姓名、履历、项目名称、数字、照片、联系方式和导航跳转；同时留意文字是否拥挤、图片是否被裁切、时间线是否对齐，以及页面是否出现左右滑动。

如果排版不合适，告诉 WorkBuddy 具体问题，例如“手机上姓名显示不全”或“导航遮住了板块标题”，并要求只修正对应布局。页面交互和动效也应逐项操作检查；开启系统减少动态效果后，确认正文仍可直接阅读。

发布网页并确认访问状态

检查内容适合公开后，在 WorkBuddy 中打开本地预览的 index.html，使用右上角分享菜单中的“发送链接”进入上传流程。等待界面确认文件已上传至资料库后，再打开该文件的在线版本。

在在线版本中打开分享设置，进入“发布”页签并启用“发布为网站”，然后复制系统生成的访问地址。只有这一步完成后，才有可供他人访问的在线网页；本地预览文件仍只在自己的设备上。

开启公开访问前再次确认页面没有私人联系方式、住址、客户资料或公司内部内容。发布后用手机打开一次，并在未登录的浏览器里确认页面可访问；再检查导航和已保留的联系方式是否有效。企业账号若限制对外发布，应以管理员设置为准。发布功能或界面名称可能随版本调整，以当前客户端显示为准。

先完成基础版本，再逐步完善

第一次制作时，先把真实内容、清楚布局和手机适配做好，再决定是否增加动效。保存好 HTML 和页面素材；以后有新的项目或经历时，可以在现有网页上提出具体更新要求，并重新检查生成结果和公开内容。

使用声明

本指南介绍使用 WorkBuddy 设计、生成和发布个人展示网页的基本流程。客户端界面、功能与发布权限可能随版本或账号设置变化；请在发布前核对个人资料、文件内容和公开范围，并由本人确认网页中的事实与联系方式。