写在前面

大家好，我是默子，今天又给大家整理了一篇非常干货的教程，快快学起来！

起因是这样的，前几天默子在魔改别人的Markdown转微信公众号项目时，本想着给这个项目接入AI自动补全和续写

搞了一半，突然有个想法：这预制的几个主题太丑了，能不能自己来设计一个

于是默子就放下改了一半的AI功能，来搞CSS了（绝对不是因为我有个功能Debug不出来）

但是说实话，一想到要翻遍几百个文件找到主题配置，然后琢磨CSS样式结构，再一行行调试颜色…

默子的拖延症就开始作祟了😅

然后我看了看我手边的Claude Code，Damn！这不直接用 CC（Claude Code后续的简称） 来写一个主题？

鉴于大部分的读者可能还并没有接触过他，那默子就来给大家分享一下这个当下最热门的氛围编程神器。

默子是如何用Claude Code从零开始，为自己的项目添加了一个完整主题的全过程。

剧透：整个过程不到15分钟，包含了git操作、npm配置、代码分析、主题开发、测试优化的完整流程！

---

Claude Code是什么？

简单来说，Claude Code是Anthropic推出的AI代码助手，你可以把它当做一个中级程序员，就是你有什么任务安排直接告诉他。

像是对待普通的那种牛马程序员一样，跟他说一个需求，他就可以开始操作，可以操作命令行，可以生成代码，可以修改文档等等。

重点是它的效率非常高，基本上10分钟就可以完成上百行代码的修改和编辑。这个多出来的时间你自己可以Review一下，或者是让他再写个单元测试，直接做测试。

它背后模型是A社的 Sonnet4 。这个模型基本上算是现在编程领域的扛把子了。

如果不算前两天 OpenAI泄露的 O3-Alpha 的话，Sonnet4 基本上是稳坐编程第一的宝座的，像是前段时间非常火的 Cursor，Augment Copilot 这些，也都是调用的A社的Sonnet4，没办法，编程还得是它。

甚至单论编程的话，比他的老大哥Opus可能还会强一点。

背景差不多介绍完了，那就让默子来讲一讲今天的实战吧

安装并使用CC

第一步：环境检查和准备工作

在安装 Claude Code 之前，我们需要确保你的电脑上已经有了Node.js。

为什么需要Node.js？因为Claude Code本质上是一个用JavaScript写的命令行工具，而Node.js就是运行这种工具的环境。

检查你的Node.js版本：

打开终端（Windows用户可以按Win+R，输入cmd；Mac用户按Cmd+空格，搜索Terminal），输入：

node --version

如果显示类似v20.19.0或更高的版本号，那你就可以继续下一步了。如果出现"命令不存在"或者版本低于18，那你需要先安装或升级Node.js。

如果需要安装Node.js：

1. 访问nodejs.org
2. 下载"LTS"版本（长期支持版，更稳定）
3. 按照安装向导一路下一步即可

第二步：安装Claude Code

这一步确实很简单，但默子还是要解释一下每个参数的含义，这样小白们也可以看的懂了：

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

这里的几个部分分别意味着：

• npm：Node.js的包管理器，用来安装JavaScript库和工具
• install：安装命令
• -g："global"的缩写，意思是全局安装，这样你在任何地方都能使用claude命令
• @anthropic-ai/claude-code：这是Claude Code在npm上的官方包名

如果安装成功的话，应该和默子这里的截图差不多

安装过程中可能遇到的问题：

权限问题：如果出现"EACCES"或"权限拒绝"类的错误，Mac/Linux用户可以在命令前加sudo：

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

网络问题：如果下载缓慢或失败，可以尝试切换npm源：

npm config set registry https://registry.npmmirror.com
npm install -g @anthropic-ai/claude-code

这里要额外说明一下，现在CC对Windows是支持了，但是默子实测还有一些Bug，Windows小伙伴可以尝试在WSL里安装CC

第三步：验证安装是否成功

安装完成后，让我们来检查一下Claude Code是否正确安装：

claude --version

如果一切正常，你应该看到类似这样的输出：

claude --version
1.0.56 (Claude Code)

如果提示"命令不存在"，说明安装有问题。这时候你可以：

1. 重新打开终端窗口（有时需要刷新环境变量）
2. 检查是否用了-g参数进行全局安装
3. 重新安装一次

第四步：首次启动和配置

现在来到最关键的一步。在开始使用Claude Code之前，你需要给它一个"工作环境"。（其实就是你想要CC工作的目录）

