蓝湖ui设计图转代码教程

最近被问到无数的问题，就是菲克玛中的设计稿如何上传到蓝狐，虽然蓝狐目前不支持菲克玛的导入，但是 sky 可以所谓动动小脑筋把问题转化一下。菲格玛中的设计稿如何转化成 sky 文件呢？社区下载一个 ctrl 插件，选中需要转换的画板，打开 ctrlifi， 然后点击 ctrl 等待完成下载该文件，打开盖子试试看。 ok， 这个时候就可以上传到南湖了。当然提醒一下，转换好的文件还是检查一下图层文庙。

哈喽，大家好，那这一节课呢，就教大家我们一般在 ui 设计当中，特别是设计完界面之后，与程序员如何去做交接。那么这里的话呢，我们先讲交接的其中一个部分，就是我们的切图， 那么这里的话呢，呃，带来了一款工具，这款工具呢叫做蓝湖，蓝色的蓝，湖水的湖，那么大家可以自己去百度搜索一下，然后并且去下载一下他的插件。 ok， 那这里的话呢，我们就用 ps 来教大家， 那这里的话呢，我们先把这个退出， ok， 然后呢比如说我这里用 ps 做了一个界面，对吧？那这个时候呢，我们与程序员做交接的时候，他是需要去切一些图片的，比如说我们的按钮啊， 或者说我们一些图标，比如说这里有一个放大镜，那么我们都知道在界面当中呢，这一个放大镜他是搜索的意思，那如果说我们用户在这一个界面当中去点击这个放大镜，那么他会跳转到一个搜索页面， 也就是说他会进行一个跳转，那其实这一个跳转呢，就是一个用户的交互的一个过程。好，那这里的话呢，像这一个一般我们怎么去给他切出来那 一种方法？其实这里教两种啊，第一种的话呢，就是我们我们不借助任何的工具去进行切图， 那首先的话呢，我们都知道我们每一个图标可以点击的图标，他都有一个安全区域，或者说有一个热区，也就是这个图标可以被点击的一个区域。那么比如说我这里这一个图标 设置的一个区域尺寸大小呢？是五十乘五十个像素，比如说我们可以把它的呃这个矩形给他设置出来，对吧？像这一个蓝色的矩形五十乘五十，那么里面这一个包含了这个图标本身的一个图形在内，所以说我们需要把它切出来， 但是我们把它切出来的时候呢，一定要把这个旁边的这五十个像素一块包含进去。那我们在不借助任何的工具的情况之下呢，比较简单，首先的话呢我们可以停，我们可以把这个矩形一块放这里，然后我们可以把它的不透明度设为零， ok， 然后这个时候呢我们可以选中整个主，就是这个主包含这一个不透明的五十个像素，那么这里我们可以给他转为智能对象，把整个主转成智能对象，然后双击打开，打开进来之后呢会是一个全 全新的画布，那么这个画布的尺寸刚好就是五十个像素乘以五十个像素，那么这个时候呢，我们就可以直接把这一个新的画板或者说新的画布给他导出来。但是我们导出来的时候呢，格式的设置一定是需要用选择 png 的格式，如果说有 png 八， png 二十四，那么我们就应该选择 png 二十四，因为二十四的质量会更高。然后这个时候呢，我们直接就点击储存就可以了，并且把这一个文件的名称去命名一下就可以了，然后放在你的桌面，到时候呢与其他与其他的这一些图标 快发给这个程序员，那么这一个就 ok 了。当然这个方法呢是我们在不借助任何的工具的情况之下，那如果说有工具的话呢，我们就会便捷很多，因为很多 之后，我们一个页面当中需要切的图标往往可能有几个，甚至多达十几个，那这个时候呢，再加上我们整一套 app， 他的页面通常都有十几个页面到几十个页面不等，所以说这种情况之下呢，如果手动的去处理每一个 呃图标的话呢，其实我们耗费的时间往往会比较比较多，所以这里的话呢，就教另外一个借助工具的方法，那么这样子的话呢，也可以大大提升我们的切图效率。那如何借助工具呢？像刚刚的话呢，我们已经说过了，像蓝壶这个呃插件，我们就可以去使用。 ok， 比如说我们在百度搜索蓝湖，然后直接打开他的官网。好的，那这一个就是他的官网，那么我们可以可以再下载 这里面呢，去下载他的 ps 插件。当然他目前的话呢，也支持 sketch， 包括 ps， 包括 xd， 包括 x 锁这一些，还有以及蓝图他自己的 app。 那如果说我们只是用 ps 的话呢，那么你就选择 ps 插件去下载，那其实包含它里面他整一个呃插件的使用呢，都是免费的，也不会进行任何的收费，那包括在他的官网当中呢，也有一些比较简单的一些教程，也可以去看一下。 那这里的话呢，我们就直接开始操作好，那比如说我们安装好这个蓝壶的插件之后呢，我们在窗口这里打开有一个扩展功能，那么在扩展功能里面会有蓝壶，我们给他打开，打开之后呢，他其实会呃让我们去注册， 或者说提醒我们去登录你的账号，那么你需要提前去蓝湖的官网去注册一个账号，并且把它登录上去就可以了。登录完之后呢，我们在切图的时候呢，简单的操作一下，比如说我们依次拿这一个，应该说依旧拿这一个图标， 我们先给他切回这个文件夹的状态，比如说这个图标，那么我们在切的时候呢，同样是需要保留这五十乘五十的像素出来的，所以这个时候呢我们也比较简单， 那么这个时候呢，在切图他这里会有一个上传跟切图的功能，那么我们选择切图， ok， 切过来之后呢，我们需要去标记一下我们的大小，当然我们最重要是选择我们整个文件夹，如果说你这里本身是没有提前像我这样子设置好 这一个五十的像素的矩形的话呢，那么你就需要去给他进行一个标记，那如果说你有的话就不需要了，那比如说 我们先来操作一下，如果说你只有一个图层的时候呢，我们选中他，选完之后呢，你可以在这里去输入你的安全区域的大小，比如说五十乘五十，设置好之后呢，点点击上面的标记就可以了， 点一下之后呢，他会自动给我们生成一个五十像素，成五十像素的一个矩形，这个时候呢这个矩形是一个呃蓝浅蓝色的， 包括他旁边会有一些蓝色的虚线描边，那他多出来的这个矩形我们不用去理他， 这个时候就算是标注成功，标注成功之后呢，我们回到切换啊，回到上传这里，那这个时候呢，我们 就上传我们这个画布，或者说上传我们的这个画板，当然你也要去结合一下你的设计稿的一个尺寸，比如说我现在这一个设计稿的尺寸，他是 ios 的两倍图的尺寸，对吧？那这个时候呢，我就需要去选择 ios 两倍图的一个尺寸， ok， 然后这时候我点击上传，那如果说你是有多个画板的时候呢，你就选择你选中的那一个画板就可以。如果说你整个文件里面呢只有一个画布，那么你就选择全部画板，然后我们点击上传， 这个时候呢等待他去上传就可以。上传的过程呢，主要取决于我们网络的一个速度，那上传成功之后会提醒我们直接点击去微博端查看，这个时候他会跳转回南湖的官网， 但这个时候呢跳转进来，他是另直接显示出我们刚刚上传好的一个界面，这时候呢我们就双击他这一个界面就可以了。 双击完之后呢，我们可以查看整个页面当中，比如说我们刚刚切的这一个图标，那么一旦有进行标注的图标的话呢，这里其实会有一个虚线，那么当有这样子的虚线的时候呢，就意识着我们刚刚已经标注好，并且已经上传上来， 引擎是没有问题的。那比如说像下面这一些呢，我们是没有标注的，所以说他是不会有这些虚线的，那没有这些标注的话，我们也没有办法把它下载下来， 所以你需要依次去把所有的图标标注好之后才可以上传上来。那像现在我们已经把这个搜索标注好了，标注好之后呢，我们是单击鼠标左， 首先单击他，单击他的时候呢，他也会去显示一些简单的信息，比如说他有一个尺寸的大小，对吧？比如说这里有二十五个 pt 的尺寸，包括他的填充等等，包括图标本身的一个造型都会显示在这里。那么这个时候我们去下载切图的时候呢， 在下面这里首先需要选格式，我们在如果是用 ps 的话呢，正常我们选 png 格式就可以了， 正常也是 png， 当然还有包括其他的，比如说可以 svg 啊等等这一些，但是 ps 如果说你直接选择 svg 的话呢，那这个 svg 他是会出问题的， 所以说我们选择偏居就可以，然后接下来呢他下面会默认勾选一二三三倍的一个尺寸，那这个时候你就自己去选择，通常我们只需要选择二倍跟三倍， 然后这个时候下载当前切图，如果说你整个页面当中所有需要切的图标按钮全部都标注好了之后呢啊，应该说标记好了之后呢，那么我们就可以直接选择 啊查看所有的切图，然后一次把所有的切图都给他下载下来，那这个时候呢，我们直接选择下载当前切图就可以，然后点击下载， 这个时候呢他会自动下载好一个压缩包，然后我们双击打开这个压缩包，那么在压缩包里面就会有刚刚我们上传好的这一个呃，搜索的一个切片，那这里的话呢，也会与我们刚刚选择的两倍以及三倍的切片 作为一个吻合，那么这里最终就是下载两倍跟三倍的文件，那最终我们只需要把这个文件的名称 给他规范性的修改好，修改完之后呢打包发给我们的前端开发人员就可以了。那这一个切图的一个使用方法呢？主要就是这两个方法。

