当沉香之乡遇上 Seed-2.1-pro：我用 AI 给村子做了一个数字门面

大家好，我是邵奈一，一个爱折腾的实战派技术博主。 文章对你有帮助是我的荣幸，欢迎评论区交流。豆包工作（Seed-2.1-pro）从零为广东茂名电白村委搭建沉香品牌官网的完整实操记录：七步提示词、后台交付机制，以及视觉类需求怎么验收。

前段实践我在抖音上发过一条视频，内容很简单：免费用 AI 帮 100 个人解决需求。

发这条视频不是一时兴起，而是一直都想多交交朋友，也多开阔一下视野。结果有一天，广东茂名电白村委的人，真的找上门来。

这两年国家一直在推乡村振兴 和数字乡村建设，文件里写了很多，但落到具体的村，最缺的往往不是政策，而是"有人能把好工具真正用起来"。村子有好货、有手艺，却常常卡在"没人会建站、没人懂线上"这一步。

电白是"中国沉香之乡"。他们跟我说的话很朴素：村里的沉香是好东西，但外面的人找不到，卖不出去，想做个网站。

那一刻我意识到，这不是一个"帮忙做个网页"的小活。这是一个村子，第一次想要在互联网上有个自己的门面。

加上我平时玩各种 AI 工具也很多，所以这个事情还是非常有意义的。

所以我把这件事接了下来。

其实写这篇，我不只是想说"我帮广东茂名电白的村委做了个网站"。我平时看下来，很多人对 AI 工具是"知道它厉害，自己一上手就懵"------不知道从哪句话开始、需求怎么讲清楚、怎么一步步拿到成品。

所以这一次，我特意用 豆包工作（使用Seed-2.1-pro模型） 把整个过程原样记录下来：从第一句提示词到上线，每一步的提示词都给你摆好，你照着抄、照着做，就能复刻一个属于你自己的"门面"。

下次你遇到类似的事------给自家小店做个页、给社团弄个介绍站------也能用同一套方法自己解决。

一、需求分析：村委的痛点，就是网站要解决的问题

动手之前，我没急着让 AI 写代码，而是先把村委的话拆成"要解决的问题"。

村委当时跟我说的很朴素，翻来覆去就几句：村里的沉香是好东西，但外面的人找不到、卖不出去，想做个网站。

我把这几句话，翻译成了一份痛点清单：

客商找不到货：想批量收香的商人，搜不到这个村，只能靠熟人一层层打听 → 网站得"能被搜到、能打开"，先解决"找得到门"。
信息散在口头：谁家有什么货、什么品级、什么价，全在微信群和口口相传里，没有一本公开的账 → 网站要把产品、价格、品级，摆成一本人人能看的"公开账"。
村里没人会维护：不是没想过上网，但建站、改内容，对不写代码的人是道高墙 → 网站得让不懂代码的人也能自己改。

你会发现，上面每一条痛点，后面都直接对应网站的一个功能。后面第四节、第五节那个能展示、能卖、村委自己能改的站，就是照着这张清单一个个填上的。这一步叫"需求分析"------它不玄，就是把别人模糊的"想做个网站"，变成一张清楚的"要解决什么"的清单。

这点很关键：以后你遇到任何类似需求（给店里做个页、给社团弄个介绍站），都先别动手。先问清楚对方卡在哪、到底要什么，把痛点一条条列出来，再让 AI 照着清单做，或者让 AI 照着改。这比上来就甩一句"帮我做个网站"，结果要靠谱得多。

二、技术选型：为什么是 Seed-2.1-pro

做这样一个官网，表面上是写代码，实际上是三件事搅在一起：

要写代码------首页、关于、产品列表、产品详情、后台管理，一套结构得立起来。
要审美在线------沉香是文化类目，页面得有那口气质，不能是模板堆出来的廉价感。
要能持续改------村里的产品和文案会变，得让不懂代码的人也能换内容。

这也是为什么我选了 Seed-2.1-pro 。它这一轮升级的重点，正好压在我需要的三个点上：多模态 Coding、Agent 长程执行、视觉理解。写代码、看设计、一步步把活干完，它是奔着"交付"去的，不是"给段示例代码让你自己跑"。这一轮的硬指标也撑得住：Agent 幻觉专项 38.4%→64.8%、复杂仓库 Coding +12.4%、VLM 图像定位 +10%、Coding 成本 -40%+。

