---

📖 项目背景

这个项目的开始并没有什么高大上的原因，不是因为什么梦想，也不是因为什么市面上没有这种工具。
开发的源头永远只有一个理由，那就是热爱！！你可以是三分钟的热度，但是这样的三分钟多了，固吾虽愚，卒有所获。
最初有这个念想是因为我曾经也写过一篇小说，并在番茄上面发表了，只有亲自去尝试才会发现，这其实很难，我也试过量子探险这种辅助小说的工具，但是终究吸引我们的永远都是真情实感，小说或者漫画更多的是提供我们一个想象的平台，一个放松的平台。
直到番茄出了一个AI生图的插件，我们可以在阅读的时候，让冰冷无声的话语转成生动可视的画面，我想这种改变是巨大的，他能够贴近我们的想象，让夜晚疲惫的灵魂有个逃离的出口，它编织了一个我们愿意稍微休憩的世界。

后来，我受到了黄啊码（博主）一个叫做码上漫画的启发，并在了解到智谱GLM-4.6的强大能力后，决定结合Claude Code的开发效率，打造一个故事宇宙AI创作平台。这个平台不仅要解决我自己的执念，更要让每个创作者都能享受AI赋能的创作体验。
或许它并不完美，也并不能让你眼前一亮，但是每一次尝试都是一种体验，那么就跟着我一起体验这场可能有点久的“不完美”吧！

---

🎓 相关名词

一、什么是GLM-4.6?
GLM-4.6 是智谱最新的旗舰模型，总参数量 355B，激活参数 32B。GLM-4.6 核心能力上均完成了对 GLM-4.5 的超越，它支持200K的上下文，适应更长的代码和智能体任务。有128K的最大输出Tokens，推理能力提升，并支持在推理过程中调用工具。支持多语言的处理任务以及更偏向人类喜好的文风。其中的pro版本支持图像理解和联网搜索的MCP调用，在智能体框架的表现更优。

这个是可以参考的官方介绍文档：https://docs.bigmodel.cn/cn/guide/models/text/glm-4.6
二、什么是Claude Code?
Claude Code 是由 Anthropic 开发的 AI 编程助手，旨在通过自然语言交互帮助开发者更高效地编写代码。它是一个基于终端的工具，支持文件管理、代码分析和多模型支持等功能。Claude Code 还能够理解项目的整体结构，并与开发工作流程完全集成。

这个是可以参考的官方介绍文档：https://docs.claude.com/zh-CN/docs/claude-code/overview
本人推荐的学习网址：https://www.yuque.com/xiaoyou-nwu1w/ooi105 ，里面有很详细的实战指导。
当然这些只是可以给大家一个初步的了解和学习建议，这篇文章大家只需要无脑跟进即可。
------------------------------------------------------------>（脑子寄存处）<-----------------------------------------------------------------------------------------

---