如何快速将 ui 转成可交互页面，并一键获得前端代码？首先需要复制设计稿在 figma 中的链接，点击右侧分享，这里需要确认是可编辑状态，再把链接复制下来，将链接给 codex， 让它还原 ui 并加上交互。那在这一步，我们需要确认 codex 是 已经连接到 figma mcp 的 前提下，推荐是对话连接， 让 codex 操控电脑操作，避免无法连接的情况。然后我们来看下还原的界面，还原度非常高，几乎是一比一还原了，而且自动识别页面中的功能连接，按页面逻辑填充位扩展的 ui 模块 设计与交互上的细节都把控不错。像这种线路的展示错误，可以截图验证修改，也能看到所有代码打包给开发使用。好啦，今天就讲这个部分，关注我，解锁更多设计技巧！

还在丛林画设计稿吗？现在用拍扣一句话就够了！进入拍扣，直接输入你的需求描述，纹身设计稿马上生成 不放心效果哦！你也可以上传参考图，或者直接选择代码类型，选择大厂通用组建库，生成结果直接对其真实项目规范。不管你做的是 app 还是后台，系统、设备类型、视觉风格都能自定义， 生成之后不是只能看。你可以直接导出工程化代码，对局部进行对话式修改， 一键转成可编辑的设计稿，继续精修。从需求到设计到代码，一步打通。不管你是设计师、产品经理还是独立开发者， ko 真的 值得你试一次！