建议你先创建一个测试文件夹，这样就算出了问题也不会影响你的重要文件。

# 创建一个测试文件夹
mkdir claude-test
cd claude-test

# 初始化一个简单的项目
echo "# 我的第一个 Claude Code 测试" > README.md

# 启动 Claude Code
claude

第一次运行时，Claude Code会问你几个配置问题。这些问题都很重要，我来逐一解释：

API Key配置：你需要一个Anthropic的API密钥。这个需要在Anthropic官网注册并获取。（或者是第三方中转API，国内体验更加）

这里建议大家去使用一些第三方的API中转，但默子并不会做任何推荐，因为现在大部分API中转都不算特别稳定。而同时，官网200刀的套餐足以⚠️劝退大部分人了。说回来，氛围编程还是挺耗钱的。感兴趣的朋友可以后台咨询默子，默子会根据你的情况给到最合适的建议

这里列一个第三方API转发的例子

接下来安装就是一路选“Yes”就好了！

项目权限：它会问你是否允许它读取当前文件夹。对于测试，你可以选择"是"。

操作权限：它会问是否允许执行命令、修改文件等。这些都是Claude Code的核心功能，建议都选择"是"。

---

这里要注意，虽然我们都选了Yes，但在后面使用过程中还是要注意一下CC对文件的操作的。

Claude Code的强大之处也是他的不稳定之处，他可以24h不停歇地完成你吩咐的任务，添加修改代码，Debug，测试，写文档。

但他不是100%的可靠的！

万一把你的 学习资料 给翻出来，或者是把你的某些关键文件删掉，那到时候就真的很难救回来了！

配置完成后，Claude Code有两种主要的使用方式。每种方式都有各自的适用场景，我建议你都试试，找到最适合自己工作习惯的那一种。

方式一：交互式聊天模式（强烈推荐）

这是默子（也是大部分人）最常用的方式，也是CC最强大的模式：

cd your-project
claude

运行后，你就进入了一个对话环境。可以像是雇佣了一个低级程序员一样，直接发号施令。

• "帮我分析一下这个项目的结构，你加加班！”
• “我想添加一个用户登录功能，你觉得怎么实现比较好？今天晚上12点前给我。”
• “这个bug你帮我看看是什么原因，同时记得把双日报写好哈。”

这种模式的最大优势是连续性，也是最适合用来指（压）导（榨）CC的。

CC会记住你们的整个对话历史，理解你的项目背景，给出越来越精准的建议。

就像有个经验丰富的技术顾（牛）问（马）一直在你身边。

方式二：单次任务模式

如果你有明确的小任务，可以直接用命令行完成：

claude "帮我写个计算斐波那契数列的函数"
claude "这个文件夹里有什么？"
claude "帮我查一下这个错误是什么意思"

这里默子用第一个来作为例子：

claude “帮我写个计算斐波那契数列的函数”

你甚至还可以让他直接运行（他虽然可以自己配置环境，但默子还是建议你稍微提示他一下）

帮我运行一下，uv管理python环境

这种方式适合那种目标明确、不需要太多上下文的任务。就像给助手发个微信：“帮我查一下XX”，然后等回复。

默子觉得这个用来写一点小脚本或者是临时想要看一下某个功能的实现还是不错的。

偷懒是这样的。

第六步：创建项目说明文件（重要！）

在正式开始用CC开发之前，我强烈建议你在项目根目录创建一个CLAUDE.md文件。

这是默子Vibe了四五个项目后总结出来的经验。

如果你是有一个现成的项目，也要用/init 生成当前项目的CLAUDE.md文件。

CLAUDE.md 一定要有

哈哈哈哈，这里它甚至还记得默子前面要它提交 Git 的信息。（这是上次对话的内容了，默子没来得及截图）

具体生成的CLAUDE.md文件：

这个文件的作用是让CC了解你的项目特点和规范，避免它做出不合适的修改。就像给新同事的入职指南一样，能大大提高协作效率。

都看到这里了，建议你关注一下默子，能看到这里，说明你和默子一定程度上是臭味相投的，哈哈哈哈。

而且默子也怕后面的内容太干了。关注一下默子，避免迷路！

在Vibe Coding的道路上，默子替大家先交费踩坑一下！后续会有更多详细的教程和主观体验！

---

Claude Code进阶使用指南

经过前面的安装和基础介绍，你已经可以开始使用Claude Code了。

但是要想真正发挥它的威力，还需要掌握一些进阶技巧。

