On an unremarkable Monday last February, Andrej Karpathy fired off a tweet that gave the internet its new favorite buzz-phrase: vibe coding.
去年二月一个普通的周一，安德烈·卡帕西发了一条推文，为互联网贡献了新的流行语：氛围编程。

Within hours, people watched tools like Bolt, v0, and Lovable conjure apps from mock-ups never designed or developed.
几小时内，人们目睹 Bolt、v0 和 Lovable 等工具从未经设计的草图中直接生成应用程序。

The internet cheered—speed looks spectacular in demo reels—but more senior groups were quietly wincing as AI began to add technical debt to large codebases at previously impossible rates.
互联网一片欢呼——演示视频中的速度看起来令人惊叹——但更资深的团队却在暗自担忧，因为 AI 正以前所未有的速度为大型代码库增加技术债务。

Why demo-first AI fails mature teams
为何演示优先的 AI 不适合成熟团队

Here’s how senior designers, developers, and marketers feel the pain.
以下是资深设计师、开发者和营销人员感受到的痛点。

Designers: Prefab design systems ≠ your design system

设计师：预制设计系统 ≠ 你的设计系统

Today’s one-click generators choose their own colors, border-radii, and fonts. The instant they collide with a house style they don’t recognize, they hard-code new hex values that overwrite your brand tokens, throw off the grid, and leave designers sending screenshots of mismatched styles to the bug tracker.
如今的一键生成器会自行选择颜色、边框半径和字体。一旦遇到它们无法识别的品牌风格，就会硬编码新的十六进制值覆盖你的品牌标识符，打乱网格系统，导致设计师不得不将风格不匹配的截图提交到缺陷跟踪系统。

When you draw a picture, you spend your time carefully crafting the shapes and lines. Great design comes from consistency of intention.
当你绘制一幅作品时，需要精心雕琢每个形状和线条。优秀的设计源于意图的一致性。

Today’s AI designers give you a page full of chicken scratches, an eraser, and a “good luck.”
如今的 AI 设计师给你的是一页鬼画符、一块橡皮擦，外加一句"祝你好运"。

Developers: One-shot codegen ≠ production code.

开发者们注意：一次性生成的代码 ≠ 可投产代码。

A “fully-working” React page arrives as a single 1,200-line component—no tests, no accessibility tags, no separation of concerns. The diff looks like a CVS receipt.
一个"功能完整"的 React 页面交到你手上时，往往是个 1200 行代码的单一组件——没有测试用例，没有无障碍标签，没有关注点分离。代码差异看起来像超市小票那么长。

The dev who merges it now basically owns a tarball that will resist every future refactor. Code feels like inheriting a junior’s side project, but the junior in this case is an LLM that never sleeps and can’t be taught.
负责合并的开发者现在接手的简直就是个顽固的代码压缩包，日后任何重构都会遭遇抵抗。这代码感觉像是继承了一个菜鸟的副业项目，只不过这里的"菜鸟"是个永不休息且无法教导的 LLM。

Clean, maintainable code is measured by how many lines you can still cut. Without context of your existing codebase or a lot of fine-tuning, AI’s tendency is to be too verbose.
简洁、可维护的代码标准在于你还能删减多少行。在没有现有代码库上下文或大量微调的情况下，AI 往往过于冗长。

Marketers: Fake data ≠ live experiments.

营销人员须知：虚假数据 ≠ 真实实验。

Marketing can now crank out a landing page in fifteen minutes, but every testimonial, price, and CTA is still lorem ipsum.
如今营销团队十五分钟就能拼凑出着陆页，但每条客户评价、价格信息和行动号召仍停留在占位文本阶段。

Wiring the page to the CMS—and to analytics—means rewriting half the markup by hand. Every 10x sprint lands on an engineering backlog.
将页面接入 CMS 系统并关联数据分析工具，意味着需要手动重写半数标记代码。每次十倍速冲刺最终都堆积成工程待办事项。

You can generate pages, sure, but you’re gonna have to wait on the revenue.
你可以生成页面，这没问题，但要想获得收益还得再等等。

What’s left for us? 留给我们的还有什么？

Call it all the 80/20 hangover: AI generates the first 80% of the job in 20% of the time… then teams grind through the next 80% of the time patching the final 20% of the work.
这就是所谓的 80/20 后遗症：AI 用 20%的时间完成了 80%的工作...然后团队却要耗费接下来 80%的时间来修补那最后的 20%。

