用 WorkBuddy 搭建 OPC 一人公司官网

做一个能介绍产品、建立信任、留下联系方式的官网。先完成一版最小可运行的网站，再为移动端优化和正式上线打好基础。

一、为什么先做一个官网页面

对于 OPC 一人公司来说，官网是长期在线的名片。别人打开后，需要快速看懂你是谁、你做什么、你的产品能解决什么问题，以及如何联系你。这节课会带你完成一版最小可运行的网站，并为后续上线打好基础。

直接让 AI 开做，常见结果

• 首屏很大，但看不出你是谁
• 只介绍自己，没有讲清产品或服务
• 按钮写得模糊，访问者不知道点哪里
• 桌面看着还行，手机端一打开就乱
• 做完就结束，没有链接、二维码和下一版计划

跟着这节课走完以后

• 访问者能快速看懂公司和产品
• 产品解决的问题、核心亮点和适用对象都讲清楚
• 参考网站只用来拆结构，不照搬视觉
• 单页 HTML 在手机上也能读
• 最后有链接、二维码和下一版修改清单

二、这节课要怎么做

• 网站 brief
• Impeccable 定方向
• 素材包
• 参考拆解
• 首页路线
• 单页 HTML
• 手机检查
• EdgeOne 发布
• 下一版迭代

先记住这条顺序

先说清一人公司提供什么产品或服务、解决谁的什么问题，再请 Impeccable 帮你定下合适的设计方向。接着整理产品素材、拆参考网站、生成页面，最后用 EdgeOne Maker 发成链接。

1. 先定产品定位：给谁解决什么问题

先别急着挑模板。先用一句话讲明白：你的公司提供什么，服务谁，解决什么问题，希望访问者下一步做什么。

第一次做网站，很容易从配色和模板开始。页面很快就能铺满，可访问者看完仍然不知道你卖什么、适不适合他。

所以先写一句产品价值说明。比如：“我们为本地文创团队提供活动网页与传播物料，让一次活动从现场展示延伸到线上传播。”这句话不用追求广告腔，只要能说明产品、用户和结果。

一人公司官网要先完成四件事：介绍公司、讲清产品、说明适用场景、留下联系入口。第一版把这四件事做完整，就已经可以投入使用。

建站初期就能用

现在就让 Impeccable 帮你定设计方向

Impeccable 不必等页面做完才出现。brief 有了以后，就可以让它先确认目标用户、网站用途和品牌气质。WorkBuddy 后面生成页面时，会少走很多“先做一版通用模板，再整页返工”的弯路。

这一轮先定方向，不需要抠按钮阴影和动画。告诉它谁会看、在什么场景看、希望别人感受到什么，再请它给出首屏层级、排版、颜色和移动端的基础原则。

建站初期可复制 Prompt

请在建站初期使用 Impeccable 的设计思路，先帮我确定这个单页官网的设计方向，不要直接生成代码。目标用户是【填入】，网站用途是【填入】，主要使用场景是【手机扫码/社群转发/电脑浏览】，我希望给人的感觉是【可信/轻快/专业/有创作者气质】。请输出：首屏信息层级、排版方向、颜色建议、图片风格、按钮原则、移动端注意点，以及需要避开的通用 AI 模板特征。

你可以这样交给 WorkBuddy

• 让 WorkBuddy 先问你 6 个问题，再帮你整理成网站 brief。
• 把“不要写什么”也写进去，比如不夸大案例、不虚构客户、不把联系方式藏得太深。

我要为我的 OPC 一人公司做一个官网。请先问我 6 个必要问题，重点问清：公司或产品名称、目标用户、核心产品或服务、解决的主要问题、核心亮点、希望访问者采取的动作。根据我的回答输出网站 brief：网站目标、目标访问者、一句话价值主张、主按钮、必须展示的模块、需要准备的产品图片/案例/二维码/链接清单，以及一句 12 字以内的网站主标题。

请把这份 brief 整理成 OPC 一人公司官网项目说明。输出：公司与产品定位、目标访问者、要解决的问题、首页一句话、首屏按钮、六个页面模块、产品素材清单、案例或信任证据、不能写的内容。

2. 把能证明你的东西先找出来

方向定下来以后，把能说明产品、功能、场景和联系方式的材料找出来。

素材包不用一次备齐。先找出公司或产品标识、产品截图或实物图、产品与服务说明、核心亮点、适用场景、案例和联系方式。有这些，第一版已经能搭起来。

还没有成熟客户案例也没关系，可以先放真实的使用场景、演示截图、试用反馈或正在验证的项目。材料朴素一点没问题，真实信息比“行业领先”更能建立信任。