🎯 开始前的提问（Q&A）(心急的朋友可以直接跳到实战部分）

问题1：如何快速搭建全栈项目？

传统开发需要：

• 手动创建前后端项目结构
• 配置各种依赖和环境
• 编写大量重复的CRUD代码
• 调试API接口和前端交互

这些基础工作往往耗费数天时间。

问题2：如何高效调用多个AI模型？

本项目需要集成：

• GLM-4.6（文本大模型）
• GLM-4.5V（图片/视频理解）
• CogView-4（图像生成）
• CogVideoX-3（视频生成）
• search-pro（联网搜索）

（感兴趣可以接入Content7、DeepWiki MCP 增强效果）
每个模型的API调用方式、参数配置都不同，容易出错。

问题3：如何设计高质量的Prompt？

AI生成质量高度依赖Prompt设计：

• 小说大纲需要结构化输出
• 角色生成需要多维度信息
• 分镜脚本需要专业术语

缺乏经验的开发者很难写出高质量Prompt。

---

💡 解决方案：Claude Code + GLM-4.6 双剑合璧

核心思路

我采用了"AI驱动开发"的模式：

1. Claude Code 负责代码生成和项目搭建
2. GLM-4.6 负责内容创作和智能分析
3. 两者通过精心设计的Prompt协同工作

技术架构

┌─────────────────────────────────────────┐
│          前端 (Next.js 14)              │
│  小说 | 角色 | 剧本 | 分镜 | 搜索        │
└──────────────┬──────────────────────────┘
               │ HTTP API
┌──────────────┴──────────────────────────┐
│        后端 (Python FastAPI)            │
│  ┌──────────────────────────────────┐   │
│  │   智谱 API 服务层                 │   │
│  │  - GLM-4.6 (文本生成)             │   │
│  │  - GLM-4.5V (视觉理解)            │   │
│  │  - CogView-4 (图像生成)		      │   │
│  │  - CogVideoX-3 (视频生成)	      │   │
│  │  - search-pro (联网搜索)          │   │
│  └──────────────────────────────────┘   │
└─────────────────────────────────────────┘

---

🚀 实战：0-1保姆级教程（无脑跟进）(核心）

Step 1：环境搭建（参考链接：https://www.yuque.com/xiaoyou-nwu1w/ooi105/ezbqz1el31ekgt3k）

1.1 打开 GLM-4.6 套餐（https://www.bigmodel.cn/glm-coding?ic=BAI3RQOQP7）页面，注册并购买套餐。

新人注册是会有送的资源包的，点击个人用户，点击财务：

1.2 前往 API Key 管理页面，新建一个 API Key 并保存备用。

注意复制这里的API key，后面有大用。

1.3 下载 Node.js和 Git

Node.js：https://nodejs.org/en/download

Git：https://git-scm.com/install/windows

接下来无脑点击next就可以了。

1.4 安装Claude Code

在终端（windows+r）执行：

npm install -g @anthropic-ai/claude-code

验证安装结果：

# 如果能正常返回版本号，则代表安装无误
claude --version

终端运行（Windows+r），输入CMD,输入claude

会发现以上错误，我们只需要打开主文件夹，搜索claude.json文件,在最后添加（ “hasCompletedOnboarding”: true），再次运行即可。

{
  "installMethod": "unknown",
  "autoUpdates": true,
  "firstStartTime": "2025-07-14T06:11:03.877Z",
  "userID": "f5afdd05117c901a4a5a0761d08230bfcbb76f9fd380ff7bc144cc12c52e55aa",
  "projects": {
    "/home/nassi": {
      "allowedTools": [],
      "history": [],
      "mcpContextUris": [],
      "mcpServers": {},
      "enabledMcpjsonServers": [],
      "disabledMcpjsonServers": [],
      "hasTrustDialogAccepted": false,
      "projectOnboardingSeenCount": 0,
      "hasClaudeMdExternalIncludesApproved": false,
      "hasClaudeMdExternalIncludesWarningShown": false
    }
  },  //这里要加逗号，注意英文的
  "hasCompletedOnboarding": true,  // 新增字段放在这里，注意位置
}

1.5 配置 Claude Code 使用 GLM-4.6

接下来我们要给Claude Code换一个大脑，点击我的电脑，找到C盘，在用户位置，找到个人用户，找到.claude文件夹，进去找到settings.json文件，填入以下内容。

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "your Zhipu API key",
    "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5-air",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.6",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-4.6"
  }
}

注意这里的 "your Zhipu API key"要换成我之间说要复制的那个。


到这，请你夸一夸你自己，已经完成任务的一大半了。

1.6 配置 MCP（pro用户可看，普通可以直接调用API,有新人注册的额度）

终端运行（Windows+r），输入CMD,分别复制以下几条命令配置MCP，注意替换key。
视频理解：

claude mcp add -s user zai-mcp-server --env Z_AI_API_KEY=your_api_key -- npx -y @z_ai/mcp-server

联网搜索：

claude mcp add -s user -t http web-search-prime https://open.bigmodel.cn/api/mcp/web_search_prime/mcp --header "Authorization: Bearer your_api_key"

Context7（文本增强，可选，这个KEY需要去 Context7 官网自己申请下，免费）：

claude mcp add -s user --transport http context7 https://mcp.context7.com/mcp --header "CONTEXT7_API_KEY: your_api_key"

DeepWiki：

claude mcp add -s user -t http deepwiki https://mcp.deepwiki.com/mcp

输入claude,启动claude，输入/mcp,观察下是否连接成功。

