过去几天，Gemini所展现的爆发力让我未经授权，禁止复制转载。【原创不易，请尊重版权】们所有人都感受到前所未有的改变，我说前端【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。要失业，有人在后台留言嘲讽我，怎么说呢？本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】人们总是习惯于舒适度惯性，而对某些负面的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。信号视而不见。
上面这张图展示了软件工程招聘变化，其中移【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。动端工程师、前端工程师双双g，这写信号的本文版权归作者所有，未经授权不得转载。【本文受版权保护】背后，是软件工程领域的巨大变革。这个时代转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。，我们要从写代码的角色，向指挥AI的角色本文作者：唐霜，转载请注明出处。【未经授权禁止转载】转变，否则等待你的，只能是无所适从。
好了，不跑题了。接下来，我会以自己的一个本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】完整经历，好好讲一讲，如何利用googl著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】e的stitch和aistudio，从0转载请注明出处：www.tangshuang.net【转载请注明来源】到1，把你的想法从概念，变为可被在线访问【本文首发于唐霜的博客】原创内容，盗版必究。的产品。
现在，把我们想象为一位既不懂设计，也不懂本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。写代码的普通用户，当我们准备利用AI来实【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。现自己的产品时，我们可以按照如下步骤来引【本文首发于唐霜的博客】【本文首发于唐霜的博客】导AI一步一步的帮我们完成产品的实现。
首先，我们需要提供我们的需求，让AI帮我【本文受版权保护】未经授权，禁止复制转载。们把产品文档PRD梳理出来。一份好的，面【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】向AI的PRD既要包含产品本身的业务介绍未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。、功能描述，还要包含具体的页面结构、设计【版权所有，侵权必究】转载请注明出处：www.tangshuang.net元素、业务逻辑描述等等细节。另外，由于这【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】份文档并不纯粹是给人读的，而是会作为AI【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】的输入，因此，我们还需要让AI为我们整理未经授权，禁止复制转载。【原创不易，请尊重版权】出每一部分的合适的prompt。如果我们本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】使用Trae的SOLO模式，可以很好的生【本文受版权保护】【本文首发于唐霜的博客】成一份产品文档，但是如果我们要用纯大语言【原创不易，请尊重版权】未经授权，禁止复制转载。模型来生成，则需要巧妙的构造我们的pro本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】mpt，让AI帮我们生成复合上述要求的产本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】品文档。
其次，我们利用AI来辅助我们生成产品的原【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。型+设计稿。好的产品原型需要在准确反映产【作者：唐霜】【原创内容，转载请注明出处】品文档的同时，更要保持每一份生成的设计稿【作者：唐霜】【作者：唐霜】的风格、布局、细节样式都是一致的。此处我原创内容，盗版必究。转载请注明出处：www.tangshuang.net推荐Figma和google家的stit本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。ch，Figma也有AI设计功能，它能在【原创不易，请尊重版权】未经授权，禁止复制转载。保留原来的组件能力的基础上，利用AI生成著作权归作者所有，禁止商业用途转载。【转载请注明来源】能力帮你完成产品原型搭建，而且可以直接出转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net前端代码作为原型。相对而言，我更推荐st【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】itch，你可以把它认为是针对应用开发的【转载请注明来源】【作者：唐霜】lovart，我之前尝试用lovart来原创内容，盗版必究。【本文首发于唐霜的博客】做应用设计，但是lovart更多的是调用【未经授权禁止转载】【未经授权禁止转载】生图模型生成图片，全靠其背后的agent【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】来控制提示词，生成的界面差异比较大，多个本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net稿子不像是同一个应用。而stitch是针【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。对应用设计的，它分为web和app两种模原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net式，顾名思义，一个是针对桌面浏览器的，一【版权所有，侵权必究】转载请注明出处：www.tangshuang.net个是针对手机app的。用stitch生成【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】的一组设计稿，具有较高的一致性，比如页面【作者：唐霜】转载请注明出处：www.tangshuang.net顶部、底部的公共组件，同时，stitch【未经授权禁止转载】【本文受版权保护】还有针对设计稿进行全局调色的能力等等。不本文作者：唐霜，转载请注明出处。【作者：唐霜】过比较遗憾的是，stitch出来的稿子，【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net风格效果不是很理想，不如lovart出来原创内容，盗版必究。转载请注明出处：www.tangshuang.net的吸引人。
接着，我们利用AI生成的设计稿或代码原型【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】，将这些素材作为附件，丢到AI编程工具中【本文受版权保护】本文版权归作者所有，未经授权不得转载。，让工具中的Agent根据提供的图片稿子【作者：唐霜】【关注微信公众号：wwwtangshuangnet】、代码、产品文档等素材，完成初始的应用代【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】码生成。
在完成第一次生成后，我们就可以预览效果，【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net然后根据看到的实时界面，一点一点的与AI【未经授权禁止转载】【本文首发于唐霜的博客】进行沟通，将效果调整到我们想要的理想状态本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。。不过，这个过程其实非常痛苦，因为AI生转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net成代码的方式和我们人去改代码是不一样的，原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netAI会从头到尾扫描式生成代码，而我们人可【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net以指哪打哪，因此，人改代码的速度更快。但本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。是，作为不懂编程的普通用户，我们可以借助本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。一些工具里面的并行任务能力，同时修改多个本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。地方。AI编程工具的能力，决定了我们最后【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】得到应用的满意度。
完成反复调试之后，我们得到了满意的应用效【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net果，此时我们可以通过AI完成应用的构建和【本文首发于唐霜的博客】未经授权，禁止复制转载。部署。不同的工具，其部署的方式不同，有的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。类似第代码，是完全托管式的，有的是需要通【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】过类似github actions之类的著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。流水线来触发，有的是通过授权方式在本地构【原创不易，请尊重版权】未经授权，禁止复制转载。建后上传到应用托管服务商（如vercel【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】）。而且，有的情况下，例如我们需要连接到【转载请注明来源】【本文受版权保护】supabase，AI工具还会在一开始生原创内容，盗版必究。【原创内容，转载请注明出处】成应用代码阶段，就调用其接口来完成数据库【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。的创建和连接。不同的编程工具起背后的实现原创内容，盗版必究。原创内容，盗版必究。逻辑不同，不过通过Agent，我们可以搭【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。配MCP，完成各种服务的调用来完成部署。
对于手机App，编译到对应平台上可能需要【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。我们自己来操作，因为构建App需要有对应【本文首发于唐霜的博客】【本文首发于唐霜的博客】的key才能完成发布。虽然AI理论上可以【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。调用本地工具来自动完成，但是目前来说其实本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。还是没有直接实现这一功能的AI，还是要我本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。们手动来做。不过这里不涉及过多的代码编写【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net，看着一些网上的文档基本也能完成。
Stitch是google旗下的一款应用【本文首发于唐霜的博客】未经授权，禁止复制转载。设计工具，目前是Beta版，它的交互形式【原创内容，转载请注明出处】【版权所有，侵权必究】和lovart几乎一模一样，只不过它只针本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。对于应用设计，并且提供了应用开发下才需要转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net的一些工具能力。
你可以选择Web或应用模式，两者差别还是本文版权归作者所有，未经授权不得转载。【转载请注明来源】挺大的。
另外，它的首页还提供一个redesign著作权归作者所有，禁止商业用途转载。【转载请注明来源】的功能，它的目标是帮助已经发布的网站做设【原创不易，请尊重版权】未经授权，禁止复制转载。计重构，例如基于已有的品牌风格，生成新的未经授权，禁止复制转载。【转载请注明来源】页面，或者从设计者的角度，优化原有页面中【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】不合理的地方，或者将网站的整体风格切换为【原创内容，转载请注明出处】未经授权，禁止复制转载。更适合青少年浏览的设计风格。这个还是很有【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】意思的。
它的整体界面和lovart类似，一边是聊本文作者：唐霜，转载请注明出处。【未经授权禁止转载】天窗口，一边是设计结果画布。
它有一个很强大的主题色切换功能，你可以通【作者：唐霜】【本文受版权保护】过它的面板来切换“暗黑模式”主题颜色，如原创内容，盗版必究。转载请注明出处：www.tangshuang.net下图，从而决定如何进行配色。
后来我发现，原来stitch的一张设计稿【版权所有，侵权必究】原创内容，盗版必究。，其实并非是一张真实的图片，而是html【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】代码的渲染。这是极为令人震惊的一个设计。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。你可以查看每一张设计稿的源码。也正因如此未经授权，禁止复制转载。【本文首发于唐霜的博客】，你可以导出稿子为其他平台所需的素材（图著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。片或代码），例如figma。我想，这也就【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。是为什么它和lovart的设计稿如此不同【本文首发于唐霜的博客】【作者：唐霜】的原因。怎么说呢？这既有好处，但同时也失【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net去了利用生图模型来获得更多有创意效果的可【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net能性，最后只能得到中规中矩的界面效果。
最后，推荐stitch的最后一个原因，是未经授权，禁止复制转载。【本文受版权保护】它可以和AI Studio无缝对接。选中未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。全部设计稿后，打开导出面板，选择AI S未经授权，禁止复制转载。【作者：唐霜】tudio进行构建，点击按钮就会把设计稿著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net和html源码一并代入AI Studio本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net进行我们的下一步代码构建。
进入AI Studio之后，点击左侧边栏本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net中的Build，进入构建模式，此时你可以原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】让AI Studio构建一个完整的应用，本文版权归作者所有，未经授权不得转载。【作者：唐霜】它的代码主要提供前端界面，同时，你可以通【未经授权禁止转载】【原创不易，请尊重版权】过Supercharge选择对应的服务，本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】从而自动获得后端能力，最后，在构建页面有【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。分享、部署等工具，实现应用在线化，让你的【转载请注明来源】【关注微信公众号：wwwtangshuangnet】朋友也可以使用该应用。
使用AI Studio进行应用开发，也并【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。非一句话就能立刻得到你想要的结果，你需要本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】和AI进行多轮的对话，来指挥AI按照你的【转载请注明来源】【版权所有，侵权必究】想法进行修改和调整。
AI Studio的Build模式相对于【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net其他编程类工具而言，有以下显著特点，使它【原创内容，转载请注明出处】【原创不易，请尊重版权】与其他同类产品比起来，更显得优秀：
-
以“聊天-预览”为主要编程交互，而非传统【未经授权禁止转载】原创内容，盗版必究。（如Cursor）的“代码-聊天”为主，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netvibe味儿更足，不过，它也是支持cod【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.nete模式，可以修改代码
【版权所有】唐霜 www.tangshu【转载请注明来源】【版权所有】唐霜 www.tangshuang.netang.net未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【作者：唐霜】ang.net【本文受版权保护】
-
提供从“效果图到代码”的能力，这意味着有【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。图就能出码
【关注微信公众号：wwwtangshua【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ngnet】原创内容，盗版必究。
-
支持直接接入google家的服务，例如接著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】入gemini、veo、nano ban本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netana等，从而直接支持在应用中植入AI
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【作者：唐霜】ang.net【本文受版权保护】
-
支持通过在预览界面中进行截图和标记来让A本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】I知道你具体想要修改的是什么细节，以及你转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。想如何进行修改
【版权所有】唐霜 www.tangshu原创内容，盗版必究。【未经授权禁止转载】ang.net【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netang.net
-
支持分享、直接部署到google clo【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ud或上传到github，这也就意味着你本文版权归作者所有，未经授权不得转载。【作者：唐霜】在AI Studio开发的应用可以在线化【作者：唐霜】【原创不易，请尊重版权】，而非仅仅是一个玩具
【本文受版权保护】【转载请注明来源】
其中，支持预览界面截图标记这个功能非常厉【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。害，它可以更加精细准确的描述你想要修改的【本文受版权保护】著作权归作者所有，禁止商业用途转载。细节，而且Gemini还可以很容易get未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net到你的点，就非常牛的感觉。
而且，它生成的代码结构非常的干净，文件数【原创内容，转载请注明出处】【未经授权禁止转载】量很少，而且每一个文件目标明确，并非生成【版权所有，侵权必究】【未经授权禁止转载】一大堆琐碎的文件，拆的非常细。
目前，AI Studio生成的应用只支持【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netAngular或React技术栈，不支持【本文首发于唐霜的博客】【未经授权禁止转载】Vue，不知道后续会不会支持。
我自己用AI Studio开发了一个无限转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net画布图片生成器，它和lovart一样，拥本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】有一张无限画布，你可以在一张画布中生成无未经授权，禁止复制转载。【本文受版权保护】限的图片。
https://ai.studio/ap【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】ps/drive/1hNUoe8R_H7本文版权归作者所有，未经授权不得转载。【本文受版权保护】7tJoek30-72UnJN_J1qR【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】fj
【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ang.net【本文受版权保护】本文作者：唐霜，转载请注明出处。
打开之后你可以运行这个app，它使用Na转载请注明出处：www.tangshuang.net原创内容，盗版必究。no Banana作为图片生成模型。我只【转载请注明来源】【本文首发于唐霜的博客】用了1天时间，对它进行开发和调试。我在很【原创不易，请尊重版权】【作者：唐霜】早以前，为Excalidraw提过PR，【未经授权禁止转载】【本文受版权保护】它是一个无限画布的note工具，当初我弄未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】懂它的项目结构就花了一整天，改代码更是痛【本文首发于唐霜的博客】【本文受版权保护】苦至极，构建这个项目花费了社区几年时间。著作权归作者所有，禁止商业用途转载。【转载请注明来源】而今天，我用AI创建的无限画布工具，也具转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。备铅笔和文本框功能，这些能力如果是普通程【转载请注明来源】【原创不易，请尊重版权】序员去实现，是一个巨大的工程，而今天，我【未经授权禁止转载】原创内容，盗版必究。只用了短短的一些空余时间，就实现了，真的【本文受版权保护】【转载请注明来源】是太令人不可思议了。
【版权所有】唐霜 www.tangshu【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。ang.net【访问 www.tangshuang.n【本文受版权保护】【转载请注明来源】et 获取更多精彩内容】【关注微信公众号：wwwtangshua【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netngnet】【版权所有】唐霜 www.tangshu【版权所有】唐霜 www.tangshuang.net【转载请注明来源】ang.net
结束语
【作者：唐霜】【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。未经授权，禁止复制转载。ang.net
这两天研究Gemini，以及了解goog【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】le相关产品，感到一种前所未有的担忧。当【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】google从底层模型，到上层应用都已经未经授权，禁止复制转载。【本文首发于唐霜的博客】做到顶尖的时候，回望我们国内的模型厂商还【原创内容，转载请注明出处】【作者：唐霜】在打价格战，很是唏嘘，头部大厂除了阿里和著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】字节还在拼力投入外，其他厂商似乎都在躺平【作者：唐霜】未经授权，禁止复制转载。，无法真正与国际大厂商抗衡，令人担忧。
【本文受版权保护】【原创内容，转载请注明出处】【未经授权禁止转载】
从我们作为开发者的角度来说，在两年前，我【原创不易，请尊重版权】【本文受版权保护】所在的团队开始转型，准备在AI上大力投入【版权所有】唐霜 www.tangshuang.net【作者：唐霜】，到如今AI已经成为研发的底层生产力，时【原创不易，请尊重版权】【未经授权禁止转载】间竟然如此之短。随着底层模型和上层应用的原创内容，盗版必究。转载请注明出处：www.tangshuang.net进一步发展，编程领域的巅峰会变得非常容易【本文受版权保护】【转载请注明来源】，替代不是不可能。而作为开发者，或许应该转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net转变思维，从码代码的角色，转变为指挥AI著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。干活的角色。如何指挥AI，或许可能会成为【原创内容，转载请注明出处】【转载请注明来源】将来职场的基本技能。
【关注微信公众号：wwwtangshua【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。ngnet】【关注微信公众号：wwwtangshua未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。ngnet】本文版权归作者所有，未经授权不得转载。
最后，这两天Claude的新版本又发布了原创内容，盗版必究。【原创内容，转载请注明出处】，编程模型再次往前迈了一小步。另外，国内本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】版的Trae SOLO模式也发布了，目前【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。还是免费。如果你还没有体验过AI编程，还原创内容，盗版必究。本文作者：唐霜，转载请注明出处。没有把AI编程作为主要编程手段，那么你最【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】好停下来，把我之前的文章看一看。好了，今【原创不易，请尊重版权】【本文首发于唐霜的博客】天就到这里。
【转载请注明来源】【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。et 获取更多精彩内容】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
2025-11-26
1235
