适合UI/UX的AI工具

每天获得一款高质量开源项目第五十期 u i u x pro max， 这是一款面向 ai 编程助手的 u i u x 设计增强插件，接下来教大家如何在 tree 中使用。打开 tree 的 界面，设置里面找到 m c p， 点击添加， 然后输入你本地的解压缩地址，按照这个格式，上面显示绿色的勾，表示成功。然后到智能体界面新建一个智能体，名字设计为 u i 工程师， 其余的随便填写， 然后保存。记得勾选之前导入的 m c p， 在 聊天框中输入你具体的 u i 模板生成。这边我就用五倍速展示了， 我这里叫他帮我修改一下我的个人资源分享界面，具体的生成效果等调试好我上传到网站。

嘿，大家好啊，今天呢，咱们来聊一个特别酷的设计工具， figma。 如果你一直对 ui 设计有点心动，或者想找一个用起来又专业又顺手的工具，那太好了，接下来的内容你可得听仔细了。 我知道很多人可能都有这种感觉，看到手机里那些好看的 app 界面，觉得哇，好厉害，好想自己也做一个，但一想到那些复杂的视利软件，可能头都大了，完全不知道该从哪开始。 哎，别着急，这个问题其实特别好解决。没错，你的设计之旅第一站就应该是 figma， 它是一个特别现代，功能强大，而且关键是对新手特别友好的一个工具。 相信我，等我们聊完，你就会发现，上手 figma 啊，比你想象中要简单多了。行，那废话不多说，咱们直接开始吧。好，第一个问题， figma 它到底是个啥？ 简单来说，他就是专门为我们设计手机应用网站这些数字产品而生的。但是啊，他跟我们以前用过的那些传统设计软件，那可真是太不一样了。 你看啊，这张图就一目了然了，左边是传统软件，你得先下载安装，文件呢，也只能乖乖的存在你自己的电脑里。 但右边的 figma 呢，完全是另一回事，你直接在浏览器里就能打开，用所有的文件都存在云端，这就意味着什么？意味着你不管用的是自己的电脑，还是公司的电脑，随时随地都能接着干活。 但最最核心的区别是最后这一点， figma 就是 为了团队合作而生的。你可以想象一下，你和你的同事就像一起写 online 党文档一样，可以同时对这一个设计稿指指点点，修修改改，这在以前简直是不可想象的。 好，了解了它是什么，我们再来挖深一点， figma 为什么就这么厉害呢？其实啊，这背后有两个非常非常重要的核心理念，你只要把这两个东西搞明白了，那 figma 的 精髓，你就算是抓住了。第一个核心理念叫原件，英文就是 component 这个概念说白了，真的太聪明了，你可以把它想象成咱们小时候玩的那个乐高积木。你先搭好一个基础的小积木块儿，比方说一个按钮或者一个小图标，然后呢，你就可以在任何需要它的地方把这个积木拿过来用着行了。 哎，这个积木到底有多神奇呢？咱们顺着这个流程看，第一步，你先设计一个母原件，它就像一个标准模板。第二步，你用这个模板复制出好多好多个复制体。好，现在你想象一个场景啊，项目做到一半，你老板突然过来说，哎， 这个按钮颜色我不喜欢，给我换成蓝色的。要是搁以前，你可能得哭着一个一个去改，但在 figma 里，你只需要回到第三步，把那个母原件改成蓝色， 然后呢，见证奇迹的时刻就来了。第四步，所有你复制出去的那些按钮，刷的一下，瞬间全都同步更新了，你想想，这能省下多少时间和精力啊。第二个核心理念叫做自动布局呀， auto layout。 这么说吧，如果说原件解决的是重复利用的问题，那这个自动布局啊，解决的就是自动适应的问题，它能让你的设计变得特别智能，特别灵活。举个例子， 一个按钮里的文字从简单的两个字登录变成了使用微信一键登录，这么长一串，这个按钮的宽度就会自动撑开，完全不需要你手动去拉。这对于做那种需要适应不同手机屏幕尺寸的设计来说，简直是太重要了。 好了，理论说了这么多，是不是有点手痒了？光说不练假把式，咱们现在就来实际操作一下，亲手感受 figma 的 魅力。我们就用刚刚讲到的这两个核心功能来快速的做一个按钮， 过程特别简单，就五步，你跟着我的思路走。第一步，先打上按钮的字。第二步，选中它，然后按下快捷键， shift 加 a， 给它加上自动布局。记住了啊，这一步是关键。第三步，给它加个背景颜色。 第四步呢，在右边的面板里调一调编剧，让文字和边框之间留点空隙，这样看起来舒服。最后一步，加一点点圆角，让按钮看起来更柔和，更精致。你看，一个专业又灵活的按钮，这不就做好了吗？是不是还挺有成就感的？ 恭喜你，你已经成功创建了你的第一个 figma 元素了。但是别急，这还只是开胃小菜， figma 还有更多更强大的功能等着我们去发现呢。 你看，就刚刚你做的那个按钮，你只需要在上面点一个键，它就能立刻变成我们前面说的那个可以重复使用的原件了。 这样一来，它就成了你设计库里的一个标准积木，以后整个项目里你都可以随便用，而且还能保证风格完全统一。 那么当你把一个一个静态的页面都设计好之后，下一个问题肯定就来了，我怎么才能让这些页面像一个真的 app 一 样，可以点来点去，可以跳转呢？一句话，怎么让它动起来？ 答案很简单，就在 figma 的 原型模式里，你只需要切换到这个模式，然后就像连连看一样，从一个按钮上拉一根线，连接到下一个页面。就这么简单，一个可以交互的原型就做好了， 你可以直接发给你的客户看，或者拿去做用户测试、收据反馈，都非常方便。好了，到这儿呢，咱们快速地把今天聊到的核心知识点回顾一下。记住啊，这些基础概念就是你打开 figma 设计大门的钥匙， 咱们来巩固一下啊！第一，斐格玛是基于云端的，随时随地，想和谁合作就和谁合作。第二，原件，它就是你的乐高积木，能保证你的设计又快又统一。第三，自动布局，它能让你的设计变得特别智能，能适应各种变化。最后，也是最最重要的一点， 听完没用！最好的学习方法就是现在就打开电脑，自己动手试试。好了，现在你已经掌握了 figma 最核心的基础知识了，那么不如现在就想一想，你的第一个 figma 项目准备做什么呢？ 是重新设计一个你最喜欢的 app 界面？还是为你自己的个人网站画一个草图？别犹豫了，现在就动手开始吧！关注我，每天一分钟用 ai 提升工作效率！