到这环境就配置完成了，可以愉快的开始项目了。

Step 2：开发与效果展示

2.1 项目框架Prompt（需要修改下key）

我要创建"故事宇宙 AI 创作平台"参加智谱 GLM-4.6 编程大赛。

【核心功能】
1. 小说创作助手
   - 大纲生成、章节续写、风格调整
   - 使用 GLM-4.6 

2. 角色生成器
   - 角色信息生成、关系网、角色立绘
   - 使用 GLM-4.6 + CogView-4

3. 剧本转换
   - 小说转影视剧本
   - 使用 GLM-4.6

4. 漫画分镜助手
   - 文字转分镜、参考图分析
   - 使用 GLM-4.6 + GLM-4.5V + CogView-4 + CogVideoX-3

5. 视频分镜学习
   - 视频分析、镜头语言学习
   - 使用 GLM-4.5V（视频理解）

6. 素材搜索库
   - 背景资料、热点追踪
   - 使用后端 search-pro API

【技术栈】
- 前端：Next.js 14 + TypeScript + TailwindCSS + shadcn/ui
- 后端：Python FastAPI + 智谱 Python SDK (zhipuai)
- 数据库：SQLite

【智谱 API 配置】
API Key: your_api_key_here
API Base: https://open.bigmodel.cn/api/paas/v4/


【项目结构】
/story-universe-platform
  /frontend
    /app
      /novel（小说创作）
      /character（角色生成）
      /script（剧本转换）
      /storyboard（分镜助手）
      /search（素材搜索）
    /components
      /ui（shadcn/ui 组件）
    /lib
      /api.ts（API 调用）
  /backend
    /api
      /routes（路由）
    /services
      /zhipu_service.py（智谱 API 封装）
    /models（数据模型）

【请创建】
1. 完整项目结构
2. 依赖配置（package.json、requirements.txt）
3. 智谱 API 调用封装（GLM-4.6、GLM-4.5V、CogView-4、search-pro）
4. 基础 UI 框架（紫色系配色 #6366f1）
5. 环境变量配置（.env.example）
6. README.md

开始创建项目！

然后不语，只一味地点击yes。a few moments later…

Claude Code会为你生成：

• ✅ 完整的前后端项目结构
• ✅ package.json 和 requirements.txt
• ✅ 智谱API封装服务
• ✅ 基础UI组件库
• ✅ 环境变量配置模板

然后有什么不懂的直接问claude即可，最主要的就是耐心和检错，我们的身份更像是测试工程师，发现生成的问题。
至于优化，就要结合前端和后端响应，打开浏览器的console来不断解决升级（按F12,选择控制台或者右上角浏览器三个点，点开选择工具里的开发者工具）。

2.2 小说创作助手

2.2.1 设计Prompt模板

这是整个项目的核心。我为GLM-4.6设计了结构化的Prompt：

# 小说大纲生成Prompt
OUTLINE_PROMPT = """你是资深小说策划师。

题材：{genre}
风格：{style}
关键词：{keywords}
目标长度：{target_length}

请生成详细大纲，包含：
1. 故事梗概（200字）
2. 主要人物设定（3-5个角色）
3. 世界观设定（背景、规则）
4. 故事结构（起承转合）
5. 章节大纲（10-15章）
6. 主要冲突和转折点
7. 主题思想和象征元素

要求：
- 逻辑严谨，情节吸引人
- 人物性格鲜明，有成长空间
- 冲突设置合理，高潮迭起
- 以JSON格式输出，便于解析
"""

2.2.2 后端API实现

# backend/api/routes/novel.py
from fastapi import APIRouter
from services.zhipu_service import zhipu_service

router = APIRouter()

@router.post("/outline")
async def generate_outline(request: OutlineRequest):
    """生成小说大纲"""
    prompt = OUTLINE_PROMPT.format(
        genre=request.genre,
        style=request.style,
        keywords=", ".join(request.keywords),
        target_length=request.target_length
    )
    
    # 调用GLM-4.6
    response = await zhipu_service.chat_completion(
        model="glm-4.6",
        messages=[
            {"role": "system", "content": prompt},
            {"role": "user", "content": "请生成大纲"}
        ],
        temperature=0.9,
        max_tokens=4000
    )
    
    return {"success": True, "outline": response}