我用的是豆包工作 软件，把任务交给它，让它实际建、实际跑，而不是只吐代码。平时大家用豆包也用得很熟悉，其实豆包工作与豆包差不多一样使用就行，豆包工作的模型更多选项，可以选择最新旗舰模型，比如： Seed-2.1-pro。

三、环境准备：开工前把工具和想法备好

你跟着做之前，只需要准备三样东西，不需要会写代码：

一个清晰的想法：你到底想做什么（比如"给村里的沉香做个能展示、能卖的官网"）。
打开豆包工作 ，新建对话，把模型切到 Seed-2.1-pro。安装好豆包工作软件，打开之后，可以将工作任务，选择是"本地电脑 "，右下角的模型选择："豆包 2.1 Pro "，也就是对应的"Seed-2.1-pro "。推理强度选择"高"，这样可以充分发挥模型的性能。
一点耐心：别指望一句话出成品，我们是一步一步喂的。

下面第四节开始，每一步都给你现成提示词，直接复制粘贴就行。

四、开发实现：从一句话到能打开的站

我们没法、也没必要一次性把"做一个官网"甩给它就等结果。我是把它拆成一步一步喂的------每一步都是"说一句话 → 看它做出来 → 不对就再纠一句"。下面是我真实走过的顺序，每一步都附了可直接复制粘贴给 Seed-2.1-pro 的提示词（在豆包工作里粘贴即可），你跑完每步把截图发我，我帮你插进对应的占位里：

第一步：先立骨架。 先把多页结构搭起来，别管好看不好看。我给 Seed-2.1-pro 的第一句提示词（可直接复制粘贴）：

帮我用纯静态前端（HTML + CSS + 一个 site.js，不用任何框架）搭一个沉香品牌官网的多页框架。页面包括：首页、关于我们、产品列表、产品详情、后台管理。要求：多页之间用普通 <a> 链接跳转，不要用 SPA / 单页路由，导航栏在每个页面都出现且能跳。先不追求美观，把目录结构和跳转跑通就行，每个页面先放占位内容。

如果大家实现的是其他案例，你可以直接改我上面的提示词，下面的提示词也是类似的。

按提示打开index.html文件，我的效果如下：

第二步：定视觉调性。 这一步最磨人，也是沉香这个类目能不能"对味"的关键。提示词：

现在调视觉。整体要符合"沉香"这种文化类目：主色用米白 + 暖棕，标题用中文衬线字体（思源宋体 / Noto Serif SC），大字压在留白上；气质要安静、慢、有文化感，不要科技风、不要像 SaaS 后台。右上角放一个"沉香"二字的印章式标识。首页要有大标题 + 大留白的仪式感。

Seed-2.1-pro 模型的独特优势： 1、其实 Seed-2.1-pro 这款模型，在上一次已经帮我完成了这个色调了，这就是模型强大之处。 2、会自动截图质检，而且由于我们之前是基于上一版来去修改的，它会自动帮我们备份，避免我们找不到之前的版本。如下图：你们在操作的时候，你也可以把提示词丢给 AI ，让 AI 给你生成专业的风格，现在我这个是调整好了的。通过"定视觉调性"，可以发现我们的网站更加大气了。

第三步：填真实内容。 骨架和皮都有了，得往里装真东西，不然就是空壳。提示词：

往页面里填真实内容。图片我已经提供给你了。产品分四类：沉香手串（佩戴，¥680 起）、沉香线香（熏香，¥128 起）、沉香摆件（陈设，¥1280 起）、沉香原材（收藏，面议）。首页文案------使命："让沉香之美，成为可触可达的生活方式"；愿景："成为值得信赖的沉香文化社群与优选平台"；故事："始于对一缕沉香的着迷，我们走访产地、遍访匠人，只为把真正的好香交到懂它的人手中"。中间四个优势模块：源头直采、匠人手作、社群共益、正品保障。底部放社群入口和联系方式。

效果图如下：

可以发现我们提供的图片也已经加入到网站里了。

第四步：把内容变成"村委能改"。 这是从"我能做"到"村里能用"的关键一跳------不然每次改字都得找我。提示词：