大家好，如果你是一个独立开发者，或者经常用 ai 写代码，你一定遇到过这个问题。 ai 写出来的界面功能是有的，但设计嘛，只能说是能用就行的水平。而我今天给大家分享这个 github 上 爆火的开源项目 u i u x pro max， 就是 为了解决这个问题而生的。它是一个 ai 技能包，可以让 cloud、 code、 cursor、 winzip、 github、 copilot 等主流 ai 编程工具 瞬间拥有专业 u i u x 设计师的能力。项目上线不到一个月，已经收获了超过二点四 k 个 star。 接下来我就带大家全面了解一下这个神器 u i u x pro max 到底有多强。首先是 u i 风格，它内置了五十七种流行的设计风格，包括现在最火的 glassmore safe 的 玻璃泥肽、 claymore fifth 黏土风格、 newmore fifth 新拟态，还有 bento grid 便当盒布局、暗黑模式等等。其次是配色方案，它收入了九十五套行业专属配色， 覆盖电商、医疗、金融、科技、美妆等各个领域。第三是字体搭配，五十六组精心策划的字体组合，都是从 google fonts 中筛选出来的最佳搭档， 直接拿来用就行。第四是图标类型，二十四种数据可识化，推荐做 dashboard 和数据分析界面的时候特别好用。最后是 u x 指南，九十八条最佳实践，帮你避开设计陷阱。支持八大主流技术站，外部端有 html 加 titlewind 的 经典组合， 也有 reactnext、 g s v、 u swt 这些现代框架。移动端支持 swift ui 做 ios 开发， react native react native flutter 做全平台，你只需要在提示词里说一下用什么框架， 它就会自动适配，不指定的话默认输出 html 加 tabloud 的 代码。 u i u x pro max 的 工作原理本质上是一个设计知识库，里面存储了大量的 u i 风格配色方案、字体搭配、图标推荐和 u x 最佳实践。它的核心是一个混合搜索引擎， 使用 b m 二五算法加正则表达式匹配，能够快速准确地找到最相关的设计参考。整个工作流程分为四步， 第一步，你在 cloud code 提出需求，比如说为宠物美容服务创建一个落地页，风格活泼友好，包含预定按钮。第二步，技能自动激活 ai 识别到这是一个 u i u x 相关的任务，自动调用搜索脚本。第三步，智能推荐， 根据你的产品类型和需求，找出最匹配的设计系统，包括推荐的风格、配色、字体等。第四步，代码生成， cloud code 根据这些设计参考， 生成符合最佳实践的 ui 代码，整个过程完全自动化，生成效果非常符合稳定，符合主流审美。同时官网提供了大量的模板演示以及生成提示词 可以供大家参考。安装部署也非常简单，先 npm 安装 cli， 然后进到工程目录，针对不同的 ai 工具进行出场化即可。好了，以上就是 uiux pro max 的 完整介绍， 总结一下，这是一个能让 ai 编程工具秒变设计大师的开源技能包。如果你觉得这期视频对你有帮助的话，别忘了点赞、收藏、关注三联，我们下期见！