2.2.3 前端界面实现

使用shadcn/ui组件快速搭建：

// frontend/app/novel/page.tsx
export default function NovelPage() {
  const [outline, setOutline] = useState(null)
  const [loading, setLoading] = useState(false)

  const generateOutline = async (data) => {
    setLoading(true)
    const response = await storyApi.generateOutline(data)
    setOutline(response.outline)
    setLoading(false)
  }

  return (
    <div className="container mx-auto p-6">
      <Tabs defaultValue="outline">
        <TabsList>
          <TabsTrigger value="outline">大纲生成</TabsTrigger>
          <TabsTrigger value="continue">章节续写</TabsTrigger>
          <TabsTrigger value="rewrite">风格调整</TabsTrigger>
        </TabsList>
        
        <TabsContent value="outline">
          <OutlineForm onSubmit={generateOutline} />
          {loading && <LoadingSpinner />}
          {outline && <OutlineDisplay data={outline} />}
        </TabsContent>
      </Tabs>
    </div>
  )
}

效果展示：
可以看到后端的响应正常。

大纲生成：

章节续写：


风格调整：

2.3 角色生成器

2.3.1 角色生成Prompt

CHARACTER_PROMPT = """你是角色设计专家。

角色类型：{character_type}
故事背景：{background}
性格特征：{personality}

生成完整角色设定（JSON格式）：
{{
  "basic_info": {{
    "name": "角色姓名",
    "age": "年龄",
    "gender": "性别",
    "occupation": "职业"
  }},
  "appearance": {{
    "height": "身高",
    "build": "体型",
    "hair": "发型发色",
    "eyes": "眼睛颜色",
    "clothing_style": "服装风格",
    "special_features": "特殊特征"
  }},
  "personality": {{
    "core_traits": ["核心性格1", "核心性格2"],
    "strengths": ["优点1", "优点2"],
    "weaknesses": ["缺点1", "缺点2"]
  }},
  "background": {{
    "childhood": "童年经历",
    "education": "教育背景",
    "key_events": ["重要事件1", "重要事件2"]
  }},
  "relationships": {{
    "family": "家庭关系",
    "friends": "朋友关系",
    "enemies": "敌对关系"
  }},
  "goals": {{
    "short_term": "短期目标",
    "long_term": "长期目标",
    "motivation": "内在动机"
  }}
}}

要求：角色有深度，有成长空间，符合故事背景。
"""

2.3.2 集成CogView-4生成角色立绘

@router.post("/image")
async def generate_character_image(request: CharacterImageRequest):
    """生成角色立绘"""
    # 构建图像生成Prompt
    prompt = f"{request.appearance}, {request.style}风格, 高质量, 细节丰富"
    
    # 调用CogView-4
    image_url = await zhipu_service.generate_image(
        prompt=prompt,
        size="1024x1024"
    )
    
    return {"success": True, "image_url": image_url}

效果展示：



GLM-4.6生成了包含8个维度的完整角色设定，CogView-4根据外貌描述生成了精美的角色立绘。

2.4 剧本转换

效果展示：

将文本转换为标准的剧本，方便下一分镜助手功能的实现。

2.5 分镜助手

这是最有挑战的功能，需要集成GLM-4.5V进行图片/视频分析。

2.5.1 图片分析功能

@router.post("/analyze")
async def analyze_reference(request: ReferenceAnalysisRequest):
    """分析参考图片"""
    # 将本地图片转换为base64
    if request.image_url.startswith("http://localhost"):
        file_path = request.image_url.replace("http://localhost:8000/", "")
        with open(file_path, "rb") as f:
            image_data = base64.b64encode(f.read()).decode('utf-8')
            image_url = f"data:image/jpeg;base64,{image_data}"
    else:
        image_url = request.image_url
    
    # 调用GLM-4.5V分析
    analysis = await zhipu_service.analyze_image(
        image_url=image_url,
        prompt=f"请详细分析这张图片的{request.analysis_type}，包括构图、光影、色彩等要素"
    )
    
    return {"success": True, "analysis": {"content": analysis}}

2.5.2 视频分析功能