这些都是默子在实际使用中摸索出来的经验，能帮你避开很多坑。

如何与Claude Code进行高效对话

很多人刚开始用CC的时候，还保留着使用传统AI工具的习惯，总是想用一句话解决所有问题。

但CC的强大之处恰恰在于它的交互能力，你需要学会"渐进式提问"。

或者说其实现在所有的 AI 工具都要学会渐进式提问

错误的对话方式：

用户：帮我做个电商网站
CC：[生成一堆通用代码]
用户：这不是我想要的...

正确的对话方式：

用户：我想做个电商网站，先帮我分析一下需要哪些核心功能
CC：[分析并列出功能清单]
用户：很好，我们先从商品展示开始，我希望支持分类筛选和搜索
CC：[给出具体的实现方案]
用户：这个方案不错，但我的数据结构是这样的...[提供具体信息]
CC：[根据实际情况调整方案]

这种渐进式的对话能让CC更好地理解你的真实需求，给出更精准的解决方案。

充分利用 ultrathink 功能

我发现大部分用 CC 的人都不知道这个功能，然后在吐槽说CC不聪明！

不像默子我，默子只会心 (ya) 疼 (zha) CC 哥哥。

ultrathink是CC的一个特殊指令，它会让AI进入"深度思考"模式，有更好的任务规划能力，可以做更详细的代码审计和修改

用了这个指令之后，会对你提出来的需求进行更加深入的思考来去执行

这里默子举两个例子，这两个例子是最佳的使用 CC 进行氛围编程的一个提示词。

复杂系统设计与组件选型
适合提出具体业务目标 + 技术约束，然后压榨CC，比如：

ultrathink，设计一个支持百万级用户的消息推送系统，要求支持定时、标签筛选、优雅降级，并且延迟控制在 1 秒内。现有选型包括 Kafka、RocketMQ、Redis Stream，该怎么组合使用？每个组件的职责如何划分？

架构重构与模块拆分的策略选择

“ultrathink，我们有一个订单处理模块目前嵌套在 Java 单体中，订单逻辑耦合了库存校验、优惠计算和风控。计划用 Spring Cloud + Kafka 重构为微服务，是否应该先把风控拆出去？有哪些拆分顺序、数据一致性、事务管理的最佳实践？”

---

当然这里默子是用于一个没有具体到对应项目的方式去提的

如果你有一个类似的项目，你要指出来它对应的代码文件、对应的路径、对应的代码片段是在哪里，这样指出来之后它的输出效果会更好

所以使用ultrathink的关键是要给出足够的上下文信息。不要只是简单地说"优化性能"，而是要描述具体的性能瓶颈、业务场景、技术栈等信息。

那么接下来默子用一个真实的例子来带大家看一下默子是怎么使用的吧。

---

实战开始：10分钟搞定专属主题

第一步：项目环境分析与搭建

默子先来讲一下背景。因为好久没更新公众号了，每次更新公众号的排版，还有图片整理问题都很头疼，所以就找了一个更加有效率的工具，准备自己改一下。

找了一下，还真在Github上面找到一个非常适合的项目doocs/md

我打开Claude Code，直接把GitHub链接丢给它：

默子：“帮我分析一下这个项目的技术栈，然后搭建开发环境，跑通了再叫我 utlrathink”

这里的提示词的话，默子好像并没有写着非常的详细。主要因为它是一个刚在GitHub 上面看到的项目，所以也不是特别需要对它具体到某一些细节让它去执行。

那么我们的 CC 嗨怒 会怎么进行操作呢？

大概过了差不多七八分钟，CC 就提醒我已经完成了

当项目成功跑在http://localhost:5173时，默子已经成功拿到了外卖，倒了一杯可乐，刷了七八个短视频了

就这个效率提升，马斯克的效率部来了都得说一句牛逼。

第二步：代码架构分析与主题系统探索

项目跑起来后，面对几千个文件的Vue项目，我需要理解其主题系统的设计。这是很多初学者最头疼的环节——如何快速熟悉一个陌生的代码库？

我向CC提出了一个典型的代码分析需求：

默子：“帮我分析这个项目的主题系统架构，我想了解如何添加新主题 ultrathink”

这里默子用的是 CC 在 Vscode 里面的插件，那么这个插件怎么安装呢？

你可以直接在 Vscode 里面启动一个终端，然后在终端里面启动 CC，它就会自动安装了。或者是直接在插件市场搜索claude安装也可以

