文心快码可将Figma设计稿一键转为HTML或React代码：需先设置Figma文件为“任何人可查看”并获取标准只读链接，再在wenxin.baidu.com/kuaima粘贴链接解析，最后按需选择HTML或React（TSX+Vite）格式生成可运行代码。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要把Figma里已完成的界面设计稿，快速变成能直接运行的HTML或React代码，而不是手动复制尺寸、调颜色、写CSS——文心快码正是为此设计的AI驱动转换工具，它不依赖Figma插件安装，也不要求你提前命名图层，只要设计稿可访问，就能启动转换。
确认Figma文件可被文心快码读取
打开Figma项目，点击右上角“Share”按钮→在弹出面板中勾选“Anyone with the link can view”→复制生成的链接。这一步必须完成，【文心快码无法访问未开启共享权限的设计稿】，即使你是文件所有者，私有链接也会触发403错误。
检查链接末尾是否含“/edit”字样，如有，手动删掉，只保留以“/file/”开头的标准只读链接格式。
在文心快码中粘贴链接并启动解析
访问 wenxin.baidu.com/kuaima（需百度账号登录）→首页点击“从Figma导入”卡片→粘贴上一步复制的只读链接→点击“开始分析”。
系统会在10–25秒内完成设计结构提取，期间会识别画板数量、文本层级、颜色变量和主要组件区块。若页面含大量嵌套Auto Layout或Mask遮罩，解析时间可能延长至35秒，属正常现象。
解析完成后，界面自动跳转至“代码预览页”，左侧显示原始设计缩略图，右侧为实时渲染的HTML预览框。
选择输出格式与微调配置
方法一：直接导出HTML/CSS
在右侧配置栏中，将“目标框架”下拉菜单设为“HTML + 响应式CSS”→关闭“启用JavaScript交互”开关→点击“生成代码”。生成结果为单个index.html文件，内联全部样式，适合静态页交付或邮件模板。
方法二：导出React组件（支持Vite环境）
将“目标框架”切换为“React (TSX)”→在“组件粒度”选项中选择“按画板拆分”或“合并为单组件”→勾选“导出为Vite兼容格式”→点击“生成代码”。生成包含tsx、css、assets子目录的ZIP，解压后可直接放入Vite项目src目录运行。
【注意：选择React输出时，必须确保Figma中所有文本图层未使用“字体回退链”（如同时设置PingFang SC, -apple-system），否则生成的fontFamily值会包含非法逗号分隔符】
下载并验证生成结果
点击“下载ZIP”按钮，获取压缩包。
解压后，用VS Code打开，检查public/index.html能否在浏览器中正确渲染；若为React包，进入目录执行npm install → npm run dev，确认热更新与响应式断点生效。
打开生成的CSS文件，搜索“/* Figma source */”注释块，核对其中标注的原始画板名称是否与Figma内一致，这是判断图层映射准确性的关键依据。