It’s the perfect inversion of healthy collaboration. Humans drown in drudgery and plead with the machine to handle the craft.
这正是健康协作的完美反转。人类深陷繁琐苦差，转而恳求机器来驾驭技艺。

But here’s the thing: The lesson isn’t that AI is snake oil; it’s that big team problems aren’t solved by fast AI alone.
但关键在于：问题不在于 AI 是骗人的把戏，而在于仅靠快速的 AI 无法解决大型团队面临的难题。

Sure, “Make me a meal-planning app” is a fun toy, but as we’ve seen, speed without fidelity just moves the bottleneck downstream.
当然，“给我做个膳食规划应用”是个有趣的玩具，但正如我们所见，缺乏准确性的速度只会将瓶颈转移到下游环节。

What we need is to respect the craft already living in your components, tokens, data, and tests. We need AI for grown-ups.
我们需要的是尊重已经存在于你的组件、令牌、数据和测试中的工艺。我们需要面向成熟开发者的 AI。

The two-sided contract of AI for grown-ups
《成年人的人工智能双面契约》

Here’s the proposal: what if we started building AI with competent teams in mind?
以下是提案：如果我们开始为专业团队打造人工智能会怎样？

For that kind of tooling, two mindset shifts need to happen, both from the builders of AI software and the professionals that use it.
要让这类工具真正发挥作用，AI 软件开发者和使用它的专业人士都需要完成两种思维转变。

Builders need to… 开发者需要……

1. Respect the stack. Every pixel, prop, token, schema, and test that already lives in a repo becomes the rails, not a suggestion. Professionals should be able to easily predict what AI outputs will look like.
   尊重现有技术栈。代码库中的每个像素、属性、令牌、模式和测试都应成为规范而非建议。专业人员应能轻松预测 AI 的输出效果。
2. Stay in their lane. Instead of inventing Yet-Another-Canvas, the tooling embeds itself in the software the best teams already use: Figma, IDEs, headless CMSes, etc. Professionals work hard to choose their tools, and AI alone is not a compelling enough reason to switch.
   恪守专业边界。工具不应另起炉灶创建"又一个画布"，而应嵌入顶尖团队已在使用的软件：Figma、集成开发环境、无头内容管理系统等。专业人员精心挑选工具，仅凭 AI 并不足以成为更换工具的理由。
3. Expose control. Codegen happens in daylight—via CLI hooks, readable diffs, and human review gates—so senior engineers can keep the quality bar where it belongs. Professionals are smart enough to handle the machine, so long as it shows them what it’s doing.
   透明可控。代码生成过程全程可见——通过 CLI 钩子、可读的差异对比和人工审核关卡——确保资深工程师能将质量标准维持在应有高度。只要机器展示其运作过程，专业人员完全有能力驾驭它。

It’s not up to the professional world to keep perfect pace with the runaway train of AI. It’s the tool builders’ responsibility to stop breaking so much stuff.
专业世界无需与人工智能这辆失控的列车保持完美同步，工具构建者才该为频繁制造混乱承担责任。

Professionals need to… 专业人士需要..

1. Feed the context. Put in the work to document processes, map prototypes to real components, hand over design tokens, and write the first round of tests. Give the model a fighting chance at fidelity. Builders will use this to make AI generations far more deterministic.
   提供上下文支持。投入精力记录流程、将原型映射到实际组件、移交设计标记并编写首轮测试。为模型提供实现高保真度的机会。构建者将利用这些使 AI 生成结果更具确定性。
2. Stay accountable. A merged PR is still a human name on the line for the most intricate of crafts: UX polish, performance budgets, sparkling copy, etc. Builders don’t have to design all-star AI; they can focus on making it consistent at the grunt-work.
   保持责任意识。即便代码已合并，最精细的工艺——如用户体验优化、性能预算把控、文案润色等——仍需具体人员负责。构建者无需设计全能 AI，而应专注于通过基础工作确保其一致性。
3. Recognize AI limits. Designers, developers, and marketers use AI primarily as the translation layer between deeply skillful fields. Builders don’t need to make AI that replaces teams, but rather AI that fosters communication in the handoffs.
   认清 AI 的局限。设计师、开发者和营销人员主要将 AI 用作连接专业领域之间的翻译层。构建者无需打造替代团队的 AI，而应开发促进交接环节沟通的 AI。

It’s not up to the Builders to anticipate every team’s exact use case. Instead, they can trust that professionals will rise to the challenge of adapting AI to their needs.
构建者无需预见每个团队的具体用例。相反，他们可以相信专业人士会迎接挑战，根据自身需求调整 AI 应用。

