企业官网建设流程全解析

最近被问得最多的一句话是：AI都这么能画了，设计师是不是快失业了？我的答案一直没变——AI让“画”这件事变得越来越不值钱，让“判断”这件事变得越来越值钱。我把自己的角色从“手绘执行者”改成了“视觉指挥官”，并且用Claude+Paper搭了一条能把设计稿直接推到生产环境的工作流。2026年我打算靠这套工作流把公司建起来，这篇文章就是把这条流水线完整拆给你看，适合所有正在纠结“AI时代设计师还能做什么”的人，尤其是单打独斗的设计师、小团队创始人和准备转型的独立开发者。

1. 为什么“能画”越来越便宜，“会指挥”越来越贵

1.1 AI把“画出来”变成了一个动作，而不是一种能力

过去一张设计稿值钱在哪？值在“别人还没见过这个方案，你画出来了”。软件技能、审美积累、排版功底都凝结在那张图上，那是设计师吃饭的碗。现在情况变了，Claude一个提示词能出几十版风格方案，Paper能瞬间把参考图拼成情绪板，“画出来”这件事的门槛被压到了地板以下。

我见过不少同行在AI浪潮里的第一反应，是拼命学更多AI工具，试图比AI画得更快、更多、更精致。坦白说，这是方向错了。你跑得再快，也跑不过汽车，你要做的是学会开车、学会看导航、学会决定目的地。工具从来不是核心竞争力，拿着工具做出来的判断才是。

现在的真实局面是：任何一个会用AI的人都能在十分钟内产出一套“看起来还挺像样”的视觉方案。当“画出来”的稀缺性消失之后，设计稿本身就不再是议价的核心。甲方真正愿意付费的，是那个能在十版方案里准确指出“这版为什么对、那版为什么错”的人。

1.2 指挥官的真正工作：定规格、设边界、做验收

“指挥官”这个说法不是给自己贴金，它准确描述了AI时代设计师的新职责。指挥官的活从来不是自己端枪冲锋，而是三件事：第一，明确目标——这个页面解决谁的什么问题；第二，设定约束——调性是什么、风格往哪走、必须出现的元素有哪些、哪些红线不能踩；第三，验收结果——AI给出的产出，哪些能用，哪些需要打回重做。

这三件事没有任何一件能被AI代劳，因为AI并不知道“你的用户是谁”“你的品牌在什么场景下被看到”“这次投放要达成什么业务目标”。同一个Claude，给不同设计师当助手，产出的东西天差地别。差在哪？差在指挥官本人的判断力和表达力。

我把传统设计岗位和新的“指挥官”角色做过一个对比，差异非常明显：

这个表格是我自己转角色之后的真实体感。只要你还停留在“画图”那一层，你就永远在和AI比速度、比产出量，这是一场打不赢的仗。把自己挪到“定规则、做验收”那一层，AI就成了你手里最趁手的兵。

1.3 设计师要补的三项新基本功

从执行者转向指挥官，不是喊个口号就能完成，需要补齐三项实打实的基本功。

第一项是审美判断力。以前你只需要“会做”，现在你必须“会评”。你要能在十版方案里说清楚“这个字体气质不对，太圆润了，我们要的是利落感”而不是“我觉得差点意思”。判断力需要大量看、大量比较，并且强迫自己给每个结论找理由。

第二项是结构化表达力。AI听不懂“高端大气上档次”这种形容词，它需要你把它转译成“深色背景、大留白、衬线标题、低饱和度点缀色”这类可执行的描述。写设计简报不再是文案的活，而是指挥官的基本功。

第三项是验收修正力。AI产出的东西经常出现“局部正确、整体错误”的情况——单个按钮做得很好，但整套页面的信息层级是乱的。你要能像代码评审一样，在几分钟内定位问题、给出修改方向，而不是从头重画。

这三项能力不需要你精通编程，也不需要你背下所有AI工具的快捷键，它们建立在同一个基础上：你对自己想要的东西，到底有多清楚。

2. Claude+Paper这对组合，解决的是“一个人怎么干一个团队的活”

2.1 先搞清楚两个工具的分工

标题里的Claude+Paper不是随便并列的两个工具名，它代表一种分工方式。我的习惯是：Paper负责把感觉定格成画面，Claude负责把画面翻译成产品。

Paper在我这里是一个轻量级的视觉探索工具，用来快速收集参考、拼情绪板、试字体配对、画粗糙的布局线框。它的核心价值是“快”——快到你在灵感消失之前就能把那种模糊的“感觉”固化下来。传统工作流里，这一步要用Photoshop或Figma做精细稿，一做就是半天。Paper的定位就是“不用精细，只要让我看到方向”。

