扣子工作流通过串联即时设计API，可将自然语言指令（如“后台管理页+左侧导航+数据看板”）秒级生成带图层结构的可编辑UI草图，支持导出为即时设计原生文件或Excalidraw兼容JSON。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要在30秒内把“后台管理页+左侧导航+数据看板”变成可编辑的UI草图，而不是手动拖组件、调间距、反复改配色——扣子工作流串联即时设计API，能直接把自然语言指令转成带图层结构的excalidraw兼容JSON或即时设计原生文件。
准备即时设计API密钥与环境
登录即时设计官网（js.design），进入「个人中心 → 开发者设置 → API密钥管理」，点击「创建新密钥」，勾选「UI生成」权限，复制生成的密钥。注意：【该密钥具备读写项目权限，切勿明文硬编码进前端或公开仓库】。
在扣子工作流中新建一个变量，命名为js_api_key，类型设为Secret（密钥类型），粘贴刚复制的值。
确认即时设计平台已开通「JS-UIbotics」模型调用配额——免费账户默认每日50次，超限后请求会返回429状态码，此时需升级或等待重置。
配置扣子工作流节点链路
第一步：在开始节点添加三个必填变量——prompt（String，如“电商后台首页，含顶部状态栏、左侧折叠菜单、右侧数据卡片网格”）、device（String，填web或mobile）、model（String，填JS-UIbotics）。
第二步：添加「HTTP请求」节点，URL填https://api.js.design/v1/generate/ui，请求方式选POST，Headers里加Authorization: Bearer {{js_api_key}}和Content-Type: application/json。
第三步：Body内容用JSON格式拼接，必须包含prompt、device、model字段，且prompt长度不能超过512字符，超长会被截断导致生成失真。
第四步：添加「JSON解析」节点，提取响应体中的result.file_url字段——这是即时设计生成的可编辑文件直链，支持直接导入到工作台或用iframe嵌入预览。
获取并使用生成结果
方法一：直接下载JSON源文件。点击file_url链接，浏览器会下载一个.json文件，用VS Code打开可看到标准的即时设计画布结构，含elements数组与appState配置项。
方法二：嵌入实时预览。将file_url填入扣子「结束节点」的输出变量preview_link，试运行后点击链接，页面自动加载即时设计在线编辑器，所有图层可双击修改文字、拖拽调整位置、右键更换图标。
方法三：转Excalidraw兼容格式。在「JSON解析」后加一个「代码」节点，用Python脚本遍历elements数组，把type为rectangle/text/ellipse的元素映射为Excalidraw的JSON schema，输出excalidraw_data变量——这样就能一键导入Excalidraw继续手绘优化。
