重生之我在 Vibe Coding 时代当程序员：第三课，把 DS 接进 CC

Asize
1 阅读9分钟

重生之我在 Vibe Coding 时代当程序员：第三课，把 DS 接入 CC

上一节课，我把大模型理解成了一个函数：y = fθ(x)。它不是搜索引擎，它是概率映射。这节课开始，我得回答一个更落地的问题：理论我懂了，但工具到底怎么用？

从一个使用原生CC的问题说起

Coding Agent 已经成了 2026 的默认范式。毫无疑问，最近最火热的agent 无疑是Claude code，它是公认的最好用的Coding Agent ，但一上手就被现实劈了一记——Claude Code 是好用，但官方订阅一个月几十美金，再加上海外支付、出海代理、莫名其妙的封号机制，对一个还没毕业的大学生来说不是个能可持续掏的钱包。

另一头，国产模型这一年杀疯了。DeepSeek-V4-Pro 1.6 万亿参数、1M 上下文、官方 API 价格只有 Claude 的零头，推理质量也直逼第一梯队。

那有没有可能，用 Claude Code 那套顶级的 Agent 交互体验，去驱动 DeepSeek 的算力？

能，而且只需要一根叫 cc-switch 的"协议转换插头"。

cc-switch 到底是什么

如果只看一句话定义：cc-switch 是一个本地代理，把 Claude Code 发出的请求翻译成 OpenAI 兼容格式，再转发给 DeepSeek。

但我更想把它和上节课的 y = fθ(x) 串起来看一遍。

上节课我们说，LLM 的本质是一个函数 f。不同厂商训出来的，是 f 的不同实现：

  • Anthropic 训了一组参数 θ_claude，对外提供 Claude API 协议
  • DeepSeek 训了一组参数 θ_ds，对外提供 OpenAI 兼容协议

这俩函数本质都在做同一件事——给定 x 算 y——但接口长得不一样。Claude Code 这个 Agent 客户端只认 Claude 协议；DeepSeek 这个推理服务只说 OpenAI 方言。两个能力都很强，但语言不通。

cc-switch 解决的就是这个翻译问题：

[Claude Code] --Claude 协议--> [cc-switch (本地 127.0.0.1)] --OpenAI 协议--> [DeepSeek API]
                                       ↑
                              在中间做协议转换

Claude Code 那一头以为自己还在和 Anthropic 通信，DeepSeek 那一头以为自己在伺候一个普通 OpenAI 客户端。cc-switch 站在中间扮演两边都买账的"代理人"。

这种"前端 UI / 中间协议层 / 后端算力"的解耦在工程里其实很常见。它的本质是接口比实现更稳定——只要协议层不变，前端可以随时换皮、后端可以随时换模型。今天我用 DeepSeek，明天 Kimi-K3 出来了我换 Kimi，Claude Code 这层 UI 不需要改任何一行代码。

四步把 DeepSeek 塞进 Claude Code

这件事分为四步：

Step 1：拿 DeepSeek 的 API Key

登录 DeepSeek 开放平台 → 创建一个新的 API Key → 复制下来。然后充值，5 块或者 1 块都行，整个5月 DeepSeek 都在打折，使用费用不担心。

Step 2：装 Node.js

cc-switch 是个本地代理服务，不是静态网页，它得在我电脑上常驻一个进程，持续监听 Claude Code 发出的请求、做协议翻译、把响应返回回去。这种轻量级本地服务，Node.js 是它的天然宿主。

# Windows
winget install OpenJS.NodeJS.LTS

# 验证
node -v

能看到版本号就行。

Step 3：配置 cc-switch

下载安装 cc-switch → 在配置面板里把"上游服务"选成 DeepSeek → 把 Step 1 拿到的 sk- 开头的 Key 粘进去 → 本地转发端口保持默认（一般是 127.0.0.1:xxxx）。

这一步完成后，cc-switch 已经在我本地架起了那个"协议转换插头"。