Claude的角色在流水线的后半段。等视觉方向在Paper上被确认了，我再把方向描述成文字，交给Claude去生成结构化的产出：组件代码、页面结构、设计规范、甚至文案。Claude的优势在于它能把“描述”变成“可实现的东西”，而且支持多轮迭代——你说“标题再大一点、留白再多一些”，它马上就改给你看。

这两个工具搭在一起，恰好覆盖了从“脑子里的想法”到“能上线的产品”之间的两个断层：一个帮你把想法显形，一个帮你去掉执行成本。

2.2 一个人怎么同时演甲方和乙方

以前做设计，最烦的是甲方说“感觉不对”但说不出哪里不对。自己做项目之后我发现，如果自己都没想清楚，AI就成了最严苛的甲方，你给它一句模糊的提示词，它反馈给你的也是一团模糊的产出。

我现在的做法是双角色工作法。第一步，把自己当甲方：用Paper随意探索，想怎么折腾怎么折腾，不设限。眼睛看到什么方向觉得“对了”，停下来。第二步，立刻切换成乙方：把刚刚那个“对了”的感觉翻译成设计简报，用最朴素的语言写清楚项目背景、目标用户、视觉锚点、页面清单、验收标准，然后再把这份简报交给Claude。

这套方法的精髓在于：做甲方的时候，允许自己感性；做乙方的时候，逼迫自己理性。很多设计师在AI时代栽跟头，不是因为审美不行，而是因为他们在该理性的阶段还保持着感性的模糊，导致AI根本不知道你要什么。

2.3 工具链的边界：哪些事谁做，哪些事必须自己做

我把工具边界画得非常明确，防止自己陷入“用AI跑了半天，发现方向从一开始就错了”的困境：

这个边界是我踩了一堆坑之后才画出来的。早期我恨不得把所有环节都扔给AI，结果发现它生成的代码确实能跑，但视觉细节总差一口气——那种“说不上来哪不对，但就是不如参考案例好”的差。后来我意识到，AI擅长的是“完成”而不是“完美”，收尾的那一刀必须自己来。

3. 一条已经跑通的“设计转生产”流水线

3.1 阶段一：Paper视觉探索，先别碰电脑

很多设计师接到需求之后的第一反应是打开工具开始画。我的经验是反过来的：先别碰电脑，先让你的想法在脑子里长一会儿。我会用Paper做三件事：收集参考图、排列组合视觉方向、画最粗糙的布局草稿。

实际操作的顺序大概是这样的：先花大概半小时在各类素材站上逛一圈，把感觉对的东西全部拖进Paper；然后盯着这些图看，删掉一半——剩下那些就是你对这个项目的真实审美倾向；接着试字体配对，把“主标题字体+正文字体”按不同组合摆在一起，看气质搭不搭；最后在Paper上画几个方框，把页面大概分几个区块、哪块最重要、哪块要引导视线，全部标出来。

这一步的产出不是设计稿，而是一个“视觉方向包”。它可能很丑、很不专业，但它承载了你对这个项目的直觉判断。这一步做完，你已经知道自己要什么了，剩下的问题就是“怎么把它变成能上线的东西”。

3.2 阶段二：写设计简报，把视觉意图转成文字

很多人用AI做设计失败，问题就出在跳过了阶段一的思考，直接让AI“给我设计一个页面”。AI这时候只能在平均值附近打转，给你一个“哪都能用但哪都不出彩”的东西。

我的做法是写一份设计简报，把Paper阶段沉淀的判断全部转译成文字。一份合格的设计简报至少包含这几块：项目背景（这是给谁做的、解决什么问题）、目标用户（他们的审美偏好和使用习惯）、视觉锚点（必须出现的气质关键词，不要超过三个）、页面清单（具体到每个区块的内容）、拒绝清单（明确说出不要什么）、验收标准（怎样算做完）。

举个例子，我给某个咨询类落地页写的设计简报长这样：

项目背景：为一家企业管理咨询团队制作落地页，目标是让访客在30秒内理解“他们帮企业解决流程优化问题”，并留下联系方式。 目标用户：35岁以上，企业中层管理者，审美偏稳重、专业，讨厌花哨。 视觉锚点：秩序感、留白、可信赖。 页面结构：首屏放核心主张，第二屏放三个服务板块，第三屏放一个案例摘要，底部放联系表单。 拒绝清单：不要插画、不要渐变背景、不要圆角过大的卡片、不要“科技感”蓝紫配色。 验收标准：首屏不需要滚动就能看懂业务方向；三个服务板块可以在5秒内扫完；全站只使用两种强调色。

