文章主题：网页设计, AIGC, Figma AI, UI设计师
🎉回忆起十年前初涉网页设计的那一刻，仿佛就在昨天！💻时代的变迁，见证了设计工具的革新之路——从最初的Photoshop到Sketch，再到如今风靡的设计神器Figma，直至现代AI引领的直接生成模式。每一步都见证着技术的进步与创新力量的崛起。🎨每个设计师的旅程中，这些工具就像画布上的调色板，塑造了无数令人惊艳的作品。SEO优化提示：网页设计进化史、设计工具革新、AI在网页制作中的角色
这些工具的变迁，也是科技的变迁。从最开始的用Photoshop来制作网页，非常繁琐的手动标注页面，人工切图。到sketch开始自动化标注切图。还记得2017年的时候组织翻译的原子设计，然后慢慢的UI工作流开始越来越组件化，UI设计工具也把组件化整合到了工具中。
再后来就是AIGC兴起，界面设计工具再一次变迁。
最近的设计工具基本全面在拥抱AIGC，但是对于UI设计来说，这条路并不好走。一开始大家会延续文生图的思路，都是走文字一键生成页面的模式，但是对于大部分的真实产品工作流，UI设计是一个需要结合产品，原型，用户调研，每一步都需要数据支撑很严谨的事情。
🌟无论你选择哪种路径，产品的易用性和可定制性始终是核心竞争力。就像Midjourney的便捷操作吸引大众，而Stable Diffusion通过开源深入细分领域一样，每个工具都需要平衡这两方面。💡无论是初学者快速上手的简便，还是专业人士深度挖掘的可控，都是打造强大产品不可或缺的因素。🚀无论你是在寻找一个能轻易掌握的解决方案，还是需要高度定制以满足特定需求，找到那个既能普及又可扩展的工具是关键。
🌟AI创意（AIGC）正在引领设计行业走向一个全新的未来，它不仅改变了人人成为UI设计师的传统观念，更致力于提升现有设计师的生产力。🎨首先，让我们来看看AIGC如何让每个人都能触手可及UI设计。通过强大的自动化工具和算法，AI能够辅助初学者快速理解和掌握界面设计的基本原则，就像学习乐器一样简单直观。🎵然而，对于那些已经熟练掌握了技能的专业设计师来说，AIGC的价值在于解放他们的双手，让他们有更多时间专注于创新与策略层面。它能自动处理大量重复性工作，让UI设计变得更加高效和个性化。💻现有的产品已经开始体现这种平衡，它们巧妙地融合了AI的力量，既降低了新手入门的门槛，又保留了设计师的核心价值。比如，AI辅助工具可以帮助他们快速生成概念草图，而设计师则可以在此基础上进行微调和优化。🎨总的来说，AIGC不是要取代UI设计师，而是与他们并肩作战，共同推动设计领域的发展。它旨在让每个人都能在自己的专业领域发光发热，同时提升整个行业的效率和创新力。🤝记得关注我们，获取更多关于AI如何重塑设计界的最新资讯和优化建议！💻🌐
1、文字直接生成页面
国内的代表产品是即时设计，国外的是uizards，但是目前免费可用的只有即时AI。文字直接生成页面的方式基本上完全颠覆了过去的工作流，也是目前最快速生成页面的方式，最新的即时AI生成一个页面只需要30s。
2、AIGC完善界面设计工作流
最近的代表就是figma的AI设计工作流，很好的把现在的AI的功能结合到了现有的产品里，而且这个工作流从创意到最后前端代码都有涵盖。在figma发布他们自己的AI之前就已经有很多搭载在其中的AI插件了，这一次figma把这些插件全部都整合在一起了。我们还能在里面看到今年年初拿到融资的设计白板类AI工具fabrie的影子。
🎨🚀 使用Figma AI的强大工具，我们已经进行了前沿的测试实例！💡尽管官方尚未全面推出，但我们已能体验到即时AI的创新魅力。无需等待，一起来探索未来设计的无限可能吧！🌐✨ #FigmaAI #设计革命
一键生成时尚网站
这次使用的工具是即时最新推出的web页面的生成功能。目前免费，每天有20次的体验次数。
体验网址：https://js.design/ai
官方介绍：「即时 AI」能力进阶！自带网页动画，30s 生成更精致的 Web 设计稿！
官方文档：https://fyze31atzb.feishu.cn/wiki/GNCTwKHmyinCMIkN8e5c18E0nvg
Prompt：类似vogue官网页面，简洁，大胆的设计风格，黑白主题。
模型选择：JS-UIbotics，这个模型的生成速度明显加快，只需30s，并且组件化的规范程度也更好。
点击生成页面后，只需30s，就可以得到四个不同样式的网页。
说实话这次生成的页面还挺惊喜的，几乎可以直接用了，无论是图片，文字还有布局都没有什么问题。
现在开始感受到甲方爸爸和老板们的快乐和痛苦了。我发现很难选择，选择太多也是坏事。生成好的页面可以点击编辑来修改里面的内容。你可以把自己的产品图片和文字替换上去。
作为一个看效果的demo，我暂时不对里面的内容进行修改，到这一步已经足够了。
到这个阶段还可以直接生成所有人可以预览的网页链接。选择你要发布的页面然后点击发布网页即可。发布后如果还需要修改内容，还可以继续更新页面。我选择了第一个生成进行发布，大家可以直接扫码查看效果。
网页的动效我录了个小视频，非常的顺畅，这也是惊喜的地方。
刷新 
可控页面颜色
AI的文生图领域一直以来有个挺大的问题，就是无法生成准确的色值。Midjourney 和 stable diffusion 都是如此。但是对于设计师来说颜色的控制又特别的重要，尤其是UI设计师。
这次的即时AI把主题色也加进去了，可以直接通过描述词来控制页面是深色模式还是暗色模式，以及设定主题色的具体色值。
下面这个页面就是试图生成主题色是#A5D63F，深色模式的时尚网站。
可以看到 icon 按钮以及链接文字都变成了主题色。
当我们点击编辑后，可以看到颜色样式里的主题色已经被系统的设置好。
点击编辑颜色可以看到色值就是提示词里写的 #A5D63F
并且可以一键替换主题色，效果如下。
刷新 
生成式UI的应用场景和未来
优点：
🌟无需设计基础，新手也能轻松上手！🎨这款工具彻底打破了UI设计的传统束缚，让复杂流程变得简单高效。🚀只需几步，就能产出专业水准的页面设计，甚至超越一些初级设计师的成品。无需担心技能门槛，立即体验，效果显著！🔥立即行动，提升你的设计速度和质量，让你的作品独树一帜！✨#无设计经验也能做UI #提升设计效率 #超越初级设计师
人群：使用的人还是需要了解UI的专有名词，比如深色模式之类的，纯小白用户并不适用。程序员和产品经理
🌟对于程序员群体来说，这款产品的热度不言而喻，身边众多的朋友都在使用并津津乐道。🚀他们的喜爱和口碑，无疑证明了这款产品的专业性和实用性。💻
对于专业的UI设计师来说，复杂的页面还需要调整，不过也节省了不少时间。我能想到的应用场景其实主要在老板经常要求的一天出高保真页面。现在可能几分钟就可以实现。
🎨💻对于设计师来说，选择合适的工具至关重要，特别是那些针对特定需求的插件或即将面世的Figma AI，它们无疑是提升工作效率的强大助力。🔍然而，UI设计这一领域虽年轻，仅十年左右的成长历程，其根基深深植根于移动互联网的浪潮中。现有的网页和APP，受限于技术的局限，与机器的无缝交互仍是一大挑战。🚀随着科技的进步，我们期待看到更先进的解决方案能打破这层隔阂，让设计师的工作更加流畅自然。🌐
而在大语言模型的冲击下，人类跟机器的交互会越来越接近自然的人与人的交互，那么下一代的界面的UI是什么？以及是否还有现在意义上的UI？其实都是一个问题。在没有人知道答案的情况下，颠覆性的创新反而可能是更正确的选择。
🎨💻🚀工作流剧变，设计师与产品经理面临革新之路！💡随着AI技术的加速渗透，AIGC（Artificial Intelligence for Content Creation）正悄然重塑职业格局。以往，繁琐的设计流程往往需要多角色协同，设计师、产品经理各司其职。但现在，智能工具的崛起正在推动一场革命：产品设计的自动化让边界模糊，一人即可完成从前多人协作的任务，从概念到成品，速度翻倍！🚀这样的变化意味着，团队规模可能迎来重构，产品迭代节奏将如闪电般迅速。设计师不再局限于传统的创意输出，而是需要适应新环境，掌握AI技能，以更高效的方式推动创新。产品经理则需关注数据驱动，优化流程，以适应快速响应市场的需求。💼💻拥抱AIGC的挑战与机遇，让我们一起迎接这场职业转型的新浪潮吧！🌊🌟
过去的半年，视觉设计的工作流已经被颠覆了，接下来要轮到UI设计了。
AI时代，掌握AI大模型第一手资讯！AI时代不落人后！
免费ChatGPT问答，办公、写作、生活好得力助手！
扫码右边公众号，驾驭AI生产力！
