Instatic Skill：开源可视化 CMS，一个 Bun 服务搞定设计到发布

Skill超级捕获手 技术创作者 2026-07-27 42 阅读

Instatic 是一个完全自托管的可视化 CMS，用户、角色、插件、内容、数据库全部在一处，输出干净语义化静态页面。由 CoreBunch（Motion.page 和 Core Framework 原班团队）打造，2026 年 7 月空降 GitHub Trending，单日斩获 888 颗星，热度仍在上升。

功能与原则

Instatic 核心设计原则是All-in-One 而非拼凑：一个 Bun 服务器同时承载可视化画布编辑器、内容引擎、媒体库、权限系统、表单收集和发布管道，天然支持 SQLite 或 Postgres，无需另装数据库服务。输出产物是语义化 HTML + 紧凑 CSS，无框架运行时、无 hydration、无编辑器残留代码，性能不靠优化而靠架构。

核心能力：
– 画布编辑器：多断点画板并行编辑，桌面/移动同屏响应；内置 Core Framework 设计令牌引擎（色彩自动生成色阶、文字流体级联、间距比例尺），全站设计系统改为一个令牌，全站自动同步
– AI Agent：自然语言描述页面需求，Agent 直接在画布上构建真实可编辑节点，支持 Claude / GPT / Ollama，自带 35 工具 Site Scope 和 15 工具 Content Scope
– Super Import：粘贴原始 HTML 还原为可编辑节点；导入整个静态站点，自动拆解为页面、样式规则、设计令牌和媒体资产
– 插件沙箱：后端插件运行于 QuickJS-WASM 沙箱（无文件系统、无网络，除非授权），编辑器扩展需明确申请 editor.code 权限
– 静态发布：发布时直接 Bake 页面到磁盘，访客拿到的是文件而非渲染服务；自动检测个性化区域并 lazy-load（运行时仅 ~1.1kB）

认可度

  • GitHub Star：约 5,900 颗（截至 2026-07-27），今日新增 888 星，持续攀升中
  • Forks：529
  • Trending：2026-07-27 空降 GitHub Trending 主页
  • 发布节奏：v0.0.x 版本阶段（故意的），已发布 13 个版本，最近一次为 2026-07-25 v0.0.13
  • 社区：CoreBunch 团队背后有 Motion.page（WordPress 动画插件）和 Core Framework（设计令牌引擎），两个产品均已有数万真实用户基础

链接

GitHub：https://github.com/CoreBunch/Instatic

原作者

CoreBunch 团队（GitHub @CoreBunch），主要贡献者包括 @DavidBabinec、@claude、@RemiAsselin42 等。团队同时运营 Motion.page（WordPress 页面动画）和 Core Framework（设计令牌引擎），在 WordPress 生态有深厚积累。

介绍

Instatic 诞生的背景很直接：现代网站搭建通常意味着组装一套全家桶——Headless CMS + 框架 + 托管服务 + 表单服务商 + 分析工具 + CDN——每个组件都有自己的账单、控制台和凌晨故障风险。Instatic 的赌注正好相反：一个 Bun 服务把画布编辑器、内容引擎、媒体、权限、表单、插件和发布管道全部整合，按需选择 SQLite 或 Postgres，部署在你喜欢的任何地方。

输出的质量是大多数建站工具悄悄妥协的部分：语义化 HTML、紧凑 CSS，没有编辑器 machinery 残留，没有 React 运行时，没有 div 汤。页面加载起来像静态文件一样快，因为它大多数时候就是静态文件。MIT 协议，真正自托管。

特点

  • 一站式建站：编辑器 + 内容 + 媒体 + 权限 + 表单 + AI + 发布，一个 Bun 服务全部搞定
  • 设计系统内置：Core Framework 引擎自带色彩自动色阶生成、流体文字比例尺、间距节奏尺，设计师改令牌，全站响应
  • AI 原生：内置 AI Agent 自然语言建页面，Bring Your Own Key，支持 Claude/GPT/Ollama
  • 沙箱插件：后端插件运行于 QuickJS-WASM 沙箱，权限按需授予，不存在编辑器渗透风险
  • 发布即静态：Bake 到磁盘的语义 HTML，无框架运行时，性能随架构自然而来
  • 开发者友好：TypeScript 100%、TypeBox 全链路校验、架构规则写进 __tests__/architecture/ 作为测试保障代码风格
  • 一键部署：Railway / Render / Docker 多平台一键上手，文档清晰

使用方法

安装（开发模式）

需要 Bun：

git clone https://github.com/corebunch/instatic.git
cd instatic
bun install
bun run dev

访问 http://localhost:5173，首次访问引导创建站点和 owner 账号。

生产构建

bun run build   # tsc -b && vite build
bun run start   # 构建 admin 并在 :3001 提供服务

Docker 部署

INSTATIC_IMAGE=ghcr.io/corebunch/instatic:latest 
docker compose -f compose.prod.yml -f compose.sqlite.yml up -d

AI Agent 调用

在管理面板打开 AI 设置，填入自己的 API Key（支持 OpenAI / Anthropic / OpenRouter / Ollama），切换 Site Scope（建页面）或 Content Scope（编辑内容）即可。

使用场景与人群

  • 独立开发者 / 小团队：想快速建站但不想被 Webflow 订阅费绑定，需要 AI 建页能力的
  • WordPress 用户迁移：受够了主题冲突和古早架构，希望自托管但保留可视化编辑体验
  • 前端设计师：需要将设计系统 token 化、想要直接产出干净静态页面的
  • AI Agent 玩家：希望有可视化 CMS 让 Agent 真正”画”出页面，而不是输出 HTML 字符串的

输入与输出案例

案例 1：AI 建页

输入（对 Agent 说）：「创建一个关于我们的页面，包含我们团队的表格，表格里有头像、名字和职位，用 Core Framework 风格配色」

输出：Agent 在画布上构建真实可编辑节点，包含团队表格组件、头像字段、Core Framework 色彩令牌应用，点击即可进入编辑模式，无需再切到代码层。

案例 2：Super Import 整站迁移

输入：上传一个 30 页的静态 HTML 网站（HTML + CSS + 图片 + 字体）

输出：Instatic 自动解析为可编辑页面列表 + CSS 样式规则 + 设计令牌 + 媒体库，所有冲突展示给用户确认后一键导入，整个操作一次 undo 可撤回。

GitHub: https://github.com/CoreBunch/Instatic

评论区

0 条评论

登录后可评论。

Skill超级捕获手 42 阅读