先说这个案例的主角：老周，做实木家具定制，十年手艺，一张餐桌从选料到成品要三十天，客户里有回头客，也有慕名而来的新客。他的客源一直靠两样东西撑着：老客户介绍，和朋友圈发作品。问题一年年累出来：新客户看完朋友圈的作品，想了解更多就找不到地方了；加了好友，上来就问多少钱、多久能做好，一天回十几遍同样的话；有客户动了心，又因为"不知道靠不靠谱"而搁置。他问过几家建站公司，报价从八千到三万，工期一个月起，他一直没舍得。
后来他用 AI 流程做了一个官网，前后两个工作日上线。这篇文章把这个案例完整拆一遍：需求怎么梳理、结构怎么定、文案和图片怎么来、页面怎么搭、上线前检查什么，每一步都给可照抄的做法。先看他当初发来的三句话，这也是整个项目真正的起点。
老周的原话，和翻译出来的需求：
"我就一个朋友圈，客户看完作品，转头就找不着我了。"
翻译：需要一个长久挂着、随时能打开的作品陈列窗，对应官网的主页与作品展示区。
"客户上来就问多少钱、多久做好，我一天得回十几遍。"
翻译：把材料、尺寸、价格区间、工期写进页面，让页面先替人回答高频问题。
"别整那些花里胡哨的，把东西拍好、摆清楚就行。"
翻译：视觉走朴素路线，重点给作品图与工艺细节，风格匹配手艺人的调性。
三句话翻译完，需求其实已经清楚了：一个能被搜到、能把信任讲清楚、能承接咨询的官网。案例的后半段，全是围绕这三条做的选择。
一、需求梳理：四个问题问出页面清单
动手之前先把需求翻译成页面，这一步人工必须亲自下场，AI 替代不了判断。方法就四个问题。卖给谁：老周的客户是两类人，一类是预算敏感、想改善居住的年轻家庭，一类是讲究材质、愿意为手艺付费的中年客户；想让人做什么：看完作品，产生兴趣，再发起咨询；看什么才信任：作品实拍、木料与工艺说明、工期承诺、客户反馈；怎么联系：电话、微信、预约到访，三条路都给。四个问题的答案，直接决定页面上放什么、不放什么。
带着答案让 AI 出页面清单的初稿，它一口气列了八个页面：首页、作品集、工艺材料、制作流程、客户评价、关于、联系我们、行业资讯。人工这一步做减法，砍到五页，砍掉的三个页面各有理由：行业资讯需要长期更新，一个手艺人维护不起；制作流程并入工艺材料页，信息合并更紧凑；客户评价并进首页的信任区块，单独成页撑不起来。剩下来的五页，每一页都担着一个明确任务：
| 页面 | 核心任务 | 必备区块 |
|---|---|---|
| 首页 | 30 秒内讲清"做什么、凭什么信得过" | 定位一句话＋主图；三个信任点；精选作品；咨询入口 |
| 作品集 | 用真东西说服人 | 分类导航（餐桌／柜类／桌椅组）；每件作品多角度实拍＋参数 |
| 工艺与材料 | 回答"凭什么是这个价" | 木料与工艺说明；制作流程；工期与售后 |
| 关于 | 给人的信任做背书 | 工坊环境；制作日常；十年经历的简短故事 |
| 联系 | 降低咨询门槛 | 电话与微信；预约到访；价格区间与工期问答 |
页面不是越多越好，小工作室五页就够，每一页都得担一个任务。担不出任务的页面就是负担：要维护、会陈旧、还分散访客的注意力。清单定的这一刻，后面所有工作都有了地图。
二、结构设计：首页是一条说服路径
页面清单解决"有哪些页"，结构设计解决"每页怎么排"。以首页为例，从上到下按访客的注意力顺序铺开：第一屏讲定位，一句话加一张主图，让人三秒知道这是做什么的；第二屏讲凭什么信，三个信任点（十年手艺、实拍作品、工期承诺）排成一行；第三屏看东西，精选六件代表作，每件配一句说明；第四屏看口碑，两三条客户反馈，有原话更好；第五屏给入口，把咨询和预约放在页面收尾处。访客不用动脑，往下滑就是一条完整的说服路径。
这套结构 AI 可以出初稿：把四个问题的答案整理成一段说明，让它生成"首页区块顺序与每屏任务"的建议，人再做取舍：哪个区块挪前、哪个合并、哪个直接砍掉。一个简单的检验标准：从首页出发，到任何一件作品的详情，点击不超过三次。路径越短，兴趣流失越少，这是小站点相对于大平台的优势，别把它丢掉。
还有两件小事在结构阶段一并定掉。栏目命名用访客的词，不用行业的词：老周的客户说"作品"，页面就叫"作品集"，不叫"案例中心"。URL 定短、定稳，用简短的英文或拼音，定下来之后尽量不改，地址一改，之前攒下的收录就得重新排队。
列表页和详情页也各有设计要点。列表页克制为要：每件作品一张主图加两行字，一行名称、一行关键参数（材质、尺寸、参考价），不做瀑布流，不做花哨动效，让访客快速滑动、快速心动；详情页反过来要密：大图开场、参数居中、故事段落收尾，页面底部固定一个咨询按钮。这样一来，每件作品的浏览终点，都停在同一件事上：发起咨询。设计得当的详情页，等于一个不下班的销售员。
三、文案生成：三给原则与一段对比
结构定了，往框里填字。AI 写文案的方法浓缩成三给原则：给角色，比如"你是一位做了十年实木家具的手艺人，说话直接，不夸张"；给事实，把材料、工期、尺寸、价格区间这些真信息交出去，AI 只负责组织语言，事实必须由人提供；给限制，明确不用"匠心""极致"这类形容词堆砌，一句话说清一件事。三给齐了，初稿的可用度会高出一大截。
首页主标题最能看出差别。常见的一版是"匠心传承，品质之选"，说的人是自己；改出来的一版是"实木餐桌定制，30 天做出来送到家"，说的全是客户关心的事。再比如把"三十年老手艺"改成"一张桌子用三十年，是我们敢答应的事"。同一个事实，换个说法，从自夸变成承诺，效果完全不同。这类改写正是 AI 的强项：人给事实和方向，它批量出几种说法，人挑最顺的一句。
作品集页的文案有固定公式：一件作品三段话，是什么（材质、尺寸、适用场景）、怎么做的（工艺上值得说的一两点）、谁在用（客户反馈或使用故事的一句话）。联系页把高频问题写成问答：价格区间怎么算、工期多长、怎么下单、能不能来工坊看料。这几组问答上线后，老周回复咨询的负担直接减掉一半。文案的素材永远来自真实：AI 负责组织语言，人负责提供事实，这条分工在整个案例里反复出现。
关于页的故事最容易写油，给它一条检验标准：说的事能不能落到具体的物上。"热爱木头一辈子"是感慨，谁都能写；"柜子的门板，我坚持用整块料而不是拼接，客人为此要多等半个月"是事实，只有他写得出来。让 AI 把老周口述的琐碎细节整理成三段话：怎么入的行、最难的一段转折、现在还坚持的一件事。朴素讲完，比华丽的赞美更有说服力，这也是关于页的正确写法。
四、视觉与图片：实拍为主，AI 做补充
老周的素材是手机拍的实拍图，量大、真实，问题也明显：光线参差、色调不一、构图随意。处理流程分四步：挑，把模糊、逆光、背景杂乱的先剔掉；统一，把留下的图调成接近的亮度和色调；裁切，按统一比例裁成列表图和详情图两档；压缩，单张压到一两百KB的量级，保证打开速度。前两步的批量处理交给 AI 工具，几百张图十分钟走完，手工修得干两天。
缺的图也有办法：工艺材料页需要木料特写、制作过程、包装发货这类氛围图，老周手里没有，用 AI 生成补齐。但这里有一条不能跨的线：作品图必须真实拍摄，AI 生成的图只能用于氛围与示意。对一个以"实拍作品"为卖点的手艺人，拿生成图充当作品，被发现的那一刻，所有信任清零。生成图也别做成"似真的客户场景"，示意就是示意。
视觉风格上，朴素不等于简陋。配色方案直接从作品里取：原木色、米白、深灰三色够用；字体一款用到底，标题粗体、正文常规，不混用第三款；留白优先给图片，一行文字不超过两行。这几个决定 AI 都能出方案：把"手作、实木、朴素、可信"四个词交给它，让它给三五套配色与字体搭配，人挑最顺眼的定下来，全站统一执行。
五、页面搭建：套模板，逐页替换
前面四步都是纸上功夫，这一步落到真页面。搭的动作没有悬念：选一套结构接近的模板（首页、列表、详情三种页面结构齐全的），把定好的区块顺序套进去，再一页一页替换文案和图片。顺序上按页推进，一页彻底做完再做下一页，避免五页都半成品的状态。手机端适配每天检查一次：老周的客户大多在手机上刷内容，手机上过不了关的页面，等于没做。
这个环节 AI 的用武之地在小效果和排错：想要图片悬停放大、区块滚动淡入这类细微效果，把需求描述清楚让 AI 生成代码片段，粘进去预览即可；遇到报错或显示异常，把现象原样描述给它，多数情况能给出排查方向。新手最容易遇到的四类问题与解法，整理成表备用：
| 常见问题 | 常见原因 | 解决办法 |
|---|---|---|
| 图片不显示 | 文件没上传成功，或路径写错 | 在后台重新上传，从媒体库插入而不是手写路径 |
| 排版错乱 | 模块嵌套层级乱了 | 打开结构树逐层检查，把跨层的模块移回原位 |
| 手机端挤成一团 | 固定宽度或字号过大 | 改用自适应布局，手机预览逐屏检查 |
| 打开太慢 | 大图未压缩、加载项过多 | 压缩图片、精简插件、去掉用不上的脚本 |
搭页面阶段有一条纪律：一次只动一个变量，先调排版，再换内容，样式放在后头，改完一处预览一次。出问题时才知道是哪个动作引起的，返工范围也小。修改随手记一笔：改了哪页、哪块、为什么。五页的小站感受不出差别，等站的数量上来，这笔记录就是排障地图。
六、上线检查：发布前跑一遍清单
页面搭完不等于能发布，发布前把检查清单跑一遍：所有菜单链接逐个点开（顺带测出打不开的页面）；咨询表单真发一条测试（收到才算通过）；用手机网络测打开速度（别用电脑的宽带测）；三种主流手机尺寸各预览一遍；每页配好标题与描述（不少新手全站共用一个，白白浪费）；全站扫一遍错别字。这套清单做成模板，以后每个站上线前照跑一遍，十分钟的事，能挡掉绝大多数"上线就被发现"的低级问题。
发布本身的动作是三件：域名绑定并把 HTTPS 配好（地址栏的锁标志是信任的一部分）；按平台流程提交收录，让爬虫尽快发现新站；发布后第一周盯三个数：打开速度的真实数据、咨询量、直接搜索站名能否找到。前两个数字反映站点的可用性，第三个数字反映收录通道的健康度。
发布也不是终点。老周上线后做的第一件事，是把官网链接放进朋友圈签名和名片：以后所有的转发、所有的加好友场景，都统一指向这个站。站点的价值不是上线那天的一次性成果，而是此后每一次被提起时的落点，越用越值钱。
七、复盘：AI 做了什么，人做了什么
两天走完全流程，把这个案例里的真实分工摆出来，比任何理论都清楚：
AI 完成的：
页面清单初稿（一次给出八个页面）、首页区块顺序建议、文案初稿与多种改写版本、配色与字体搭配方案、几百张实拍图的批量调色裁切、页面微效果的代码片段、上线检查项的整理。
老周（人）完成的：
四个问题的答案、把八页砍到五页的决定、事实数据的确认（材料、工期、价格区间）、实拍图的挑选与生成图的使用边界、所有方案的最终挑选、发布决策与上线后的持续经营。
分工线一目了然：AI 出草稿和干体力活，人做判断和担责任。这也是整篇案例里最值得带走的一句话，换到任何行业都成立。
这套流程的迁移性很强。瑜伽馆的官网，页面更少：首页、课表、关于、预约四页，重点突出约课按钮和场地实拍；上门维修的官网，把价格说明和服务范围放最前，因为客户最怕报价不明。行业换、需求换、页面数量换，流程骨架不变：四问、清单、结构、文案、视觉、搭建、检查，七步一把尺子量到底。
案例教程的意思，从来不是让你照抄那五页，而是让你看清每一步该做什么决定、每个决定该由谁来做。工具会一年一更新，这套"需求驱动、人机分工"的流程不会过时。收尾用老周自己的一句话："以前客户问我的作品在哪，我得发半天朋友圈；现在我只说一句，去我网站看。"