这份简报给到Claude之后，它的第一版产出就已经非常接近我想要的方向，因为约束条件足够具体，它不需要靠猜。这就是指挥官和工具之间正确的沟通方式。

3.3 阶段三：Claude产代码，你当代码评审

简报写完之后的工作就交给Claude了。我会把设计简报、页面结构、技术栈要求一次性丢给它，让它生成第一个版本。这个阶段有几个关键动作。

首先是明确技术栈。我习惯用轻量级前端方案加组件级CSS，让Claude在这个约束下产出，保证产物不需要重写就能直接接着改。其次是多轮迭代。第一版出来之后别急着夸或骂，把它当成草稿，逐块提修改意见：“首屏标题可以再大两个字号”“卡片间距不够，视觉上太挤”“表单按钮换个强调色试试”，每提一次它就更新一次。

这个阶段的重点在于，你要把自己当成代码评审，而不是旁观者。Claude的产出质量和你提意见的具体程度成正比。你越能指出“哪里不对、希望怎么改”，它越能给出精准的调整结果。

3.4 阶段四：推到生产，别只停留在“好看”

设计转生产这条流水线里，最容易卡住的就是最后一步。很多设计师做出来的东西在浏览器本地预览时很漂亮，一上线就变形、加载慢、图片报错。我的流水线里专门给这一步留了检查清单。

第一是资源检查。所有图片来源是否合规，字体是否拥有商用授权，图片是否压缩过。第二是响应式检查。把浏览器窗口从手机宽度拉到桌面宽度，逐个断点看有没有元素溢出、遮挡这种低级的布局问题。第三是交互状态检查。按钮的悬停效果、表单的报错提示、空状态的展示，这些“没人注意但没了会很糟”的细节必须过一遍。第四才是部署。挑一个静态托管平台，绑定域名，推上去，然后在真实环境里再做一轮视觉还原。

我把这四步走完，才敢说“这个设计真正交付了”。设计不只是图片，设计是用户在真实环境里感受到的整体体验，生产环境的每一层都可能改变视觉呈现。

4. 实测数据与三个印象深刻的翻车现场

4.1 先看时间账：传统流程和现在流程的对比

我用同一个类型的项目——一个标准的企业服务落地页——做过对比。传统做法是：设计师出三版风格稿，甲方选了方向，再做细节调整，交付给前端开发，开发再切图、写样式、做交互，联调完上线。这一整套走下来，设计环节三到五天，开发环节五到七天，总周期十到十二个工作日，而且设计师和开发之间还有大量“这个还原不了”“这个效果做不出”的拉扯。

用现在这套Claude+Paper流水线，我的实测数据是这样的：

这个账算下来，效率提升是实打实的。但效率不是这篇文章最重要的事——更重要的是，这套流程让我一个人就完成了以前一个设计师加一个前端开发才能完成的工作量。这才是“2026年建公司”这个计划成立的技术基础。

4.2 翻车一：AI生成的“正确的错误”

效率提升的背后藏着不少坑，第一个坑叫“正确的错误”。Claude生成代码时，单看每一块都是对的——按钮样式工整、布局结构规范、CSS类名语义清晰。但组合在一起，整个页面的节奏感是乱的：首屏信息密度过高，用户一眼扫过去不知道先看哪里；三个服务板块的卡片外距不统一，视觉上错位了一点点。

这种问题最坑人的地方在于，它不报错、不闪退，看起来一切正常，但就是在“气质”上差了口气。传统工作流里，设计师做完设计稿后，开发还原时通常会严格按照视觉稿执行，这种节奏问题在设计阶段就被消灭了。现在AI直接把设计和开发合并成一步，节奏的掌控责任就落在了指挥官身上。

我的解决办法是：每次Claude产出完一版，我不急着看代码，先把页面渲染出来，退后两步看整体，只看视觉节奏，不看细节。发现问题就把它写进迭代意见里，让Claude针对性调整“外距”“层级”“字号对比”，而不是笼统地说“感觉不对”。

4.3 翻车二：提示词太抽象，Claude理解成另一个方案

另一个坑出在我自己身上。有一阵子我为了图省事，设计简报越写越短，觉得“反正Claude能看懂我的意思”。结果它产出的方向和我想的差了十万八千里。

