即时设计

一、前期登录与工作台准备

1. 浏览器打开官网 js.design，微信 / 手机号注册登录，无需安装软件；
2. 登录后进入工作台：可以管理个人文件、创建团队、新建设计、导入外部文件；
3. 功能入口：
   • 创建文件：从零开始制作 UI 界面、原型；
   • 导入文件：支持 Figma、Sketch、XD、SVG 文件迁移，保留图层可编辑；
   • 资源广场：免费图标、组件、模板一键复用；
   • 创建团队：搭建多人协作空间，划分项目文件夹。

二、新建项目与画布基础操作

1. 点击【创建文件】，自定义文件名；
2. 快捷键 F 创建画板，内置预设尺寸：小程序、APP、网页后台、H5 等，也可手动输入宽高；
3. 界面分区认识：
   • 左侧：图层、页面、组件库、资源、AI 面板；
   • 中间：画布工作区；
   • 右侧：属性面板（颜色、圆角、阴影、布局设置）；
4. 基础绘图：矩形、圆形、钢笔、文字工具绘制界面元素，支持布尔运算、蒙版、自动布局。

三、核心功能分步操作

1. 即时 AI（AI 生成 UI 界面）

1. 编辑页左侧打开【AI】面板；
2. 文生 UI：输入中文需求，例如 “移动端个人中心页面，简约浅色，卡片式布局”；
3. 图生 UI：上传参考草图 / 截图，AI 还原分层界面；
4. 生成结果矢量分层，直接编辑文字、色块，区别于普通 AI 绘图工具；
5. 可 AI 智能排版、自动统一配色、清理杂乱图层。

2. 组件库（搭建设计规范，高频重点）

1. 选中重复元素（按钮、输入框、卡片），右键【创建组件】；
2. 修改主组件，页面所有实例同步更新，支持组件变体（常态 / 点击 / 禁用状态）；
3. 团队可共享公共组件库，统一整套产品视觉规范。

3. 交互原型制作

1. 顶部切换【原型】模式；
2. 选中按钮，拖动连线至目标页面；
3. 设置跳转动画、弹窗、手势滑动、返回交互；
4. 点击【预览】，生成链接或手机扫码，模拟真实 APP 操作效果。

4. 多人实时协作 & 评审沟通

1. 点击右上角【分享】，设置权限：可编辑 / 仅查看 / 允许评论；
2. 发送链接给同事，多人同时在线编辑；
3. 在画布任意位置打点评论，标注修改意见，实现线上评审；
4. 支持版本历史回溯，随时恢复之前的设计版本。

5. 自动标注、切图，交付开发

1. 完成设计后，切换【标注】研发模式；
2. 鼠标悬浮元素，自动展示尺寸、色值、字体、间距、CSS 代码；
3. 需要导出图片：选中图层，勾选【导出切片】，选择 PNG/SVG/WebP，支持多倍率；
4. 开发人员打开链接即可查看全部参数，不用反复传输文件。

6. 插件拓展

四、文件导出方式

1. 图片导出：PNG 透明底、SVG 矢量图、WebP；
2. 源文件导出：导出 Figma、PDF；
3. 分享形式：在线预览链接、原型演示链接；
4. 所有文件云端自动保存，电脑、浏览器账号互通。

五、新手实用技巧

1. 快捷键：F 新建画板，V 选择工具，T 文字，E 唤起插件；支持一键切换 Sketch 快捷键模式；
2. 优先使用组件，减少重复绘图，方便后期改版；
3. 导入外部文件后，及时整理图层命名，方便交接；
4. 免费版有文件数量、协作人数限制，团队长期使用可升级团队版；
5. 资源广场素材学习使用，商用素材注意查看原作者版权说明。

最简标准流程总结