我用 AI 花 2 小时出了一份落地页设计稿，踩了 3 个坑才跑通

你有没有遇到过这种尴尬——

产品想法已经清晰到可以背出来了，但一打开 Figma 就卡住了。找设计师？报价 3000 起，改一次加 500。自己画？连组件库都不知道从哪里拖起。结果一个本来可以当天验证的 idea，硬是在"出设计稿"这个环节卡了两周。

我最近在测一条新路：用 Codex 调用图像生成接口，直接把文字需求转化成视觉 Mockup。目标很简单——能不能绕过 Figma 草图阶段，用 AI 生成一份"够用"的落地页视觉稿？

先放结论：可行，但有 3 个卡点，踩不过去就白跑。

下面是完整的实测记录，包括失败截图和有效 Prompt 模板，拿走就能用。

---

第一章：为什么要用 AI 来"出设计稿"？

传统前端开发有一条隐形成本链：

这条链的瓶颈几乎永远卡在第一个箭头上。设计师贵、沟通慢、改稿周期长——这不是抱怨，是客观现实。对于独立开发者或者早期团队来说，一份完整的 UI 设计稿可能意味着：

• 外包设计：¥2000–8000，周期 5–15 天
• 内部设计师：沟通成本 + 排期等待，快则 3 天，慢则 2 周
• 自己动手：没有设计基础的话，Figma 学习曲线陡，出来的东西自己都不满意

但很多时候，我们需要的不是"完美的设计稿"，而是一张够用的草图——用来跟投资人讲故事、跟开发对齐方向、或者自己验证视觉思路。

这就是 AI 图像生成的切入点。

---

第二章：工作流搭建——代码怎么写？

技术链路其实不复杂：

Codex（代码生成）→ OpenAI Images API（图像生成）→ 本地图片文件 → Figma 标注 → HTML/CSS

核心调用是 images.generate 接口，以下是完整可运行的 Python 示例：

from openai import OpenAI
import base64
from pathlib import Path

client = OpenAI(
api_key="your-key-here",
base_url="https://api.884819.xyz/v1"  # 国内稳定中转，延迟约 3-8 秒/张
)

def generate_mockup(prompt: str, filename: str):
response = client.images.generate(
model="gpt-image-1",
prompt=prompt,
size="1792x1024",       # 落地页推荐横版
quality="high",          # medium / high / auto
n=1,
response_format="b64_json"  # 直接拿 base64，不依赖临时 URL
)

image_data = base64.b64decode(response.data[0].b64_json)
Path(filename).write_bytes(image_data)
print(f"✅ 已保存：{filename}")

# 打印 token 消耗
usage = response.usage
print(f"📊 Token 消耗 - 输入: {usage.input_tokens}, 输出: {usage.output_tokens}")

示例调用
generate_mockup(
prompt="A modern SaaS landing page hero section, dark navy background, ...",
filename="hero_mockup.png"
)

Node.js 版本同样可以跑通：

import OpenAI from "openai";
import fs from "fs";

const client = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
baseURL: "https://api.884819.xyz/v1",  // 国内稳定中转
});

async function generateMockup(prompt, filename) {
const response = await client.images.generate({
model: "gpt-image-1",
prompt: prompt,
size: "1792x1024",
quality: "high",
n: 1,
response_format: "b64_json",
});

const imageBuffer = Buffer.from(response.data[0].b64_json, "base64");
fs.writeFileSync(filename, imageBuffer);
console.log(✅ 已保存：${filename});
}