把这些素材收进一张表里，记下文件放在哪里、准备放进哪个模块、能不能公开、还缺什么。后面换图、改文案和上线检查，都会轻松很多。

你可以这样交给 WorkBuddy

• 让 WorkBuddy 把散乱素材整理成表格或 Markdown 清单。
• 让它标出缺口：缺产品图、缺功能说明、缺适用场景、缺案例、缺联系入口，分别怎么补。

请帮我整理一份网站素材清单。字段包括：素材名称、放在哪个页面模块、现有文件或链接、是否可公开、缺少什么、下一步怎么补。我的素材如下：{粘贴素材}

请根据这份素材清单，判断哪些内容适合放首页，哪些只能放下一版。输出一个“必须有 / 可选 / 暂时不要放”的三列表。

进阶阅读

用表格或文档支援包管理网站素材

如果素材一多，靠聊天记录很快会乱。可以让 WorkBuddy 用表格或文档支援包来管理，把产品文件、链接、二维码、文案和缺口放进一张清单，不替你编造功能或案例。

以后每次改网站，都先更新这张清单。哪张图能公开，哪个二维码换过，哪个案例还缺说明，一眼能看出来。

进阶可复制 Prompt

请把我的网站素材清单整理成表格，字段为：模块、素材、来源、文件路径、公开状态、替换建议、负责人、下一步。最后标出最影响上线的 3 个缺口。

3. 拆参考网站，只学它怎么讲

接下来找几个参考。我们不是抄它的样子，而是看看它怎样带着访客从第一屏走到联系入口。

找 2 到 3 个同类型的产品或服务官网就够了。你提供数字产品，就看产品官网；你提供咨询、设计或运营服务，就看服务型官网。参考太多反而容易把方向看乱。

打开一个网站后，顺着往下问：第一屏有没有讲清它是谁？按钮点下去会发生什么？案例放在什么位置？我为什么愿意相信它？联系方式找起来费不费劲？

教程里放了南孚，是为了看成熟品牌怎样安排产品和信任信息。服务型官网还要看服务如何分类、优势如何证明、适用对象如何说明，以及怎样把人带到咨询入口。

成熟网站可以帮你理清信息顺序和页面节奏，不能替你提供内容。品牌图、产品图和原文案都不要搬。最终放进页面的仍然是你自己的项目、服务和联系方式。

品牌/产品官网

南孚

看什么：学它如何用首屏、产品入口和品牌背书建立第一眼信任。

别照搬：不要照搬产品图、品牌文案和视觉风格。

设计与技术服务官网

Instrument

看什么：学它如何把服务、案例、团队能力放在同一条叙事线上。

别照搬：不要把大公司的团队规模和服务承诺原样搬到一人公司官网里。

设计服务 / 案例官网

Pentagram

看什么：学它如何用案例目录和项目说明证明服务能力，而不是堆形容词。

别照搬：不要为了高级感牺牲联系方式和行动按钮。

数字产品官网

Framer

看什么：学它如何把功能、场景和发布动作讲得很直接。

别照搬：不要把成熟 SaaS 产品的功能数量和强转化节奏原样套给第一版官网。

你可以这样交给 WorkBuddy

• 把参考网站截图或链接交给 WorkBuddy，让它拆模块顺序和首屏逻辑。
• 让它分清“可以借鉴的结构”和“不能照搬的内容”。

我会提供 2 到 3 个参考网站链接或截图。请不要仿写，不要照搬视觉。请只拆它们的页面结构、首屏信息、行动按钮、案例展示方式、信任证据和联系入口，并输出一张对照表。

请根据这些参考网站，帮我提炼一个适合一人 OPC 官网的页面结构。要求不超过 6 个模块，每个模块说明目的、要放的素材和最容易写空的地方。

进阶阅读

用 clone-website 做参考站拆解

如果参考网站比较复杂，可以把它交给 clone-website 做拆解。它会看页面结构、截图、真实素材、响应式变化和交互方式，比人工凭感觉截图更细。

这里的重点不是“复制一个站”。课堂上只拿它的拆解结果来学习：首屏怎么讲、模块怎么排、按钮放哪里、移动端怎么变。品牌图、产品图和原文案都不要搬。

进阶可复制 Prompt

请把这个参考网站当作学习样本，用 clone-website 的拆解思路分析它。只输出可学习的页面结构、首屏信息、按钮路径、模块顺序、移动端变化和交互方式；不要仿写品牌文案，不要照搬图片和视觉资产。

新 Skill

用 identity-skill 先确认设计，再做个人数字名片