How AI for grown-ups works on a given Monday
《AI for grown-ups》在某个周一的工作机制

Well, that’s all great: People focus on people things; AI focuses on AI things. But what does it look like in practice?
这一切听起来都很美好：人类专注于人类的事务，AI 则处理 AI 擅长的工作。但在实践中，这会是什么样子呢？

Let’s take the perspective of our three personas again—designers, developers, and marketers—and see what an ideal world looks like for them.
让我们再次从三个角色——设计师、开发者和营销人员的视角出发，看看对他们而言理想的世界是怎样的。

Designers, still in Figma

设计师们，仍在 Figma 中奋战

A designer adjusts the corner radius on the hero card and watches the live hand-off panel flag the exact React prop it will touch.
设计师调整了主卡片圆角半径，实时交接面板随即标记出将修改的具体 React 属性。

A token audit bot pings him only if the value breaks the design system—no more screenshot spreadsheets.
一个代币审计机器人只会在数值违反设计系统时提醒他——再也不用处理截图表格了。

Freed from red-lining, he spends the afternoon nudging micro-interactions and pairing with motion design, really making everything sing.
摆脱了红线标注的束缚，他整个下午都在微调交互细节并与动效设计搭档，真正让每个元素都活灵活现。

Way more time on polish. No more token-drift bugs filed.
投入更多时间打磨细节。不再提交因 token 漂移导致的缺陷报告。

Developers, still in the IDE

开发者们，仍在 IDE 中奋战

A developer pulls the latest “design-to-code” PR: it’s already split into sensible components, test stubs green-lit, and the diff is small enough to review over coffee.
开发者拉取了最新的"设计转代码"PR：它已被合理拆分为多个组件，测试桩已通过验证，代码差异小到可以边喝咖啡边审阅。

She runs the performance benchmark—numbers hold, thanks to preset budgets the generator never crosses.
她运行性能基准测试——数据保持稳定，得益于预设预算的约束，生成器从未越界。

With boilerplate gone, she dives into accessible keyboard flows and edge-case logic that actually moves the product forward.
摆脱了样板代码的束缚后，她专注于优化键盘操作流程和边界情况处理逻辑，这些实质性工作真正推动了产品的发展。

Review cycles on layout bugs drop by half with AI taking over scaffolding.
借助 AI 接管框架搭建工作，布局缺陷的审查周期缩短了一半。

Marketers, still in the CMS

营销人员，仍在 CMS 中

A marketer duplicates last week’s landing page variant, swaps headline copy, and clicks “Stage Experiment.”
一位营销人员复制了上周的着陆页变体，替换了标题文案，然后点击"阶段实验"按钮。

The AI wires analytics, snapshots the control, and opens a PR tagged for growth-team review—no Jira ticket, no dev backlog delay.
AI 自动连接分析系统，为对照组创建快照，并提交标记为增长团队审核的 PR——无需创建 Jira 工单，也不会造成开发积压延误。

They schedule the A/B test in the same dashboard and spend their saved hour crafting social hooks for the launch.
他们在同一个看板中安排 A/B 测试，并用节省下来的一个小时为产品上线构思社交媒体传播钩子。

Campaign velocity doubles, while engineering time spent on “tiny copy changes” shrinks to near-zero.
活动推进速度翻倍，而工程团队在"微小文案调整"上花费的时间几乎降为零。

Same tools, less tedium, deeper ownership. Each role feeds context to the system, stays accountable, and lets the AI do the grunt work—that’s the contract in action.
同样的工具，更少的繁琐，更深度的掌控。每个角色为系统提供上下文，保持责任担当，让 AI 处理繁重工作——这就是契约的实际运作。

Keep your Cursor, keep your ChatGPT—the glue-layer AI just has to play nice with them while sitting squarely in the team’s shared stack.
保留你的光标，保留你的 ChatGPT——中间层 AI 只需在团队共享技术栈中妥善兼容它们即可。

How we’re building toward AI for grown-ups
我们如何构建面向成熟应用的 AI

So, how close are we to that perfect Monday?
那么，我们离那个完美的周一还有多远？

At Builder, we find ourselves in a unique position to help, and we’ve been pivoting to meet the demand, especially for large teams.
在 Builder，我们处于独特的优势地位来提供帮助，特别是针对大型团队的需求，我们已迅速调整业务方向以满足这一需求。

A tiny history lesson 人工智能发展简史