关于 ui 设计稿转前端代码这个事情，它属于研发提效的其中一部分， 那关于这个事情呢，我们其实一直在努力，我们也相信很多同学都考虑过一这么一个事情，那就是 u e d 这样的设计人员设计出来的设计稿，能不能直接转成前端的代码，那如果能做到这一点的话，很多的活其实是可以交给这个工具去完成，那减少了整个研发的一个冷月。 那当然这里的代码是需要一定的标准，并且符合一定的规范，而且最重要的事情是生成出来的代码是能适用于生产环境，属于企业级的代码的标准，否则生成出来的代码，那就是一堆无用的代码。 现在随着 ai 技术的发展，各个企业各个厂商都在拥抱 ai， 所以呢，在这种大背景下呢，给 ui 设计搞转前端代码这个事情提供了一种可能性。 现在很多的公司他其实都会去使用线上或者说互联网的工具平台去完成设计稿，那比方说 master go 和飞格玛这样的工具，其实很多公司都在使用， 那因为我们公司使用的是 master go 这样的一个平台，所以呢，以此为例，这个方案呢，使用到两个，两个东西，第一个是 ai 的 编码工具，第二个是 master go 的 mcp。 关于 ai 的 编码工具呢，现在市面上太多了，而且模型也很多，那我这边首选的是 q， 为什么？因为它是免费的，可以免费的去使用。 然后呢， costo 是 一个比比雀儿，我认为可能效果更好的一个工具，那后面可能会有一个对比，那首选呢是雀儿，因为它免费， ok， 那 它主要的流程是什么呢？首先第一个呢是获取 mastergo 的 用户的令牌，那这个令牌呢，是为了让我的编码工具去调用 mastergo 的 mcp 的 服务。然后呢 获取了令牌之后呢，在我们的 ai 的 编码工具下去配置我们的 m c p， m c p 的 收尾，那下一步再去获从马斯购上获取我的设计稿的链接，也就是说我要把哪个页面要转化成我的前端的代码， 那配好了 m c p 和有了我的链接之后呢，在我的 id 下输入我的提示词，然后让我的编码工具去生成我的前端的代码。 那这里面的逻辑其实也比较简单，就是在我的 id 下输入我的提示词之后，然后它会通过 id 配置的 mcp server 服务去掉 master go 的 dsl 文件，那关键其实就是这个 dsl 文件，然后它进行一个解析，然后对应的生成前端的页面， ok， 那 这一个需要能完成。这个设的前置条件有一个它是针对于 mas go 的 账号的，也就是说 mas go 必须是团队版级以上，如果它没有，你可能就获取不了它的 m c p 的 接口， 所以说它针对于个人版或者免费版的其实是不支持的，所以说这是一个前置条件，那下面会演示一下获取个人访问令牌的事情。首先第一个去它的一个官网， 然后进入工作台， 然后去个人设置，个人设置这里面有一个安全设置，那这边比如说生成令牌，生成令牌这一个生成令牌之后需要去配置到你的 id 的 工具， 那这边我有相应的一个流程的介绍，那第一步最核心的就是我的 ai 的 编程工具里面去配置我的 m c p， 下一步呢是打开我们的 id， 这边我也那个这样举例，那这边呢，我这边是生成了一个 v u e 的 最基本的一个代码，呃，它只安装了一个 v u 三的一个一个模板，模板的一个工程。那首先呢我们去设置 选择 m c p， 然后从市场添加选择 master， 然后呢点这个加号，然后把我们刚才的那个令牌复制进去，那这边我就随便先写一个，那其实如果说你们是斐格玛的用户，其实也可以进行一个使用，那这边也能进行一个添加，那这边我们主要还是使用我们的马斯勾。 做完这一步之后，下一步选择，这边是选择我的 m c p， 比如的 v s v s m c p， m c p 配完之后呢，下一步就是获取 master go 的 链接地址， 也就是说如果说你是希望把这一个页面，我要去自动去生成我的我的前端代码，那我们现在是要把它选中这一个这一个封面封面，然后复制的是这个东西， 那这里的关键点是我必须要有这一个 nano id， 也就是说我的图层的 id 是 必须得带的，那是因为 mastergo 的 mcp 的 服务，它需要这样一个地址才能定位到这个界面，那所以说我们需要把这个东西复制下来， 那这里我们其实我这边其实已经说明了，说明了这个的注意事项，那下一步呢，其实说白了就是我要在我的界面里面写我的题字词， 就是在我的 id 下去生成我的代码，那这边的是首先第一个是我的 mas 勾的一个地址，就是刚才我复制下来的这个地址，然后呢其实是是根据 mas 勾的设计稿生成一个可单独打开的新的 v o e， 并写入到 ip 点 v o e 这个文件里面使用我的标准的一个主监库，严格按照设计稿百分百还原响应式布局，那这个你可以自己去定义，或者说自己有自己更好的想法的话可以自己去写。那我这边的是是按照这个方式，我直接把它复制过来， 放入我们的 id 一下，然后我这边直接让它去运行，然后我这边可以选择我的 hold， 让它自己去选择最适合的模型发送， 其实我们可以观察一下，就是说它的整个的一个流程，我们发发送了一个信息之后呢，呃，圈儿它这个 build 会去看这一个语义，它会发现有 master go 这样的一个东西的时候，它会去调用 master go 的 mcp， 然后这边这个其实就要去获取它的一个 dsl 文件， 那我们等待一下， 当圈儿给了你一个丁董这样的提示音的时候，说明它的一个任务已经完成了，然后我们可以看一下它的整体的一个内容啊。 首先我们发了一个提示词之后，然后呃雀儿呢发现可能有 m c， 有 mas go 的 上下文，然后呢调用了 mas go 的 m c p 的 一个接口，然后去获取它的 dsl 文件。 呃，然后他获取了马斯克设计稿的 dsl 文件数据之后呢他要去装我的主键，主键依赖，然后呢根据 dsl 数据生成我的 vue 的 页面，然后再写入到 app 点 vue， 那 确实符合我们的现在的一个预期。接下来这个事啊，就是安装主键，主键，然后呢去写我的 app 的 页面， 然后呢最后呢他贴心的帮我也启动了我的呃前端的 server， 然后下面是其实是属于他的一个总结，那我们可以看一下他具体做了什么事。他主要写了，写了可能写了两个文件，第一个是啊，加了，加了依赖， 第二个就是前端页面，然后呢我们去浏览器去打开看一下， 嗯，这个效果还行，至少该有的有。 那这个是我之前的一个测试啊，在马斯格的一个设计稿，然后呢生成的这么一个页面， 然后呢我还可以进行让它，让它调试，也就是说我发现我的页面的还原度不够，然后再帮我进行一个优化，当然了，我们觉得它不 ok， 我 们可以再截图进行一个优化。 最后呢是一个总结啊，就说其实你会发现它并没有百分百的还原设计稿的一个内容。 ok， 那 我这边呃的一个研究发现呢，其实它依赖于三个事情啊，第一个设计稿的标准化，也就是说我设计稿它随便， 因为刚才已经说过了，我们的原理是它获取这个设计稿的 dsl 文件，那 dsl 文件是基于我这一个呃页面的设计稿所生成的， 它有很多的图层，它有很多的结构，比如说我这个设计稿，如果说加了很多无用的图层，就像我 h t m i 同样的页面展示， 但是我写了很多无用的代码之后，它其实的可读性就比较低。那设计稿也一样，如果我们对设计稿它的一个图层，它的一些动效，它的一些样式做了一些精细化的管理，那我们生产的质量就非常高。 第二个是模型的一个差异，就之前也说过 chart 这个呃因为免可能是免费，没有特别好的东西啊，所以说免费的东西确实比不过 coso 的 那个生成的一个质量。之前我也试过用 coso 去写它的一个整体的一个质量，会比 chart 会好很多，有兴趣的同学可以试一下。 那所以说这个是模型的一个差异，那随着我认为随着整个 ai 产业的发展，后面的模型可能越来越强，那这个事可能做的人做的越来越精细化。那第三个是提示词， 那我这边是最简单的一个提示词，我也没有让我的呃模型去参考我的代码的一些结构，我随便找的一个 呃设计稿，而这个设计稿也不是我们公司的，因为可以看到这个页面其实也不算是我们公司的页面，那这个是随便去找的一个呃一个列表的一个页面去让他去生成的，那实际上如果结合一二三，我相信他能生成企业级可运用的前端的代码，减少整个研发的一个周期。

