首页分享 Vibe Translating，Vibe Coding，现在轮到 Vibe Design了

Vibe Translating，Vibe Coding，现在轮到 Vibe Design了

来源：花匠小妙招时间：2026-03-26 05:09

关注

Google Stitch 前几天发布了一次大改版，据说Adobe 股价下跌了一大波。

这篇文章不是功能介绍——你搜一下就能找到一堆。我想做的事情更简单：用我自己最熟悉的场景（做一个翻译网站），从头到尾走一遍 Stitch 的新版本，让你看看"Vibe Design"到底意味着什么。

1、先说说为什么我觉得这事重要

过去聊的比较多的两件事：

第一件是 Vibe Translating。在翻译行业多年，亲眼看着翻译这个行业从"人工逐字翻"变成"告诉AI你要翻什么、翻成什么风格，然后做译后编辑甚至只是质量控制"。

第二件是 Vibe Coding。过去这半年我自己在学，也写了不少教程。核心体验就是：你不需要懂代码语法，你只要能描述清楚你要什么，AI就能帮你把软件写出来。

现在 Google 说：设计也是一样的。

这三件事的底层逻辑完全相同——你只负责说清楚"要什么"和"要什么感觉"，AI负责专业执行层的全部细节。翻译的术语库和排版、代码的语法和框架、设计的配色和布局，这些过去需要专门训练才能掌握的技能，正在被自然语言一层一层地替代掉。

对Vibe coding的人来说，这意味着你离"一个人做出一个产品"又近了一步。

2、实操：一句话生成翻译网站

我简单说了一句需求：

Stitch 分解了需求，给了我三个设计方向选择。每个方向用文字描述了风格调性。

这里有个小槽点：三种风格都是用语言描述的（比如"sleek, futuristic dark mode"之类），如果你不是设计师，可能很难从文字想象出最终效果。我觉得如果能直接给缩略预览会更好。但不影响大局，选一个试试就是了。

踩坑：选了个暗黑风格，结果翻车了

我选了"Modern AI-Centric"方向。Stitch做的第一件事让我有点惊喜——它先帮我写了一份PRD（产品需求文档），包括产品定位、目标用户、功能模块规划，然后才开始设计。

还有一整套 Design System，包括配色方案（Neon Cyan + Vantablack + Electric Purple）和字体规范。

然后生成了 UI 界面。

不过，坦率说——太丑了。赛博朋克翻译网站？这审美不是我的菜。

逆转：喂一个参考网站

但 Stitch 真正厉害的地方来了。我直接在对话里说：

"太丑了！我不喜欢这个风格，帮我设计一个类似这样的：designprompts.dev/monochrome"

Stitch 立刻去分析了这个参考网站，提取出了一套"Swiss Mono"设计系统——黑白灰的极简配色、Inter + Space Grotesk 的字体组合、干净的组件风格。

然后基于这套设计系统，重新生成了所有界面。

效果直接起飞：

看这个界面——品牌名叫"GLOSS"（很好的翻译产品名字），顶部有 TEXT / DOCUMENTS / IMAGES / VOICE 四个功能tab，左侧是 Workspace / Library / Glossary / Team / API 导航，主区域是经典的双栏翻译布局，底部还有实时同步状态和置信度显示。

作为一个做了七年翻译产品的人，三眼之内这个信息架构是合理的（还没有太细去看）。它不是在画一个好看的壳，它理解了翻译产品应该有什么功能模块。

右侧面板能看到完整的设计系统配置，包括 Theme 和 DESIGN.md 两个 tab。DESIGN.md 这个东西对学 Vibe Coding 的朋友特别重要——它是一个 markdown 格式的设计规范文件，你可以直接导出，喂给 Cursor 或其他 coding agent，让生成的代码在视觉上和设计稿保持一致。

这就像翻译行业的术语库（Glossary）：你在一个工具里定义好规则，其他工具可以直接复用，不用每次从头来。

从设计到原型到代码：一条龙

设计搞定后，Stitch 可以直接生成可交互的原型。点"Play"就能预览整个应用流程，点击导航、切换页面，是一个Demo了。

但更关键的是最后一步。点"导出"：

该图片疑似AI生成

你能看到一排选项：AI Studio、Figma、Jules、.zip、代码复制、MCP、即时原型……

我选了 AI Studio。Stitch 把设计稿（截图 + HTML + DESIGN.md）一键打包发送到 Google AI Studio：

到这一步，你就可以接着 Vibe Coding 了——让 Gemini 基于这些设计文件直接生成可运行的完整应用。

整个流程总结一下：

一句话描述需求 → AI给设计方向 → 不满意就喂参考 → 自动提取设计系统 → 生成高保真UI → 原型预览 → 导出到AI Studio写代码

从需求到可交互原型，我大概花了 20 分钟。这在过去，至少需要：找设计师沟通需求（1天）→ 出线框图（2天）→ 改到满意（来回3天）→ 出高保真稿（至少2天吧）→ 给前端切图（又2天）。

3、几点真话

说完好的，也说说不足和我的判断：

1. 风格描述不够直觉。三种设计方向用文字描述，不是设计师很难判断，直接上图才直观。2. 第一次生成的质量取决于你的审美表达能力。如果你只说"做一个翻译网站"，出来的东西可能很平庸。真正的质量跃升发生在你能给出参考的时候——一个URL、一张截图、一段对风格的描述。这跟 Vibe Coding 是一样的：Prompt 的质量决定产出的质量。3. 它理解产品逻辑，不只是画皮。这一点超出了我的预期。它不只是生成好看的界面，它会先想产品架构（PRD → Design System → UI），而且对翻译产品应该有哪些功能模块的理解是基本到位的。4. DESIGN.md 是被低估的杀手功能。对于同时在做 Vibe Coding 的人来说，这个文件就是打通"设计→代码"一致性的桥梁。你不用再跟 AI 描述"我想要什么颜色什么字体"了，直接给它这个文件。5. 完全免费。目前 Stitch 还是 Google Labs 的实验项目，完全免费使用。相比于20美刀的Figma香多了。

Stitch 地址：stitch.withgoogle.com（没收他家广告费‍♂️）

免责声明：本内容来自腾讯平台创作者，不代表腾讯新闻或腾讯网的观点和立场。