Builder launched in 2019 as a headless CMS plus visual editor whose goal was simple: let developers surface their own JavaScript framework components, and then let non-developers arrange those components without touching code.
Builder 于 2019 年作为无头 CMS 和可视化编辑器推出，其目标很简单：让开发者能够展示自己的 JavaScript 框架组件，然后让非开发人员无需接触代码即可排列这些组件。

To pull that off, we built our editor on Mitosis, an open-source layer that describes components once and compiles them to whatever JS framework a team already runs.
为了实现这一目标，我们在 Mitosis 上构建了编辑器，这是一个开源层，只需描述一次组件，就能将它们编译成团队正在使用的任何 JS 框架。

Because of that early direction, three “grown-up parts” of our product were firmly in place before the generative-AI wave arrived:
正因这一早期定位，在生成式 AI 浪潮到来前，我们产品的三大"成熟组件"已稳固成型：

1. Fully-featured visual editing: Our Webflow-like editor creates space for designers and marketers to tweak components and pages that compile to any JS framework.
   功能全面的可视化编辑：我们类似 Webflow 的编辑器为设计师和营销人员提供了调整组件和页面的空间，这些组件和页面可编译为任何 JS 框架。
2. Deterministic component mapping: Every Figma frame and its design tokens can round-trip with a real, version-controlled component—not a look-alike snippet.
   确定性组件映射：每个 Figma 框架及其设计令牌都能与真实的版本控制组件双向同步——而非外观相似的代码片段。
3. A data source with real content: The CMS holds marketing content, sure, but also all the data engineers need for accurate UI states.
   真实内容的数据源：CMS 不仅存储营销内容，还包含工程师所需的所有数据，用于构建精确的 UI 状态。

So when large language models became practical, we didn’t bolt AI onto a blank slate; we layered it onto an editor, a mapper, and a CMS that were already respecting the stack.
因此，当大型语言模型变得实用可行时，我们并非将 AI 生硬地加在白板之上，而是将其融入了一个早已遵循技术栈规范的编辑器、映射器和内容管理系统之中。

That head-start is why our current AI features can focus on removing drudgery instead of reinventing fundamentals.
这种先发优势让我们当前的 AI 功能能够专注于消除繁琐工作，而非重新发明基础技术。

What we’ve made so far

我们迄今的成果

Our product works as a bunch of incrementally adoptable layers. No big bang rewrites needed.
我们的产品采用一系列可逐步采用的层级架构，无需进行大规模重写。

1. Visual Editor → Code. Think Bolt or v0, but with Webflow-level tweakability. Prompt the AI to draft a page—or paste any URL for an instant, editable clone—then fine-tune any class, token, or breakpoint by hand. Drop in production-ready components from 21st.dev (or your own repo) and ship designs that respect your CSS, not ours.
   可视化编辑器 → 代码。想象 Bolt 或 v0 的体验，但具备 Webflow 级别的精细调节能力。通过 AI 提示快速生成页面初稿——或粘贴任意 URL 即时创建可编辑克隆——然后手动微调每个类、令牌或断点。直接拖入来自 21st.dev（或您自己的代码库）的生产就绪组件，交付的设计将完全遵循您的 CSS 规范而非我们的。
2. Figma → Visual Editor (and Code). Install the free Figma Visual Copilot plug-in, draw your frame, and click Export. Copilot converts the frame’s exact Auto-Layout geometry into clean, responsive framework code that can drop straight into the repo or open in Builder’s visual editor for tweaks. Designers still hand over a Figma link; developers run one CLI command to scaffold production-ready code—no guessing, no style drift.
   Figma → 可视化编辑器（及代码）。安装免费的 Figma Visual Copilot 插件，绘制画框后点击导出。Copilot 能将画框的精确 Auto-Layout 几何结构转换为简洁、响应式的框架代码，可直接提交至代码库或在 Builder 可视化编辑器中微调。设计师仍交付 Figma 链接；开发者只需运行一条 CLI 命令即可生成生产就绪代码——无需猜测，杜绝样式偏差。
3. Repo → Visual Editor → Repo PR [coming soon]. We’ll be announcing a product shortly that allows anyone to import any GitHub repo to the Visual Editor and make changes that get auto-sent as a PR. Marketers and designers can file engineering tickets with the code already in nice shape.
   仓库 → 可视化编辑器 → 仓库 PR [即将推出]。我们将很快发布一款产品，允许任何人将任意 GitHub 仓库导入可视化编辑器进行修改，系统会自动将变更以 PR 形式提交。营销人员和设计师可以直接提交代码形态良好的工程工单。