把写死在 HTML 里的产品名、价格、文案抽成一个后台可配置的数据文件（如 products.js / products.json），前台页面读取它来渲染。再做一个独立后台管理页：能列出产品、增删改、保存后前台自动更新。村委不懂代码，要能自己改产品、改文案。后台入口和前台分离，加一个简单入口即可。

后台就生成了。

第五步：调手机端。 提示词：

检查窄屏（手机）排版，做响应式适配：加断点，把产品改成卡片网格布局，导航在手机上正常显示（汉堡菜单或横向滚动）。保证手机上也好看、能点。

效果如下：

第六步：本地预览 + 自查。 我在豆包工作里点开每个页面、每个产品详情链接，确认路由都通、没有断链、没有错位。发现的问题再丢给模型修。提示词：

帮我做一次自查：逐一点开每个页面和每个产品详情链接，确认路由都通、没有 404 / 断链、没有错位或大片空白。把发现的问题列出来并直接修掉。

由于 Seed-2.1-pro 这款模型足够强大，已经把很多容易放错的地方都考虑到了，所以并没有需要修复的地方，关键是还有视觉核对能力。回复结果如下：

第七步：部署上线。 提示词：

这个站是纯静态的，帮我选一个零运维的部署方案并给步骤：用轻量静态托管（如 Cloudflare Pages / GitHub Pages / 对象存储静态网站托管），把文件传上去，得到一个能稳定访问的公网地址。给出具体操作步骤或命令。

可以看到我们提供的方案里边，模型会给我们做友好的判断，指引用户去选择最好的方式。这里边模型提供的方式是：腾讯 EdgeOne Pages。所以大家在平时使用的过程中，也不需要担心自己会不会某些技能，大模型会帮你做判断，你只需要把自己想做的事情丢给大模型就可以。

那么大模型提供了步骤之后，你可以按照它的步骤来去操作。当然你也可以让豆包工作这个软件帮你去打开要注册的网址，然后你自己注册一下，后面的创建项目、直接上传等等，你直接让豆包工作去帮你完成就可以了。

每一步都不是"写一段代码"，而是"说人话 → 它动手 → 我看效果 → 再纠一句"。省力的不是某一行代码，是这一整条链 Seed-2.1-pro 能自己跑完。

五、成果交付：这个门面长什么样

我打开它的第一版，视觉上先让我放心了------不是那种一眼假的后台模板风。

后面我又按自己的审美磨了三轮（磨的过程和验收方法放在第六节，这里先看成品）：主色是米白配暖棕，标题走中文衬线，大字压在留白上；右上角是一枚书法体的"今林"标识；整体气质是安静的、慢的------不是企业站，也不是后台，更像一本摊开的册子。沉香这个类目最怕做成科技风，这一点它没跑偏。

磨完的三件事，都能拿数字说清楚：

改的地方	改之前	改之后
页头右上角的标识	一张自带近白底的方形图，贴在页头上有明显一块白	去底透明的正方形 SVG，透明区与页头背景最大通道差 = 0
页头高度	142px（正方形标识把页头顶高了）	81px，手机端 61px
全站字体	衬线、黑体混着用，字号字距各写一套	思源宋体（标题 / 导航 / 标签 / 价格 / 按钮）+ 思源黑体（正文），三档字重

顺带一个意外收获：标识换成 SVG 之后只有 60KB，比原来那张 191KB 的 JPG 还小。

首页文案落下来是这样几句：

使命：让沉香之美，成为可触可达的生活方式。
愿景：成为值得信赖的沉香文化社群与优选平台。
故事：始于对一缕沉香的着迷，我们走访产地、遍访匠人，只为把真正的好香交到懂它的人手中。

中间是四个优势模块------源头直采、匠人手作、社群共益、正品保障。每一条都对应村里产业的真实卖点，不是空话。

再往下是产品区，四类东西摆得清清楚楚：

产品	定位	价格
沉香手串	佩戴	¥680 起
沉香线香	熏香	¥128 起
沉香摆件	陈设	¥1280 起
沉香原材	收藏	面议

每个产品都能点进详情页，有完整说明和价格。底下还有社群入口和联系方式------这是一个能走完"了解 → 看货 → 联系"的完整路径，而不是一个只放着几张图的静态页面。