欢迎收看九零后 u i 设计师早九晚六预瞄航票工作 plus 眨眼就结束了， 只休息一天，根本不够休息时间。狂看尼克尼尼好有活力，好喜欢看他穿什么都好想买，经常有访问开发做的。大屏不够还原，三 d 地图实现不了怎么办？这不就来了， 不用 a e 不 用手动三 d 地图实现不了怎么办？这不就来了，不用 a e 不 用手动三 d 建模！今天手把手教大家用 ai 还原设计，搞出代码交互开发 大屏和三 d 地图设计教程。可以看我这两期视频，把设计图发给 ai， 说出你的想法以及想用的技术站，方便后续交付开发。用 codex 输入提示词和设计稿令可它会按需求搭建 vivo 项目，自动拆分设计稿，静态素材搭建页面框架，匹配对应技术站，并自动加依赖。 出版生成后直接预览会发现和设计稿还有一定差距。我们通过多轮对话精细约束，避免 ai 出现不必要的偏差。对自动拆分的素材不满意，可按文件路径替换成自己的切图，再让 ai 使用对应素材。我们先把基础图表部分调试完善，再着手制作三 d 地图，多轮优化后，图表就能高度还原。 接下来是大家都头疼的三 d 地图部分，很多宝资反馈开发不会做，不知道怎么还原。现在 ai 实在真的太方便了，全程靠对话就能落地实现。直接让 ai 用 three g s 还原设计稿里的三 d 地图，很难一次做完善，多轮对话微调就行，出现小 bug 也能直接对话修改 想要的交互效果。同样靠对话配置，整体三 d 效果就能基本成型啦。再让 ai 添加底部圆环和动画，统一调整地图整体配色，精细化打磨细节， 圆环和颜色就改好了。想更换撒点效果，直接发切图让 ai 替换底部连衣效果，也能一键生成地图撒点和连衣效果。 加上接着再加地图流光效果，多次对话，一步步打磨质感，地图流光效果也水灵灵的完成了。然后再添加地图纹理效果，可以看到地图里有层浅浅的纹理。再一句话，添加飞线效果， 虽然跑了五十二分钟，但成品效果很出彩。后续又补充了图表悬浮页面、加载动画等内容，后续直接把 ai 生成的完整项目文件夹发给开发就能用啦。 视频篇幅有限，关键步骤我整理成文档啦，粉丝宝字自取！这期视频早就想出了，一直没时间，终于整理出来了。同款提示词，不同人使用效果会有差异，大家跟着思路和 ai 多轮沟通，基本都能实现效果。 那今天的视频就到这里啦，今天的你也辛苦啦，我们下期视频再见，拜拜！关注我，解锁更多 ai 加 ui 技巧，主页还有更多 ui 提效教程！

