- 综合排序
- 最热优先
- 最新优先
- 来自专栏MixLab科技+设计实验室
从低保真原型中生成前端代码
思路是这样的，Airbnb 使用大约十几个手绘组件作为训练数据，利用开源机器学习算法以及少量自研代码来将他们设计系统中的组件渲染到浏览器中，从而构建了一个产品原型，使用手绘的原型图自动生成前端代码。 他们已经尝试过使用相同的技术从草图图纸中构建原型，然后将原型转换为开发所使用的组件类别，同时把组件的代码翻译成设计文件，供设计人员进行迭代。 ——草图与代码之间互相转化 随着设计系统的不断迭代，界面变得更加标准化，设计师将专注于回归设计最优雅的手绘方式，创作最佳的设计作品，其他高保真、工程的实现，都交由人工智能自动生成，Airbnb 的设计师们相信人工智能辅助设计和开发将被推广到下一代设计工具中 另外一个例子就是，从 UI 图自动生成前端代码的 pix2code : Generating Code from a Graphical User Interface Screenshot 这边我就不详细的介绍啦 还有个问题，考虑到现在 UI 跟 UX 设计都习惯使用 sketch 了，sketch 的文件就是个 json ，所以直接把这个 json 对应代码，来完成设计稿自动生成代码这件事似乎会更简单。
1.2K60发布于 2018-04-17 - 来自专栏产品设计
原型设计新玩法：HTML代码生成可编辑原型图（含实操）
以下是我以一个真实测试原型为例，借助DeepSeek展示如何实现HTML转原型的过程：Step 1：用DeepSeek生成HTML代码首先，向DeepSeek提出产品需求指令，来生成目标页面的HTML结构 DeepSeek接收到指令后，会快速梳理页面结构，自动为产品拟定名称和类型，并输出完整的HTML代码。如果你的产品设想更具体，也可以进一步丰富指令内容，提升生成的准确性。 （这段HTML代码可以先运行看看效果，确认是否满足预期）Step 2：将HTML导入墨刀生成原型复制刚刚生成的HTML代码，打开墨刀原型工作台，在首页选择“HTML转墨刀原型”功能。 你可以将代码粘贴到指定区域，也可以直接上传HTML文件，点击“转换”即可。几秒钟后，就能自动生成一份完整可以编辑的产品原型图，页面结构与HTML代码对应。 广泛尝试找方法：不论是AI生成原型、代码生成UI稿，还是HTML转原型……这些新玩法都值得一试，只有真正融入自己的工作流程，才能判断哪些是锦上添花，哪些是与自己工作流契合的好工具。
3K20编辑于 2025-07-24 - 来自专栏产品设计
Gemini 3 Pro生成原型图实操：HTML代码转可编辑原型全流程
引言最近在跟团队尝试用Gemini 3 Pro生成原型图，它可以通过HTML代码的形式给出原型，预览运行后团队觉得质量是不错的，可用性比较高。但它不能直接生成可编辑的原型图，这就有点头疼了。 然后输入需求描述，比如我写的是：“帮我生成一个CRM管理后台的数据分析页面原型，左侧导航，页面包括数据总览模块、销售趋势、销售转化漏斗、客户行业分布以及跟进列表等，请输出完整HTML代码。” 所以会稍微复杂一些，或者等导入原型工具后再看效果。Gemini生成的速度我这边体感还可以。导入原型工具前，先把整个HTML代码复制下来。 模板化局限：虽然Gemini、DeepSeek、GPT等大模型生成代码很快，但在视觉风格和布局容易模板化，如果想要更专业的效果，比如分享过的AI Agent生成原型，逻辑和一致性会更好一些。 总结整个流程下来，Gemini 3 Pro生成HTML代码原型，结合HTML转原型功能，可以让产品经理在前期方案验证、UI风格选择阶段快速落地想法。
2.3K21编辑于 2026-01-07 - 来自专栏量子位
让AI根据手绘原型生成HTML | 教程+代码
设计师根据这些要求来设计低保真原型，逐渐修改得到高保真原型和UI设计图； 3. 工程师将这些设计图实现为代码，最终变成用户使用的产品。 这么多环节，任何地方出一点问题，都会拉长开发周期。 以下内容翻译自他的博客： 理想上，这个模型可以根据网站设计的简单手绘原型，很快地生成一个可用的HTML网站： ? △ pix2code数据集中的生成网站图片和源代码 这是一个很好的数据集，有几个有趣的地方： 该数据集中的每个生成网站都包含几个简单的辅助程序元素，如按钮、文本框和DIV对象。 当模型生成一组预测令牌后，编译器就会将DSL令牌转换为HTML代码，这些HTML代码可以在任何浏览器中运行。 用BLEU分数评估模型 我决定使用BLEU分数来评估模型。 它非常适用于这个项目，因为它会影响生成HTML代码中的实际元素，以及它们之间的相互关系。 最棒的是，我还可以通过检查生成的网站来比较当前的实际BLEU分数。 ?
5.3K30发布于 2018-07-24 - 来自专栏Java呓语
原型模式（克隆生成对象）
于是我们想到了原型模式，即克隆父对象并让子对象持有父对象（克隆）的引用，借此来避免这个问题。 代码实现 声明原型链接口，用于实现如上图的聚合关系。 CloneNotSupportedException { return (ProtoObject) super.clone(); } // 省略了部分与调用功能相关的代码 构造原型的代码如下： public class ProtoObject implements IPrototype, Cloneable { public ProtoObject(/* 继承的对象 m.getName())) { return m; } } return null; } // 省略无关的代码 总结 原型模式的本质：克隆生成对象。 使用原型对象可以封装对象的创建过程，至于对象的初始化过程是否需要封装则依据使用者的需求决定。 原型对象会产生大量的内存对象，所以请勿过度使用原型模式。
68660发布于 2018-08-21 - 来自专栏各类技术文章~
原型、原型链和原型继承
super(x, y) this.z = z; } } const dog1 = new Dog(1, 2, 3); dog1.run(); console.log(dog1.x); 复制代码 } Dog.prototype = new Animal(); const dog1 = new Dog(1, 2, 3); dog1.run(); console.log(dog1.x); 复制代码 原型 上一小节是从继承的层面，介绍原型继承，但是没有具体说什么是原型。 console.log('running'); } } const dog = { __proto__: animal } dog.run(); // 我们没有在dog定义run方法 复制代码 那么原型本身也是一个对象，如果查找属性或方法时，到原型还没找到呢，那么就去原型的原型继续找。
1K10发布于 2021-11-02 - 来自专栏全栈程序员必看
原型和原型链理解_原型对象和原型链
一、原型 ①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 ③所有引用类型的__proto __proto__ === Array.prototype; // true 二、原型链 当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__proto__隐式原型上查找 ，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。 举例，有以下代码 function Parent(month){ this.month = month; } var child = new Parent('Ann'); console.log __proto__ === null ③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人
80230编辑于 2022-11-17 - 来自专栏得物技术
大模型在产品原型生成中的应用实践
基于此，我们设计了如下原型生成流程：该流程主要是将用户利用常见市面上常见的原型工具变成利用智能原型工具插件选中 PRD 文档中的产品描述，利用 LLM 基于得物自研低代码平台配置规范生成原型图。 具体如下：应用场景：主要是产品同学利用智能页面原型工具生成原型和研发利用原型对应低代码平台配置完成从0到1的页面开发。 引擎层： 是得物自研低代码引擎和推理引擎，是生成原型配置和渲染配置的发动机。 生成记录列表区主要是展示生成的界面原型关联的 PRD、原型描述、生成时间。快捷操作区是界面原型编辑、截图、保存、重新生成、低代码平台配置编辑、复制低代码平台配置等操作的快捷按钮。 从视频中可以看到，智能原型生成工具支持对生成的原型进行微调，还生成了相对应的低代码平台配置。落地情况智能原型工具生成原型的用时在 15 秒以内，具备生成记录可查、可修改。
98710编辑于 2024-03-06 - 来自专栏Java面试通关手册
深入理解原型模式 ——通过复制生成实例
如果想要让生成实例的框架不再依赖于具体的类，这时，不能指定类名来生成实例，而要事先“注册”一个“原型”实例，然后通过复制该实例来生成新的实例。 原型模式的缺点： 需要为每一个类配备一个克隆方法，而且这个克隆方法需要对类的功能进行通盘考虑，这对全新的类来说不是很难，但对已有的类进行改造时，不一定是件容易的事，必须修改其源代码，违背了“开闭原则”。 在实现深克隆时需要编写较为复杂的代码。 二 示例程序 下面示例程序的作用是将字符串放入方框中显示出来或者是加了下划线显示出来。 3.1 Prototype（抽象原型类） Product角色负责定义用于复制现有实例来生成新实例的方法。在示例程序中的Product接口就是该角色。 3.2 ConcretePrototype（具体原型类） ConcretePrototype角色负责实现复制现有实例并生成新实例的方法。
95130发布于 2018-06-15 - 来自专栏全栈程序员必看
用代码生成器生成mybaitsPlus的代码
com.baomidou.mybatisplus.generator.config.rules.NamingStrategy; public class GeneratorClass { public static void main(String[] args) { // 代码生成器 gc.setOutputDir(path); gc.setIdType(IdType.AUTO);//设置主键策略 gc.setDateType(DateType.ONLY_DATE);//生成 ,"tb_item_param","tb_item_param_item","tb_order","tb_order_item","tb_order_shipping","tb_user"); // 生成的表 ，多个表继续传递即可，String类型的可变参数 //将策略配置对象集成到代码生成器中 mpg.setGlobalConfig(gc); mpg.setDataSource (dsc); mpg.setPackageInfo(pc); mpg.setStrategy(stConfig); //执行生成 mpg.execute
1.3K40发布于 2021-04-07 - 来自专栏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 ——
78920发布于 2019-06-28 - 来自专栏前端小菜鸡yym
原型与原型链
概念 原型 prototype 原型链 __proto__ [[Prototype]] 原型 思考一个问题 普通的对象或者数组上有原型吗？我们试一试 原型上是可以定义属性或者变量的。 所以，也就是说对象或者数组上没有原型 原型是函数特有的 function fn(){ } fn.prototype.name = '第一个' // 赋值的过程不需要给函数加括号 声明才需要 原型用于继承。 引出原型链 我们为Person()函数的原型上，添加变量name、age 和 方法 getAge() function Person(){ } Person.prototype.name 其实这就引出了原型链。这是在因为在原型链上离得较近。 原型链 原型链查找规则 从当前实例属性去查找，如果找到了就返回，否则顺着原型链一层一层的往上找。直到找到null为止。如果仍旧没找到就会报错。
50620编辑于 2023-01-12 - 来自专栏code秘密花园
原型和原型链
导读： 分类：面试总结 题目：原型和原型链 基础很重要，时刻给自己充电！ 缺点：无法区分实例是父类创建还是子类创建的 可以添加以下代码： Foo.prototype.constructor = Foo 这种解决方法不能用于上面的组合优化方法，因为子类父类引用的是同一个原型对象 例如 对obj.a做 delete操作是否允许；[默认为: false] 3.4 描述new一个对象的过程 创建一个对象 {}.proto = 构造函数.prototype this指向这个对象 执行代码即对 this赋值 返回this 3.5 zepto及其他源码中如何使用原型链 var Zepto = (function(){ var $,zepto = {} // ...省略N行代码 // 里面有若干个工具函数 } zepto.Z.prototype = Z.prototype = $.fn // ...省略N行代码
80930发布于 2019-09-08 - 来自专栏字节脉搏实验室
JavaScript原型、原型链及原型链污染
所以以下代码是成立的 ? 0x02 JavaScript原型链 其实当认真理解完上面的内容，原型链的概念就基本清楚了，以下总结出几点： 1-从上面的代码中可以看到，创建person对象虽然使用的是由构造函数Person创建，但是对象创建出来之后 可以看到我们修改成功了，新生成的 foo2 对象也具有hacker 属性，如果给foo1再往上加一个__proto__就可以修改（添加）Object的属性了。 那么在哪些情况下原型链会存在污染？ 在合并的过程中，存在赋值的操作target[key] = source[key]，那么，这个key如果是__proto__，是不是就可以原型链污染呢？ 我们用如下代码实验一下： ? 我们将代码改成如下： ? 可见，新建的o3对象，也存在b属性，说明Object已经被污染： ?
1.3K10发布于 2020-07-28 - 来自专栏sealyun
golang代码生成
代码生成 makefile在make all之前会先generated_files去进行代码生成，所以首先要理解代码生成的原理，然后才可以很好的知道 这个过程都干啥了. all: generated_files 写过代码的都知道很多时候有大量结构重复的代码需要去写，劳心劳力还没什么技术含量，所以为了解决这个问题代码生成它来了。 代码生成的场景有很多如： protobuf 根据一个协议字段配置文件生成客户端和服务端的.go代码 IDE中的自动测试用例和接口实现函数代码生成 一些web框架自动生成RESTFUL接口代码 operator 脚手架工具生成k8s controller代码等 在kubernetes中主要生成代码有这些： deep-copy generator, kubernetes中的对象都需要实现该方法，每个对象都自己手动去写很累 代码生成原理 所以我们的目的就是根据源代码再生成一些源代码，那问题就分成三步走： 解析我们写的源码，提取我们所需要的内容，如包名，结构体名，等 渲染模板文件 生成源码文件 下面用个简单的例子来帮助理解这一过程
3.5K30发布于 2020-02-11 - 来自专栏web前端记录
原型和原型链
prototype(原型)：prototype是Function对象的一个属性，它定义了构造函数制造出的对象的公用祖先（属性和方法），可以继承该原型的属性和方法。原型也是对象。 __proto__（隐式原型）：没个对象的__proto__属性指向自身构造函数的prototype。 constructor（构造器）：返回对创建此对象的数组函数引用。 原型链基本概念：每个对象都会在其内部初始化一个属性，就是 proto，当我们访问一个对象的属性 时，如果这个对象内部不存在这个属性，那么他就会去proto里找这个属性，这个proto又会有自己的proto ，于是就这样 一直找下去，也就是我们平时所说的原型链的概念。 原型链--实现对象间的联系即继承的方法。
70820发布于 2021-04-28 - 来自专栏前端小歌谣
原型和原型链
前言 我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是原型和原型链的讲解 环境配置 npm init -y yarn add vite -D 修改page.json配置端口 {
39820编辑于 2023-11-11 - 来自专栏前端程序之路
原型与原型链
前言 网上有太多关于原型的资料，不是一上来就各种概念，让人看到摸不着头脑，就是贴各种代码，少个通俗的解释，所以才有了这一篇文章。 原型 用电影的例子来讲，电影的角色一般都会基于某个原型创建出来的，比如最近大火的《你好李焕英》原型就是贾玲的妈妈。 __proto__都指向实例的原型。 理解了原型的概念，下面我来理解原型链就好理解些了。 原型链 在JavaScript 中，每个对象通过__proto__属性指向它的原型对象，这个原型对象又有自己的原型，直到某个对象的原型为 null 为止，这种一级一级的链结构就称为原型链。 总结 原型的存在是js的一个重点也是一个难点， 通过本篇，我们了解了原型与原型链，并且也介绍了一些原型常用的运用场景来加深我们对原型与原型链的理解。
84900发布于 2021-03-28 - 来自专栏码农UP2U
Java代码生成
在很多开源的后台管理系统当中都有代码生成的工具，帮助开发者完成通用代码的生成，比如生成 Controller、Service、Dao 和 XML 文件等，能够帮助开发者生成通用的CRUD 其实在开发框架中也有一些简单的代码生成的工具，比如接下来要介绍的 mybatis-plus 提供的代码生成。 使用 SpringBoot 来测试一下 Mybatis-Plus 代码生成的功能。 SpringBoot 项目中使用代码生成器需要引入一些依赖，依赖如下： <! 引入上面的依赖以后，下面的代码其实进行简单的修改就可以完成自己的代码生成，非常的方便。 代码简单的易懂，就不做过多说明。 生成结果 运行上面的代码，来看一下生成的内容，如下图： ?
1.5K40发布于 2021-02-23 - 来自专栏D·技术专栏
代码生成工具
背景介绍： 工作中经常用到单表的增删该查包括分页，定义实体对象和写一些单表dao，代码单一，重复性工作多。毕竟作为开发人员大多数时间应该关注业务，代码自动生成就会节省很多重复性工作。 代码生成工具 根据项目需要定义项目包名和数据库连接信息： package com.wyh.generate.ormcodegenerate; import com.google.common.base.CaseFormat java.text.SimpleDateFormat; import java.util.*; import static com.wyh.generate.ormcodegenerate.ProjectConstant.*; /** * 代码生成器 { genCode("event"); //genCode("输入表名","输入自定义Model名称"); } /** * 通过数据表名称生成代码 tableNames) { genCode(tableName, null); } } /** * 通过数据表名称，和自定义的 Model 名称生成代码
1.1K10发布于 2019-11-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号