4. Component Mapping. Tell Builder which Figma button matches which code button once, click “Publish,” and you’re set. From then on, every design export that uses that component drops the real one from your repo into the generated diff—props, tokens, everything—so code reviews focus on ideas, not mismatched styles.
   组件映射。只需告诉 Builder 哪个 Figma 按钮对应哪个代码按钮，点击"发布"即可完成设置。此后，所有使用该组件的设计导出都会从您的代码库中提取真实组件——包括属性、令牌等所有内容——直接生成到差异文件中，让代码审查专注于创意而非样式不匹配问题。
5. Builder Publish: It’s not just a patch for lorem ipsum; it’s your entire headless CMS. Wire any page to real-time content and analytics so marketing can run A/B tests without tapping devs—and get the full schema, versioning, and single-source-of-truth perks that come with a modern CMS, all under the same roof.
   Builder Publish：它不仅是占位文本的替代方案，更是您完整的无头内容管理系统。将任何页面与实时内容和分析数据连接，让营销团队无需开发人员介入即可进行 A/B 测试——同时享受现代 CMS 提供的完整数据架构、版本控制和单一数据源优势，所有功能集成于同一平台。

Where we’re still working

我们仍在努力的方向

We’re close, not finished. Next on our list:
我们已接近完成，但尚未结束。接下来要做的是：

• Less manual context. Auto-detect more tokens and components so mapping feels like autocomplete, not data entry.
  减少手动输入。自动检测更多标记和组件，让映射操作如同自动补全，而非数据录入。
• Deeper control. Let power users crack open every AI draft—props, tests, perf budgets—without leaving the editor.
  深度掌控。让高级用户无需离开编辑器即可剖析每份 AI 草稿——道具、测试、性能预算——一览无余。
• Broader design-system support. Shadcn today, your bespoke kit tomorrow. Mapping should be one click, not a weekend.
  更广泛的设计系统支持。今日使用 Shadcn，明日定制专属工具包。映射应一键完成，而非耗时整个周末。

That “perfect Monday” vision is where we’re headed, and our roadmap will get us there one feature at a time.
那个"完美星期一"的愿景正是我们的前进方向，我们的路线图将带领我们逐步实现这一目标，一次一个功能。

We’re definitely interested in your feedback: What gaps do you still feel between design, code, and marketing, and where could an “AI for grown-ups” save you the most pain?
我们非常期待您的反馈：您认为在设计、代码和营销之间还存在哪些差距？"面向成人的 AI"能在哪些方面为您最大程度地减轻困扰？

Drop your thoughts in the comments or tag us on our socials (see footer for links).
在评论区留下您的想法，或通过社交媒体@我们（页脚处有链接）。

Turning the 80/20 right-side-up
将 80/20 法则正本清源

If Software 2.0 taught us that networks can write code, and the Software 3.0 hype reminds us they can write whole interfaces, then the middle road we’ve walked today—call it Software 2.5—insists that learned programs still deserve linting, budgeting, and daylight.
如果说 Software 2.0 让我们明白网络能够编写代码，Software 3.0 的热潮又提醒我们它们可以构建完整界面，那么今天我们走的这条中间道路——姑且称之为 Software 2.5——则坚持认为习得程序依然需要代码审查、资源规划和阳光测试。

Boring constraints create extraordinary freedom.
枯燥的约束造就非凡的自由。

Speed is intoxicating, but alone it flips the 80/20 rule on its head, leaving humans elbow-deep in cleanup. AI for grown-ups reverses that trade.
速度令人沉醉，但若仅追求速度，便会颠覆二八法则，让人深陷善后泥潭。而成熟的人工智能则能扭转这一局面。

Tool builders promise rails, not rabbit holes. Professionals promise context and accountability. Every mapped component, every token lock, every human review makes the next generation more predictable—and predictability is what compounds into real velocity.
工具开发者承诺提供的是轨道而非迷宫。专业人士保证的是上下文与责任担当。每一个映射的组件、每一次代币锁定、每一轮人工审核，都让下一代系统更具可预测性——而可预测性正是真正加速发展的复利源泉。

We don’t need to be dragged kicking and screaming into the new world. We’re perfectly capable of walking there at our own pace, spending our hours on craft no model can fake.
我们无需被生拉硬拽着进入新世界。我们完全有能力按照自己的节奏前行，将时间倾注于任何模型都无法伪造的技艺之上。