这个网站只需要输入一句话，就能生成可编辑 ui 设计稿，从创意构思到设计出稿，再到开发代码交付，一站式搞定，全程不用切换任何软件，五分钟全搞定！ 离谱的网站推荐第七十六期，我们只需要在这输入指令，把风格、色调、功能板块说清楚，根据需要选择代码类型组建。功能板块说清楚，根据需要选择代码类型组建代码，几分钟就能生成一整套完整的高保真设计界面。每个模块都可以点击 查看，点击这里还可以看到完整代码，而且重点是它生成的不是死板的图片，所有图层都能随便编辑修改。点击右上角的按钮，可将设计稿转为 可编辑的设计文件，直接修改，哪里看着不顺眼，这里还能够直接跟它对话，调整改颜色，加功能模块，随口一说就立马改，好比自己一点点话，省事太多，效率直接拉满。这里还可以自定义设计系统，根据设计系统生成规范的设计稿，从文字生成、 ui 设计稿、设计开发直接 打通。不管你是 u i 设计师、产品经理，还是前端同城开发者，用这个真的能省下超多时间，不用反复对接，不用手动画图写代码，真的非常好用！

hello 大家，欢迎收看 u i 设计师的工作日常！最近天气慢慢热起来了，但是前阵子全网爆火的眼下，热潮行在慢慢退去，因为正好双上网项目最忙的时候， 所以也一直没有腾出空来体验。最近呢，恰好想出一期 webcoding 个人作品集的内容，体验了一把不用写代码，几分钟就能出可交互个人网站的爽感 格式呢，分享给大家。这个流程呢，不管是个人简历还是作品集都适用的。在做之前需要梳理好网站的整体风格、页面框架和文案内容，所以准备之初呢，可以先看一些优秀的作品展示，收集些喜欢的风格。需要提前准备好网站上需要放的图片和包含个人基础 信息的文本，之后使用这个本地就可以运行的龙虾，输入这段提示词，选择模型和技能，让他根据提供的网站输出一份设计文档，这是我让他基于设计文档生成的 html 格式。 之后呢，根据网站的模板输入这段提示词，进行其他内容的填充，一会一个完整且带有交互的个人网站就做好了，还是可适配移动端的。这里呢，我又输入提示词，让它还原了顶部区域的交互样式，看这样的效果是不是更好。 果然好虾是要一步一步养出来的，它比较方便的是哪里不满意可以直接在对话框里输入，需要修改的内容， 他就会直接修改，一行代码都不需要自己写，更改后的还可以实时在预览查看，不知道怎么修改呢，也不用担心他会给出相应的建议，如果想要部署上线， 也可以直接向他提问，他会一步步的教你怎么操作。如果大家还有更好的方法呢，也可以留言告诉我哦。今天的内容呢，也整理好了文档需要的朋友评论区见。好了，今天的工作到此结束， 补个妆准备下班。那这期就先到这里了，我们下期再见！拜拜！

