Codex + Figma 五步生成高端的产品原型图（附提示词）

第一步：将详细提示词复制给AI，生成完整方案​

将完整提示词复制到 Codex 中，AI会按三个角色依次输出：​

​

•

第一部分：产品功能架构和页面清单​

•

第二部分： 设计规范和视觉指南​

•

第三部分：完整的HTML+Tailwind CSS代码​

​

​

​

这一步通常需要5-10分钟，AI会生成一个包含所有21个页面的单一HTML文件。​

第二步：获取原型并进行优化调整​

AI生成的原型已经可用，但通常需要进行微调。​

设计规范微调​

常见的微调方向​

•

调整配色比例（确保强调色不过度使用）​

​

​

•

优化图片选择（确保所有汽车图片风格统一）​

​

​

•

修改文案内容（替换为实际的产品信息）​

•

微调间距和对齐（确保各页面的视觉协调）​

​

​

​

​

52%

​

​

​

​

48%

​

​

第三步：将原型导入设计平台（Figma/MasterGo）​

导入到Figma/MasterGo的具体步骤：​

导出SVG文件 - 点击原型中的"导出全部SVG"按钮，下载所有页面的SVG文件​

在Figma中导入 - File → Import，选择导出的SVG文件​

解组并转换 - 右键SVG → Ungroup 解组；选择内容 → 右键 Frame Selection 转换为Frame​

应用Auto Layout - 整理布局和组件关系​

导入Design Tokens - 使用"导出设计规范"获取JSON格式的Design Tokens，导入到Figma Tokens插件​

完成这一步后， 设计团队可以直接在Figma中继续精细化设计，开发团队也能获得完整的设计交付物。​

​

提示词模板​

​

代码块​

Markdown

# 高端汽车销售App原型设计​

​

## 项目定位​

开发一款高端豪华汽车销售App，对标蔚来、保时捷级别的数字化购车体验平台。目标用户：25-50岁中高收入人群。​

​

请依次以三个角色完成设计：​

​

​

应用场景与实际价值​

我在实践中发现，这套流程特别适合以下场景：​

•

快速验证产品想法：在正式立项前，快速生成可视化原型用于内部评审​

•

缩短设计周期：为设计团队提供高质量的初稿，而不是从零开始​

•

改善跨部门沟通：产品、设计、开发可以基于同一套原型进行讨论，信息对齐更高效​

•

降低返工成本：原型的完整性和准确性直接影响后续开发效率​

技术细节补充​

关于图片素材：Unsplash提供的免费高品质图片足以满足原型需求。建议在提示词中指定图片搜索关键词（如"luxury car"、"car interior"），AI会自动引用合适的图片URL。​

关于代码可复用性：AI生成的Tailwind CSS代码通常具有很好的结构化。但要注意，生成的CSS类名需要在实际开发中进行标准化和复用性优化。​

关于性能考虑：将所有页面集中在一个HTML文件中便于展示，但实际部署时应该按需分割，避免文件过大。​

总结与建议​

通过这套方法论，我实现了从产品构想到高保真原型的快速转化。整个过程从提示词优化、方案生成、微调优化，到最终导入设计平台，完整周期通常在1-2个工作日内完成。​

对于产品经理而言，这不是替代传统设计师的做法，而是一种高效的协作方式。AI工具能够快速处理重复性、结构化的工作，设计师和产品经理则将精力投入到创意、细节优化和决策上。​

如果你也面临类似的需求，我建议：​

•

先准备一份详细的需求文档（功能清单、目标用户、参考案例）​

•

根据本文提供的提示词框架进行定制​

•

充分利用AI的迭代能力——多次与AI沟通调整，直到满意为止​

•

在导入 设计平台后，继续进行细节完善和用户测试​