1. 摘要
用 Trae SOLO 从零搭建了一个 CineCraft 智能视听策划引擎，帮助影视创作者将模糊的画面创意转化为专业的摄影机运动指令和视觉分镜。支持 6 种摄影机运动方式、6 种美学风格匹配，一键生成可直接用于 AI 视频工具的专业英文提示词。无需后端部署，直接部署到 GitHub Pages 即可访问。
体验地址： https://jaxz714.github.io/cinercraft/
2. 背景
我是一名对影视制作和 AI 工具都感兴趣的内容创作者。平时在策划视频内容时，经常遇到这样的问题：
-
脑子里有一个画面感，但不知道怎么用专业的摄影机语言描述
-
想用 AI 视频工具（如 Runway、Pika）生成画面，但写不出高质量的英文提示词
-
分镜策划散落在各种文档里，没有统一的管理工具
原本需要翻阅大量资料、反复修改才能产出的分镜方案，现在希望通过 AI 工具快速生成，并且能直接输出专业级提示词。
3. 实践过程
任务拆解
我把整个项目拆成了 5 个模块：
-
登录认证系统 —— 支持邮箱注册 + 游客体验模式
-
项目管理看板 —— 卡片式项目列表，统计面板
-
分镜工作区 —— 左侧参数配置，右侧 AI 生成结果
-
提示词引擎 —— 将中文参数映射为专业英文 cinematography 术语
-
GitHub Pages 部署 —— 零成本上线，让更多人能体验
使用 SOLO 的关键能力
-
Agent 模式自主编码：我负责描述需求和 UI 设计意图，SOLO 负责具体的 React 组件实现、状态管理、路由配置
-
上下文保持：在多轮对话中持续迭代，从登录页到仪表盘再到分镜工作区，SOLO 始终记得项目架构和样式规范
-
错误自动修复：构建报错、类型错误、部署白屏等问题，SOLO 能自主分析并修复
关键 Prompt 示例
“我要做一个智能视听策划引擎的登录页，采用左右分栏布局。左侧是品牌展示区，深色背景，有动态粒子效果；右侧是登录表单，支持登录和注册切换。整体风格要电影感、科技感，主色调用 cyan 和深色。”
“分镜工作区需要三栏布局：左侧是参数面板（场景描述、摄影机运动、美学风格、主体标签），中间是生成按钮，右侧是结果展示面板。点击生成后要有打字机效果展示 AI 生成的专业提示词。”
踩过的坑
-
GitHub Pages 白屏：最初部署后页面白屏，排查发现是
vite.config.ts中的base路径拼写错误（/cinecraft/少了一个 ‘r’），且 React Router 没有设置basename。修复后正常访问。 -
Demo 模式设计：一开始要求用户配置 Supabase 才能登录，门槛太高。后来让 SOLO 加了 Demo 模式，无配置也能直接体验。
-
构建产物路径问题：gh-pages 分支的文件必须放在根目录，不能嵌套在
dist/文件夹里。
4. 成果展示
在线体验： https://jaxz714.github.io/cinercraft/
核心功能演示：
-
登录页：电影感左右分栏，支持邮箱登录和游客模式
-
仪表盘：项目卡片列表、统计面板、新建项目抽屉
-
分镜工作区：
-
场景描述输入
-
6 种摄影机运动：推拉摇移、FPV 穿梭航拍、大范围延时、环绕飞行、跟踪跟拍、升降镜头
-
6 种美学风格：赛博蜀都美学、冷峻工业风、梦幻柔焦、纪实粗粝、电影胶片、未来科技
-
主体标签系统
-
AI 生成专业英文提示词（带打字机效果）
-
导演分镜备注
-
技术栈： React 18 + Vite + TypeScript + Tailwind CSS + Zustand + React Router + Supabase（可选）
GitHub 仓库： https://github.com/Jaxz714/cinercraft
5. 效果与总结
提效效果：
-
原本手动查阅资料、撰写分镜方案需要 2-3 小时，现在输入参数后 秒级生成 专业提示词
-
从 0 到完整可访问的 Web 应用，整个开发过程约 3 小时，其中 80% 的代码由 SOLO 自动生成
SOLO 在流程中的作用：
-
架构设计和技术选型（React + Vite + Tailwind）
-
所有 UI 组件的编码实现（登录页、仪表盘、分镜工作区）
-
状态管理和路由配置
-
构建、部署、排错全流程自动化
可复用的方法：
-
先 PRD 后开发：先用自然语言写清楚产品需求，再让 SOLO 按需求实现
-
模块化拆解：把大项目拆成小模块，逐个实现，降低复杂度
-
Demo 模式优先：先让应用能跑起来、能体验，再逐步完善后端功能
-
GitHub Pages 零成本部署：适合快速验证想法，让更多人能访问
一句话总结： 用 Trae SOLO，3 小时把"脑子里的画面"变成了"人人都能用的 AI 分镜工具"。