ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

Codeg Project Boot:可视化脚手架搭建新项目,实时预览后直接打开工作区

Codeg Project Boot:可视化脚手架搭建新项目,实时预览后直接打开工作区 Codeg Project Boot可视化脚手架搭建新项目实时预览后直接打开工作区【免费下载链接】codegCollaborative multi-agent AI coding workspace: aggregate sessions from Claude Code, Codex, OpenCode, Pi, Grok Build, etc. Desktop app, self-hosted server, or Docker.项目地址: https://gitcode.com/gh_mirrors/co/codegCodeg Project Boot项目启动器是 Codeg 多智能体 AI 编码工作区内置的可视化脚手架工具在左侧面板用下拉框选择设计风格、配色与字体右侧实时预览主题效果确认后一键创建项目并自动打开工作区全程无需手写脚手架命令。 什么是 Project Boot 项目启动器传统流程是打开终端 → 敲脚手架命令 → 手动改主题变量 → 刷新页面看效果。Project Boot 把这条链路压缩成了所见即所得的三步选风格 → 看预览 → 创建项目。页面入口在 src/app/project-boot/page.tsx整个工作区由两个标签页组成见 src/components/project-boot/project-boot-workspace.tsx标签页用途适用场景shadcn可视化搭建组件库风格的 Web 项目管理后台、SaaS 站点、内部工具HyperFrames脚手架 HTML 转视频项目智能体自动编写并渲染视频内容界面布局非常直观shadcn 标签页左侧配置面板 右侧实时预览中间的分隔条还可以拖动调整宽度HyperFrames 标签页单栏表单填写后点击底部创建按钮即可。 shadcn 标签页可视化选择设计风格打开项目启动器后默认进入 shadcn 标签页。左侧面板shadcn-config-panel.tsx把常用主题参数分成了四组分组可选项风格nova / vega / maia / lyra / mira 五种风格 模板配色基础颜色neutral、stone、zinc…、主题色、图表色共 20 色板排版20 多种正文字体 标题字体界面图标库Lucide、Tabler、Phosphor 等、圆角、菜单强调与颜色不用记 CLI 参数每一个下拉框都是一项配置。实时预览主题效果右侧是一个内嵌预览窗口shadcn-preview.tsx加载 shadcn 官方主题预览页。它有两个贴心的细节防抖刷新连续调整多个下拉框时等 500 毫秒不再变动才刷新一次预览不会闪个不停兜底遮罩即使网络较慢15 秒后也会自动收起加载动画。所有选择会被编码成一个紧凑的preset 码constants.ts创建项目时原样传给 CLI——你预览到的就是脚手架出来的。⚡ 一键创建项目并自动打开工作区满意后点击面板底部的创建项目弹出创建对话框create-project-dialog.tsx项目名称默认my-app保存目录点浏览选择文件夹下方会实时拼出最终项目路径包管理器pnpm / npm / yarn / bun 四选一切换时自动检测本机是否安装并显示版本号——未安装会直接置灰创建按钮避免创建到一半才报错高级选项可折叠框架模板Next.js、Vite、TanStack Start、React Router、Laravel、Astro、基础库Radix / Base、RTL 布局开关。点击创建后Codeg 调用后端执行脚手架命令成功后会自动把项目文件夹交给工作区由多智能体会话接手后续开发然后关闭启动器窗口。 HyperFrames 标签页视频项目脚手架切换到 HyperFrames 标签页hyperframes-launcher.tsx可以脚手架一个HTML 转视频项目填项目名称、保存目录、选择包管理器同样自动检测安装状态按用途选择分辨率展开智能体技能卡片可为多个 Agent 全局安装 HyperFrames 技能软链接让它们会编写并渲染视频已安装的 Agent 会显示已安装徽章。创建完成后项目同样直接进入工作区智能体即可开始编写和渲染视频内容。 相关源码与文件模块路径页面入口src/app/project-boot/page.tsx工作区布局src/components/project-boot/project-boot-workspace.tsxshadcn 启动器src/components/project-boot/shadcn/shadcn-launcher.tsx配置面板src/components/project-boot/shadcn/shadcn-config-panel.tsx实时预览src/components/project-boot/shadcn/shadcn-preview.tsx创建对话框src/components/project-boot/shadcn/create-project-dialog.tsxHyperFrames 启动器src/components/project-boot/hyperframes/hyperframes-launcher.tsx中文文案src/i18n/messages/zh-CN.json本地克隆仓库可用git clone https://gitcode.com/gh_mirrors/co/codeg✅ 小结可视化配置风格、配色、字体、图标库全部下拉选择告别手写 CLI 参数实时预览所见即所得preset 码保证预览与产出一致一键落地自动检测包管理器环境创建完成直接打开多智能体工作区让 AI 编码智能体接着干。如果你想在开始写第一行业务代码之前就把界面定妆好Codeg Project Boot 是目前体验最顺的可视化脚手架入口之一。【免费下载链接】codegCollaborative multi-agent AI coding workspace: aggregate sessions from Claude Code, Codex, OpenCode, Pi, Grok Build, etc. Desktop app, self-hosted server, or Docker.项目地址: https://gitcode.com/gh_mirrors/co/codeg创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表