点击编辑与 AI 设计助手

手里有一个完成的普拉提预约网站。可标题差那么 2%，按钮小了一点，照片稍微偏左。放在从前，你得给开发者写一张清单，再等上几天。这门课学完，你当场自己改：点击、拖动、松手，结束。

VibeCampus 的编辑给你两只手。一只是点击编辑，直接选中元素、挪动替换的精密之手。另一只是 AI 设计助手，只要说出方向，它就立好计划、整体换装的大手。

先说好：摸坏了也没事。撤销一直都在。这门课就是要你尽情拆、尽情还原地学。

作品打开的状态下，按下点击编辑按钮，编辑模式就开启了。预览上方会出现指引：点击选中，双击输入，右键更多。这三个动作就是编辑的全部。

编辑模式里，预览变成画布。鼠标悬停时，每个元素会浮现淡淡的边框，让你用眼睛就知道现在能抓住什么。可以把网站想成一堆能上手摸的乐高积木。

改完按完成，编辑模式关闭，结果保存。打开、上手、关闭。节奏就这么多。

双击想改的文字试试。那个位置立刻变成输入状态。标题、按钮文案、价格、介绍语，屏幕上看得见的文字全都可以像这样就地修改，不用另开编辑窗。

单击是选中。被选中的元素会套上蓝色边框，在这个状态下可以移动、改大小、修样式。选中是一切编辑的起点。

有时抓到的不是目标元素，而是它的父级（更大的那块）。别慌，再点一下。每多点一次，选中就会向更里层收窄。

选中的元素可以拖拽移动。抓住照片往右，抓住按钮到中间。鼠标松手的地方就是新位置。

选中边框的四角和四边上有小圆点，那是调整大小的手柄。抓着拖，大小就变。角上的手柄同时调宽高，边上的手柄只调一个方向。图片用角上的手柄调，比例不容易坏，更安全。

挪和拉是最直觉的编辑，也是最容易出事故的编辑。别一次改一大步，小步挪动，边看整体平衡。

拖拽是凭感觉的编辑，检查器就是讲精度的编辑。选中元素后会打开一块面板，颜色、间距（内边距和外边距）、字号和字重、圆角这些属性都能直接用数值调。

检查器最亮的时刻是需要统一的时候。两个按钮的大小差那么一点点，与其目测拖拽，不如把两个元素的值改成同一个数字，就完美统一了。专业设计的秘密不是了不起的感觉，而是用同一个数字的规矩。

换颜色时直接输入品牌色的色号。“差不多像的蓝色”攒多了，网站就脏了。一个精确的色号用在所有地方，才是一致性。

要对齐多个元素的边线，用对齐工具。左对齐、居中对齐、等间距这些对齐永远比目测准。三张卡片微微错位和像用尺子量过一样齐整，访客会在无意识里感觉到差别。

选中的元素也可以用键盘方向键移动，正适合鼠标很难做到的 1 像素级微调。大步用拖拽，最后一口气用方向键。这套组合就是手工编辑的完全体。

用删除键也可以删掉不需要的元素。误删了，撤销依然站在你这边。

右键点击元素，会打开针对该元素的 AI 操作菜单。只把这一段改短、只重新设计这个板块、替换这张图，是把 AI 只叫到当前抓住的这部分的功能。

手工编辑和 AI 操作的分工是这样的：位置、大小、颜色、文案这些你自己知道答案的修改，用手；“把这段介绍写得更吸引人”这类需要造出答案的修改，交给 AI。它精确作用于选中的元素，不用担心别处被改动。

AI 操作按普通编辑费率消耗积分。执行前会显示预计消耗，确认后再进行即可。

这回是大手。AI 设计助手是 Pro 功能，管的不是局部修补，而是设计整体的方向转向。写下目标，比如“整站更高级一些，颜色用海军蓝和金色”，或者从备好的方向按钮里选（更高级、更明亮亲切、品牌感更强、更干净极简、更换字体组合、新配色主题）。

特别之处在于它不会立刻动手。助手会先问你几个问题，再给出反映你回答的计划：哪种颜色用在哪里、哪种字体、为什么、保留什么，全写在计划书里。你读过计划、批准之后，变更才会被应用。

想保住的东西也可以提前说，比如“评价板块保持原样，另外加一个价格板块”。这不是推倒重来，更像是指挥。

工具学会了，该学标准了。第一，对比。重要和不重要必须明确不同：背景与文字的明暗，大标题与小正文。对比弱了，什么都进不了眼睛。

第二，层级。视线移动的顺序应该由设计定好。按标题、介绍、行动按钮给出大小和颜色的强弱，访客就会沿着设计好的路读下去。什么都强调，等于什么都没强调。

第三，留白。新手的设计在填满，专业的设计在留空。元素之间的空白不是浪费，而是高级感的原料。看着憋闷的画面，元凶多半是留白不足。

有时结构和内容都满意，只想把氛围彻底换掉。这时用整体重塑。向 AI 设计助手提出“内容和结构保持，风格整体换成极简单色调”这样的请求，版式和文案留下，颜色、字体、质感整套换新。

对照重塑前后来看也是一种学习。同样的内容，只换一个调子看起来就像另一门生意，风格在品牌里占多大分量，你会用身体记住。

重塑之后需要细部检查。这是牵动全局的大工程，个别按钮颜色或照片色调可能和新风格打架。用点击编辑做最后的收尾打磨，才算完成一次重塑。

现在轮到你的作品实战了。在工作室打开一件我的作品，开启编辑模式。没有的话，随便从一个模板做一件开始也行。

目标不是完美的设计，而是让三个手部动作长在身上。为了能对比改前改后，开始时先把画面看进眼里记一下。

编辑是自动保存的。画面上的自动保存标记在替你按保存键，忘了保存丢掉工作的担心可以放下了。

不满意的变更可以用撤销一步步取消。而在大变更之前自己先建一个可以回去的点，是专业选手的习惯。当前状态不错的话，确认已保存，再开始下一场实验。

这张安全网的真正意义是实验的勇气。确信随时能回去，才敢大胆尝试；大胆尝试里，才长出好设计。

现在的你，是看网站时哪里不顺眼、就当场改掉的人。因为你已经会用三层工具：点击编辑这只精密的手，AI 操作这个局部支援，设计助手这位全局指挥。

对比、层级、留白。这三个词是比工具更长寿的资产。今后无论做什么画面，用这套标准看东西的眼睛都会跟着你。

下一门课是可信的成果。学习上线之前的最后一道关卡：验证打磨漂亮的成果，内容到底能不能放到世上去。