ReactTypeScript工具站

openpage — React 工具站模板

作者 buildingopen

JSON-first开源网站构建器，提供可视化拖拽编辑与AI生成，输出可版本控制的JSON配置。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

访问演示网站在新标签页打开

桌面端截图

演示站首页的真实桌面布局。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-09-27查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

JSON-first 架构：网站配置是单一 JSON 文档，可 diff、可版本控制，AI 与人类编辑共享同一接口

可视化拖拽编辑器：实时预览、区块排序、内联编辑，操作结果直接反映为 JSON 变更

AI 生成能力：通过 POST /api/generate 接口，用文本提示生成完整站点配置（需配置 Gemini API key）

一键导出独立 HTML：产物自包含，无运行时依赖，可部署到任意静态托管

19 种区块、42 种布局变体，覆盖营销页常见模块，并支持自定义主题

MIT 协议，可自托管，无厂商锁定

模板详细介绍

OpenPage 是一个以 JSON 为唯一数据源的开源网站构建器，核心思路是把整个网站描述成一份带类型的 JSON 文档，再通过可视化编辑器、AI 接口和渲染器读写同一份数据。它既不像 Lovable、v0 那样直接生成易碎的代码，也不像 Framer、Webflow 那样把站点锁在私有格式里。项目自带 19 种区块、42 种布局变体，覆盖导航、Hero、功能、定价、评价、FAQ 等常见营销页面模块，并内置 10 套主题预设，可调整颜色、字体、圆角和间距。

可直接运行在线工具表单交互文本处理

适合你的项目吗？

适用场景

快速搭建并微调落地页，先用 AI 生成初稿，再在可视化编辑器中调整
作为 AI Agent 的网站生成后端，提供结构化 API 而非脆弱的代码生成
将营销站点作为 JSON 纳入 Git 管理，在 Pull Request 中审查内容变更
作为白标网站构建器的基础，fork 后二次开发

适合人群

需要同时支持可视化编辑和程序化修改的团队
重视站点配置可版本控制、可审查的开发者
希望自托管、避免平台锁定的项目
对 AI 生成网站有需求，但要求输出结构化、可预测的团队

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
克隆仓库后运行 npm install && npm run dev 即可启动编辑器。
2
AI 生成功能需要设置 GEMINI_API_KEY，并部署到 Vercel 等支持 serverless 函数的环境。
3
导出的 HTML 通过 CDN 加载 Tailwind 和 Google Fonts，离线使用需注意。
4
项目当前处于早期阶段（star 数较少），生产环境使用前建议自行审查代码和依赖。

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

MIT许可，README明确可免费用于个人及商业项目，无使用限制、无付费层级。

使用时需要遵守

保留原作者版权声明和 MIT 许可证声明。
保留版权声明与许可声明

额外费用与待核对事项

README未单独说明字体、图标等第三方素材授权

查看原文依据

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction
许可证原文

Yes. OpenPage is released under the MIT license. You can use it for personal projects, commercial projects, or as a starting point for your own website builder.
README 原文