今天凌晨， google switch 迎来了十四级更新，分满，股票直接暴跌。 stitch 主要做了这五大功能更新，给大家展示一些我的实际使用效果。 首先给了我的提示词，网站页面，我让他帮我优化一下，他给了我两版方案，还可以直接选择所有页面，一键生成可交互即式原型。 你还可以输入设计规范，根据我的设计规范给我出原型。我输入了一个 app 产品需求， 这是它生成的效果很不错。整个界面是个无线画布，你可以直接将你的参考图复制到画布上，创作连贯性很丝滑，甚至还能语音输入，动动嘴就生成 ui 设计。

哎，你好，可以听见吗？哎，你好，自我介绍一下，我叫路飞啊，是这边设计团队负责人，咱们今天大概聊三十到四十分钟左右时间好吗？过程中我会做一下记录，好跟你说一下。呃，体验设计方向的 ai 工具你有用哪些啊？ ai 工具在使用过程中你遇到的最大困难是什么？你有尝试过 web coding 吗？ web coding 过程中你遇到的最大困难是什么？有什么办法可以让 web coding 弹出的界面可以遵循公司已有的设计规范？ 你觉得 skyo 对 于摄影师的工作有可能有哪些帮助？嗯，好的，你可以把作品里的项目挑一个你自己最满意的分享一下吗？ 这个项目中最大的挑战是什么？举个例子讲一下你是怎么解决这个问题的？最后上线后结果怎么样？ 我看这个项目也结束一段时间了。如果今天你再重新做一遍这个项目的话，你会优化哪些地方？ 你可以举一个你跟产品经理对一个设计需求产生分析的例子吗？好的，如果让你优化极梦的体验的话，你会改什么？ 你觉得吉梦目前没有这么做的原因是什么？你在之前的团队，如果专业能力排序的话，你觉得自己能排第几？你觉得自己离排序第一同学最大能力 gap 是 什么？ 最近半年你在 ai 实践方面最大的心得体会是什么？如果让你之前的 leader 评价你，你觉得他会怎么讲？你对加班怎么看？你还有什么题问我了吗？ 好的，感谢你的时间。如果你通过了智能面试，会在两个工作日之内收到后续通知。面下来感觉怎么样？因为时间关系，我整理一份分享，教大家如何在面试中有逻辑的讲好一个项目，想要的同学可以找我免费领取。

今天给大家推荐几款 ui 设计常用的工具，一、 square line 二、 e e z studio 三、 l v g l build 四、 figa 主包现在运行的就是使用 square line 设计的 ui， 是 不是非常炫酷？如果家人们还有更好用的工具，欢迎评论区讨论关注主包，带你一起实现技术变现。