这是一个可以一句话帮你生成完整组建页面的 ai 工具。你只需输入文字说明具体需求，稍作等待，就能直接 生成一套高保监界面设计稿。用设计系统生成设计稿更加规范，生成好后还能够直接编辑组建，颜色、字体都可以随意调整。修改完成后直接进入研发模式，开启 d、 two、 c 功能，挑选 html、 file、 react 等各类所需代码类型， 就能将设计图一键转换成代码。有了它，从设计到开发，全程都能轻松完成，不管是产品经理、设计师还是独立开发者，都快收藏起来！

这是我花十分钟三个步骤做出来的 app 前端界面，可以看到界面都是可交互的，效果也是非常不错。来，我们直接上实操，给我三十秒，让你学会到底怎么做的。第一步，把你的产品需求文档发给 shift gpt， 让它给你生成 app 前端界面设计稿，你会得到这样的图片， 我们把这张图片下载下来。第二步，打开谷歌的 as do do 左上角，点击 build， 在 聊天框上传刚才的图片，让它生成 app 前端代码，中间会让你选择一次界面风格，你可以跳过，也可以选择一个自己喜欢的风格， 最终你就会得到视频开头展示的效果。最后一步，下载代码，刚才的代码只是纯前端逻辑，后续的开发和细节优化交给 cloud code 或者其他 agent 的 就行了。

大家好，你们知道一张设计稿是怎么一步步变成屏幕上能点的界面的吗？很多人以为屏幕 ui 就是 把图片放上去那么简单，实际上啊，这里面学问可大了，字体怎么清晰显示，触摸怎么有反应，数据怎么实时刷新，页面切换的动画怎么流畅，这些全都需要代码一行行去实现， 而图片只是整个过程的起点而已。那具体是怎么操作的呢？我们拿到效果图后，第一步会先做页面拆解，第二步就是写 lv g l 代码，并且在仿真器上先跑一遍看看效果。第三步再稍录到帧机上进行连调， 最后出测试视频，你看视频验收没问题了，我们就交付固件和文档包。所以啊，如果你有效果图了，发来我帮你拆解一下，让它变成能实际操作的界面吧。

今天给你们挖到一个能彻底终结 ai 塑料味儿的开源设计神器！用过 ai 写代码的都知道，逻辑写得再好，深沉的 ui 界面往往丑的千篇一律。但今天呢，介绍的这个叫 harmark 的 爆 火开源技能包，绝对会颠覆你的认知。它完美适配 cloud code、 coser 和 code。 它不是那种烂大街的 top 模板，而是一个专门为了反 ai 廉价感而生的顶 级设计师大脑。它最逆天、最降维打击的功能是一个叫三 d 的 模式。是不是很眼红？ 需要把那个网站的截图或者链接直接发给他 mark， 就 能像顶级艺术总监一样，精准地提取出那个网站的设计 dna。 注意，他绝不是傻傻地去抄袭代码或像素，而是去拆解他的排版节奏、色彩、锚点和空间布局，然后用这套高级的 dna 为你量身重构出属于你自 己的网页。为了保证你的网页足够高级，它甚至在内部设立了六十五道严苛的测试闸门。从字体搭配、对比度到微交互的延迟，只有完全通过这六十五项测试，没有任何 ai 机器味儿的设计，它才会把最终的代码交到你的手上。无论是从零 搭建、见面审查还是彻底重构，它都有专门的模式帮你搞定。而你要做的，仅仅是在终端输入一行代码代码。在这儿， ai 时代的下半场呢，拼的就是审美！如果你也用 coser 这类的工具，千万别错过这个神器，现在就去给你的项目注入灵魂吧！

