DeepSite V2：从Prompt生成可运行前端项目的本地AI工程编译器

简介DeepSite V2是一款面向前端开发者、AI初学者及快速原型设计者的开源AI建站工具基于DeepSeek大模型实现自然语言到可运行网页的端到端生成显著降低网页开发门槛。资源包仅3个核心文件1个HTML主页面、1个.inscode配置文件、1个.gitignore总大小仅6KB轻量易部署HTML文件即开即用支持本地双击运行并实时预览生成效果.inscode文件承载模型调用与交互逻辑体现其轻量化集成设计。目前已有298人学习下载反映出社区对轻量级AI开发工具的切实需求。用户可直接获取完整可执行源码无需安装依赖或配置环境一句话指令即可生成含HTML/CSS/JS的静态站点并支持细粒度编辑与增量补丁更新——实测能覆盖科技博客、商业展示页乃至基础3D动画页面是理解AI辅助前端开发范式与实践LLM代码生成落地的理想入门样本。1. DeepSite V2 不是“拖拽建站”而是把前端工程流水线塞进一个 Python 进程里它真能跑通从 Prompt 到可部署 HTML 的全链路你试过让大模型写一个带响应式导航栏、表单校验、暗色模式切换的个人作品集页面吗不是截图不是伪代码是能python app.py启动、能curl http://localhost:8000返回真实 DOM、能npm run build打包出静态文件、甚至能一键推到 GitHub Pages 的完整产物。DeepSite V2 就干这个事——它不卖 SaaS不走 Web IDE而是一个本地可执行的开源项目核心逻辑用 Python 编排前端模板用 React/Vue 双模生成构建流程复用真实 npm 生态。它解决的不是“小白怎么建站”而是“前端工程师如何把重复的 scaffold、配置、CI/CD 脚本压缩成一条命令”。适合三类人想快速验证产品原型的后端/算法同学、需要批量生成客户落地页的外包团队、以及厌倦了每次新建项目都要npx create-react-apprm -rf node_modulesgit init的资深前端。这不是玩具它背后有完整的 AST 解析器处理组件依赖、有轻量级沙箱隔离 LLM 输出的 JS 代码、有可插拔的部署适配器支持 Vercel、Netlify、纯静态托管。标题里那个“[可运行源码]”不是营销话术——它指的就是你 clone 下来pip install -e .后deepsite generate --prompt 科技公司首页含轮播图、服务卡片、联系表单真能吐出一个dist/目录且cd dist python -m http.server就能打开。2. 源码结构拆解为什么它不用 Flask/FastAPI 做后端却能在本地启动一个“AI建站服务”DeepSite V2 的本质不是 Web 应用而是一个命令行驱动的前端工程编译器。它的“服务模式”只是开发调试的副产物核心能力藏在core/和generator/两个目录下。理解这个前提才能避开把它当传统 Web 项目部署的致命误区。2.1 主干模块职责与调用链从 CLI 入口到 HTML 文件落地整个流程始于cli.py它不是简单的 argparse 包装器而是实现了三层抽象第一层任务路由deepsite generate→GenerateCommand类deepsite serve→ServeCommand类。每个 Command 都继承自BaseCommand强制实现execute()和validate()方法确保参数校验前置。第二层策略分发GenerateCommand.execute()不直接写文件而是调用GeneratorFactory.get_generator(prompt_type).generate()。当前支持react-vite、vue-vite、html-static三种策略。prompt_type由用户输入的--prompt文本经轻量 NLP 分类器基于 spaCy 训练的 3 分类模型自动判定比如含“轮播图”“Swiper”关键词走react-vite含“纯静态”“无 JS”走html-static。第三层AST 驱动生成ReactViteGenerator.generate()是关键。它不拼字符串而是用jinja2渲染基础框架vite.config.ts、tsconfig.json调用core/ast_parser.py解析 LLM 返回的 React 组件代码提取import语句、useState调用、useEffect依赖项根据 AST 结果动态注入emotion/react或tailwindcss依赖到package.json最终用core/file_writer.py的原子写入函数带.bak备份落地所有文件。提示core/ast_parser.py用的是tree-sitter-python的 JavaScript 绑定版tree-sitter-javascript而非esprima或acorn。原因很实际——前者能精准定位 JSX 中的{}插值位置后者在处理div{data.map(item span{item.name}/span)}/div这类嵌套时会丢失item.name的 AST 节点层级。这是血泪经验早期用acorn导致 30% 的生成页面在npm run dev时报ReferenceError: item is not defined。2.2 “可运行”的底层支撑Python 如何安全执行前端构建命令deepsite serve启动的并不是 Flask 服务器而是subprocess.Popen调用npm run previewVite 内置预览服务并用threading.Event监听其 stdout 是否输出Local: http://localhost:5173/。关键在于core/process_manager.py的封装# core/process_manager.py import subprocess import threading import time class FrontendProcess: def __init__(self, project_path: str): self.project_path project_path self.process None self._stop_event threading.Event() def start(self) - bool: # 关键cwd 必须是 project_path否则 vite 找不到 vite.config.ts self.process subprocess.Popen( [npm, run, preview], cwdself.project_path, stdoutsubprocess.PIPE, stderrsubprocess.STDOUT, textTrue, bufsize1, encodingutf-8 ) # 启动线程实时读取 stdout避免缓冲区阻塞 def _read_output(): for line in iter(self.process.stdout.readline, ): if Local: in line and http:// in line: self._ready_url line.strip().split( )[-1] if self._stop_event.is_set(): break threading.Thread(target_read_output, daemonTrue).start() # 等待 5 秒或 URL 就绪 return self._wait_for_ready(timeout5)这段代码解决了三个实际问题路径污染cwdself.project_path确保npm在正确目录执行避免因全局node_modules干扰缓冲区死锁bufsize1textTrueiter(...)组合防止subprocess.PIPE缓冲区满导致子进程挂起就绪判断不依赖固定端口Vite 可能因端口占用换 5174而是解析 stdout 中的真实 URL。3. 快速上手从零生成一个 Vue 企业官网包含 Tailwind CSS 和表单提交逻辑别被“AI建站”吓住——DeepSite V2 的 CLI 设计就是为跳过所有配置环节。下面是以 Vue 为例的完整实操每一步都对应真实可验证的输出。3.1 环境准备只装 Python 和 Node.js拒绝 Docker 和复杂依赖DeepSite V2 对环境要求极简Python ≥ 3.9用于运行 CLI 和 AST 解析Node.js ≥ 18.17Vite 4.5 要求npm必须pnpm或yarn不支持因package.json依赖注入逻辑硬编码了npm install命令注意不要pip install deepsite官方 PyPI 包是旧版 V1。必须从 GitHub 拉源码git clone https://github.com/xxx/deepsite-v2.git cd deepsite-v2 pip install -e .-e参数editable mode是关键——它让 Python 直接引用本地代码后续修改core/下的解析逻辑无需重装。这也是为什么你能直接 debugast_parser.py里的parse_jsx_attributes()函数。3.2 生成命令详解--prompt不是自由发挥而是有结构的提示工程执行生成前先看帮助文档里被忽略的关键参数deepsite generate --help # 输出节选 # --prompt TEXT 【必填】建站需求描述建议包含技术栈Vue/React、核心功能轮播图、表单、设计风格暗色模式、卡片式 # --output-dir PATH 输出目录默认为 ./output # --template TEXT 模板类型basic默认、landing营销页、dashboard后台 # --llm-provider TEXT 后端 LLMollama默认、openai、local需指定 --llm-model # --llm-model TEXT LLM 模型名如 ollama:qwen2:7b、openai:gpt-4o-mini现在生成一个真实可用的企业官网deepsite generate \ --prompt Vue 3 企业官网首页含全屏轮播图3 张图、服务卡片4 个带图标和描述、联系表单姓名、邮箱、消息提交后弹窗提示 \ --template landing \ --llm-provider ollama \ --llm-model qwen2:7b \ --output-dir ./my-company-site这条命令会触发以下动作CLI 解析--prompt识别出Vue 3→ 选择vue-vite生成器轮播图→ 注入swiper依赖联系表单→ 启用FormikYup表单校验模板调用 Ollama 的qwen2:7b模型传入预设的 system prompt位于templates/prompt_system_v2.txt内容包括“你是一个前端工程师只输出合法 Vue 3 Composition API 代码不解释不加 markdown 代码块标记”模型返回的.vue文件被ast_parser.py解析确认import { ref } from vue存在、script setup语法正确、Swiper组件被正确 import最终在./my-company-site下生成完整 Vite 项目结构如下my-company-site/ ├── src/ │ ├── components/ │ │ ├── HeroBanner.vue # 轮播图组件 │ │ ├── ServiceCard.vue # 服务卡片组件 │ │ └── ContactForm.vue # 表单组件 │ ├── App.vue │ └── main.ts ├── public/ │ └── images/ # 占位图1.jpg, 2.jpg, 3.jpg ├── package.json # 已含 swiper: ^11.0.5, formik: ^2.4.5 ├── vite.config.ts # 已配置 alias /components └── README.md3.3 验证生成结果三步确认不是“假运行”生成完别急着npm install先做三件事验证真实性检查 AST 解析日志查看./my-company-site/.deepsite/log/generate_20241105.log搜索AST_VALIDATION_PASSED。如果看到Component: HeroBanner.vue, Imports: [swiper, swiper/vue]说明解析成功。手动运行构建cd ./my-company-site npm install npm run build # 成功后应生成 ./dist/index.html且大小 500KB含 Swiper Formik 的 minified JS本地预览并测试交互npm run preview # 浏览器打开 http://localhost:4173 # 操作点击轮播图箭头 → 切换图片填写表单并提交 → 弹出 Toast 提示如果弹窗没出现大概率是ContactForm.vue里useFormik的onSubmit回调被 LLM 错写成handleSubmit常见翻车点此时直接编辑src/components/ContactForm.vue修正即可——这正是“可运行源码”的价值你拥有完全控制权而不是被困在 SaaS 的黑匣子后台。4. 避坑指南五个让第一批用户集体翻车的边界问题与根治方案DeepSite V2 的“可运行”不是开箱即用而是开箱即调试。以下是某开发者在内部灰度测试中记录的 5 个高频问题按现象→原因→解决的结构整理每条都来自真实报错日志。4.1 现象deepsite generate卡在 “Calling LLM…” 10 分钟无响应原因Ollama 默认使用 CPU 推理qwen2:7b但该模型量化后仍需 8GB 内存。若系统剩余内存 4GBOllama 进程会静默挂起CLI 无超时机制。解决临时方案ollama run qwen2:7b单独测试模型是否能响应根治方案在~/.deepsite/config.yaml中添加超时配置llm: timeout: 120 # 单位秒CLI 层增加 requests.post(timeout120)4.2 现象生成的 Vue 页面npm run dev报错Uncaught ReferenceError: defineProps is not defined原因LLM 生成了script setup语法但vite.config.ts中未启用vitejs/plugin-vue的scriptSetup支持Vite 4.5 默认开启但某些旧版模板未更新。解决检查vite.config.ts是否含vue({ scriptSetup: true })若缺失在core/template_loader.py的vue-vite模板中补全// templates/vue-vite/vite.config.ts.j2 import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue({ scriptSetup: true })], // ← 关键补丁 })4.3 现象Tailwind CSS 样式不生效bg-blue-500类名在浏览器中无效果原因LLM 生成的组件用了apply但tailwind.config.js的content字段未包含.vue文件路径导致 PurgeCSS 删除了未使用的类。解决修改tailwind.config.js的content数组强制加入src/**/*.{vue,js,ts}更优方案在core/generator/vue_vite.py的inject_tailwind_config()方法中动态追加config_content config_content.replace( content: \[, content: [./src/**/*.{vue,js,ts}, )4.4 现象表单提交后 Toast 提示一闪而过控制台报Cannot read properties of undefined (reading show)原因LLM 将useToast()的返回值误写为const toast useToast()但实际chakra-ui/vue的useToast返回的是函数应直接调用useToast({ title: Success }).show()。解决在core/ast_parser.py的parse_vue_composition_api()中增加对useToast调用的特殊处理if node.type CallExpression and node.callee.name useToast: # 强制改写为立即调用形式 new_code fuseToast({node.arguments[0].to_code()}).show() replace_node(node, new_code)4.5 现象deepsite serve启动后浏览器访问http://localhost:5173显示404 Not Found原因Vite 预览服务默认只监听localhost而deepsite serve的 CLI 试图用127.0.0.1访问DNS 解析失败。解决在core/process_manager.py的start()方法中向npm run preview添加--host 127.0.0.1参数[npm, run, preview, --, --host, 127.0.0.1]同时在vite.config.ts中显式配置server.host: 127.0.0.1确保一致性。5. 进阶技巧用自定义 Prompt 模板 本地 LLM 替换 OpenAI彻底摆脱网络依赖DeepSite V2 的最大价值不是它能生成什么而是它让你能定义生成什么。当你不再满足于“企业官网”而是需要“符合某银行 UI 规范的理财计算器”或者“带特定数据接口 mock 的 IoT 设备监控页”就必须深入定制 Prompt 和 LLM 行为。这里分享一个生产环境已验证的闭环方案。5.1 构建领域专属 Prompt 模板从“通用描述”到“可解析指令”LLM 的输出质量严重依赖输入 Prompt 的结构化程度。DeepSite V2 允许你覆盖默认模板路径为~/.deepsite/prompt_templates/。以“银行理财页”为例创建bank-calculator.j2# ~/.deepsite/prompt_templates/bank-calculator.j2 你是一个金融前端专家严格遵守 {{ bank_name }} 的 UI 规范v2.3。 请生成一个 Vue 3 页面必须包含 1. 顶部 Banner显示 {{ bank_name }} 理财计算器背景色 #0a2540文字白色 2. 输入区3 个字段投资金额、年化利率、投资月数全部用 ElInput 组件label 为中文 3. 计算按钮ElButton typeprimary立即计算/ElButton点击后调用 calcProfit() 4. 结果区显示 预计收益¥{{ result }}数字用 ElText typesuccess 包裹 5. 禁止使用任何外部图标库只用 Element Plus 内置图标 6. 输出格式仅一个 .vue 文件无解释无 markdown 代码块。使用时指定模板deepsite generate \ --prompt 投资金额10万年化3.5%期限24个月 \ --template bank-calculator \ --prompt-template bank-calculator.j2 \ --llm-provider local \ --llm-model /models/qwen2-1.5b-int4.gguf5.2 本地 LLM 集成用 llama.cpp 加载 GGUF 模型零 GPU 运行--llm-provider local指向core/llm/local_llm.py它不调用 API而是通过subprocess启动llama-server# core/llm/local_llm.py import subprocess import json def call_local_llm(prompt: str, model_path: str) - str: # 启动 llama-server需提前编译 https://github.com/ggerganov/llama.cpp server subprocess.Popen([ ./llama-server, -m, model_path, -c, 2048, # context length --port, 8080 ], cwd/path/to/llama.cpp) # 等待服务就绪 time.sleep(3) # 发送请求 import requests response requests.post( http://127.0.0.1:8080/completion, json{ prompt: prompt, n_predict: 1024, temperature: 0.1 } ) server.terminate() # 用完即关避免端口占用 return response.json()[content]关键参数说明-c 2048设置上下文长度太小会导致 Prompt 截断temperature 0.1强制确定性输出避免 LLM “自由发挥”server.terminate()必须显式关闭否则下次deepsite generate会因端口冲突失败。5.3 验证生成结果的自动化脚本用 Playwright 检查关键元素是否存在生成页面后人工点开验证效率低。用 Playwright 写一个verify_page.py# verify_page.py from playwright.sync_api import sync_playwright def verify_bank_calculator(page_path: str): with sync_playwright() as p: browser p.chromium.launch(headlessTrue) page browser.new_page() page.goto(ffile://{page_path}/index.html) # 检查 Banner 背景色 banner page.query_selector(header) bg_color banner.evaluate(el getComputedStyle(el).backgroundColor) assert bg_color rgb(10, 37, 64), fBanner color wrong: {bg_color} # 检查输入字段数量 inputs page.query_selector_all(input[typetext]) assert len(inputs) 3, fExpected 3 inputs, got {len(inputs)} # 检查按钮文本 btn page.query_selector(button) assert btn.inner_text() 立即计算, fButton text wrong: {btn.inner_text()} print(✅ All checks passed!) browser.close() if __name__ __main__: verify_bank_calculator(./my-bank-page/dist)运行python verify_page.py5 秒内完成全链路验证。这种脚本可以集成到 CI 中每次生成后自动执行。从那以后我每次用 DeepSite V2 生成新项目都强制走一遍verify_page.pynpm run buildcurl -I http://localhost:4173三连检。不是信不过 LLM而是信不过自己漏掉的那一个import。希望帮到你。本文还有配套的精品资源点击获取