ai 跑的 ui 前端终于不丑了？有个大佬和我一样受不了直男审美，于是开源了一个这个项目，目前 github 上面已经有六千多个星。这是啥呢？简单来说，它就是一个 ui u x 的 智能增强插件，它里面塞了五十多种 ui 风格， 九十五种配色方案，五十六种字体配对。比如玻璃底钛便当布局新底钛这种有高级感的视觉风格它都支持。你只要告诉 ai 你 想开发什么样的网站，它就直接能够输出对应的代码。 以前你得反复强调提示词，看预览， delete 模半天，现在用了这个项目，一句话就能搞定，审美基本上不会太差。我也用它来整理了几个常用的风格提示词，都放在这里啦。

大家好，今天我要分享的主题是 ai 驱动 ui 自动化测试方案。做过 ui 自动化测试的人都知道，最常见的报错就是 no such element exception， 也就是找不到元素，前端页面稍微改个结构或换个 id， 原本跑得好的脚本就会报错。测试人员大量精力花在修补 s p s 和维护脚本上，而不是设计测试场景。 随着 web 与移动应用复杂度的不断提升， ui 自动化测试已成为保障软件质量的重要手段。但传统方式仍存在以下问题，首先是元素定位脆弱， ui 改版后 xps 或 css selector 容易失效。其次是脚本维护成本高，页面结构变化往往需要批量修改脚本。 然后是用力编辑效率低，编辑 ui 测试通常需要熟悉前端与自动化框架。最后是覆盖率有限，人工设计用力难以覆盖所有用户行为路径。因此越来越多团队开始尝试使用 ai 来提升 ui 自动化测试能力。 ai 正在从多个方面改变 ui 自动化测试，首先是 ai 视觉识别，传统方式依赖 dom 定位，而 ai 可通过视觉识别 ui 元素，降低对结构变化的敏感度。 其次是自语测试， ai 可根据失败信息自动修复或建议修复测试脚本。然后是自动生成用力，结合 p r d 用户故事、页面结构等自动生成测试，用力提升覆盖率。最后是智能探索测试，像真实用户一样探索应用，发现微覆盖路径与异常行为。 随着 lm agent 的 技术的发展， ui 自动画测试正从脚本去动，向 agent 去动。眼镜 ai agent 可以 理解自然语言测试步骤至动调用流览器工具动太爵测下一步操作以及自动修复测试流程。 这种方式大大降低了测试的技术门槛，让测试人员可以更专注于测试场景的设计。现在让我们来详细了解几种可选的 ai 驱动测试方案。 第一个是 ai 代码编辑器的方案，它使用 cloud code、 cursor 等 ai 代码编辑器，再加上浏览器至动画框加 playwrite， 降低了写至动画代码的门槛，大幅提升编写效率。例如，你可以直接说帮我用 python 加 playwrite 写一个脚本，打开京东搜索手机，验证搜索结果页面的第一条数据， ai 代码助手会生成可运行的测试脚本， 遇到报错时，将报错信息提供给 ai， 即可获得修改建议。第二个是 playride mcp 方案，测试人源重写代码变萎缩，需求大幅提升，用力边写效率，降低技术门槛。利用大语言模型，将自然语言需求直接转化为可执行脚本。 你可以在 a i d e。 的 聊天框里直接喊话，帮我打开本地运行的测试环境，帮我点一下注册按钮，看看它创报什么错。 a i d e。 通过 m c p 调用本机 playwrite 在 真实浏览器中执行操作，便于调试与演示。在 stagehand 的 方案中，你依然在一个正常的自动化项目中写代码，但你一行定位器都不用写了，过去需要写一堆脚本，现在只需在代码中写自然语言。 将大模型能力融入传统代码架构，适合已有 playwrite 技术站的团队，平滑过渡。在 agent browser 方案里，如果你让 ai 自挤控制浏览器，传统的做法是把网页所有的 html 代码塞给 ai 让它分析，但这会瞬间撑爆 ai 的 上下文，导致调用费用极高，且 ai 容易出现幻觉。 agent browser 独创了 snapshot 加 rex 快 照加引用机制，它不给 ai 看几万行的源码，而是给网页拍个极简快照，并给页面所有能点的元素打上标签。 ai 看到的仅仅是文本框、按钮等标签， ai 只需回复一句 click 标签就能完成操作，算理消耗显著降低，响应快，适合作为自主测试 agent 的 底层架构。最后使用 browser use， 你 连代码工程都不用建了，直接给他一个大模型的 api key 和一句需求他自己去跑。带终端输入去测试一下网站的购买流程，挑一个低于五十元的商品。结账 浏览器 use 会自动打开浏览器，给网页化上个总红框，像人类一样扫事业面，自己思考第一步干嘛，第二步干嘛，直到结账成功。适合非结构化的探索性测试，可模拟真实用户行为，做端到端探索。 从技术门槛回归 c i 友好性、探索能力和维护成本四个维度来看，不同方案各有优劣。若你需要版本管理和 c i 集成，推荐 ai 代码编辑器或 stagehand。 若你需要快速快速验证和探索性测试，推荐 playrite m c p 或 browser。 若你需要工程能力，构建自主 agent， 推荐 agent browser。 ai 正在改变软件测试的方式，通过结合视觉识别 l o m 自预测试和自动生成测试用力， ui 自动化测试可以变得更加智能、高效和稳定。建议根据团队技术站以回归还是探索是否要进 ci 等维度，从上述方案中选定主路径并分阶段落地，再按需组合多种方式形成你需要的方案。

