摘要：
... 引言：当自然语言遇见 UI 设计
在 UI 设计领域，效率与创意的平衡始终是设计师面临的核心课题。传统设计流程中，从概念构思到可编辑的设计稿，往往需要经历漫长的草图绘制、组件搭建和反复调整。而如今，一款名为“即时设计”的国产云端 UI 设计工具，正在用 AI 技术改写这一叙事。
即时设计是一款完全免费的在线专业级 UI/UX 设计工具，支持网页端直接使用，无需下载安装，即可在浏览器中完成从界面设计到开发交付的全链路工作。更关键的是，它内置了「即时 AI」——全球首款通过自然语言描述快速生成可编辑 UI 设计稿的生成式设计工具。本文将从零开始，带你系统掌握即时设计 AI 功能的核心玩法，用实战案例解锁高效设计的新姿势。
一、核心武器：即时 AI 双模型深度拆解
即时 AI 的强大之处，在于它提供了两套风格迥异的生成模型，分别对应不同的设计场景和需求。
JS-Inno 模型是即时设计最早推出的生成模型，生成速度约为 60 秒，擅长进行页面的丰富化处理和创造性设计，在风格与布局上具备更强的发散性，非常适合设计师在没有明确方向时用来进行头脑风暴。简单来说，当你需要灵感激发时，JS-Inno 是最佳选择。
JS-UIbotics 模型则是即时设计二次更新后上线的新模型，具备 UI 组件化预处理能力，组件生成更加规范，能够在 30 秒左右完成 4 张高保真原型设计的生成，速度比 JS-Inno 整整提升了一倍。这个模型更适合规范化的生产场景——当你的需求明确、需要快速产出可复用组件时，JS-UIbotics 可以帮你大幅提速。
那么，两个模型该如何选择？如果你正在做概念验证或设计探索，希望 AI 给出更多意想不到的创意方向，请果断选用 JS-Inno；如果你面对的是量产型设计稿，已经有了明确的组件规范和页面结构，追求快速输出可直接落地的界面，JS-UIbotics 会更加高效。一句话总结：灵感发散用 Inno，量产规范用 UIbotics。
二、实操篇：AI 生成设计稿的完整流程
2.1 快速上手：从文字到设计稿的四步走
第一步：进入即时 AI 界面。 打开 js.design 官网，登录后点击首页顶部的 AI 入口，即可进入即时 AI 的操作界面。
第二步：选择模型和设备类型。 根据你的需求，在模式选择区切换 JS-Inno 或 JS-UIbotics 模型，同时选择移动端或网页端设备类型。
第三步：撰写设计描述。 在最右侧的文本框中输入页面文字描述。这里要特别注意：描述越详细，生成效果越理想。如果暂时没有清晰的思路，可以键入“/”唤醒官方提供的描述参考列表，从中选择模板进行快速填充。
第四步：点击“生成页面”。 等待几十秒后，系统将在左侧画布区同时生成 4 张高保真设计稿，供你择优选用。你可以从这 4 张中挑选最满意的一张，或者直接在此基础上进行二次修改。
2.2 Prompt 工程：如何写出 AI 看得懂的“咒语”
很多新手会抱怨 AI 生成的结果不够理想，其实问题往往出在 Prompt 上。Prompt 的质量直接决定生成结果的可用性。以下是一条高输出 Prompt 的关键要素：
要素一：明确页面定位与风格。 错误的写法是“设计一个音乐 APP”，正确的写法是“设计一个音乐类 APP 首页，界面以黑色为背景色，整体风格偏向未来感和金属质感”。定位越清晰，AI 越能准确理解你的意图。
要素二：结构化模块描述。 不要只给一句笼统的“设计一个电商首页”，而是把页面拆解为可识别的内容模块。例如：“导航栏左侧为 logo，右侧包含搜索图标和购物车图标；中间主视觉区展示一张促销 banner，banner 下方分为两列商品卡片，每张卡片包含商品图片、名称和价格；底部为首页、分类、购物车、个人中心四个标签页”。AI 读到这样的描述，才能还原出你脑海中真正的页面结构。
要素三：规范引导与 HEX 色值。 即时 AI 支持直接输入 HEX 色值来控制主题色。例如“主色为 #FF6B6B，按钮圆角 8px，所有卡片阴影统一为 0 2px 8px rgba(0,0,0,0.1)”，这样生成的结果会更加符合实际的设计规范。
2.3 即时 AI 的典型应用场景
在实战中，即时 AI 至少可以在三个场景中发挥巨大作用。
第一个场景是竞品页面的快速复刻。 当你需要研究竞品的界面布局但又不想从头画一遍时，可以直接使用即时设计的“截图转设计稿”插件，上传一张竞品截图，AI 会自动识别页面结构并生成可编辑的设计稿。
第二个场景是头脑风暴与灵感发散。 当你面对一个空白画布完全没有方向时，可以在即时 AI 中输入大致的设计方向（比如“设计一个冥想类 APP 的引导页，风格清新治愈”），让 JS-Inno 模型为你提供多种完全不同的设计方案，从中挑选灵感再进行深化。
第三个场景是量产性界面框架搭建。 如果你需要为一个产品快速输出十几个相似的列表页或表单页，建议使用 JS-UIbotics 模型，用结构化的 Prompt 一次性生成多张页面，再批量替换内容和组件，效率提升极其明显。
三、进阶篇：截图转设计稿与二次精修
3.1 截图转设计稿：将静态图片“复活”为可编辑文件
除了纯文字生成外，即时设计还推出了「截图转设计稿」插件，提供了一条更直观的设计路径。
日常工作中，设计师常常收到各种截图——产品经理发来的竞品参考、客户提供的旧系统界面、自己收藏的灵感图……这些截图大多只是静态图片，无法直接编辑，想要转化为可用的设计稿，只能从头搭建一遍。截图转设计稿插件打破了这一壁垒：只需上传一张截图（支持 PNG、JPG 格式），插件即可自动识别页面结构，生成一个可编辑的设计稿页面，所有元素均为可修改图层。
这个功能有三个非常实用的应用场景。第一，快速还原竞品页面：上传竞品截图，迅速搭建对标页面，支持 A/B 测试或风格对比。第二，旧系统界面改版提效：将旧系统截图导入，一键转为设计稿，为改版提供基础骨架，经实测可节省约 50% 的起步时间。第三，设计灵感整理：平时收藏的网页截图，不再只是参考图，一键转为设计图稿，随时用在项目中。
3.2 二次精修：让 AI 生成稿更“像你做的”
AI 生成的设计稿只是“毛坯房”，真正的设计感来自于精修。好在即时设计生成的设计稿并不是一张扁平图片，而是包含完整的矢量图层和分层结构，点击任意组件即可在右侧属性面板中进行二次编辑。
二次精修通常包含四个步骤：第一步，选中不满意的组件，用左侧组件库中的官方组件或社区组件进行替换，让自己的设计稿更符合团队组件规范。第二步，在属性面板中编辑颜色、圆角、阴影等样式属性，匹配品牌的 VI 规范。第三步，检查图层的命名和分组结构，确保交付给开发人员时能够清晰识别每个模块的归属。第四步，如果需要做高保真演示，可以通过原型模式设置页面之间的跳转逻辑和过渡动画，让设计稿真正“动起来”。
四、交付篇：从设计稿到前端代码的“最后一公里”
AI 生成的设计稿如果不能落地，就只是一张漂亮的图片。即时设计的核心竞争力之一，在于它打通了“设计→开发”的交付闭环。
一键开发交付能力是即时设计的杀手锏。工具自带自动标注、智能切图、代码生成、尺寸测量等功能，无需额外安装插件。当设计稿完成后，设计师只需在预览模式中开启“标注输出”，即可自动生成 CSS 代码、间距参数及切图资源，开发人员可以直接复用这些数据和代码片段，无需反复询问“这个按钮距离顶部多少像素”“这张图片切图在哪儿”。
更前沿的是，即时设计已推出「九匠即时MCP」插件，这是一个连接即时设计与 MCP（Model Context Protocol）协议的桥接工具，允许 AI 助手（如 Claude）直接操作设计稿，支持多客户端同时连接使用。这意味着未来设计稿可以直接被 AI 读取并转化为前端代码，设计与开发之间的壁垒正在被进一步打破。
五、效率心法：让即时设计成为你的设计助手
5.1 学习资源与成长路径
即时设计通过社区化运营构建了完善的学习体系。公开课板块中包含 UI 零基础全集教程等系统课程，非常适合新手入门。每周临摹活动则围绕一个设计主题提供详细的设计教程，临摹完成后上传作品，如果日期未过还有机会获得奖品。打卡星球则更进一步——没有详细教程，参与者需要围绕主题自由发挥，多位设计师同台竞技，累积学习积分可以兑换奖品。此外，资源广场拥有超过 1.9 万份设计作品、200 多个资源库以及近 3 万个设计元素，基本可以满足绝大多数学习者的设计需求。
5.2 协作与版本管理
即时设计原生支持多人实时在线协同编辑。这意味着多名设计师、产品经理、开发人员可以同时编辑同一个设计文件，修改内容实时同步，版本历史一键回溯，彻底解决团队协作中“最终版”“最终版2”“打死不改版”等文件版本混乱的痛点。通过分享链接，还可以设置“可评论”权限，让团队成员直接在设计稿上标注修改意见，省去了反复截图、发消息的沟通成本。
5.3 快捷键助你飞
掌握以下快捷键能让你的操作效率提升一个数量级：Ctrl+D 快速复制元素，Ctrl+G 将选中元素编组，Ctrl+Shift+C 复制选中元素的样式（类似格式刷），Ctrl+Shift+V 粘贴样式到其他元素。
六、未来展望：AI 设计的下一站
即时设计自 2023 年 4 月正式开放内测以来，几乎保持着“以周为单位”的迭代速度，生成结果从最初的“初级设计师水平”不断优化，目前已基本达到可复用程度。它具备组件级别的识别能力——不仅可以识别单一图层，还能识别页面上的大多数组件，例如按钮、标题栏、底栏等。
值得关注的是，即时设计已经发起面向个人用户与企业用户的《AI 设计工具共创计划》，与海量应用场景共建，深度挖掘 AI 在实际工作流中的使用场景，推动 AIGC 技术在设计行业的快速落地。
在未来，即时 AI 还计划开放手绘生成和图片生成两种模式。届时，设计师可以通过草图直接生成高保真设计稿，设计流程将变得更加自然和高效——画一条线、涂几个色块，AI 就能帮你补全成一个完整的界面。
写在最后：
从文字生成到截图转稿，从组件规范到代码交付，即时设计正在用 AI 技术重新定义 UI 设计的边界。它不会取代设计师，但它会让那些拥抱它的设计师走得更快、更远。在这个“让子弹再飞一会儿”的 AI 时代，最好的入门时机，就是现在。