我写“风格现代一点”，它给我来了一套极简黑白；我写“活泼但专业”，它给我搞出了橙色圆角按钮配卡通图标。后来我想明白了：抽象形容词在AI眼里没有共识。“现代”“活泼”“专业”这些词，每个人的理解都不同，AI只会取它的平均值。

解决方案就是我在前面说的拒绝清单和视觉锚点。与其说“要活泼”，不如说“允许使用一到两个高饱和点缀色，但主背景保持白色，按钮使用直角小圆角”。与其说“要专业”，不如说“标题使用无衬线字体，正文行高1.8倍，段落宽度不超过60字符”。把形容词翻译成具体的视觉参数，Claude的产出准确率会直线上升。

4.4 翻车三：最后一公里其实在“设计”之外

第三个坑是上线前的那些破事。有一次Claude生成的页面在本地预览完美，推上去之后才发现：字体文件没有配置好，中文环境回退到了系统默认字体；引用的一张背景图来自免费图库，但仔细看授权条款，商业使用需要署名，而我并不能在页脚加一行署名；还有一处在手机上滑动时，横向滚动条出来了，因为有个区块的宽度超出了视口。

这些坑每个都不大，但都足以让“上线”这件事从“今天就发”变成“再改三天”。经过几次教训之后，我把“生产环境检查”直接写进了工作流，不再抱有任何侥幸心理。AI能帮你把99%的执行做完，但剩下那1%的生产细节，恰恰是项目能不能真正落地的关键。

5. 2026年建公司，这笔账怎么算

5.1 单人公司的收入结构，靠什么赚钱

聊完流水线本身，再说说为什么我有底气在2026年建公司。核心逻辑很简单：当一个人能完成过去两到三个人才能完成的交付时，单人公司的收入模型就成立了。

我给自己规划的收入结构分三条线。第一条是定制开发服务：接品牌落地页、小程序前端、活动专题这类项目，按项目收费。这是现金流业务，用来维持基本运营。第二条是模板加定制：把流水线沉淀下来的组件和页面模板做成半成品，客户买基础模板，再加钱定制差异化部分。这条线的毛利比纯定制高，因为一次开发可以反复售卖。第三条是长期设计系统维护：按月签，帮客户维护一套持续更新的组件库，保证他们的线上产品视觉统一。

三条线共同存在的好处是，我不会被单一业务的波动卡死。定制项目多的时候多做定制，项目淡季靠模板和维护撑住底。

5.2 为什么是2026，不是现在

经常有人问我：现在工具已经这么好用了，为什么非要等到2026？我的回答是：工具已经就位，但“人”还没就位。

这里说的“人”有两层。第一层是我自己。虽然流水线已经跑通，但我还想再积累更长时间——把不同行业的视觉判断经验沉淀下来，把提示词模板打磨得更稳定，把踩过的坑整理成一套能复用的checklist。这些东西是工具给不了的，只能靠一个一个真实项目喂出来。第二层是市场和客户的接受度。目前很多客户对“设计师兼开发”这个角色还持怀疑态度，但AI工具在市场上的渗透速度非常快，再过一两年，客户会主动找“能直接交付上线”的人，而不是“只交图”的人。

所以2026年不是预言，它是一个蓄力节点。现在的每一单、每一个项目、每一篇笔记，都是在给那家公司攒地基。

5.3 现在就能开始的三件事

如果你也被这套思路打动，别急着买课报班，先把这三件事做了。

第一件，建立自己的视觉资产库。把你平时收集的好设计、好组件、好配色方案按项目类型分类存档，用Paper这样的工具做索引。以后写设计简报时，直接从资产库里引用参考，提示词的质量会高很多。第二件，用模拟项目练手。别用真实客户的项目试错，自己编一个“某咨询公司落地页”“某跨平台产品官网”之类的模拟需求，从头到尾跑一遍这条流水线，直到流程烂熟于心。第三件，沉淀你的提示词模板。每做完一个项目，把当时效果最好的那份设计简报留下来，删掉项目专属信息，提炼成通用模板。攒到五份十份的时候，你会发现自己接新项目的启动速度快得惊人。

最后说一句私心话。转型当指挥官之后，我最大的变化不是效率，是心态——以前只敢接自己能画完的单子，现在敢接以前不敢碰的“整个产品”级别的需求了。因为我知道，我手下有个叫Claude的执行者，桌上有个叫Paper的白板，而我需要做的，只是想清楚自己到底要什么，然后负责到底。设计师这行不会消失，消失的只会是那些不肯放下画笔、又不敢拿起指挥棒的人。