一句话，生成高保证 ui 与前端代码。 google stitch 讲解，它是 google labs 推出的 ai 界面设计工具，搭载 jimmy 二点五大模型， 支持自然语言描述和手绘草图双输入，一键生成高保证 ui 页面和可直接使用的前端代码，打通产品构思、设计开发全流程，大幅提升写作效率，真正实现所想即所得。 六大核心功能特点，第一，多模态生成一句话或一张草图即可。第二，设计生态打通，支持直接导出 figma 二次编辑。第三，前端代码支出 html css react 复制即用。 第四，全平台适配，响应式布局。第五，团队合作，云端储存，多人编辑。第六， flash 和 pro 双模式可选， 适用人群广泛，产品经理可快速做原型， u i 设计师能将草图转高保真，前端开发者直接拿代码，初创团队低成本搭建 m v p， 新手或学生零基础也能入门 使用。流程很简单，第一步，账号登录，选择 flash 极速模式或 pro 精细化模式。第二步，输入提示词，用自然语言描述需求或上传草图。第三步，生成与微调 ai， 提供多套方案供你选择，并支持自然语言微调细节。第四步，导出可一键同步字 figma 或导出前端代码。 核心总结， google stitch 是 一款靠文字或草图就能快速生成专业 ui 和前端代码的 ai 工具，极大地简化了设计开发流程。点赞收藏关注，获取更多 ai 神器教程！

