Skip to content

项目引导

Codeg 的大部分功能都是关于在你已有的仓库中工作。项目引导则是另一端——创建仓库的入口。它是一个脚手架启动器:你以可视化方式配置一个新的前端项目,Codeg 替你运行脚手架 CLI,完成的文件夹会作为一个草稿标签页被直接交给你的工作区——于是你一步之间就从一个空想法,走到一个在真实项目中工作的智能体。

它有两种风味:一个你在实时配置器中设定主题的 shadcn/ui 应用,以及一个 HyperFrames HTML 转视频项目。两者的结局相同——一个在 Codeg 中打开、可供智能体在其上构建的脚手架文件夹。

打开启动器

项目引导有它自己的窗口。从你文件夹旁边的 +(新建文件夹)按钮打开它——即下拉菜单中的项目引导项(那个 🚀 火箭)——或者从对话侧边栏的右键菜单打开。它打开时带有两个标签页,shadcnHyperFrames;选择你要开启的项目类型。

设计一个 shadcn/ui 应用

shadcn 标签页是一个分栏视图:左侧是配置器,右侧是一个实时预览,你一改动任何东西它就会重新渲染。你正在设计一个 shadcn/ui 主题,预览会展示它应用到一个真实组件画廊上的效果。

配置器分为四个部分:

部分你要设置什么
风格基础风格——Nova、Vega、Maia、Lyra、Mira
颜色基础色(Neutral、Stone、Zinc……),从约 25 种色相中选取的强调主题色和图表色
排版从二十多个字体系列(Inter、Geist、JetBrains Mono、Playfair……)中选取字体标题字体,外加图标库——Lucide、Hugeicons、Tabler、Phosphor、Remix
界面圆角半径,以及菜单强调色 / 菜单颜色

每一个选择都被打包进一段紧凑的预设代码(shadcn 的 v2 格式)——正是这同一段代码既驱动预览,被传递给脚手架 CLI,因此你所见即你所搭建。

当它看起来合适时,点击创建项目。一个对话框会收集必要信息:

  • 项目名称保存目录(浏览到它)。
  • 包管理器——pnpm、npm、yarn 或 bun。Codeg 会实时检查它,并用 ✓ 显示版本,若缺失则显示 ✗。
  • 高级选项——框架模板(Next.js、Vite、TanStack Start、React Router、Laravel、Astro)、基础组件库,以及一个用于从右到左语言的 RTL 开关。

然后 Codeg 会通过你选定的运行器(pnpm dlxyarn dlxbunxnpx),带上你的名称、框架和预设代码运行 shadcn@latest init

脚手架搭建一个 HyperFrames 视频项目

HyperFrames 标签页会脚手架搭建一个 HTML 转视频项目——你把帧编写为 HTML 并将它们渲染成视频。正如该标签页所说:搭建好项目,随后你的工作区智能体就能编写并渲染它。

你需要设置一个项目名称、一个保存目录、一个包管理器(实时检测,同上),以及一个分辨率

分辨率尺寸
模板默认保留模板自身的尺寸
横向 / 纵向 / 方形1920×1080 · 1080×1920 · 1080×1080
横向 4K / 纵向 4K3840×2160 · 2160×3840

Codeg 会通过 hyperframes@latest init 从离线的 blank 示例进行脚手架搭建,然后把文件夹交给你的工作区。

还有一个可选的、默认折叠的智能体技能卡片。当智能体了解 HyperFrames 时,编写和渲染视频会更容易,因此这一步会为支持它们的智能体——Claude Code、Codex、OpenCode、Gemini、OpenClaw 和 Cline——全局安装 HyperFrames 创作技能(以符号链接方式)。每个智能体都会显示一个已安装徽标,并带有一个重新检查按钮和一个安装 / 更新按钮;重新运行是幂等的,因此它兼作更新器。(脚手架步骤本身并不安装这些——这正是为什么它在这里是一个单独的、需刻意执行的操作。)

这些技能来自项目本身,而非精选技能包

HyperFrames 技能是这个视频工具包自己的智能体技能,在此被安装到你智能体的共享技能存储中。这与你在设置中管理的精选技能包(Experts、Science、Office)不同——理念相同,来源不同。

从脚手架到工作区

两个标签页共享同样的防护措施和同样的圆满结局:

  • 包管理器必须存在。 所选的运行器正是执行脚手架的工具,因此 Codeg 会以检测到它为前提才允许创建。Node/npx 也必须已安装——缺失的运行时会以一个清晰的创建时错误呈现出来。
  • 名称是一个单一的安全文件夹名。 不能有路径分隔符、..、绝对路径或开头的 -——名称会被交给一个 CLI,因此 Codeg 会对它进行校验(这条路径通过服务器 API 也可达,而不只是桌面选择器)。
  • 目标必须为空。 Codeg 不会在一个已经有文件的文件夹上进行脚手架搭建。
  • 成功后,项目会自行打开。 Codeg 会注册这个新文件夹并将它作为一个草稿标签页在你的工作区中打开,然后关闭启动器——于是你降落在项目里,智能体已就位,无需手动执行“打开文件夹”这一步。

它在服务器上同样有效

脚手架搭建在持有工作区的那台主机上运行。绑定到一个远程服务器?目录浏览器浏览的是服务器的文件系统,项目也在那里创建——启动器只是从你的浏览器驱动它。

须知

  • 它是“第零天”的伙伴。 Codeg 中的其他一切都假定已有一个仓库;项目引导则创建一个——一个带样式的前端或一个视频项目——并把你放进去。
  • 预设是可移植的。 一个 shadcn 项目会脚手架搭建成一个标准仓库,其中已烘焙进你的主题;此后它身上没有任何 Codeg 专有的东西。
  • 技能安装是按智能体进行且幂等的。 为你实际会用来构建视频的智能体安装;随时重新运行即可更新它们。

后续步骤

  • 工作区——脚手架项目落地的地方,也是你将构建它的地方。
  • 使用智能体——挑选并登录在项目打开后接手的智能体。
  • 技能——管理智能体技能,包括 HyperFrames 技能安装进的那个共享存储。
  • Office 文档 · 科学研究——其他领域工作流。

基于 Apache-2.0 许可证发布。