这一部分还是比较简单的，如果这一部分还不太会的话，可以先去补一补基础，不然 CC 的使用门槛可能会更高一点。

那么 CC 最终给到我的结果是什么呢

我看他给出来的这个内容还是挺细节，挺长的

好吧，大概扫了几眼。

其实默子并不想看他具体是怎么做的，稍微瞅眼大概知道一个架构就好了

氛围编程又不追求什么精细美。

默子现在想要添加一个紫色加莫兰迪粉的主题，那么我就可以让 CC 直接开始操作。

默子：“好的，那么基于你对于如何添加一个主题的理解，请帮我添加一个名叫 《默子AI》 的主题，我希望这个主题是适用于科技自媒体的主题，色调是紫色加墨兰迪粉，整体的排版要清新简约，不要有大面积的色块，整体设计要符合优秀的平面设计标准 ultrathink”

这里可能会有人觉得输入这么长一段提示词是一件非常麻烦的事情，

默子在这里说一下我自己会使用到的小妙招，

那就是！

默子会使用豆包语音输入来输入提示词

没想到吧，豆包才是唯一真神！

这里语音输入的话会比打字输入的效率提高10倍不止而且用语音输入的话，你的逻辑表达还有你的信息量会有大幅度的提高。

就是大语言模型本质上还是一个概率模型，如果你想让大语言模型的输出符合你想要的，那么你就需要尽可能的把你想要的结果或者是流程事无巨细地描述出来。

如果一开始你并不能详细的去把一个项目的需求所描述出来的话，那就需要多练习了。默子觉得在后 AI 时代，其实人比 AI 要更强的地方就是在于人的复杂思维能力，不受限制的超常上下文，以及我们所谓的灵感了。

这一点的锻炼和提升，我觉得对所有人都是有帮助的。

咳咳

不好意思，想着想着就跑题了，我们继续来看实战。

第四步：明暗模式适配与CSS变量深度应用

代码写完后，我在亮色模式下测试，效果完美。但当我切换到深色模式时，发现了一个严重问题：H1标题完全不可见了。

这是一个典型的CSS主题适配问题，也是很多前端开发者（包括CC）容易忽视的细节。

所以默子截了一张具体的图给到他，同时描述了一下这个情况

默子：“[image #1] 我发现现在的前端样式还有一些 bug，暗色模式下的 H1 标题是不可见的。你仔细检查前端CSS部分的适配情况，继续深入地优化并完善默子 AI 主题 ultrathink”

然后 CC 很快就发现了这个问题，并且纠正了其他一些默子还没有发现的主题Bug。

整体调整到这里的话，差不多用了是13分钟左右

第五步：Cloudflare Workers代理服务深度实践

主题做完后，我想测试一下公众号图片上传功能。

因为这个项目他支持直接把照片上传到微信公众号的图文库里

所以默子就想着按照教程去搭一下

默子：" ultrathink 我想要用这个公众号上传图片的功能，然后我已经在网页端配置好了这个其他的内容，就差一个代理的服务域名了。我不想用CF的这个 worker 服务，我想自己在本地部署，你帮我部署一下。以下是它官方教程里的描述：将项目中的doocs/md/example的worker.js 文件部署到cloudflare的workers服务，获得一个调用域名。或者是本地启动这个代理服务，配置代理域名：http://localhost:8787"

这段话的后半部分是他教程里的原文，默子改了一点点复制粘贴给了CC

继续等待差不多两分钟左右，CC 就已经完美的完成了我们安排给他的任务，在本地的这个8787端口上启动了我们的 Worker 服务

然后默子按照教程配置一下对应的 appid 等等的，就可以直接通过复制粘贴把图片上传到微信公众号的图文库里了

---

其实完成这些操作确实只花了默子差不多15分钟左右的时间，但是后面要把这个内容记录下来，整理成公众号还是花了一个小时左右的

这还是得益于有 Markdown 直接转公众号的这种应用。

如果让默子自己去排版写文字，还要整理图片，那真的是太折磨了

---

最后，老套路时间到了😄

如果这篇文章对你有帮助，欢迎关注我的公众号"默子AI"。我会继续分享AI工具的实战经验，以及独立开发路上的酸甜苦辣。

下期见！记得给我留言你用CC的体验，咱们交流交流～

下一期默子准备详细讲一讲SuperClaude 和最常用的MCP，让大家氛围编程的姿势再上一层楼

---

这篇文章纯属个人体验分享，如果有不同看法欢迎讨论。转载请联系授权哦～