企业官网建设流程全解析

Prefab是一个基于 Python 的生成式UI框架：只用一个普通的 Python 文件，就能做出数据仪表盘、交互表单和 AI Agent 界面，全程不碰 JavaScript、HTML 或前端构建工具。它自带 100+ 生产级组件，UI 既可以由人类编写，也可以由 AI Agent 现场生成。

什么是Prefab：一个Python生成式UI框架

Prefab 是「用 Python 构建富交互界面」的UI框架，官方口号是The generative UI framework that even humans can use（连人类都能用的生成式UI框架），详见 README.md。

它的核心链路非常直白：

Python DSL → JSON 协议 → React 渲染器

• Python 侧：用with语句层层嵌套组件来描述界面，编译成一份标准 JSON 组件树；
• 渲染器侧：仓库内置了一个可打包成单个 HTML 文件的 React 应用，读取 JSON 后渲染出完整可交互的界面——状态、数据绑定、动画全部在浏览器端完成，你不需要写一行 JavaScript。

整体架构设计可以在 VISION.md 中阅读。

为什么说它是「生成式UI」？

传统 Python UI 框架都假设背后有一个常驻后端可以调用，而 Prefab 的产物是可序列化、可校验的 JSON 协议，这意味着：

1. 人类可以提前声明式地写死界面；
2. AI Agent可以在运行时动态生成界面——协议格式固定、可安全地在沙箱里执行；
3. 同一份 UI 代码可以放进 MCP Apps、FastAPI、浏览器等不同宿主。

这也是「连 AI Agent 都能上手」的底层原因。

60秒快速上手：安装Prefab并跑通第一个应用

一键安装步骤

要求 Python 3.10+：

pip install prefab-ui

安装完成后可运行prefab version验证。

本地预览最快配置方法

官方 Quickstart 推荐用prefab serve做本地预览 docs/getting-started/quickstart.mdx：

prefab serve app.py --reload

浏览器会自动打开http://127.0.0.1:5175，--reload会监听文件变化——每次保存 Python 文件，UI 立即重新生成。「写 Python → 保存 → 看到效果」就是它的开发循环，预览机制细节见 docs/serve.mdx。

Hello World：30行Python写出一个交互式卡片

Prefab 的「hello world」不是一行文字，而是一张输入实时联动的卡片：

from prefab_ui.components import * from prefab_ui.rx import Rx name = Rx("name").default("world") with Card(): with CardContent(): H3(f"Hello, {name}!") Input(name="name", placeholder="Your name...")

记住 3 个要点即可：

• 上下文管理器嵌套：with语句表达组件层级，比手写 JSON 省 token，天然适合流式生成；
• 响应式状态Rx：Rx("name")是客户端状态键的引用，放进 f-string 后会编译成{{ name }}。在输入框里打字，标题和徽标实时更新——全程无服务器往返；
• 零 JavaScript：所有交互逻辑都跑在浏览器渲染器里。

组件展示：100+组件开箱即用，图表数据表格都有

Prefab 内置 100+ 生产级组件，按用途大致分为四类：

组件源码位于 src/prefab_ui/components/。命名沿用了 shadcn/ui 的惯例（Card、Badge、Alert），图表 API 参照 Recharts 风格——这些命名对大语言模型非常「眼熟」，所以 Agent 生成代码的成功率更高。

下图就是一个纯 Python 写出的交互式仪表盘，包含环形进度、雷达图、柱状图、数据表格、开关、轮播等多种组件：

对应源码见 examples/hitchhikers-guide/dashboard.py。

生成式UI实战：让AI Agent现场生成仪表盘

这是 Prefab 的杀手锏。流程是一条清晰的流水线：

用户提示词 → LLM 生成 Prefab Python 代码 → 沙箱安全执行 → 渲染为实时界面

• 沙箱基于 Pyodide（编译为 WebAssembly 的 CPython）运行，启动后撤销文件系统与网络权限，可安全执行 AI 生成的代码，实现位于 src/prefab_ui/sandbox/；首次调用约 2 秒冷启动，之后每次执行只需毫秒级；
• 官方示例服务器 examples/generative-ui/server.py 提供两个工具：execute_ui（执行生成的代码）和components（组件库检索）。LLM 写代码前会先自己查组件用法，模式详解见 docs/concepts/generative-ui.mdx；
• 官方实测：LLM 仅凭工具 docstring + 组件检索工具，就生成了 200 行、含图表/数据表/响应式控件的多区块仪表盘。

对新手来说这意味着：你不必背下 100+ 组件的 API，用自然语言描述需求，Agent 会自己查组件、自己写界面。

三大真实使用场景：MCP、FastAPI、Agent生成

三种场景共用同一套「Python → JSON → 渲染器」核心链路，只是传输层不同，一份 UI 代码可跨场景复用。

开始上手的3个核心概念

跑通 Quickstart 后，理解这 3 个概念就能独立开发，完整讲解见 docs/concepts/core-concepts.mdx：

1. State（状态）：浏览器端的键值存储，表单控件每次输入自动同步；
2. Expressions（表达式）：{{ key }}读取状态并自动更新，支持运算符与管道（如| currency格式化金额）；
3. Actions（动作）：用户交互时触发。客户端动作（SetState、ShowToast等）即时生效，CallTool则回调服务器。

这类框架适合谁？

• 🎯Python 后端工程师：做管理后台、工具页面、数据报表时不必切换前端技术栈；
• 🤖AI / Agent 开发者：给 MCP 服务器加交互界面，或让 Agent 即时生成界面；
• 📊数据分析师：把查询结果变成可交互图表，只需几行 Python。

想继续深入，可以看 docs/components/ 的完整组件参考、docs/styling/themes.mdx 的主题系统，以及 examples/ 下的真实示例合集（预算分配器、表单、幻灯片、PyPI 下载看板等）。

📌 最后提醒：Prefab 是 1.0 之前的活跃项目，API 仍在快速演进，生产使用建议锁定版本，升级前阅读发布说明。