💡 实测说明：本文所有代码均通过 [api.884819.xyz](https://api.884819.xyz) 中转调用，gpt-image-1 接口在国内网络环境下响应稳定，延迟约 3–8 秒/张。如果你也想复现本文实验，直接替换 base_url 即可，其余代码一字不改。新用户注册即送体验 token，国产模型完全免费。

⚠️ 卡点①：API 权限问题

这是第一个坑。gpt-image-1 不是默认开通的，普通 API Key 调用会返回 model_not_found 错误。

通过 api.884819.xyz 中转可以绕过这个问题，接口已经验证可用，不需要单独申请权限。

---

第三章：实战全程——四个模块的生成过程

Hero 区：从"广告图"到"设计稿"

Prompt: "A SaaS product landing page hero section"

结果：生成了一张像素感十足的"科技公司宣传图"——蓝色渐变背景，中间一个大地球，四周飘着图标。完全不是 UI Mockup，更像是 PowerPoint 模板。

A high-fidelity UI mockup screenshot of a SaaS landing page hero section.
Design style: clean minimal, dark navy (#0F172A) background with subtle grid lines.
Layout: left-aligned headline text area with placeholder text blocks,
right side shows a dashboard UI preview card with rounded corners.
Navigation bar at top with logo placeholder, 4 nav items, and a CTA button.
Color scheme: navy + electric blue (#3B82F6) accent + white text.
Style: Figma wireframe quality, no photography, flat UI components only.
Do NOT include: stock photos, people, abstract art, decorative illustrations.

• high-fidelity UI mockup screenshot：锁定图像类型为界面截图
• placeholder text blocks：避免生成乱码文字
• Do NOT include：负向约束，防止模型发散

生成耗时：约 6 秒，费用约 $0.04（高质量模式），折合人民币约 ¥0.29/张。

---

功能卡片区：卡点②出现了

功能区需要展示 3–4 个特性卡片，我原以为只要描述清楚就行。

Three feature cards in a row, each card has an icon on top-left corner
(16x16px, blue), followed by a 24px bold title, then 14px body text
with exactly 3 lines, card background white with 1px border #E2E8F0,
border-radius 12px, padding 24px, shadow: 0 4px 12px rgba(0,0,0,0.08)

结果：生成的图里文字区域出现了乱码排列——字母随机组合，间距完全不对，卡片边框歪斜。这是图像模型的硬伤：它不理解 CSS 属性，精确数值对它没有意义。

⚠️ 卡点②：Prompt 粒度的黄金区间

经过多次测试，我总结出一个规律：

• 太宽泛：模型走插画风格，出"广告图"
• 太具体：模型处理不了精确数值，出"乱版图"
• 黄金区间：描述布局结构 + 视觉风格 + 色彩语言，不写具体数值

UI mockup of a SaaS feature section, white background.
Three equal-width cards in a horizontal row with generous spacing.
Each card contains: a small rounded icon in brand blue at top,
a short bold heading below, and 2-3 lines of gray body text.
Cards have subtle shadow and rounded corners.
Overall style: modern B2B SaaS, similar to Notion or Linear's marketing page.
No real text, use clean placeholder blocks to represent text content.

关键改动：用 similar to Notion or Linear 这类品牌参照锚定风格，比写具体参数有效得多。

---

定价模块 + Footer

定价模块的 Prompt 相对成熟，一次就出了满意的结果：

Pricing section UI mockup for a SaaS product.
Three pricing tiers side by side: Starter, Pro (highlighted with blue border
and "Most Popular" badge), Enterprise.
Each tier shows: tier name, monthly price in large font, 4-5 feature checkmarks,
and a CTA button (outline for Starter, filled blue for Pro, outline for Enterprise).
Background: light gray (#F8FAFC). Clean, professional B2B style.

Footer 最简单，一张图就过了，主要是因为 Footer 布局相对固定，模型有足够的训练数据参考。

---

⚠️ 卡点③：多张图风格一致性

这是最隐蔽的坑。四个模块分别生成，出来的图风格各异——Hero 区是深色系，功能区自动变成了浅色，定价区的蓝色色调也不同。

1. 在每个 Prompt 开头加统一的 System 描述，固定视觉语言：

STYLE_PREFIX = """
UI mockup screenshot. Design system: dark navy (#0F172A) and electric blue (#3B82F6).
Font style: modern sans-serif. Component style: rounded corners, subtle shadows.
Quality: high-fidelity Figma-style mockup. No photography or illustrations.
"""

每次调用时拼接
full_prompt = STYLE_PREFIX + module_specific_prompt

2. 使用 seed 参数（注意：当前 gpt-image-1 的 seed 支持有限，主要靠 Style Prefix 锁定）。

加了 Style Prefix 之后，四个模块的视觉一致性从"明显割裂"提升到"基本统一"，虽然还不完美，但已经够用了。

---

第四章：生成结果怎么用？

AI 出图的最后一公里，是把图片变成可交付物。

导入 Figma 做标注

1. 将生成的 PNG 拖入 Figma 画布

2. 使用"Trace"功能或手动在图片上方绘制标注层

3. 提取色值（用取色器对准生成图）

4. 标注间距（目测 + 参考生成图的比例）

这一步大约需要 30–45 分钟，主要是人工标注工作。

作为 Cursor 的参考图生成代码

把 Mockup 截图丢给 Cursor，配合 Prompt：

Based on this UI mockup image, generate the HTML/CSS for the hero section.
Use Tailwind CSS. Match the layout, color scheme, and component style as closely as possible.

实测还原度大约在 60–75%，主要差距在：

• 文字排版（行高、字重细节）
• 精确间距（AI 给的是近似值）
• 复杂动效（静态图无法传达）

这些细节需要人工接管，但框架代码基本可用。

时间成本对比

注：本次实测生成 12 张图（含失败重试），总 API 费用约 $0.6，折合约 ¥4.3。加上 Figma 标注的人工时间，总耗时约 2.5 小时。

---

第五章：值得用吗？我的真实结论

不回避缺点，直接说。

✅ 适用场景

1. 独立开发者原型验证：花 2 小时出一份草图，自己判断方向对不对，比空想有效 10 倍

2. 甲方沟通前的草图：给客户/投资人看"大概长这样"，降低沟通成本

3. 设计灵感发散：快速生成 5–10 种风格变体，找到感觉再深化

❌ 不适用场景

1. 正式交付稿：文字排版、精确间距、品牌规范——这些 AI 还做不好，不能直接交付

2. 强品牌一致性项目：如果客户对品牌 VI 有严格要求，AI 生成的图很难精确命中

最小可行工作流 Checklist

✅ 1. 配置好 API 中转地址（推荐 api.884819.xyz，gpt-image-1 已验证可用）
✅ 2. 确定设计系统（主色、背景色、字体风格），写成 Style Prefix
✅ 3. 按模块拆分需求，每个模块单独生成
✅ 4. Prompt 粒度：描述布局结构 + 视觉风格，不写 CSS 数值
✅ 5. 每个模块生成 2–3 张，人工筛选最佳
✅ 6. 导入 Figma，人工补标注（30–45 分钟）
✅ 7. 用标注图 + Cursor 生成框架代码，人工精修细节

这套工作流的本质不是"让 AI 替代设计师"，而是让没有设计师的团队，也能快速产出够用的视觉稿。

---

这次实验让我意识到一个更有趣的问题——

我已经在测 Vision 模型读 Mockup 转 HTML 的联动方案，用的是目前最新的多模态模型，还原度的数据已经出来了，结果有点出乎意料。

下篇见。

---

#AI设计 #前端开发 #图像生成 #Prompt技巧 #AI工作流 #独立开发者 #8848AI #AI教程