@router.post("/analyze-video")
async def analyze_video(request: VideoAnalysisRequest):
    """分析视频分镜"""
    # 将本地视频转换为base64
    if request.video_url.startswith("http://localhost"):
        file_path = request.video_url.replace("http://localhost:8000/", "")
        with open(file_path, "rb") as f:
            video_data = base64.b64encode(f.read()).decode('utf-8')
            video_url = f"data:video/mp4;base64,{video_data}"
    else:
        video_url = request.video_url
    
    # 调用GLM-4.5V分析
    analysis = await zhipu_service.analyze_video(
        video_url=video_url,
        prompt=f"请分析这个视频的{request.analysis_focus}，包括镜头运用、剪辑节奏等"
    )
    
    return {"success": True, "analysis": {"content": analysis}}

效果展示：
文字转分镜：


分镜展示：

后端响应：


参考图分析：



视频分析：
视频分析使用的是智谱AI的GLM-4.5V模型，它会将视频转换为base64后分析，不依赖浏览器播放。如果想看到完整的预览，使用标准H.264编码的MP4文件或使用在线视频转换工具重新编码视频即可。



可以看它的生图、生视频效果都不错，尤其是识图、识别视频的功能很完整，我上传的是一个学术的图片和一个校园演唱的视频。
分析的视频和图片例子：

2.6 素材搜索器

效果展示：
背景资料搜索：

热点追踪：

灵感推荐：

2.7 UI优化与体验提升

2.7.1 紫色主题设计

/* globals.css */
:root {
  --primary: #6366f1;
  --primary-foreground: #ffffff;
  --gradient-start: #8b5cf6;
  --gradient-end: #6366f1;
}

.gradient-bg {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

2.7.2 响应式布局

使用Tailwind CSS的响应式工具类：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  {/* 自适应网格布局 */}
</div>

2.7.3 加载动画

export function LoadingSpinner({ size = "md" }) {
  return (
    <div className="flex items-center justify-center">
      <div className="animate-spin rounded-full border-4 border-primary border-t-transparent h-12 w-12" />
      <p className="ml-4 text-gray-600">AI正在创作中...</p>
    </div>
  )
}

---

🎉 最终效果

功能完成度

模块	功能	使用模型	状态
小说创作	大纲生成、章节续写、风格调整	GLM-4.6	✅ 完成
角色生成	角色设定、立绘生成	GLM-4.6 + CogView-4	✅ 完成
剧本转换	小说转剧本	GLM-4.6	✅ 完成
分镜助手	文字转分镜、图片/视频分析	GLM-4.6 + GLM-4.5V+CogVideoX-3+CogView-4	✅ 完成
素材搜索	背景资料、热点追踪	search-pro	✅ 完成

💎 总结

项目开发方面：我想谈下心得，就是首先需要有个结构化的提示词，需要明确定位、上下文、输出格式和质量要求；其次就是用claude协同开发的时候，你需要一次性说清楚需求，提供技术栈约束，分步骤实现；再就是多模型组合，也可以参考我用的这些。

错误检查和纠错：我反而觉得这块是最主要的，你可以打开浏览器的console观察响应和错误，以及打开后端、前端终端观察回复，将报错信息输给claude。更多遇到的可能有api超时、图片格式问题这些只要耐心观察前后端响应和控制台，我们是有能力也有信心去解决这些问题的，奥利给。

未来的话，打算支持导出多种格式（PDF、EPUB、Word），支持多人协作创作，添加AI配音功能，以及移动端的开发。

最后，感谢能够读到这里的你，作者也想说说自己的心里话，在ai赋能的今天，平时多留意生活中软硬件的技术逻辑，说不定某天就能在某个场景中“复用”；哪怕不是计算机专业，也可以大胆借助 LLM 大模型实现想法 —— 只是遇到 AI 无法感知的 bug 时，要耐心拆解问题、精准反馈，才能实现快速迭代。当然，有些人类经验需要时间积累，但只要享受 AI 创作的过程，总会有收获。也希望这个小项目能够给你带来启发。
GitHub仓库：https://github.com/yixiuxu/Story-Universe-Platform
已上传github，后续会不断更新维护。

#GLM我的编程搭子#GLM-4.6#娱乐#人工智能#Claude#前端框架#后端

---