一个设计师用 AI 一天搭完自己的商业网站（完整复盘）
作为一个设计师，我用一天时间，把自己的设计服务网站从空文件夹做到上线。过程中我几乎没有“独立写代码”的传统体验，更像在做一场高强度的 Design QA 和交付管理：我负责目标、结构、标准和取舍，AI 负责实现、重构、排错和重复劳动。
这篇复盘写给两类人：
第一类是创始人或小团队，你可能正在卡在“网站上线”这种看似不难但一直拖的事情上。
第二类是设计师，尤其是想把自己的服务产品化、想把交付链路缩短的人。
背景：为什么我需要这个网站
2025 年我离开了工作五年的 Xero，开始做 Fractional Design Partner（FDP）。简单说，我以外部设计合伙人的身份嵌入创始人和小团队，做产品判断和设计执行。工作从上游开始，覆盖用户旅程、转化、留存、信息架构、优先级取舍，然后直接下场交付可用的设计与落地方案。
当这个模式开始跑起来后，我很快发现一个现实问题：我需要一个专门的商业落地页。它的目标很明确，让潜在客户在几分钟内理解三件事：
我能帮你解决什么问题。
我们怎么合作。
价格与下一步是什么。
设计稿我早就在 Figma 里完成了，真正拖住我的是 开发。找外包意味着沟通成本和迭代摩擦，自己写工程又不够熟练。Figma Sites 我也试过，但在动画、响应式和一些细节控制上仍然有限。
直到我开始用 Claude Code，我才觉得“设计师自己把网站交付上线”这件事进入了一个新阶段。
一天完成，从空文件夹到上线
网站从零到上线发生在一天之内。节奏并不极端，中间我做了午饭、去海里游泳、接孩子。真正坐下来“推进交付”的时间大概四小时左右，剩下是碎片化的检查、反馈与小修小补。
这里有两个前提条件需要说清楚：
第一，Figma 设计稿已完成，只有桌面版（960px），没有移动端。
第二，原稿动态效果不多，所以这个项目的挑战主要在“从设计到可上线的响应式页面”这条链路上。
过程：每一步发生了什么
上午 9:30：先把项目拆解成可执行的计划
我在终端里打开 Claude Code，把 Figma 设计稿链接给它，要求它基于设计稿实现网站。
Claude 第一件事没有写代码，而是先生成实施计划，把项目拆成几段：连接 Figma MCP、初始化项目、实现页面、响应式适配、Git 版本控制、Vercel 部署。
这一步很关键。对我来说，真正决定成败的从来不是“能不能写出来”，而是“能不能在有限时间内把交付闭环跑通”。AI 先把路径画出来，后面每一步就更像按 checklist 走。
小技巧：在 Claude Code 终端里，Shift + Tab 可以切换到 Plan Mode。
9:30 到 9:35：连接 Figma 设计稿
通过 Figma 的 MCP（Model Context Protocol），Claude 可以读取设计文件，提取颜色、字体、间距等参数，并下载图片素材。几分钟内它就整理出一套可用的设计 token，包括色彩、灰度、字号与行高。
这一步的价值在于，设计到开发之间最繁琐的“翻译层”大幅减少了。我不需要再逐条解释间距、字号、色值，也不需要手动导出几十个素材。
9:35 到 9:55：初始化项目 + 桌面端布局落地
Claude 用 Next.js + Tailwind CSS 初始化项目，然后按区块实现页面。我的网站大概 9 个区块：导航栏、Hero、社会认证、痛点、服务策略、案例研究、定价、CTA、页脚。
不到 20 分钟桌面端完整布局就出来了，素材也能正常加载。打开浏览器那一刻我就知道，这件事已经“可以交付”了。后面更多是质量控制。
下午：桌面端精调，更像和工程师一起做 Design QA
午饭后我去咖啡馆继续推进。对照 Figma 原稿，还是有很多细节要调：阴影、边框、间距、图片裁切、组件对齐。
我的工作方式很简单：给 Claude 发截图，指出差异，让它改。这个过程非常像你和靠谱工程师一起做 Design QA，只不过响应速度更快。
一个有意思的现象是：AI 很擅长“结构级”的批处理，比如把所有图标统一替换为 SF Symbols，几乎瞬间完成。但当你要它做“像素级的视觉微调”，它会用很多 token 来回试，效率反而不稳定。我的结论是：结构和规律交给 AI，微调和最终审美由人来拍板，必要时直接给它更明确的素材或裁切结果。
下午：响应式适配，这一段是最大工作量
设计稿只有 960px 桌面宽度，但网站必须在手机（375px）和平板（768px）上都能正常工作。
Claude 的处理方式是把大量绝对定位改成更可靠的 Flex 布局，并加上响应式断点。我这里记录几个关键点，都是“能直接复用”的做法：
Hero 区块在桌面和手机使用不同背景图，手机端需要竖版裁切。
导航栏抽成独立的客户端组件，加了汉堡菜单。
Strategy 区块原本用了很多绝对定位，改成 Flex 结构，并用 aspect-ratio 控制图片比例与稳定性。
定价卡片从横排改为纵向堆叠，按钮触摸目标按移动端习惯做了更友好的尺寸（比如 44px 触摸区域）。
另外它顺手修了一个视觉问题：黄色高亮背景原本是 SVG，缩放时圆角会变形。Claude 把它替换成 CSS 背景色加圆角，维护成本更低，也更稳。
傍晚：动画和微交互，让页面“更像一个成熟产品”
页面结构稳定后，我加了一些克制的动态效果，让体验更精致但不打扰：
滚动触发的渐显动效，每个区块进入视口时淡入上移。
Hero 的加载动效，标题、描述、按钮依次出现。
卡片和图片的 hover 效果，轻微缩放和阴影反馈。
导航栏 Logo 的轻微 hover 缩放。
这一段的原则很简单：动画是为信息层级服务，不是为了炫。
晚上：吸顶导航 + 毛玻璃效果，以及一次很典型的排错
我希望导航栏在滚动时固定在顶部，用户随时能点到 CTA。Claude 做了 sticky 吸顶和毛玻璃背景效果，顶部透明，往下滚动后半透明白色加模糊，风格接近 Apple 或 Stripe 的那种克制质感。
这里遇到第一个明显 bug：sticky 不生效。我把截图给 Claude，它很快定位到原因：页面外层容器有 overflow-x-hidden，这类 overflow 设置会影响 sticky 的行为。解决方式也很直接，把 overflow-x-hidden 移到更合适的位置，避免破坏 sticky 的计算。
如果你自己查，这种问题通常要花不少时间翻规范和试错。AI 在“定位原因”这一步非常强，这也是我觉得它最像一个高级工程搭档的地方。
晚上：接入真实链接，上线
最后一步是把所有链接换成真实地址：CTA 指向 Calendly，审计样例指向 Notion，社交媒体指向 LinkedIn、X 和邮箱。
代码提交到 GitHub，Vercel 自动部署。然后我在 Vercel 配置自定义域名 bearliu.com，调整 DNS，等 SSL 自动生效。
晚上 10 点，网站上线。
我踩到的坑，以及处理方式
这次踩到的问题不多，但都很典型，值得记录给以后复用：
目录名包含空格。项目文件夹叫 “FDP website”，一些脚手架工具不喜欢空格。解决方式是初始化时指定不带空格的 name，并在终端命令里用引号处理路径。
Tailwind CSS v4 配置方式变化。v4 的主题配置从 tailwind.config.js 转向在 CSS 文件里用 @theme inline。Claude 一开始就按新方式处理，省了不少时间。
Sticky 失效与 overflow 冲突。只要祖先容器里有不合适的 overflow 设置，就很容易让 sticky 行为失效。
SVG 背景缩放变形。用 preserveAspectRatio=“none” 的 SVG 在响应式下容易拉伸圆角。替换成 CSS 背景与圆角更稳，也更容易维护。
最终成果
网站地址：bearliu.com
GitHub 仓库：已更新到我的 GitHub
总耗时：约一天（断断续续，实际工作约四小时）
技术栈：Next.js 16 + Tailwind CSS v4 + Vercel
外部依赖：未引入额外 UI 组件库
复盘：我真正学到的几件事
第一，设计师把“交付链路”自己跑通变得现实了。过去“设计师会写代码”常常意味着要补大量工程知识。现在更像是你把目标定义好，把质量标准抓牢，工程实现交给 AI，然后你做验收与迭代。对我这种理科背景、自学设计的人来说，这个变化非常关键。
第二，从 Figma 到可上线代码的路径明显变短了。MCP 让 AI 能直接读设计意图，减少了大量翻译工作。我看到网上有人说 Figma MCP 体验不稳定，但就我这次项目来说，设计还原度在第一轮就能达到很高水平，后续主要是细节修正。
第三，排错效率是质变级别的提升。很多阻碍设计师做开发的，并不是写代码，而是遇到问题时不知道怎么查、怎么定位。AI 在“快速缩小问题空间”上非常强，让你能把时间花在更有价值的判断上。
第四，迭代的手感变了。加一个 hover、改一个链接、调整一个布局，反馈几乎是即时的。这种体验会让你更愿意做小步快跑，也更愿意把网站当作一个持续迭代的产品，而不是一次性工程。
第五，人类的判断依然是核心。整个过程中我必须做的事情包括：决定页面内容的优先级、把控信息结构、验收设计还原度、测试交互体验、选择哪些细节值得做，以及把真实的业务链接和商业动作接上去。AI 很强，但它不会替你做商业取舍。
第六，AI 擅长与不擅长的边界很清晰。结构化重构、批处理替换、排错定位属于它的强项。像素级视觉微调容易让它来回试错，遇到这种情况更好的方式是你给它明确输入，比如更合适的裁切图、明确的对齐基准，或者干脆你直接把结果定下来再让它落代码。
这件事对我业务的意义
回到 FDP 的大图景。我做的事情本质上是帮创始人和小团队获得“更好的判断力 + 更快的交付速度”。这次我用一天把自己的商业网站从设计到上线跑通，其实就是一次示范：当你把工具和协作方式选对，很多过去需要一个小团队的事情，现在可以由一个人完成。
这个网站会成为我的获客链路起点。潜在客户通过 LinkedIn、X 或口碑找到我，进入 bearliu.com，快速理解我能解决什么问题、怎么合作、多少钱，然后预约一个 15 分钟的 intro call。链路清晰，可控，可迭代。
同时这个项目也变成了我的内容资产。把 AI 融入真实工作流，把过程记录下来分享出去，这就是我一直在做的事情。对独立设计师和小团队来说，AI 带来的变化很直接：你能用更小的组织规模，完成更完整的交付闭环。关键在于你能定义标准，做出取舍，然后让工具把执行效率拉满。
如果你也在打磨产品，尤其是卡在转化、留存、体验或优先级取舍上，你可以在这里找到我。也许我们可以合作。
I Built My Business Website in One Day With AI (As a Designer)
I built my own FDP website in a day, with AI. From an empty folder to a live site.
Not a “look I can code now” flex. More like a real workflow shift I didn’t fully expect.
Context: I left Xero in 2025 and started working as a Fractional Design Partner (FDP). I embed with founders and small teams to help with product judgement and design execution, starting upstream with the user journey, conversion, retention, and prioritisation. Not just “make the UI pretty”.
To make that work, I needed a proper landing page. Something that answers, fast: What can I help with? How do we work together? What does it cost? What’s the next step?
My Figma design was done. The thing blocking me was development. Outsourcing adds friction. Building it myself used to mean a big engineering learning curve.
Then I tried Claude Code.
Here’s what happened, in practical terms.
I gave Claude Code my Figma link and asked it to build the site based on the design.
It didn’t start by spraying code everywhere. It started with a plan: connect Figma MCP, bootstrap the project, implement the page, make it responsive, set up Git, deploy on Vercel. That alone made it feel like working with a solid engineer.
The biggest unlock was Figma MCP. Claude could pull design tokens (type, spacing, colours) and assets directly from the file. The usual “translation layer” between design and build got dramatically thinner.
Desktop layout came together quickly. The real work was quality control and responsiveness. My design was desktop-only (960px), so we had to make it work properly on mobile and tablet.
A few specific things we changed: • Refactored absolute positioning into more resilient flex layouts • Used different hero imagery for mobile (cropped vertically) • Built a proper mobile nav with a hamburger menu • Stacked pricing cards and adjusted tap targets for touch • Replaced a scaling SVG highlight background with a simple CSS solution, because the corners were warping on different widths
We also hit a classic bug: sticky nav didn’t work. The cause was an overflow setting on a parent container (overflow-x-hidden). It breaks sticky behaviour. Claude found it fast, explained why, and fixed it cleanly. That’s where AI really shines for me: debugging and narrowing the search space.
By the end of the day, the site was live on my domain.
What I learned (the part I think matters for other designers):
“Designer to production” is more realistic now. You still need taste and judgement, but the execution bottleneck is much smaller.
AI is strongest at structure and debugging. Refactors, repetitive replacements, and finding root causes. Huge win.
AI is weaker at pixel-perfect micro tuning. If you keep saying “move this 4px left”, it can burn tokens and time. The trick is: you decide the standard, give clear inputs, and let AI do the heavy lifting.
The human role doesn’t disappear. I still owned content priorities, what to show first, what not to show, the overall tone, the business links, and the final QA.
This is exactly how I think about FDP work too: clear priorities, high-leverage fixes, then ship.
If you’re a designer, I hope this gives you a bit of momentum. You don’t need to become a full-time engineer to ship real things.
If you’re a founder or building a product and want help sharpening the experience (journey, conversion, retention, and what to fix first), you can find me here. Maybe we can work together.
bearliu.com