最后我特别看重的是那个后台管理 。它的存在意味着：村委的人以后自己就能换产品、改文案，不用每次都找我，也不用懂代码。这才叫"交付"，而不是"做完就锁死"。

后台是一个独立页面 admin.html，跟前台完全分开，前台页脚只挂一个小小的"管理入口"，不占主导航。打开就是两个标签：

产品管理：新增、编辑、删除产品，字段是名称、用途、价格、图片路径、介绍。
页面文案：首屏大标题、品牌故事、使命愿景、四个优势模块、社群入口、联系方式，全都是填表改。

保存分了三个通道，对应三种场景：

按钮	作用	谁用
保存（本机立即生效）	存进当前浏览器，本机刷新就变	村委自己试改
导出 products.js	下载数据文件，替换服务器上的同名文件	正式发布，所有访客看到
保存到数据文件	直接写本地文件（Chrome / Edge）	本地维护

关键在中间那一行：村委改内容，不用碰任何一行 HTML，也不用重新部署整站，只替换一个数据文件。静态站能"活着"、而不是"做完就死"，靠的就是这一下。另外还有个细节------改动没保存就关页面会拦一下，免得白改。

六、技术复盘：我把链接打开看了一遍

我打开线上地址核对了一遍，站点是纯前端静态结构------5 个 HTML 页面加一套 CSS，脚本只有两个文件，页面之间靠普通链接跳转，没有塞重型框架。

这个选择是有道理的：

跑得快：静态页面加载直接，村里带宽一般也不拖后腿。
好维护：出问题好定位，不用折腾构建链。
成本低：放在轻量托管就能跑，村子用得起。
内容可管：业务内容走后台配置，页面本身不用动。

产品是独立详情页，每个商品有自己的一页；后台独立入口，和前台分离。结构不炫技，但每一处都对应一个真实的使用场景。

它到底是怎么组织的？

整站 5 个 HTML 页面（首页、关于我们、产品列表、产品详情、后台管理），配 1 个样式文件、2 个脚本文件（site.js 管前台渲染，admin.js 管后台增删改）、1 个数据文件 data/products.js。页面之间全部走普通 <a> 链接，没有单页路由，没有框架，没有构建工具。

所有产品和文案都挂在 data/products.js 里的一个 window.SITE_DATA 对象上：前台读它渲染，后台改它。"改内容"和"改代码"是彻底分开的两件事------这就是村委能自己动手的原因。

怎么部署方式？

纯静态站不需要服务器，我把它放在腾讯 EdgeOne Pages：整个文件夹传上去，得到一个固定公网地址，不用配置，不用运维。以后要上新货，流程就是"后台改 → 导出 products.js → 覆盖服务器上那个文件"，其他文件一律不动。

为什么不上框架？

这个站真正的交互只有三样：页面跳转、列表渲染、表单增删改。原生 JS 一百多行就能吃完。换成 Vue 或 React，换来的是多一层构建链和一堆依赖------村里没人能维护它。选型的标准不是"先进"，是"三年后接手的人能不能看懂"。

但这次真正让我改观的，是它"看得见"这件事。

这个站有一半工作量是视觉类需求：标识要透明、要正方形，页头要矮，字体要统一。这类活有两个特点，恰好是纯代码能力最难覆盖的地方：

一是用语言说不精确。"logo 做成正方形"------是文件是方的，还是页面里显示出来是方的？这一句含糊，做出来的东西就可能"每条都对、合起来不对味"。

二是对错不好争。"底色不突兀"到底是去掉了还是没去掉？如果只靠肉眼看，就是两个人来回说"感觉还是有点怪"。

这就是多模态能力在这里的价值：它能自己看见问题。页面改完，它自己打开、自己截图、自己判断哪里不对，不用等我去描述"那块白的地方应该再淡一点"。前面标识那块白，就是它自己看图定位出来的------代码层面一切正常，只有"看"才能发现问题。

但光"看得见"还不够，还得能验收。我们后来把判据从"看着差不多"换成了能测的数字：

视觉需求	可测量的判据
标识的底色要与页头一致	取标识方块内透明区的像素，和页头背景像素比，最大通道差必须为 0
页头不能太高	直接量页头的渲染高度，目标 ≤ 81px
字重是真粗还是假粗	同一串字只改字重，量墨迹覆盖率