“数字名片.skill”（identity-skill）适合把一人公司、个人经历、作品或服务和联系入口整理成一个可分享的网站。先让它按首页、项目或经历、服务或作品、联系入口分别给出参考图；确认方向后，再按确认稿整理素材并完成响应式页面。

来源与安装：identity-skill 官方 GitHub（查看说明并安装）。仓库安装命令为 npx skills add Sac-Y/identity-skill。

进阶可复制 Prompt

请使用 identity-skill，帮我做一个 OPC 一人公司的个人数字名片网站。先不要写代码。

我的身份或项目：{一句话说明你是谁 / 在做什么}
目标访问者：{客户、合作方、雇主或社群伙伴}
想展示的服务、作品或案例：{列 3～5 项}
联系入口：{微信、邮箱、预约链接等}

请先给我 2～3 个可视觉化的风格方向，并按“首页、项目或经历、服务或作品、联系入口”分别说明参考图应该表现什么。等我确认参考图后，再列素材清单并实现响应式单页网站。

4. 按六个模块排好官网结构

这一节先不写代码，直接按照任务卡的推荐结构，把官网排成六个连续模块。

访问者先通过导航找到内容，再在首屏看懂价值主张；接着了解产品或服务、核心亮点与功能，然后确认适用场景或案例，最后通过联系方式或 CTA 采取行动。

01

导航栏

清晰导航，快速跳转到各模块

02

首屏 Hero

一句话价值主张与核心行动按钮

03

产品 / 服务介绍

说明提供什么、能解决什么问题

04

核心亮点或功能

突出优势与功能，建立信任

05

场景 / 案例 / 适合谁

展示应用场景或案例，说明适合哪些人

06

联系方式 / CTA

提供联系方式，引导用户行动

这六个模块就是第一版的完整骨架。先保证信息齐全、顺序清楚，再考虑动画和复杂交互。

你可以这样交给 WorkBuddy

• 让 WorkBuddy 先按六个模块输出页面结构，不要直接写 HTML。
• 要求每个模块都说明：这一屏解决访问者的哪个疑问、需要哪份素材、按钮指向哪里。

请基于我的网站 brief 和素材清单，按以下顺序设计 OPC 一人公司官网结构，不要写代码：1. 导航栏；2. 首屏 Hero；3. 产品 / 服务介绍；4. 核心亮点或功能；5. 场景 / 案例 / 适合谁；6. 联系方式 / CTA。每个模块写清楚：访问者要看懂什么、需要放什么素材、标题方向、按钮动作、我还缺什么真实内容。

请为官网首屏写 5 组标题和副标题。每组都要讲清产品或服务面向谁、解决什么问题，并给出一个明确 CTA。不要使用“赋能、引领、打造、全链路解决方案”这类空话。

5. 让 WorkBuddy 生成第一版 HTML

讲述路线定了以后，再让 WorkBuddy 写页面。第一版先追求能打开、能读、能替换素材。

这一轮才开始生成 HTML。你可以要求移动端优先，因为现场展示、社群转发、二维码扫码，大多都从手机打开。

生成页面时，让 WorkBuddy 把图片、文案、按钮的替换位置说明白。你拿到代码以后，也知道下一次该从哪里改。

第一版不用完美。首屏说清楚，图片能加载，按钮和联系方式有效，就可以进入预览检查。别在配色和细节里卡太久。

你可以这样交给 WorkBuddy

• 让 WorkBuddy 基于六模块页面结构输出完整 HTML/CSS/JS。
• 要求代码里保留清楚的替换位置，不要把图片、二维码、联系方式写成看不懂的变量。

请基于上面的 brief、素材清单、六模块页面结构和 Impeccable 设计方向，生成一个 OPC 一人公司单页官网。要求移动端优先，页面必须依次包含：导航栏、首屏 Hero、产品 / 服务介绍、核心亮点或功能、场景 / 案例 / 适合谁、联系方式 / CTA。首屏要讲清公司或产品名称、目标用户、解决的问题和主按钮。视觉要可信、轻快，不要通用 AI 紫蓝渐变、不要卡片套卡片、不要空泛大标题。最后输出完整 HTML/CSS/JS，并说明每张图片和每段文案如何替换。

请检查这份 HTML：哪些图片路径需要替换，哪些文案还像模板，哪些按钮没有明确动作。请按“必须改 / 可以下一版改”分组输出。

6. 先用手机扫一遍

官网不是在桌面截图里完成的。线下展示时，别人多半是扫码后用手机看。