Step 4：在 VS Code 装 Claude 插件 / Claude Code CLI

在 VS Code 扩展市场搜 Claude，安装，跟着引导把几个权限勾上。回到对话框敲一句话回车——

这一刻有点神奇：界面上还是 Claude 那个熟悉的对话框，但下面跑的算力已经换成了 DeepSeek。半小时不到，一套"白嫖顶级 UI、底层换芯"的工作流就搭好了。

实战：用这套组合做了一个 Foodiez 落地页

工具链通了，老师不让我们停在"Hello World"，而是直接上了一个真实项目：给一款叫 Foodiez 的外卖 App 写一个高转化率的营销落地页。

我把 prompt 也贴一下（这是这节课对第一课 Prompt Engineering 的一次实战检验）：

GOAL
Create a high-conversion marketing landing page for Foodiez.

TECH STACK
- React + TypeScript
- Tailwind CSS
- Framer Motion for animations
- Component-based architecture
- Mobile-first responsive layout

STYLE
- Primary color: Orange (#FF6B35)
- Soft shadows, large border radius (2xl)
- Bright and appetizing food delivery aesthetic

PAGE STRUCTURE
1. NAVBAR (sticky, with CTA "Get the App")
2. HERO (headline + app store buttons + iPhone mockup)
3. SOCIAL PROOF (logos + testimonials)
4. HOW IT WORKS (3 steps)
5. FEATURE HIGHLIGHTS (alternating two-column)
6. APP PREVIEW (horizontal scrollable mockups)
7. PROMO BANNER
8. FINAL CTA
9. FOOTER

ANIMATIONS
- Smooth scroll, fade/slide on viewport, parallax in hero

RESPONSIVENESS
- Mobile, tablet, desktop fully optimized

ACCESSIBILITY
- Heading hierarchy, alt text, focus states, WCAG contrast

这套 prompt 用的还是第一课学的 Goal / Tech Stack / Style / Structure / Animations / Responsiveness / Accessibility 这种结构化骨架，只是更细——它把 9 个页面分区一一列出来，每个区里再写明"要什么元素"。

把这段 prompt 喂给跑在 DeepSeek 上的 Claude Code，它没有只是"返回一段代码"——它直接 npm create vite、生成 package.json、把 9 个 section 拆成独立的 React 组件、写 Tailwind 样式、配置 Framer Motion 动画、最后跑起来 dev server。

这就是第二课最后讲的"AI as text → AI as execution"的真实体感。我没有 copy-paste 任何一行代码，整个项目目录是 Agent 自己创建的：

landing_page_food/
├── src/
│   ├── components/
│   │   ├── sections/   ← 9 个页面分区
│   │   └── ui/         ← 通用组件
│   ├── hooks/
│   ├── App.tsx
│   └── main.tsx
├── vite.config.ts
├── tsconfig.json
└── package.json

跑起来那一刻我才真切地理解："Coding Agent" 这四个字里，"Coding" 是它的能力，"Agent" 才是它的形态。它不是给你代码，是直接帮你把项目做出来。

但是——AI 写得快，不等于我可以不懂

工具链跑通、项目能产出之后，老师没有让我们继续在 AI 上加更多 prompt，而是反过来：回到最朴素的 HTML / CSS / JS 基础，做一个纯手写的 css clock 时钟。

一开始我有点疑惑——都 2026 了，AI 几秒钟能给我生成一个 3D 时钟，为什么还要手敲？老师的回答让我记了下来：

你不是为了编程而学编程，是为了拿到编程这个领域中的“领域知识”，并且根据领域知识来更好的辅助你做出更好的 prompt。

这句话挺有分量的。Prompt Engineering 的上限，不是 prompt 写得多花哨，而是你对领域的理解有多深。要是我连 HTML 树结构、CSS 选择器、JS 事件模型都没概念，我连"该向 AI 提什么要求"都说不清。

前端的"三权分立"

老师把前端基础概括成一句话：html / css / js 是前端的三权分立。

角色职责类比
HTML页面结构房子的骨架
CSS样式呈现房子的装修
JS交互行为房子里的水电系统

这三层各管各的，职责分离，模块化。看一眼 css clock 的目录就明白了：

css_clock/
├── index.html   ← 结构
├── common.css   ← 样式
└── common.js    ← 行为

三个文件，三件事，互不越界。

Emmet：被低估的快捷输入

老师推的一个小工具叫 emmet——一段类 CSS 选择器语法，能瞬间展开成 HTML 结构：

.clock>.clock-face>(.hand)*3

回车之后变成：

<div class="clock">
    <div class="clock-face">
        <div class="hand"></div>
        <div class="hand"></div>
        <div class="hand"></div>
    </div>
</div>

语法上：

  • .clock —— 类名选择器
  • > —— 子元素
  • *3 —— 重复三次
  • 标签默认是 div

这玩意是肌肉记忆能省一大堆时间的那种工具（当然，现在很多tab补全都可以完成了）。

一道面试题：link 和 script 该放哪？

这是我从这节课里抄走的最实用的一段：

<head>
    <!-- 1. CSS 放 head 里的 <link> 引入 -->
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <!-- 页面内容 -->

    <!-- 2. JS 放 body 结束前的 <script> 引入 -->
    <script src="./common.js"></script>
</body>

为什么 CSS 放 <head>？ 浏览器解析到 head 里的 <link> 时，能更早地把 CSS 下载下来，提前和 HTML 结合，用户能更快看到一个已经长得对的静态页面。

为什么 JS 放 <body> 结束前？ <script> 标签会阻塞 HTML 解析。如果把它丢在 <head> 里，浏览器要先等 JS 下载并执行完，才能继续往下渲染 HTML。这会让用户看到一段时间的白屏。放到 body 结束前，先让静态页面长出来，再追加交互行为。

老师贴了一个数字让我印象很深（这是当年淘宝的内部宣传语）——

网页每快 0.1 秒，用户满意度提升，付费转化可以增加 1000 万美金。

<link> 放 head、<script> 放 body 末尾，这种看起来微小的顺序问题，背后是真金白银。

这节课我学到了什么

  1. cc-switch 是协议转换插头，不是新的模型。 它不改变 y = fθ(x) 这个数学本质，它改变的是"哪个 f 接收 x"。前端 UI、协议层、后端算力可以三层解耦，模型可以随时换。
  2. 顶级体验 + 极致性价比，是可以组合出来的。 Claude Code 的 Agent UI 和 DeepSeek 的算力，用一根本地代理就能拼在一起。这种组装能力比"用某个工具"本身更重要。
  3. Coding Agent 真的不只是生成代码。 它会创建文件、初始化项目、装依赖、配 TypeScript、跑 dev server。我在 Foodiez 落地页里全程没有 copy-paste 一行代码，整个项目目录是它自己长出来的。
  4. Prompt Engineering 的上限是领域知识。 学 css clock 不是为了和 AI 抢饭碗，是为了能向 AI 提出更精确的要求。不懂 HTML 树结构和 CSS 选择器，你连"我想要的页面长什么样"都描述不清。
  5. 前端三权分立不是过时概念，是一种工程纪律。 HTML 管结构、CSS 管样式、JS 管行为；<link> 放 head、<script> 放 body 末尾。这些细节看起来琐碎，但用户每等 0.1 秒，可能就是百万级的转化损失。

从第一课的"怎么写 prompt"、第二课的"大模型到底在干什么"、到这节课的"工具链怎么搭、领域基础怎么补"——我的学习路径正在从抽象向具象滑落。最开始我以为 AI 时代程序员要学的是怎么和 AI 对话，现在我意识到要学的更多：怎么搭工作流、怎么理解协议、怎么补领域知识。AI 不是替代了这些，是把这些重新摆到了台前。

下一课，继续往下挖。

avatar
文章
阅读
粉丝