Python
基于 Claude 大模型与前端设计规则的可上线 UI 生成工作流
摘要 从 Google Stitch 热度切入，对比"AI 画布式 UI 生成'与'代码内 UI 生成'两种路径，系统拆解如何用 Claude 3.5 + 前端设计规则，在真实代码库中迭代出可上线的 UI。附完整 Python API 调用示例与提示词模板，并结合多模型平台的接入方式，帮助前端/全栈开发者把 AI UI 生成直接融入开发流水线。 一、背景：从'好看截图'到'可上线 UI' 当前…
摘要 从 Google Stitch 热度切入，对比"AI 画布式 UI 生成'与'代码内 UI 生成'两种路径，系统拆解如何用 Claude 3.5 + 前端设计规则，在真实代码库中迭代出可上线的 UI。附完整 Python API 调用示例与提示词模板，并结合多模型平台的接入方式，帮助前端/全栈开发者把 AI UI 生成直接融入开发流水线。 一、背景：从'好看截图'到'可上线 UI' 当前…
本文从 Google Stitch 热度切入，对比"AI 画布式 UI 生成'与'代码内 UI 生成'两种路径，系统拆解如何用 Claude 3.5 + 前端设计规则，在真实代码库中迭代出可上线的 UI。附完整 Python API 调用示例与提示词模板，并结合多模型平台的接入方式，帮助前端/全栈开发者把 AI UI 生成直接融入开发流水线。
当前 AI UI 方向大致两类路径：
核心观点非常明确：
'如果你的目标不是一张好看的截图，而是能真正上线的高质量 UI，你不一定需要 Stitch，用 Claude 3.5 + 合理的前端设计工作流就足够。'
因此本文重点不在'怎么用 Stitch 画图'，而是： 如何在代码层把 Claude 3.5 当成一个前端设计 + 实现协同的'强力 Coding Agent'。
视频中对 UI 的定义非常工程化，值得摘出来当 checklist：
画布工具生成的是'孤立画面'； 而代码内生成可以直接考虑：
这就是'生成一段可运行的 UI'vs'生成一个好看的图层'的本质差异。
视频里提到在 Verdant 中安装一个「Front-end Design Skill」，本质上就是一份稳定可复用的设计规则集 + Prompt 模板，用于给 Claude 3.5 清晰的约束和方向。
一个好的前端设计 Skill，至少要包含三类信息：
视觉论点（Visual Thesis） 明确 UI 要传递的气质：
'深色金属风格 + 一处暖色点缀，整体偏冷静、专业'
加上通用规则（后文会总结成一份'基础规则清单'），模型真正拿到的是一个可执行的设计系统，而不是一句"make it look better'。
为了便于普通团队复用，我们用一个更通用的方式： 通过 OpenAI 兼容 API 远程调用 Claude 3.5，对现有 React 代码进行'带设计规则的重构'。
import os
import requests
import textwrap
# 1. 环境配置：替换为你在 API 平台获取的 API Key
XDM_API_KEY = os.getenv("XDM_API_KEY")
# 或直接写死字符串，但不推荐
BASE_URL = "https://api.example.com/v1"
# OpenAI 兼容 Endpoint
MODEL = "claude-3-5-sonnet"
# 默认使用 Claude 3.5 对标模型
def call_claude_for_ui_refactor(existing_code: str) -> str:
"""
调用 Claude 3.5，对现有 React Landing Page 组件进行 UI 设计重构。
重点演示：如何把'前端设计规则 + 视觉/交互论点'编码进 Prompt。
"""
system_prompt = textwrap.dedent("""
你是一名资深前端设计工程师（Design Engineer），
擅长用 React + Tailwind 实现高质量、可上线的产品界面。
你的目标：在不破坏业务逻辑的前提下，通过结构调整、排版、颜色和动效，
提升页面的视觉质量与可用性，而不是简单加装饰。
输出要求：
- 仅输出完整、可运行的 React 组件代码（含 import），不要解释说明
- 使用函数式组件
- 保持传入 props 和数据结构不变
- 样式以 Tailwind 为主，不额外引入 UI 库
""")
# 视觉论点 / 内容规划 / 交互论点 + 基础规则
user_prompt = textwrap.dedent(f"""
这是当前的 Landing Page 组件代码，请在其基础上进行 UI 设计与实现重构：
```tsx
{existing_code}
```
设计任务：这是一个「AI Coding App」的产品落地页。
一、视觉论点（Visual Thesis）
- 风格：cinematic editorial，偏高级技术感
- 色彩：深色钢质质感背景 + 一处暖色点缀（如 amber/orange），整体冷静克制
- 首屏：类似电影海报的强视觉感，而不是文档式排版
二、内容规划（Content Plan）
请按照如下结构组织页面（可以在现有内容基础上调整）：
1. Hero 区（全屏或视觉占比极高）
- 核心标题：一句话清晰说明产品价值
- 子标题：解释核心能力，如「在真实代码库中重构前端 UI」
- 主 CTA + 次 CTA
- 一个体现产品形态的视觉锚点（可以是代码片段、UI 截图框架、终端面板等）
2. 支持证明区（Support / Proof）
- 简短的信任背书：如「被哪些角色/团队采用」「关键指标提升」
- 可以用简化的 logo 列表 / 数字摘要
3. 流程细节区（Workflow Detail）
- 用 3~4 步说明工作流：如「接入仓库 → 定义设计规则 → 并行探索 → 合并最优方案」
- 每步配一段说明文字，视觉上形成清晰的步骤结构
4. 最终 CTA 区（Final CTA）
- 再次强调产品价值，给出明确行动：如「接入你的 Git 仓库」「开始 7 天试用」
三、交互论点（Interaction Thesis）
- Hero 区内容采用轻微的渐进式进场（可以用 Tailwind + 简单的 CSS 动画类名来表达结构，不必写复杂 JS）
- Workflow 区支持「sticky」式滚动视觉（用布局结构体现出 sticky 容器，留出实现空间）
- 重要可交互元素（按钮、卡片）在 hover 时通过阴影/边框/背景变化强化可点击性
四、基础设计规则（非常重要，请严格遵守）
- 不要使用「通用 SaaS 卡片网格」作为首屏第一印象
- 首屏 Hero 要么 full-bleed（全宽全高），要么在视觉上远大于其它区域
- 字体家族用两种以内（用 Tailwind 的字体类名协助表达）
- 颜色：除非代码中已经有成熟 design token，否则控制在 1 个主色 + 1 个强调色 + 中性灰度
- 首屏首个 viewport 要有「海报感」：强对比、大标题、明确视觉锚点
- 每个 section 只负责一件事：标题 + 简短说明 + 结构化内容
- 仅使用有意义的视觉锚点，不要堆砌装饰性渐变
- 全局动效控制在 2~3 个类型以内，避免大量无意义 micro-animation
- 文案风格：产品语言 + 工程语境，避免「营销式 fluff」
输出形式：
- 给出一个优化后的 React 组件，文件名可以为 `LandingPage.tsx`
- 可以适度拆分为内部小组件，但全部写在同一个文件中
- 确保语法完整、可以直接在 React + Tailwind 项目中编译通过
""")
url =
headers = {
: ,
: ,
}
payload = {
: MODEL,
: [
{: , : system_prompt},
{: , : user_prompt},
],
: ,
}
resp = requests.post(url, headers=headers, json=payload, timeout=)
resp.raise_for_status()
data = resp.json()
data[][][][]
__name__ == :
(, , encoding=) f:
original_code = f.read()
new_code = call_claude_for_ui_refactor(original_code)
output_path =
(output_path, , encoding=) f:
f.write(new_code)
()
这个例子就是把视频里强调的三件事（视觉论点 / 内容规划 / 交互论点）+ 设计基础规则，显式编码进了 Prompt， 然后通过一个 OpenAI 兼容接口调用 Claude 3.5，让它直接生成'准生产级'的 React UI。
视频里作者每次都会给模型一套稳定不变的基础规则，这一点非常关键。可以抽象成一份 frontend_design_rules.md，在各种工具里复用：
不管你是在：
都建议把这份规则当'设计系统的核心文档'，而不是每次想到什么写点什么。
"make it look better'典型失败原因是：模型只能输出平均水平的模板 UI。 要避免这一点，至少写清楚：
视频中一个高价值细节：
⇒ 这个思路在 API/CLI 里也一样可做：
对于需要长期做'多模型、多方向 UI 迭代'的团队，一个关键问题是：模型选型 & 接入稳定性。
以本文示例使用的 OpenAI 兼容 API 平台为例，它在这类需求上有几个实际好处：
BASE_URL + model 名称即可切换模型从纯技术选型角度看，如果你团队计划长期在'代码级 UI 生成 / 重构'上发力，一类聚合式平台能显著降低接入和迭代成本。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online