这一步的意义，是把"审美"从玄学拉回工程。 我不需要相信它说"已经改好了"，我只要看那两个数字。视觉类的活最容易卡在"说不清、验不了"，而多模态模型加上一套能测的判据，这个闭环就能自己转起来。

七、踩坑实录：开发中的真实坑

只写一条。而且这条不算模型的坑，它是使用设置上的坑，恰恰也是最容易踩的那一步。

坑：豆包工作的默认推理强度不是"高"，这个开关得自己拨。

开工的时候我图省事，按默认设置就直接让它上了。结果就是那种说不清的"不太对"------页面能跑，结构也对，但到了视觉打磨那几轮总差一口气：改是改了，没改到点上。

后来我注意到界面右下角模型选择旁边还有一个推理强度的选项，默认档并不在最高。调到"高"之后，同样的需求、同样的提示词，出来的东西明显跟得上了：前面说的标识去底、页头高度、字体统一这几轮，都是在强度调到"高"之后才真正收敛的。

所以第三节"环境准备"里我特意写了那一句------推理强度选"高"。不是客套话，是这里踩过一次。

这条坑的教训跟模型能力无关，跟使用方式有关：同一款模型，档位没开满，你拿到的就是打了折的结果。开工前花三秒钟拨一下这个开关，比后面多提十句"再改改"划算。

八、能力对照：Seed-2.1-pro 到底帮了什么忙

回头看，这个活看着不起眼，实际上把这次升级点名的三个方向全踩了一遍------多模态 Coding、视觉理解、Agent 长程执行。（官方这一轮给出的硬指标，第二节已经列过。）

多模态 Coding：从零立起一个完整的站点结构------首页、产品页、详情页、后台，跨页面地把活干完，而不是丢给你一段孤立的代码。而且这活不是"盲写"：它一边改一边能看见页面变成什么样。
视觉理解 ：最能说明问题的是标识那一段。它不是"照着需求写代码"，而是得先读懂一张位图里有什么 ------看出Logo原图自带一个近白底、知道要拿它跟页面底色做数值比较、知道去底不能简单抠白（否则笔画边缘会留一圈灰边），然后才把这段处理写成代码。这是"看着图写代码"，纯代码能力够不到这一层。
Agent 长程执行 ：这个活的节奏不是"一问一答"。前后七步开发，加上后面三轮视觉打磨，每一轮都是"提一句 → 它改 → 它自己看 → 不行再改"。改完之后它把全站自查了一遍：5 个页面 0 个断链、0 个控制台报错，1280 / 1024 / 900 / 800 / 768 五个宽度下导航与标识都不重叠。多轮迭代之后还能收敛，这才叫长程。
可靠交付 ：它没有停在"代码能跑"。交付物是一个村委自己能改的后台，内容和代码彻底分开；动手改之前会先把上一版备好，避免回不去。这两件事合起来，才叫"能交出去"。
Token 效率：一个人做完这个体量的站，成本完全能承受------这一点直接决定了"我愿不愿意拿它接这种活"。

一句话收口：这次让我改观的不是"它写代码很快"，而是视觉类的活它也能收敛 。过去这类活卡在"我说不清、你也看不出"，现在这个闭环能自己转起来------它写完会自己打开看，看出来不对会自己改。 对一个要给村里做门面的项目来说，这一点比多写几百行代码值钱得多。

九、写在最后：它不只是一个网站

网站上线之后，我最大的感受不是"AI 会写代码了"。

而是------一个村子，终于有了一扇对外的窗。

以前外面的人不知道电白沉香，现在至少有一个地方能打开、能看、能顺着找到村里，而且村里自己能往上面添新东西 。这一点比网站本身更重要。数字乡村建设听起来很大，落到地上，就是这么一个具体的门面。

村委当初找我，是因为刷到了一条"免费帮 100 个人"的视频。我给出去的是一个承诺，还回来的是一件事------一件跟一个村的产业有关的事。

Seed-2.1-pro 这次升级，把"会写代码"这件事的门槛又往下压了一截。压下去的这一截，落到我身上，是一个村子的门面；落到更多人身上，可能是更多村子、更多小生意、更多本来"想都不敢想"的事。

好东西应该被看见。技术该做的事，就是让它被看见。

邵奈一 三百篇原创沉淀，十万+读者同行。感谢你的阅读，咱们下篇接着聊。