这篇是教程，不是体验文。目标只有一个：你看完，就能用 WorkBuddy 把一份客户要的网页设计稿做出来，并且交得出去。
我用上周一个真实项目（江苏省某协会官网首页，1920 宽、九个大模块、当天改了十轮）贯穿全篇，每一步都给你能直接复制的指令。
开始前的准备（10 分钟）
动笔前先凑齐三样东西，缺一样后面都会卡：
参照物：客户的老网站网址，或者他觉得不错的竞品截图
真实内容：栏目名、新闻标题、联系电话、二维码，能拿真的一律拿真的
硬性要求：画布宽度、必须有哪些模块、风格倾向
没有参照就让客户发一个「喜欢的网站」。这一步决定后面所有轮次的返工量。
第 1 步：一句话搭出页面骨架
打开 WorkBuddy，第一句话不要描述细节，先说清楚四件事：宽度、内容区、模块清单、风格。
帮我设计一个协会官网首页设计稿：桌面版 1920 宽，内容区 1200 居中，左右留白 360。模块从上到下：顶栏、导航栏、轮播图、政策法规、党建、通知公告、行业资讯、会员风采、业务范围、页脚。风格：政务蓝、干净、卡片式。
要点：骨架阶段不要抠字号和颜色，先让整体结构立住。AI 给出初稿后你再进入逐模块调整。
第 2 步：用原站校准（最关键的一步）
AI 凭空编的内容，客户不认。所以第二步是把参照物喂进去：
客户有老网站：浏览器把首页和公共样式文件另存下来，主色值、字号、栏目结构全在里面
没有老网站：用竞品截图，让 AI 对着截图取色和排版
参照原站：主色 #xxxxxx，栏目结构是「左侧列表 + 右侧列表」两列。文案全部用我给你的真实标题，不要自己编内容。
我这次把原站的新闻标题、电话、二维码全部搬进了设计稿，后面十轮迭代全是在这个底子上改，客户第一眼就觉得「这是在改我们网站」，沟通成本直接降一半。
记住这个定位：你做的不是创作，是重构。
第 3 步：把客户的口语翻译成参数
客户原话：「把页面的整体主题蓝色，色码调整下。」
这句话直接丢给 AI，大概率返工。改成什么蓝？页脚动不动？浅色块跟不跟？
先反问客户三件事，拿到答案后，再给 AI 一条完整指令：
全局改色：主色从旧值改为 #2A5FE8；辅助浅蓝同步换成新主色的浅色版；页脚保持现有深蓝不动。改之前先列出主色和浅蓝在页面里的所有使用点，逐个更新，改完截图给我核对。
这一步的通用公式：目标值 + 影响范围 + 例外项 + 核对方式。四个要素凑齐再动手，这次 27 处改色一步到位，没有返工。
第 4 步：全局改动，找单一来源
客户要求「每个模块的上下间距都一样大，调成 30」。
错误做法：从上往下挨个挪模块，挪 7 次，下次改又是 7 次。
正确做法：先让 AI 分析结构——
先分析当前页面结构，告诉我模块之间的间距由哪些容器承载，列出来给我确认，再把它们统一调整为 30。
结果发现 7 处间距全靠 3 个内容区容器的内边距和间隙承载。只改 3 个节点，7 处间距同时生效，页面总高都自动算对了。
改色同理（先盘点使用点）、字体同理。全局改动之前，先搞清楚「这个东西到底住在哪」，这是写代码的习惯，放到设计稿上一样好使。
第 5 步：重复结构，让 AI 批量干
客户要求六个栏目标题（政策法规、鑫锋党建、通知公告、行业资讯、会员风采、业务范围）右侧都加「更多」。
六个标题结构完全一样：竖线色块 + 中文名 + 英文小标。一条指令：
六个栏目标题结构相同，统一在标题行右侧加「更多」入口：13px 灰色文字 + 12×12 右箭头。把英文小标改成弹性填充占满中间空白，保证「更多」贴到卡片右缘，六个全部一致。
识别出重复结构，一条指令批量完成，六处零误差。手动做这是六遍重复劳动，还很难对齐。
使用 WorkBuddy 这类画布式 AI 工具，省时间的大头就在这一步：看到重复的东西，先抽象成规则，再让 AI 批量执行。
第 6 步：图片别偷懒，也别指望滤镜
位图素材发黑，很多教程会让你加滤镜。实测 WorkBuddy 画布上的图片滤镜力度非常弱，参数拉满效果也有限。
正确流程：让 AI 把位图原图取出来，你在本地按曲线调好后替换回去。调色口诀：明度先行、饱和适度。反过来先拉饱和再压明度，画面会发死蓝。
另外，改卡片尺寸时别拉伸位图。这次登录卡从 300×584 改成 280×200，卡里的标题、按钮、城市剪影全部重新排布，而不是把图一拉了事，质感完全不同。
第 7 步：改完必核对（这两分钟最省钱）
每轮改动之后，固定做两件事：
布局检查：让 AI 跑一遍结构检查，看有没有溢出和重叠
截图比对：肉眼扫不出来的问题，截图一量就露馅
这步真抓到过问题：登录卡放进内容区时把旁边的卡片挤窄了，置顶块里的日期被挤出了边框，布局检查直接标红。不核对就交付，客户那边就是事故。
位置类需求还有个技巧：让客户圈图。「放左侧」我做成了内容区里的左列，客户圈了张截图过来，我量了一下：红圈右缘正好贴内容区左缘、顶部对齐党建栏，按坐标一次改到位。
客户圈过的截图，比十句话描述都准。
第 8 步：交付两件套
最后交两样东西：
整页 2 倍 PNG：客户手机上就能看清，直接确认
设计规范文档：让 AI 把这轮所有定稿参数整理成册——
把本次设计稿的所有定稿参数整理成一份设计规范，按「页面基础 / 色彩 / 字体 / 布局间距 / 组件 / 特殊模块」分章，色值标注 HEX 和 RGB 两种格式。
规范文档别嫌麻烦。开发接手直接照抄，下次改版有依据，它就是这轮所有沟通结论的压缩包。
常见坑（直接抄作业）
坑 | 正确做法 |
位图调色用画布滤镜 | 滤镜力度极弱，走「取原图 → 本地重塑 → 回填」 |
位图先拉饱和再压明度 | 明度先行、饱和适度，反过来会发死蓝 |
全局改色直接开改 | 先盘点使用点（这次主色 16 处、浅蓝 11 处），改完有账可对 |
客户说「调一下」就动手 | 先翻译成「目标值 + 范围 + 例外 + 核对方式」 |
位置类需求靠猜 | 让客户圈截图，按坐标改 |
列表标题写多长算多长 | 有换行余量，窄卡约 38 字、标准卡约 52 字，超了裁切 |
改完直接交付 | 布局检查 + 截图比对，固定动作 |
写在最后
这套流程的本质是分工：你负责判断（哪里不对、要什么效果、客户到底想说什么），AI 负责执行（批量改、逐处核对、算总高）。
半天出一份能交付的设计稿不是玄学，是流程。参照物降低沟通成本，参数化消灭返工，批量操作省时间，核对兜底。