- 综合排序
- 最热优先
- 最新优先
- 来自专栏产品设计
Gemini 3 Pro生成原型图实操：HTML代码转可编辑原型全流程
引言最近在跟团队尝试用Gemini 3 Pro生成原型图，它可以通过HTML代码的形式给出原型，预览运行后团队觉得质量是不错的，可用性比较高。但它不能直接生成可编辑的原型图，这就有点头疼了。 步骤一：用Gemini 3 Pro生成HTML原型这次的案例是一个CRM管理后台，主要展示关键指标和数据报表。我操作的核心思路是：先让Gemini生成HTML原型，再导入原型工具调整和编辑。 交互需要手动设置：AI生成HTML原型多为静态原型，导入后按钮点击、页面切换、下拉菜单等功能的交互都还需要自己配置，这一点要清楚。 模板化局限：虽然Gemini、DeepSeek、GPT等大模型生成代码很快，但在视觉风格和布局容易模板化，如果想要更专业的效果，比如分享过的AI Agent生成原型，逻辑和一致性会更好一些。 总结整个流程下来，Gemini 3 Pro生成HTML代码原型，结合HTML转原型功能，可以让产品经理在前期方案验证、UI风格选择阶段快速落地想法。
2.4K21编辑于 2026-01-07 - 来自专栏产品设计
AI生成原型图和UI设计：Prompt实战教程与技巧总结
场景一：AI生成产品原型图在项目最早期，我们通常情况下只有一个模糊的需求。这时候再去狂扣细节是没有意义的，重点应该是快速拉出来一个视觉上看得见的产品图来对齐需求。 我平时会用国内主流的AI生成原型图工具。它的特点是把文字需求或者参考图片发过去，就能结合市场调研和设计趋势，生成基础原型框架，而且一口气可以生成多个页面。 所以我总结了AI生成原型图的Prompt技巧：对于这类重逻辑、轻视觉的工具，你的提示词可以宽泛，但必须有界限。 、B端数据风、iOS规范）这样AI生成的原型图会更加贴合你的需求，耗时也不会太久。 场景二：AI生成高保真UI设计稿现在很多UI设计工具里，其实都已经嵌入了高保真UI生成能力。测试了之后发现，UI生成和原型图生成，在Prompt方面也有很大的区别。
1.6K10编辑于 2026-03-09 AI生成原型图真能用于开发项目？关键优势与局限剖析
一、AI生成原型图工具的定位与功能AI生成原型图，通常作为原型设计工具中的辅助功能推出。 目前市面上的AI原型图工具在生成方式和产出内容上各有差异，以功能相对完整的“墨刀AI”为例，其主要AI能力包括：自然语言生成原型图通过上传图片生成原型图支持AI编辑与导出编辑AI自动生成产品说明文档生成与原型对应的代码片段从以上功能来看 因此如果不能导出到原型编辑区进一步调整，就会限制其实用性。3. 三、AI生成原型图实际应用中的优劣势1. AI生成原型图的劣势仍需与人工结合：AI生成的原型图往往不会一次就满意，这就需要产品经理来不断提示修改，或者导出到原型编辑区进行手动调整，才能达到最终理想状态；提示词依赖度高：很多时候生成原型图的质量都依赖于你给
83210编辑于 2025-07-15- 来自专栏产品设计
原型设计新玩法：HTML代码生成可编辑原型图（含实操）
从今年AI工具的爆发式增长来看，原型设计领域也出现了越来越多的新玩法。前几天给大家介绍和分析了AI生成原型图的优势与局限，并探讨了它是否真的能应用于实际开发项目中。 几秒钟后，就能自动生成一份完整可以编辑的产品原型图，页面结构与HTML代码对应。 Step 3：自由编辑调整原型图生成后的原型图支持自由修改，无论是组件、图标、文案、图片还是页面布局，都可以像普通原型一样编辑、添加交互逻辑，可以根据产品的具体需求进行优化。 通过以上3步，可以实现直接将HTML代码转换为可编辑的原型图，可以节省产品经理在初期绘图的时间。 墨刀在提供高效原型设计体验的同时，也不断拓展AI相关能力，目前支持：AI生成高保真可编辑原型图；从HTML结构直接生成可编辑原型页面；原型页面支持后续编辑与交互设置。
3.1K20编辑于 2025-07-24 - 来自专栏产品设计
分享AI生成原型图之——企业安全监管可视化大屏
最近在测试几款AI生成原型图工具时，有一个案例让我印象深刻——AI生成一套企业安全监管可视化大屏的原型图。 其实产品经理可以在前期借助AI生成原型图工具，来生成一部分原型图，拿来与客户沟通。这里我选择了国内主流AI原型工具——墨刀AI进行测试。 这个安全监管数据大屏的原型图在多个方面都表现不错：布局合理：主数据区、辅助信息区和分布均衡。动效自然：中部的3D监控视图、底部的滚动公告条提升了交互感。 AI生成原型图优势分析虽然在前面的案例中已经体现出了AI的价值，不过还是有值得再次强调的两点。 AI生成原型图缺点分析但话说回来，AI生成原型图也有一定的缺点，尤其在以下几个方面比较明显：生成效果有波动：有时候即使输入相同指令，输出结果也可能差异较大，这是目前大多数AI生成式工具的共性问题，所以在使用时需要留有一点容错空间
1.4K20编辑于 2025-08-14 - 来自专栏无原型不设计
3个细节，轻松区分效果图和原型图
领导叫你画个图，结果拿过来一看：天哪！你画了个什么？今天我们就来讲一下，效果图和原型图，这对常常扰乱大家工作的完美CP。 从概念上来说，效果图和原型图还是相差比较远的，通过一下几个细节，我们就可以区分出效果图和原型图： 一、通过颜色分辨 原型图的颜色以黑白为主，当然，灰度原型也是原型图家族中的名门贵族。 为什么原型图的颜色会是如此的单调？ 一般情况下，效果图色彩更加丰富些。如果一款产品的效果图的色彩运用和原型图相差无几，除非是有意而为之，不然这位设计师也绝对是low的可以了。 二、通过图标分辨 现在的原型图设计过程中，很多时候都会涉及到图标的设计和使用。而从严格意义上来讲，原型图内是不需要出现图标的，图标位置方块代替。
2.1K50发布于 2018-03-16 - 来自专栏从头开始学习测试开发
超越流程图：架构图与原型图的 AI 解析与非功能测试用例生成
而这些非功能需求（NFR） 的关键线索，往往隐藏在系统架构图、UI 原型图甚至一张简单的截图中。 而它们的设计依据，常常就藏在两张图里： 系统架构图 → 性能、安全、可靠性 UI 原型图/截图 → 兼容性、无障碍、UI 一致性 问题是：AI 能否像资深测试架构师一样，从一张架构图中看出这里需要做熔断测试 二、从 UI 原型图生成兼容性 & 无障碍（A11Y） 场景：一张 Figma 登录页原型图，包含输入框、按钮、Logo。 功能用例 --> 性能模型 --> 兼容性清单 用户工作流： 测试工程师上传一份包含流程图、架构图、原型图的 PRD。 释放 QA 专家的核心价值 工程师无需再花费数小时研究 WCAG 标准或 JMeter 配置，而是聚焦于： 审核 AI 生成的测试资产 设计更复杂的混沌工程场景 优化用户体验 3.
11400编辑于 2026-03-31 - 来自专栏产品设计
高保真原型图与UI界面如何自动生成？AI设计原理与实测分析
很多人疑惑AI生成高保真原型图和UI界面背后的原理，还有哪些工具的AI不是噱头而是真的能用。 今天这篇文章就不讲虚的，基于我和团队对目前主流AI的测试分析，从实操角度聊聊现在AI生成原型图和AI生成UI界面的底层逻辑和真实水平。 一、AI生成高保真原型图和UI界面现状先说一下目前大家都比较认可的观点，就是现在的AI虽然能自动生成高保真原型和UI界面，但是距离完整设计流程，还有明显局限。 二、AI生成原型图和UI界面原理与趋势很多人对AI设计的印象还停留在Midjourney文生图，但在原型设计和UI设计领域，现在的AI生成的已经不是一张静态的“死图”了，它能生成可编辑的产品界面。 所以更适合作为UI设计师在设计过程中辅助生成一些基础页面，不适合直接交付的高保真设计稿。3.
1.5K11编辑于 2025-12-26 - 来自专栏产品设计
2026实测：AI生成原型UI代码，到什么程度了？
如今产品、设计、开发这几个圈子，大家聊得最多的就是三个词：AI生成原型、AI生成UI、AI生成代码。它们已经进入到很多团队的日常流程里，包括我们团队。 一、AI生成原型工具现状分析我们按产品诞生的顺序，分原型、UI、代码三个阶段来看，先说AI生成原型。这部分是目前产品经理感知强，也是对日常提效很直接的一环。过去产品经理一大半的时间在干嘛？ 两极分化：文生图到基于设计规范生成早期那种“文生图”的方式，丢给AI一句话，一分钟就能给出赛博朋克风、极简拟物风的高保真界面。本质就是看过大量UI图，然后按风格给你“生成一张类似的”。 我自己反复试下来营销类落地页/APP类生成UI界面效果不错，但复杂交互界面就很容易翻车。因为营销页面强调视觉冲击和信息分块，AI比较擅长。但工具类界面强调效率、逻辑、细节，AI容易乱。3. 别用AI生成你完全不懂的领域——比如医疗、工业控制，AI编得比你知道的多。别指望一次生成就定稿——迭代3轮是常态，第一轮能看，第二轮能改，第三轮才能用。
17100编辑于 2026-04-14 - 来自专栏量子位
让AI根据手绘原型生成HTML | 教程+代码
设计师根据这些要求来设计低保真原型，逐渐修改得到高保真原型和UI设计图； 3. 工程师将这些设计图实现为代码，最终变成用户使用的产品。 这么多环节，任何地方出一点问题，都会拉长开发周期。 △ Airbnb内部的AI工具，从图纸到代码一步到位 看起来很美好，但Airbnb还没公开该模型中端到端训练的细节，以及手工设计的图像特征对该模型的贡献度。 以下内容翻译自他的博客： 理想上，这个模型可以根据网站设计的简单手绘原型，很快地生成一个可用的HTML网站： ? 一种包含门控单元GRU的语言模型，对源代码令牌序列进行编码； 3. 一个解码器模型，也属于GRU单元，把前两个步骤的输出作为输入，并预测序列中的下一个令牌。 ? 创建一个能更好反映这种变化的训练集，是提高生成效果的一种好方法，可以通过获取更多网站的HTML/CSS代码以及内容截图来提高； 3. 手绘图纸也存在很多CSS修改技巧无法捕捉到的变化。
5.3K30发布于 2018-07-24 - 来自专栏小狼的世界
使用OmniGraffle制作原型图
原型图设计是一个艺术创作的过程，所以我们应当使用能够提高工作效率、激发创作灵感的工具，让工具为创作服务，而不是为创作去学习如何使用工具。 下面就介绍一下使用OmniGraffle制作移动应用原型图的设计。 启动 OmniGraffle 后，可以选择模板，这里选择空白模板。 ? 保持原型简洁。我们不必急于马上开始原型的设计，我们需要静下来想一想，页面到底需要什么元素，应当如何布局。原型不必像最终网站一样，如果你朝着这个方向工作，那么会吃力不讨好。 原型是用来帮助我们规划页面、网站的布局和层级设置，协助我们考虑布局在可用性方面存在的问题。 原型中的字体，可以一直使用Helvetica和宋体，并且不要使用太多不同的尺寸。 参考资料： 1、Wireframing with OmniGraffle, Part 1:Setting up your file 2、OmniGraffle 5 manual（PDF） 3、How to
2.8K30发布于 2018-07-24 四张图带你搞定原型和原型链
在讲原型和原型链之前，先铺垫一些前置知识： 「所有的对象都是通过new 函数生成的。」 包括let obj = {}，这种形式其实是语法糖，本质上是通过let obj = new Object()生成的。那么函数又是如何生成的呢？ (); 那么Function函数又是谁生成的呢？ 这张图很清晰说明了prototype和constructor之间的关系，每个函数(add、Object、Array、nothing)都有一个属性prototype，它指向函数的原型，而函数的原型中也有一个属性 原型链 这张图搞清楚后，自然明白何为原型链，我们一起过一遍 我们先看白色线条，白色线条表示原型，在原型部分我们已经说了，所有的函数都有一个属性prototype，那么Object函数的原型指向Object
87510编辑于 2022-08-11- 来自专栏Loki
小白如何快速绘制原型图
说到绘制产品原型图的工具，大家一定首先先到的是大名鼎鼎的“Axure RP”，或者在线协同的“墨刀”。 对于小型的团队（3-5人），特别是在没有专业的产品经理的情况下，大部分我们在接到产品的需求时，我们需要借助一个简单的、快速的工具将需求体现在产品上。 这里没有任何限制，我们只需要将需要的控件通过拖拽的方式在主绘板上组合，即可得到我们想要的原型图。小白也将常用的控件列表出来，仅供大家参考。 ? 绘制出我的第一个草图 当我们在绘制一个产品的原型图时，我们首先应当在脑海中梳理出产品的大致业务功能和数据流转，并将他们抽象成具体的功能模块。 所以大多数，我们都是利用头脑风暴和思维导图的方式，将产品的原型框架做一个整体的设计。比如小白以K8S的管理为例，我们就需要在自己产品里面先找到共性和特性。
2K20发布于 2021-05-13 - 来自专栏产品设计
AI原型设计工具实测：一句话生成多页面原型的真实水平
作为常年跟需求文档死磕的产品人，画原型图这事儿真的挺消磨耐心的。最近我“偷懒”了一下，没有画原型，没有拉组件，也没开设计工具。就写了一句话，然后让 AI 帮我生成一套完整的产品原型。 光看测评心里没底，今天我们就用一个真实的业务场景，放在如今最主流的 AI 原型设计工具身上实际测试一下，看看现在的 AI 原型图到底进化到了什么程度。 结果第一版那一句话的大白话指令，AI直接给我吐了一套完整的原型出来，效果还真有点出乎意料。二、AI 生成原型的真实效果拆解在这次 AI 生成原型的测试中，第一步是把需求描述发送给 AI。 不管是文案、配图还是加购流程都是符合设计逻辑的。3. 商品详情页：这个页面的设计是一个产品画廊，简单展示商品信息，咖啡制作细节与豆种说明。下方是标准化的定制区，有温度选择、甜度选择和奶类选择。 四、AI 原型设计的一套可用流程总结如果你真的想用 AI 生成原型图，经过大大小小几十个项目的折腾，我现在用AI画原型基本固定了下面这个四步工作流。建议大家直接拿去用：第一步：写一个“够用”的提示词。
46210编辑于 2026-04-01 - 来自专栏小丞前端库
三张图轻松KO⚡ JS 原型和原型链
三张图轻松KO⚡ JS 原型和原型链 ? ? 大家好，我是小丞同学，这一篇是 JS 高程精读系列的第 n 篇文章，主要解释 JS 中的原型和原型链 ? 非常感谢你的阅读，不对的地方欢迎指正 ? 可以看到，它们两个指向的是同一个对象，那么通过上面的一步步推理，我们可以得到这样一张图 ? 那到底什么是原型呢？ 原型 原型又分为显式原型和隐式原型 __proto__ 隐式原型 在对象上有一个属性叫做 __proto__，这个属性是对象所特有的，也叫做隐式原型，当我们尝试在一个对象上查找属性或者方法时，如果说找不到这个属性或者方法 修改了构造函数的原型对象，constructor指向谁 functionName.prototype = {} 原型对象、实例对象、构造函数之间的关系 一张图搞定，前面的内容懂了，自己推一下 ? 原型链 原型链其实也很简单：对象 => 对象的原型 => 原型的原型 => 原型的原型的原型 => null，这就是原型链 那这是什么意思呢，在我们前面在讲查找原则的时候，其实也有提到，当一个要查找对象上的属性或者方法时
69930发布于 2021-08-19 - 来自专栏微光点亮星辰
图图谈设计模式_原型设计模式_java
时间过的真快，今天将是创建型结构中的最后一个设计模式了---原型设计模式。 官方概述： 用原型实例指定创建对象的种类，并且通过拷贝这些原型创建新的对象 小编简单的说就是我们就是把对象复制一份不去new啦。 那为什么呢，原因很简单，效率高。 ByteArrayOutputStream baos = null; //2.try...catch...finally结构 try{ //3. (robot2.getBirthday() == clone.getBirthday()); // 内容比较 System.out.println("修改时间后原型 如果你没看过，往前面自己找一下吧，看准图图，看准huey。 下次见哦！
65711发布于 2020-04-10 - 来自专栏小丞前端库
三张图轻松KO⚡ JS 原型和原型链
三张图轻松KO⚡ JS 原型和原型链 大家好，我是小丞同学，这一篇是 JS 高程精读系列的第 n 篇文章，主要解释 JS 中的原型和原型链 非常感谢你的阅读，不对的地方欢迎指正 愿你生活明朗 __proto__) 你会发现它们两个尽然长的是一样的，我们可以比对一下，看看它们是不是完全相等的 可以看到，它们两个指向的是同一个对象，那么通过上面的一步步推理，我们可以得到这样一张图 那到底什么是原型呢 原型 原型又分为显式原型和隐式原型 __proto__ 隐式原型 在对象上有一个属性叫做 __proto__，这个属性是对象所特有的，也叫做隐式原型，当我们尝试在一个对象上查找属性或者方法时，如果说找不到这个属性或者方法 修改了构造函数的原型对象，constructor指向谁 functionName.prototype = {} 原型对象、实例对象、构造函数之间的关系 一张图搞定，前面的内容懂了，自己推一下 原型链 原型链其实也很简单：对象 => 对象的原型 => 原型的原型 => 原型的原型的原型 => null，这就是原型链 那这是什么意思呢，在我们前面在讲查找原则的时候，其实也有提到，当一个要查找对象上的属性或者方法时
77620编辑于 2022-11-16 - 来自专栏AIGC新知
我用AI帮我生成了流程图、时序图(顺序图)、甘特图
TreeMind树图功能：AI一句话生成，图片转导图，跨平台同步，多人编辑，多种结构和主题模板。 GitMind功能：AI助理生成导图，文件转导图，个人知识库，快速记录灵感，美学和体感兼顾，支持多种思维分型。 博思白板功能：AI生成PPT、图片、思维导图，智能对话，团队协同，模板社区。 亿图脑图MindMaster功能：AI智能助手，多人实时协同，多格式导出，知识图谱，AI生成PPT，细节定制。 AI思维导图工具主要特点对比 ProcessOn提供多样化图形绘制和AI快速生成功能，适合专业人士和团队使用； TreeMind树图利用AI技术快速生成和编辑思维导图，适合教育工作者和企业员工； GitMind 使用提示词生成思维导图 介绍一些使用提示词就可以生成的AI 思维导图的方法。
3.7K10编辑于 2024-10-08 - 来自专栏产品设计
AI生成点餐小程序原型实战，附工具使用经验分享
这期也是关于AI生成原型图主题的文章，内容聚焦在“AI生成点餐小程序原型图”。 我会结合实测的案例，展示AI生成的点餐小程序原型图效果，分析AI生成小程序原型图的优缺点，同时分享产品经理在实际工作中如何更合理地使用这类工具，从而为自己的工作提效。 AI生成饮品点餐小程序原型实测案例1：AI生成饮品点餐小程序原型实测案例2：AI生成饮品点餐小程序原型实测案例3：这三次AI生成点餐小程序每次生成都只花费了很短时间，大概经过1-3次修改和调整。 AI生成小程序原型图优点其实AI生成原型的优势是多于缺点的。首先，生成速度是比手动绘制要快得多的，能在短时间内产出可用的原型。 三、产品经理如何使用AI原型图工具产品经理在实际使用AI原型图工具的时候，经常遇到以下3个问题：不知道怎么发布指令：一句话的效果和一大段话的效果，对比起来好像没有太大差别，都不是很符合预期；频繁与AI对话修改细节
50020编辑于 2025-08-19 - 来自专栏PM吃瓜(公众号)
原型图+交互设计+UI图，到底啥关系
产品经理 - 需求、功能、数据 其实一直以来都纳闷，产品经理要做原型图，然后UI设计师要画UI 图，这两个之间貌似有许多重复的地方，而且还是大多时候还是并行进行，实在不知道二者之间的关系是什么，通过查阅资料 所以我拿去套进axure，页面配上功能说明、规则逻辑、流程图等，生成产品经理版交互原型，用来汇报领导、沟通协调、需求评审与讲解、与技术进行项目开发计划评审评估工期等。 他继续把线稿图用axure做完全部交互细节设计，期间与我反复沟通确认，最后生成交互设计原型。 高保真泥煤的不就是UI设计效果图了么，都到这一步了保真泥煤啊直接切图搞开发不好吗？ 原型设计可以清楚明了讲需求，所以产品经理要用！ PM整理思维脑图，头脑风暴之后，优化思维脑图，然后出草图，你可以用Axure或者visio甚至腾讯出的UI disigner或者最近比较流行的FluidUI（APP设计工具）来画草图，也可以称之为低保真原型图
3.8K21发布于 2019-08-12
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号