- 综合排序
- 最热优先
- 最新优先
- 来自专栏产品设计
2026实测：AI生成原型UI代码，到什么程度了？
如今产品、设计、开发这几个圈子，大家聊得最多的就是三个词：AI生成原型、AI生成UI、AI生成代码。它们已经进入到很多团队的日常流程里，包括我们团队。 一、AI生成原型工具现状分析我们按产品诞生的顺序，分原型、UI、代码三个阶段来看，先说AI生成原型。这部分是目前产品经理感知强，也是对日常提效很直接的一环。过去产品经理一大半的时间在干嘛？ 画原型、找素材、连线、写交互说明。现在，这部分苦活儿正在被AI接管。1. 底层能力在变：从组件拼接到结构生成目前的AI生成原型，底层逻辑其实不复杂。它是“自然语言理解+UI/产品数据训练”的逻辑。 产品经理要尽早放弃在画原型上的纠结，你的核心竞争力会更多倒向“业务逻辑梳理”和“Prompt提示词撰写”上。用清晰的自然语言，让AI低成本得生成可用原型，或许就是未来PM的基本功。 四、真正的变化在“产品设计链路打通”一圈测下来，我对这三类工具的现状感受很深：AI生成原型、AI生成UI、AI生成代码工具的可用性正在变得更高。如果只看单点能力，还不算颠覆。
36600编辑于 2026-04-14 - 来自专栏量子位
让AI根据手绘原型生成HTML | 教程+代码
设计师根据这些要求来设计低保真原型，逐渐修改得到高保真原型和UI设计图； 3. 工程师将这些设计图实现为代码，最终变成用户使用的产品。 这么多环节，任何地方出一点问题，都会拉长开发周期。 △ Airbnb内部的AI工具，从图纸到代码一步到位 看起来很美好，但Airbnb还没公开该模型中端到端训练的细节，以及手工设计的图像特征对该模型的贡献度。 以下内容翻译自他的博客： 理想上，这个模型可以根据网站设计的简单手绘原型，很快地生成一个可用的HTML网站： ? 它非常适用于这个项目，因为它会影响生成HTML代码中的实际元素，以及它们之间的相互关系。 最棒的是，我还可以通过检查生成的网站来比较当前的实际BLEU分数。 ? 福利：定制网页风格 后来，我还想到，由于该模型只生成当前页面的框架，即文本的令牌，因此我可以在编译过程中添加一个定制的CSS层，并立刻得到不同风格的生成网站。 ?
5.3K30发布于 2018-07-24 - 来自专栏产品设计
AI原型设计工具实测：一句话生成多页面原型的真实水平
作为常年跟需求文档死磕的产品人，画原型图这事儿真的挺消磨耐心的。最近我“偷懒”了一下，没有画原型，没有拉组件，也没开设计工具。就写了一句话，然后让 AI 帮我生成一套完整的产品原型。 但可以确定一个结论：目前的 AI 原型设计工具已经可以生成能拿去和开发讨论的完整产品原型了。 结果第一版那一句话的大白话指令，AI直接给我吐了一套完整的原型出来，效果还真有点出乎意料。二、AI 生成原型的真实效果拆解在这次 AI 生成原型的测试中，第一步是把需求描述发送给 AI。 仅凭一句话的指令，AI 生成了这么完整的一套多页面咖啡选购下单流程原型，并且是高保真的视觉效果，已经让我有点刮目相看了。说实话，我之前的印象还停留在 AI 只能画个单页面，逻辑也浅得不行。 四、AI 原型设计的一套可用流程总结如果你真的想用 AI 生成原型图，经过大大小小几十个项目的折腾，我现在用AI画原型基本固定了下面这个四步工作流。建议大家直接拿去用：第一步：写一个“够用”的提示词。
53510编辑于 2026-04-01 - 来自专栏产品设计
AI生成原型图和UI设计：Prompt实战教程与技巧总结
但一到画原型、做UI这种创意活儿，产品经理和设计师对AI的评价可就多了。和以前那种只生成参考图片不同，现在的原型和UI生成工具挺实用了，已经能做直接生成组件、图层可调甚至带交互逻辑的产品界面。 我平时会用国内主流的AI生成原型图工具。它的特点是把文字需求或者参考图片发过去，就能结合市场调研和设计趋势，生成基础原型框架，而且一口气可以生成多个页面。 这时AI会对收到的指令解析，由于指令比较简单和模糊，AI在生成过程中需要花一部分精力去做市场调研，再生成一份相对明确的需求文档，最后生成原型页面。 、B端数据风、iOS规范）这样AI生成的原型图会更加贴合你的需求，耗时也不会太久。 场景二：AI生成高保真UI设计稿现在很多UI设计工具里，其实都已经嵌入了高保真UI生成能力。测试了之后发现，UI生成和原型图生成，在Prompt方面也有很大的区别。
1.8K10编辑于 2026-03-09 - 来自专栏产品设计
AI生成点餐小程序原型实战，附工具使用经验分享
这期也是关于AI生成原型图主题的文章，内容聚焦在“AI生成点餐小程序原型图”。 一、AI生成点餐小程序原型图案例首先选择一个AI生成原型图工具，这里我们以测试的墨刀AI为例，在界面中输入了：“请设计一套饮品点餐小程序原型，包含XXXX页面，整体采用扁平化设计，风格清新。” AI生成饮品点餐小程序原型实测案例1：AI生成饮品点餐小程序原型实测案例2：AI生成饮品点餐小程序原型实测案例3：这三次AI生成点餐小程序每次生成都只花费了很短时间，大概经过1-3次修改和调整。 AI生成小程序原型图优点其实AI生成原型的优势是多于缺点的。首先，生成速度是比手动绘制要快得多的，能在短时间内产出可用的原型。 AI生成小程序原型图缺点而AI生成小程序原型的缺点，主要体现在组件的规范性。AI生成的某些控件并非标准组件，而很多团队都有自己的资源库和设计规范，因此后续会需要额外的时间来替换或者微调。
52620编辑于 2025-08-19 - 来自专栏Java呓语
原型模式（克隆生成对象）
因为原型模式足够简单，所以才让人误解原型模式并不那么值得深入了解（因为起初我也是众多轻视者中的其中之一），但是事实上它可以很重要。 于是我们想到了原型模式，即克隆父对象并让子对象持有父对象（克隆）的引用，借此来避免这个问题。 代码实现 声明原型链接口，用于实现如上图的聚合关系。 （不要太好 :-P ） 工作还没有做完，现在已经有了原型链。接下需要实现通过原型链访问父对象的方法。 总结 原型模式的本质：克隆生成对象。 使用原型对象可以封装对象的创建过程，至于对象的初始化过程是否需要封装则依据使用者的需求决定。 原型对象会产生大量的内存对象，所以请勿过度使用原型模式。 如果的确需要大量使用原型模式，请考虑结合原型管理器缓存原型实例。
69160发布于 2018-08-21 AI生成原型图真能用于开发项目？关键优势与局限剖析
一、AI生成原型图工具的定位与功能AI生成原型图，通常作为原型设计工具中的辅助功能推出。 例如，墨刀原型设计平台上线了“墨刀AI生成原型图”，专为产品经理辅助绘制原型而设；也有面向UI设计领域的海外工具，如“Figma Make”“Uizard AI”等，通过AI快速生成界面设计；甚至像代码生成类工具 目前市面上的AI原型图工具在生成方式和产出内容上各有差异，以功能相对完整的“墨刀AI”为例，其主要AI能力包括：自然语言生成原型图通过上传图片生成原型图支持AI编辑与导出编辑AI自动生成产品说明文档生成与原型对应的代码片段从以上功能来看 三、AI生成原型图实际应用中的优劣势1. AI生成原型图的劣势仍需与人工结合：AI生成的原型图往往不会一次就满意，这就需要产品经理来不断提示修改，或者导出到原型编辑区进行手动调整，才能达到最终理想状态；提示词依赖度高：很多时候生成原型图的质量都依赖于你给
85510编辑于 2025-07-15- 来自专栏产品设计
分享AI生成原型图之——企业安全监管可视化大屏
最近在测试几款AI生成原型图工具时，有一个案例让我印象深刻——AI生成一套企业安全监管可视化大屏的原型图。 其实产品经理可以在前期借助AI生成原型图工具，来生成一部分原型图，拿来与客户沟通。这里我选择了国内主流AI原型工具——墨刀AI进行测试。 三、AI生成原型图的优势与缺点本次案例中分享的AI生成可视化大屏原型比较出色，但是在使用过程中我也发现了一些小缺点，期待工具的迭代优化，同时也有对产品经理的忠告：1. 另外，AI生成原型图的可编辑性我要格外提一嘴，因为这个功能不是所有AI原型工具都具备。本次测试的工具支持将生成结果直接导入到原型编辑区，进入手动修改模式，简直不要太方便，同时也节省一定成本。2. AI生成原型图缺点分析但话说回来，AI生成原型图也有一定的缺点，尤其在以下几个方面比较明显：生成效果有波动：有时候即使输入相同指令，输出结果也可能差异较大，这是目前大多数AI生成式工具的共性问题，所以在使用时需要留有一点容错空间
1.5K20编辑于 2025-08-14 - 来自专栏产品设计
原型设计新玩法：HTML代码生成可编辑原型图（含实操）
从今年AI工具的爆发式增长来看，原型设计领域也出现了越来越多的新玩法。前几天给大家介绍和分析了AI生成原型图的优势与局限，并探讨了它是否真的能应用于实际开发项目中。 （这段HTML代码可以先运行看看效果，确认是否满足预期）Step 2：将HTML导入墨刀生成原型复制刚刚生成的HTML代码，打开墨刀原型工作台，在首页选择“HTML转墨刀原型”功能。 墨刀在提供高效原型设计体验的同时，也不断拓展AI相关能力，目前支持：AI生成高保真可编辑原型图；从HTML结构直接生成可编辑原型页面；原型页面支持后续编辑与交互设置。 以下是几点小的建议：善用AI提升效率：面对AI在原型设计领域的广泛应用，一些PM可能会觉得这些能力华而不实。但其实，只要合理使用，AI不仅能提高工作效率，也能激发更多思路。 广泛尝试找方法：不论是AI生成原型、代码生成UI稿，还是HTML转原型……这些新玩法都值得一试，只有真正融入自己的工作流程，才能判断哪些是锦上添花，哪些是与自己工作流契合的好工具。
3.3K20编辑于 2025-07-24 - 来自专栏产品设计
从调研到原型：AI生成APPSaaS官网数据大屏的完整实战流程
引言产品原型设计的工具变化速度可真快，最近热火朝天的AI智能体也成了产品经理AI工具的一种选择。不过单一的AI工具也好，AI智能体也好，对产品经理来说它们的核心功能都在于AI生成原型图。 AI生成原型图界面有了调研的支撑，接下来生成界面，输入提示词（Prompt）：基于上面调研的结论，请生成本地生活团购APP的核心流程高保真原型。包含：首页、团购详情页、下单页、订单页、个人中心。 二、AI生成SaaS官网原型图解析相比APP的布局，官网首页的模块组合会更灵活。 拿着这份架构图再去生成原型，方向就明确多了。2. AI生成SaaS官网原型图界面接着输入AI生成原型图的Prompt：根据以上设计调研报告的页面信息架构，请生成SaaS官网首页的原型布局图。 AI生成数据大屏原型图界面直接根据关键指标的分析，输入生成原型图的Prompt：根据以上调研报告的建议，生成一个智慧零售数据大屏原型。风格要求：深色科技风，蓝紫色调，强调未来感。
70010编辑于 2025-12-17 - 来自专栏MixLab科技+设计实验室
从低保真原型中生成前端代码
于是提出需要有一款非常顺畅，统一标准，自动生成各个阶段的文档的系统。 他们认为设计的开始，是草图。草图是设计最直观的表达方法。 ? 思路是这样的，Airbnb 使用大约十几个手绘组件作为训练数据，利用开源机器学习算法以及少量自研代码来将他们设计系统中的组件渲染到浏览器中，从而构建了一个产品原型，使用手绘的原型图自动生成前端代码。 他们已经尝试过使用相同的技术从草图图纸中构建原型，然后将原型转换为开发所使用的组件类别，同时把组件的代码翻译成设计文件，供设计人员进行迭代。 ——与《 人工智能「 建筑师 」之 由手绘生成3D模型 》中使用的基于参数的描述性语言： Snippet Grammar 一脉相承。 给大家补充点知识。 还有个问题，考虑到现在 UI 跟 UX 设计都习惯使用 sketch 了，sketch 的文件就是个 json ，所以直接把这个 json 对应代码，来完成设计稿自动生成代码这件事似乎会更简单。
1.2K60发布于 2018-04-17 - 来自专栏产品设计
Gemini 3 Pro生成原型图实操：HTML代码转可编辑原型全流程
引言最近在跟团队尝试用Gemini 3 Pro生成原型图，它可以通过HTML代码的形式给出原型，预览运行后团队觉得质量是不错的，可用性比较高。但它不能直接生成可编辑的原型图，这就有点头疼了。 步骤一：用Gemini 3 Pro生成HTML原型这次的案例是一个CRM管理后台，主要展示关键指标和数据报表。我操作的核心思路是：先让Gemini生成HTML原型，再导入原型工具调整和编辑。 交互需要手动设置：AI生成HTML原型多为静态原型，导入后按钮点击、页面切换、下拉菜单等功能的交互都还需要自己配置，这一点要清楚。 模板化局限：虽然Gemini、DeepSeek、GPT等大模型生成代码很快，但在视觉风格和布局容易模板化，如果想要更专业的效果，比如分享过的AI Agent生成原型，逻辑和一致性会更好一些。 所以我的体会是，别指望AI直接给你最终成品。它更像是一个超级给力的草稿，帮你把最耗时的框架搭好，细节还得慢慢打磨。
2.5K21编辑于 2026-01-07 - 来自专栏产品设计
高保真原型图与UI界面如何自动生成？AI设计原理与实测分析
很多人疑惑AI生成高保真原型图和UI界面背后的原理，还有哪些工具的AI不是噱头而是真的能用。 今天这篇文章就不讲虚的，基于我和团队对目前主流AI的测试分析，从实操角度聊聊现在AI生成原型图和AI生成UI界面的底层逻辑和真实水平。 一、AI生成高保真原型图和UI界面现状先说一下目前大家都比较认可的观点，就是现在的AI虽然能自动生成高保真原型和UI界面，但是距离完整设计流程，还有明显局限。 二、AI生成原型图和UI界面原理与趋势很多人对AI设计的印象还停留在Midjourney文生图，但在原型设计和UI设计领域，现在的AI生成的已经不是一张静态的“死图”了，它能生成可编辑的产品界面。 墨刀AI大家肯定都不陌生，国产原型设计工具的老大哥了。它的AI功能偏向“原型-设计-交付”的一体化思路，主打的是对话式生成，用来辅助生成页面结构、基础UI和其他文档内容。
1.6K12编辑于 2025-12-26 - 来自专栏各类技术文章~
原型、原型链和原型继承
上一小节是从继承的层面，介绍原型继承，但是没有具体说什么是原型。 该对象就是我们说的原型。 它的作用就是用来存放一些方法和属性，当以它为原型的对象，访问本身没有的一些属性或者方法，就会来到原型上面查找。 那么 构造函数的 prototype 属性，就是为将生产出来的实例指定原型所需要用到的，那些实例本身没有的属性或方法，就来这里查找。 也就是先有某原型，然后才有以该原型为原型的对象。 构造函数的 prototype 和实例对象的原型，其实是指向同一个对象的。 原型链 上面两节，我们搞清楚原型是什么，以及 构造函数 prototype 是什么了。那么原型链又是什么呢？ 那么原型本身也是一个对象，如果查找属性或方法时，到原型还没找到呢，那么就去原型的原型继续找。
1.1K10发布于 2021-11-02 好用到离谱的免费AI编程工具MonkeyCode，一键生成完整项目原型
随着AI技术的突飞猛进，越来越多的非技术人员也开始涉足应用开发。而MonkeyCode这款完全免费的AI编程助手，正以其强大的项目原型生成功能，让"一键生成完整项目"从梦想变为现实。 这款工具的最大亮点就是其强大的项目原型生成能力。用户只需要用自然语言描述自己的项目需求，MonkeyCode就能自动生成完整的项目结构、核心代码和基础功能，真正实现了从0到1的突破。 一键生成完整项目原型的神奇能力传统的项目开发需要经历需求分析、架构设计、编码实现等多个复杂步骤，耗时耗力。而MonkeyCode通过AI大模型的支持，能够理解用户的项目描述，并自动生成完整的项目原型。 ：支持使用"@"符号为AI添加上下文信息，提高代码准确性实时预览：AI输出代码后，用户可以在右侧代码框中实时查看和修改智能补全：在日常编码中自动提供代码建议，提升开发效率 实际应用场景快速原型验证创业者可以用自然语言描述商业想法 ，快速生成可运行的产品原型，大大缩短验证周期。
3.7K10编辑于 2025-10-13- 来自专栏全栈程序员必看
原型和原型链理解_原型对象和原型链
一、原型 ①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 ③所有引用类型的__proto __proto__ === Array.prototype; // true 二、原型链 当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找 ，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。 __proto__ === null ③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人
80630编辑于 2022-11-17 - 来自专栏得物技术
大模型在产品原型生成中的应用实践
、根据页面描述智能生成界面原型以及刷新生成记录列表。 生成记录列表区主要是展示生成的界面原型关联的 PRD、原型描述、生成时间。快捷操作区是界面原型编辑、截图、保存、重新生成、低代码平台配置编辑、复制低代码平台配置等操作的快捷按钮。 页面效果与预览区是生成的原型展示区域，原型是可以交互操作的。分享与评价是方便产品同学将生成的原型分享给业务或研发同学预览以及可以对智能生成的原型质量做评价帮助提升模型生成的准确性。 从视频中可以看到，智能原型生成工具支持对生成的原型进行微调，还生成了相对应的低代码平台配置。落地情况智能原型工具生成原型的用时在 15 秒以内，具备生成记录可查、可修改。 大模型训练：在上文中可以看到模型是智能原型工具的加速器，但目前只用到了大模型的推理能力，需要外挂知识库才能生成符合规范的页面原型。这制约了生成原型的生成速度和扩展性。
1K10编辑于 2024-03-06 - 来自专栏Java面试通关手册
深入理解原型模式 ——通过复制生成实例
如果想要让生成实例的框架不再依赖于具体的类，这时，不能指定类名来生成实例，而要事先“注册”一个“原型”实例，然后通过复制该实例来生成新的实例。 2.4 UnderlinePen类（ConcreteProtorype） 下划线样式的具体原型，实现了Product接口，用于实现复制现有实例并生成新实例的方法。 3.1 Prototype（抽象原型类） Product角色负责定义用于复制现有实例来生成新实例的方法。在示例程序中的Product接口就是该角色。 3.2 ConcretePrototype（具体原型类） ConcretePrototype角色负责实现复制现有实例并生成新实例的方法。 (3) 在Spring中，用户也可以采用原型模式来创建新的bean实例，从而实现每次获取的是通过克隆生成的新实例，对其进行修改时对原有实例对象不造成任何影响。
96130发布于 2018-06-15 - 来自专栏FinGet前端之路
原型，原型链，callapply
JavaScript从初级往高级走系列————prototype 原型 定义： 原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。 通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。 用一张图简单解释一下定义。 1.png 每个函数上面都有一个原型属性(prototype)，这个属性会指向构造函数的原型对象(Person.prototype) 每个函数的原型对象(Person.protorype)默认都有一个 constructor属性指向构造函数本身(Person) 每个实例都有一个隐式原型(proto)指向构造函数的原型对象(Person.prototype) 每个原型对象也有隐式原型(proto) // __proto__) 3.png new New的过程 声明一个中间对象 将中间对象的原型指向构造函数的原型 将构造函数的this指向中间对象 返回中间对象，即实例对象 JavaScript ——
79420发布于 2019-06-28 - 来自专栏前端小菜鸡yym
原型与原型链
概念 原型 prototype 原型链 __proto__ [[Prototype]] 原型 思考一个问题 普通的对象或者数组上有原型吗？我们试一试 原型上是可以定义属性或者变量的。 所以，也就是说对象或者数组上没有原型 原型是函数特有的 function fn(){ } fn.prototype.name = '第一个' // 赋值的过程不需要给函数加括号 声明才需要 原型用于继承。 引出原型链 我们为Person()函数的原型上，添加变量name、age 和 方法 getAge() function Person(){ } Person.prototype.name 其实这就引出了原型链。这是在因为在原型链上离得较近。 原型链 原型链查找规则 从当前实例属性去查找，如果找到了就返回，否则顺着原型链一层一层的往上找。直到找到null为止。如果仍旧没找到就会报错。
51220编辑于 2023-01-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号