手机端先看首屏。3 秒内能不能看懂公司或产品名称、服务谁、解决什么问题？主按钮会不会被挤到屏幕外？

再按六模块顺序检查。导航是否能用，产品与服务是否讲清，核心亮点是否具体，场景或案例是否说明适合谁，联系入口是否明显。

最后看文字。绝对化承诺、虚构客户、过度包装的形容词，都要删掉，或者换成真实材料。

你可以这样交给 WorkBuddy

• 让 WorkBuddy 按手机首屏、图片加载、按钮、联系入口、文案可信度来检查页面。
• 让它给出下一版修改清单，不要只给一句“整体不错”。

请帮我检查这个 OPC 一人公司官网的手机端体验。重点看：导航是否可用；首屏能否讲清公司或产品名称、目标用户和解决的问题；产品 / 服务、核心亮点、场景 / 案例 / 适合谁是否完整；CTA 是否明确；图片是否加载；是否有横向滚动风险。请输出问题清单和修改建议。

请做一次官网文案体检，标出空泛大词、过度承诺、像模板的句子和缺少真实证据的位置。先不要整篇重写，只给我定向修改建议。

进阶阅读

再用一次 Impeccable，专门检查手机端

第 1 步里，Impeccable 帮我们定过设计方向。页面做出来以后，再让它按真实手机场景复查：首屏能不能在 3 秒内读懂、按钮好不好点、文字会不会挤、图片是否拖慢打开速度。

把实际页面和最初的设计方向一起交给它。这样它是在帮你纠偏，不会把已经成形的网站突然改成另一套风格。

进阶可复制 Prompt

请用 Impeccable 复查这个单页官网的移动端体验，并沿用我们在建站初期确定的目标用户、网站用途和品牌气质。请重点检查 390px 宽度下的首屏层级、正文字号、按钮触控区域、模块间距、图片加载、横向滚动和联系入口。按“现在必须改 / 下一版再改”给出修改清单，不要整页换风格。

7. 用 EdgeOne Maker 变成可访问链接

本地 HTML 只能自己看。要让别人扫码打开，就要把页面发布成一个真实链接。

发布前先整理上线版本：HTML、图片、二维码、联系方式、按钮链接都确认一遍。不要把半成品直接发出去。

课堂上如果已经配置 EdgeOne Maker 连接器，可以让 WorkBuddy 帮你把静态页面部署成预览链接。拿到链接后，再生成二维码，现场用手机扫一遍。

这一步不是重复做页面。第 5 步是“做出页面”，第 7 步是“让别人能访问”。链接能打开，网站才真正进入使用场景。

跟着这 3 张图完成第一次部署

• 在 WorkBuddy 输入框下方打开连接器列表，确认 EdgeOne Makers 已启用，再把网站文件和发布要求交给 WorkBuddy。
• 第一次使用时，浏览器会打开 EdgeOne 登录授权页。看到“登录成功，请返回使用 EdgeOne CLI”后，回到 WorkBuddy 继续。
• 部署结束后，打开 EdgeOne Makers 控制台。项目卡片显示“运行中”并出现“预览”入口，就说明网站已经有了可访问版本。

你可以这样交给 WorkBuddy

• 让 WorkBuddy 准备上线文件清单，再调用 EdgeOne Maker 完成发布。
• 让它把访问链接、二维码、手机截图和下一版修改项整理成交付说明。

我已经有一个单页官网 HTML 和素材文件。请帮我整理上线前清单：需要哪些文件、哪些链接要确认、哪些图片路径要检查、哪些联系方式不能错。然后说明如何使用 EdgeOne Maker 连接器把它发布成可访问链接。

请根据我的网站链接，生成现场展示话术。30 秒讲清楚：这个网站面向谁、访问者第一眼要记住什么、今天做出了什么页面、下一版要怎么让它真正被使用。

进阶阅读

用 EdgeOne Maker 连接器完成发布

EdgeOne Maker 适合放在网站快完成的时候用。它处理的是发布和访问链接，不负责替你判断内容是否真实，也不负责改好首屏文案。

用它之前，先确认页面能本地打开、图片路径正确、联系方式有效。发布之后，再检查桌面和手机端，最后生成二维码。

进阶可复制 Prompt

请使用 EdgeOne Maker 连接器帮我发布这个静态网站。发布前先检查文件结构、图片路径、入口 HTML、联系方式和按钮链接；发布后返回访问链接，并给我一份手机端检查清单和二维码展示前注意事项。

八、7 天迭代模板

网站第一版能打开就很好。后面 7 天不要急着大改，先补真实材料，看别人有没有看懂，再改最影响理解的地方。