城市沙盘制作第六集，也是最后一集， ui 交互制作开始教学。首先搜索三 w 点派 c 谋死点 c o m 的 网址，既可以选择账号密码登录，也可以直接扫码登录，还没注册的记得提前注册一下必填项，填好提交即可。接着你来到的这个位置就是工作台， 点击左侧的下载中心，选择你电脑对应的系统下载，安装完成后就可以直接打开了。紧接上期我们把优衣里烘焙出的 u m 文件转移到了 c a m pro 栾大师项目的根目录里，接着把该文件导入到 c a m pro 栾大师的项目中，可以看到已经进入到软件里了，在这里建立一个新的项目名称，比如就叫沙盘演示，选择局部区域，然后进入项目以后， 首先先把默认的平台删掉，然后进入项目以后，首先先把默认的平台删掉，把地图拉远，可以看到我。 我们制作的上海沙盘颜色可能跟之前的不一样，是因为我们还没有调整各种设置，那么现在第一步我们看一下设置里选择实时渲染或者全局照明，把画质根据你电脑的性能进行调节，比如调到高以后它变得很流畅。 此外还可以根据项目的分辨率把分辨率重新输入。第二步，检查环境，还记得之前有说过，我们这个沙盘是要在全暗的环境下让它自发光，所以这里我们把时间直接拉到晚上，像现在这样可以看到颜色就对了。第三步，调节最小曝光，理想状态是负二或者负三， 比如负二这里的自动曝光影响，就是它自动曝光影响的幅度，在自动曝光里添上翼。 ok， 现在对它进行进一步的操作，比如说我们往上摆一些 poi 点位，选择重叠，还可以用直接做的一些 poi 标签，把它作为外部图片，导入好之后，再对它进行一些适当的修改，对于不同的图标都可以替换成其他标签，可以看到鼠标移上去以后，标签是会动的， 可以把它作为按钮来使用。现在进入界面模块，这里其实也就是 c n pro 栾大师的 u i 编辑器，可以在这里对我们的 u i 进行各种不同的操作，内置了丰富的图标组建，视频播放器、滚动文本图片等各种效果。这里直接加载一个建成的模组来看一下效果。比如说选择模板， 我们加载以后就可以直接使用，点击运行一下，稍微调整一下机位，并修改一下 u a 的 名称，比如说就叫上海智慧沙盘，点击保存，可以看一下我们制作的最终效果，你学会了吗？工具用的好，数字孪生开发也能超简单，快来试试看吧！

如何让 ai 搭建设计系统，提取设计变量与样式，帮你制作设计使用规范，并给你生成一份开发交付文档？我们将设计稿的 figma 链接复制一下，把链接给 codex， 让它先提取设计稿中的变量， 方便后期的 ui 页面以及设计规范的搭建。可以看到它把所有设计变量都归纳出来啦！确认好之后就可以写到 figma 里， 可以看到它把颜色、字体、间距、圆角等信息都提取出来，做了变量，然后再去提取样式。建议一次让 ai 处理一个明确任务，会比较节省额度。确认样式都给到之后，做剩下的页面就方便多了。 等设计稿都完成后，再让 codex 生成设计使用规范，提取可附用的 react 组建，并把组建落到代码里。也可以根据设计稿生成一份开发可读的交付文档，让流程更规范。 ok， 今天就说到这里，关注我，解锁更多设计技巧。