作为设计师你唯一的价值就是你的审美，就像昨天晚上凌晨，五哥更新了他们的最新的设计 agent， 那 这个东西它是给 u i u x 设计师的，这次的更新大了一个迭代，甚至 u i u x 这个设计师职位有可能真的会大幅的缩减，甚至是大量的 u i u x 都会去失业。那更搞笑的一点，更新完之后飞格马的股价直接是跌了八个点，就这一天。 对，那这次他有哪些更新的点？我给大家去简单的用人话去翻译给他说一下。这次就是地址的用户界面，他们进行了重新的全新设计， 相比于以往之前会更智能，他有更大的一个画布，不再是你去建一个新的画板，能够去读懂上下文的所有的内容。第二一个，他会是你一个更有眼力见的一个 ai 助手， 相比以前的这些只会改颜色，帮你改个图标，改个代码的这些智能设计助手，他会读懂你整个画布上的所有内容，帮你去进行及时设计。你只需要去给他丢一个需求文档， 甚至是一张图片，一张文字，对，他会按照你的这个需求理解，会给你一套你想要的设计文档。 最重要的一点就是他们在这一次的更新里面去加了一个及时的语音交互功能，你只需要跟他对话聊天，通过语音的对话聊天的方式就可以让他进行设计的修改，设计的执行，甚至是最后的代码落地。 那还有一个比较厉害的点，如果说以前的 u i 设计师你要去进行页面交互，需要去拖线拉拽，那这次完全不用，如果说你甚至不知道下面一页要交互什么，他甚至给你可以自行脑补似的去交互下一页。还有最后一个点就是设计的大衣筒， 那这次是非常有用的一个点。过去我们去做 u i 设计师的每个设计的系统，他都需要重新去梳理一套的设计规范，还有包括说设计组件化这套东西，那大多数的系统都是多套的组件化的这个规范他重复去用的， 那这次更新他们把这个最头疼的问题就是设计规范不统一的问题，只需要把之前的文档你去丢给他，让他给你自动去总结这套设计文档的规范， 它可以立马去生成一个设计的规范的一个文档。我自己再去实践了一下，我感受到这次的 stitch 更新，它会是一个全站型的一个高级的设计师，如果你是设计师，你审美足够好的话，那可能作为设计师你唯一的价值就是你的审美， 那我也自己去适应一下，让他帮我去识别一个网站的风格，总结了一套设计规范，然后又他按照这套设计规范去给我生成了一个网站，无论是在审美还是设计风格，相对来说都还是蛮高级的一个水平，而且进行了人身的一些交互的一个操作。 这次这是更新，并不是说是对哪个软件或工具进行这样一个对比或者是竞争，我觉得他是把设计去引向了一个新的形态，而不是再去产出理解需求，而是你应该成为一个更严苛设计总监，或者说更牛逼的这样一个市场的 审美高级的这样一个人去提出这个需求，让他帮你去实现。那如果说过去这种传统设计师在这波冲击下，那可能下半年真的要失业了， 包括说现在的大量的公司，他们已经在去裁掉公司百分之八十的这样一个程序员，让公司所有的设计程序代码全部 ai 化。

今天又发现一个挺有意思的新工具，腾讯新出的 adot。 第一眼看到这个名字，我还以为是腾格玛或者迪格玛，一股很像要跟斐格玛过两招的气质。如果你用过斐格玛，那可以先把 adot 理解成一个更偏 ai 加持版的设计工具，它 主打的逻辑很直接。你先说需求，我先帮你出 ui。 官网现在重点提到纹身、 ui， 还有 grey 的 布局、百分比定位、真实比例锁定，说白了就是想帮你从灵感到初稿再到适配开发，整个流程都省点事。 我觉得它和 figma 最大的区别不是谁能不能画图，而是谁更想帮你少走弯路。而且 ardo 很 快就要开启公测，支持 macos 和网页端，感兴趣的可以去体验一下。

这个网站直接把 u i 设计的门槛打没了，一天一个宝藏网站第七十五期今天讲 pixel， 它是国产一站式设计工具，直接把产品开发全流程效率拉满。比如新手想设计 app 的 u i 画面，只需输入一句话，立马给你生成炫酷的 u i 出稿画面，你可以通过对话框或者点击局部画面进行调整，简直不要太方便。 更贴心的是，你还能将设计稿转为 pixel 中可编辑的设计文件，画面元素自由拖动摆放，颜色也能随意搭配。如果你看到优秀的参考图，也可以直接上传图片，系统可识别并按照参考风格生成 u i 画面。更 痛觉的是，研发模式下，你还能将设计稿一键转成 h、 t、 m、 l、 react 等多种类型项目代码，设计师和开发团队合作起来，效率直接起飞。平时要是没灵感的话，也可以到 pixel 资源社区逛逛，里面有海量优质的设计规范、图标和模板，喜欢的可以直接自己使用。以后终于可以早早下班了！