复盘只看几个真实信号

看看访问者有没有看懂首屏，按钮有没有被点，二维码能不能扫开，有没有收到咨询，别人会不会问“你到底做什么”。这些小信号，比页面看起来多高级更有参考价值。

九、发布前检查清单

• 网站 brief 是否说清目标访问者、用途和主按钮？
• 页面是否完整包含导航栏、Hero、产品 / 服务、核心亮点、场景 / 案例 / 适合谁、联系方式 / CTA？
• 首页是否有真实产品图、服务说明、功能截图、场景或案例？
• 手机端第一屏能否看懂公司或产品名称、解决什么问题、下一步点哪里？
• 图片、二维码、联系方式和外链是否都能正常打开？
• 页面里有没有夸张承诺、虚构客户或空泛大词？
• 是否已经拿到访问链接、二维码、展示截图和下一版迭代表？

最容易踩的坑

别把一人 OPC 官网写成普通个人简历，也别只介绍创始人经历。访问者最需要先看懂的是：你提供什么产品或服务、解决什么问题、适合谁、如何联系。

附录：实操 Prompt 速查

正文流程跑完后，可以回到这里一次性复制常用 Prompt。真正操作时还是先读对应步骤，确认 brief、素材和发布目标，再挑最合适的一段使用。

先说清楚，再准备素材

我要为我的 OPC 一人公司做一个官网。请先问我 6 个必要问题，重点问清：公司或产品名称、目标用户、核心产品或服务、解决的主要问题、核心亮点、希望访问者采取的动作。根据我的回答输出网站 brief：网站目标、目标访问者、一句话价值主张、主按钮、必须展示的模块、需要准备的产品图片/案例/二维码/链接清单，以及一句 12 字以内的网站主标题。

请在建站初期使用 Impeccable 的设计思路，先帮我确定这个 OPC 一人公司官网的设计方向，不要直接生成代码。目标用户是【填入】，核心产品或服务是【填入】，主要使用场景是【手机扫码/社群转发/电脑浏览】，我希望给人的感觉是【可信/轻快/专业】。请输出首屏信息层级、六模块视觉节奏、颜色建议、产品图片风格、按钮原则、移动端注意点，以及需要避开的通用 AI 模板特征。

请帮我整理一份网站素材清单。字段包括：素材名称、放在哪个页面模块、现有文件或链接、是否可公开、缺少什么、下一步怎么补。我的素材如下：{粘贴素材}

拆参考，排路线，生成页面

我会提供 2 到 3 个参考网站链接或截图。请不要仿写，不要照搬视觉。请只拆它们的页面结构、首屏信息、行动按钮、案例展示方式、信任证据和联系入口，并输出一张对照表。

请基于我的网站 brief 和素材清单，按以下顺序设计 OPC 一人公司官网结构，不要写代码：1. 导航栏；2. 首屏 Hero；3. 产品 / 服务介绍；4. 核心亮点或功能；5. 场景 / 案例 / 适合谁；6. 联系方式 / CTA。每个模块写清楚：访问者要看懂什么、需要放什么素材、标题方向、按钮动作、我还缺什么真实内容。

请基于上面的 brief、素材清单、六模块页面结构和 Impeccable 设计方向，生成一个 OPC 一人公司单页官网。要求移动端优先，页面依次包含：导航栏、首屏 Hero、产品 / 服务介绍、核心亮点或功能、场景 / 案例 / 适合谁、联系方式 / CTA。首屏要讲清公司或产品名称、目标用户、解决的问题和主按钮。最后输出完整 HTML/CSS/JS，并说明每张图片和每段文案如何替换。

手机检查、发布和复盘

请帮我检查这个 OPC 一人公司官网的手机端体验。重点看：导航是否可用；首屏能否讲清公司或产品名称、目标用户和解决的问题；产品 / 服务、核心亮点、场景 / 案例 / 适合谁是否完整；CTA 是否明确；图片是否加载；是否有横向滚动风险。请输出问题清单和修改建议。

请用 Impeccable 复查这个单页官网的移动端体验，并沿用建站初期确定的目标用户、网站用途和品牌气质。请重点检查 390px 宽度下的首屏层级、正文字号、按钮触控区域、模块间距、图片加载、横向滚动和联系入口。按“现在必须改 / 下一版再改”给出修改清单，不要整页换风格。

我已经有一个单页官网 HTML 和素材文件。请帮我整理上线前清单：需要哪些文件、哪些链接要确认、哪些图片路径要检查、哪些联系方式不能错。然后说明如何使用 EdgeOne Maker 连接器把它发布成可访问链接。