hello， 大家好，我是艺兴，然后今天趁着周末的话就给大家分享一下我最近用啊 ai 的 编程工具，手搓的一个 diy 的 ai 小 工具。 那么咱们这一期主要是通过 codex 这个新型的 ai 编程工具，手把手去手搓自己的专属的微信的小程序，那右边的话是我自己设计的一个个人的 ip 形象是不是很帅。 然后这一期主要是用的两个工具特别简单，第一个的话就是 codex， 大家直接去官网下载就可以了。 然后第二个的话就是微性能开发者工具，因为其实我们这一期是做小程序的项目嘛，所以说是需要呃借助他去进行项目的预览以及配置上线，然后大家也是去他们的一些官方去进行下载就 ok 了。 那其实做小程序和做 app 呃做产品是一个道理，那流程也是非常简单。那首先第一步要先给 ai 描述清楚我们想要什么样的产品，整理好一定的需求文档，然后让 ai 帮我们去完善我们的需求 md。 然后第二步对应好整个 app 的 一个视觉风格，然后告诉 ai 你 想要什么样的效果，让它给给给我们去输出一个规范的一个需求的文档。 第三步用 codex 去直接生成一些结合的一些需求，自动生成一些小程序的一些全部的代码。然后第四步还要通过 ai 帮我们去调试修 bug， 调细节，那全程不需要自己动手，直接通过口喷的方式，最好的方式就能够让 ai 帮我们去干活。 那么好了，废话呃，废话不多说，咱们直接上手开干吧。那么首先的话就是要打开我们已经安装好的 code desk 的 一个桌面端， 然后的话就是要找到我们的微信的开发者工具去新建好我们本次的要到的项目， 然后本次的话主要是做一个体重管理小程序，二嘛，所以说我们要新建好我们的一个项目，然后选择 ok 就 可以了。然后的话这边的话其实是不需要使用云服务的，然后这边的一个 id 的 话，主要是可以让他去所使用 word 的 就可以了。 然后的话就会来到我们这个微信开发者的一个平台，然后整个界面其实会跟我们传统的编程软件会比较像。 然后右边的话是我们的一些 c 稿的预览区，然后左边是我们一些文件夹的一些区域，然后中间是代码，然后一般来说我个人是比较习惯用那个叉的一个尺寸去进行一个预呃设计稿的一个预览的， 然后的话就要回到我们的一个科室，那首先的话就要新建项目文件夹，然后这个文件夹必须要跟我们刚刚所创建的保持一致，这样的话我们的一个文件信息还有设计稿才能够在那边去进行同步预览。 然后的话会结合我们想要的东西给 ai 描述清楚我们这个产品是什么，给大家去描述一些数据文档，然后的话会结合我们的一些模型去进行选择一些合适的模型， 然后这次的话我是通过用他们的五点五的模型去进行一个生成的，然后整体的生成的一个效率的话，其实我觉得呃不是很快，所以说我觉得如果说 talk 比较有限的同学的话，其实要呃用那个标准就可以了， 然后的话他会结合我的需求帮我去输出一个非常完善的一个小程序的一个需求，稍微能打。 然后企业家的话主要是要生成一个我的一个设计的一个说明 md， 然后这次的话我是给 ai 垫了一张图， 然后让它结合我的一个设计的一个垫图的风格，让我让它帮我结合我的需求去生成一个符合它的风格的一些设计规范，设计的一个语言的一个设计的一个 md 的 文档。 然后这次的话我也是会呃用我们的一个刚刚所生成的一个需求的一个说明它的需求分明它跟课程不一样，它是放在我们一些刚刚创建文件夹的一个目录下的， 所以说呃，我会让它围绕着我的一个呃需求的文档去进行一个呃设计风格的一个生成， 然后的话就是发送给 ai， 让它帮我去写我的一个设计的一个文档，然后的话它就会结合我的一些啊电图的一个它的一个程序版，然后它的配色去帮我去进行 ai 的 生成。 然后接下来的话就是要漫长的等待啦。嗯，整体处理的效率来说，我觉得会呃越跑越快吧， 嗯，然后就开始慢慢地等待它去进行思考生成，然后它生成完之后就会也是会生成一个 md 的 文档，整个 md 文档非常的一个详细，包括字体大小，然后设置以及卡片布局，以及它的整体的一个配色，以及我们的一个文本语言、图标风格等等。 然后紧接着的话就是要开始让 code 帮我结合这两个文档去进行首出代码页面了，然后首先会让它新增两个文件夹，让它去帮我去接这两个文件，去生成一些我想要的一些页面的一个配色的一个界面的效果，让 ai 帮我去写代码， 然后的话它就会结合我的一些需求想要的要什么样的页面，然后我的一个配色风格让我去让它去帮我去写代码， 然后整个的一个页面当中其实雏形已经出来了，然后的话其实整个效率还是非常快的，然后整个视觉风格其实会跟我电图那个视觉语言会比较搭。 然后紧接着的话就是呃继续去围绕的我们想要的一些东西，去让 ai 通过对话的方式帮它去帮我们去修代码，然后修 bug， 然后去调一些 ui 的 一些细节，例如我的设置，然后我们的渐距以及我们的一些图标的风格等等。 然后的话指出就是不断地去进行雕花跟跟进，让我们的一个心中想要的一个产品就可以了。 你要最终的话大家看一下我的效果吧。你要最终的话会来回到我们的微信平台去看一下我们整个页面的一个效果。 那其实整个页面来说，我觉得这的纯就是没有通过呃， figma m c p 的 一个代码，呃的一个设计稿生成，纯用一个对话的一个代码生成，我觉得整个效果我觉得还是不错的。然后大家看一下最后的一个手机的一个预览的效果， 那整个风格是走这种暗色系的，然后的话整个配色我觉得还是非常吸睛的，这是我通过一个纯啊对话和代码的方式去实现的一个小程序， 然后整个的空间它也是会自动去用我们一个微信的一个官方的空间去进行一个实现，然后整个图标风格我觉得还是不错的，嗯。