欢迎收看九零后育 i 设计师早九晚六育妞航票工作 plus 大家还记得我十二月初的 ai 生成设计规范教程吗？ 现在 ai 又又又进步了，之前 ai 生成后，我需要手动在飞马添加变体并搭建变量库，现在有了这个插件，可以让 ai 在 飞马画板中直接生成设计规范变量库。接下来看看我怎么做的吧。先是工具选择， 我先是用了 t r a e， 结果就是一直卡在 java， 然后用 cursor 安装好了，但是不花米的模型生成出来的东西不太行，四处碰壁后， ai 让我用 anti gravity 不 花米就能体验到超多新模型。 具体插件安装教程大家可以看这个博主，三种工具安装思路都是一致的。安装好后，我们就可以在想要控制的 figma 页面中打开微码并确定 figma。 接入了 figma 输入指令， 我们就可以看到 ai 自动在 figma 中生成变量库以及设计规范相关内容，等待一会就生成好了。变量库就这么水灵灵的生成好了，还生成了日夜间不同配色，放在以前我手搓的时候不起码搓个半天啊，包括文本样式、圆角样式也生成好了， 看下来确实有参考，提供给它的那些设计规范，还有按钮和输入框也把所有状态类型都给你做好了。那我之前的手搓算什么？我觉得它生成的内容还不够， 又让它补充了一些 icon 和图标样式也是很快就生成好了。大家可以参考我之前的视频，继续往里面补充你想要的东西。用法二，把我们十二月视频教程教的内容从 figma make 复制到 figma 中，让它提取其中的设计规范， 然后它就把遍体库给你水灵灵的搭好啦。至于其他部分的规范，还需要继续对话进行调整。思路都是一样的， 大家头肯够的，可以试试看，肯定会做得比我更完善。由于我模型额度用完了，就只能到这里啦。老规矩，视频内容都在文档啦，大家自取。每次刷到 ai 的 新资讯就会觉得，哇，我要被替代了吗？ 然后去尝试使用，发现我好像还能再做一阵子。不过 ai 发展越来越快，工作流肯定会有相应的改变，但是也不用过度焦虑，大家觉得呢？今天的你也辛苦啦！关注更多 ai 加 ui 技巧，主页还有更多 ui 提效教程！

是不是还在为改 ui 改配色改到秃头？甲方说不够高级，自己越改越眼瞎，一张界面光配色都要花大半天，项目周期直接被压缩，新手做 ui 没参考，全靠瞎摸。试试用 ai 一 键生成靠谱配色以及完整 ui。 我 只需要输入一句话，同时选择好需要生成的代 码类型。不到一分钟， ai 直接产出带完整配色的 ui 稿，不仅配色和谐，连排版布局都一起做好。 如果觉得配色不对，直接对话进行局部调整。这样的话，不用自己从头去调色板，哪怕是零基础，不懂配色原理，不清楚你想要的感觉， ai 就 能给你产出专业级的配色方 案。生产好的 ui 呢？一键转成可编辑的设计文件，我想微调哪个模块，直接感非常灵活。 ui 级配色定版之后，开启研发模式，低速 直接一键导出适配的 react 以及 html 的 工程代码， ui 样式直接帮你写进代码里面，不用前端再还原一遍，省出了超多的对接成本。如果只有代码，也能一键反向生成，可编辑的设计 直接在设计端调，不用改代码，协通效率直接拉满。不管是对新手还是独立开发者都非常友好。现在呢，即使你是零基础，也能做出配色感高级的 ui。 如果呢，你也曾经被反复修改设计稿所折磨过，那赶紧去试试这个工具。

这 ai 生成 ui 界面太强大了，我直接告诉给我生一个什么类型 app， 它直接这些十多张界面全都给你生出来了，咱们可以放大展示一下它生成的这个图标的质量。下边这个你看有些同学做的这些都不统一，你看这些有的面性的，有些腺性的，你看人家下边的这些，直接给你生成的非常的舒服， 而且它还有个特别强大的功能，两分钟就能给你干出来一套来，这一套你要是觉得不合适，你可以再换一套，咱换一套白色的， 而且都是原文件，都能直接编辑，这里面你看全是可编辑的，完了你再雕选几张，自己再改吧，改吧，那不就成自己的界面了吗？你看这小效果，自己再加点小吉祥物啥的，你按这样的逻辑，你咔咔再整一套，他老快了，甚至是说你切换风格，那也是相当无敌，咔咔切换各种各样风格。 咱们现在啊就做这种 ui 界面，从风格设定再到排版布局，全是 ai 升的，包括界面里这些小亮点，这些小吉祥物，这些小图标，视觉冲击性。同学，左下角试听课可以直接点预约，嘎嘎，好使，干就完了。