Claude Code 编程实战:外行人第一次可以独挑大梁

0 阅读8分钟

谨以此文,纪念可能是最后一次的”程序员节“。

过去,你想做互联网创业,要懂产品、懂设计、懂开发,是漫长的学习,繁琐的沟通,反复迭代,极大的人力和时间成本,稍有某个环节走不通,就进行不下去。

但是现在,在AI的辅助下,这件事可以简单到什么程度?你只需要会打字。

因为AI的大脑里装着所有你已经掌握和没有掌握的东西,还会自己分析、整理、解决问题。

本系列介绍的这款工具,就是诸多工具中较为突出的一个。

安装与用法

作者第一次安装Claude Code的时候,只在终端输入了一行命令,30秒后就自动安装完成。接着,在对话框中输入claude并按Enter键,屏幕上立即出现闪烁的光标。输入“你好”,它立刻进行了回复。整个过程不到1分钟。

至于你用什么方式安装,取决于你的系统,跟随官方指引即可。

用法则分为:终端CLI、桌面端、网页、扩展/插件,跟个人习惯有关,随意选用,如果你想沉浸式不分心地工作,桌面端是比较合适的。

第一条指令

发指令之前,只需做好一项准备:让AI在哪里做事。 也很简单,将你的项目目录设为工作目录即可(选择一个文件夹),便于Claude Code针对项目做文件的增、删、改等操作。

随后敲一个“claude”,就会出现交互界面(如果已经登录了Anthropic账号)

第一条指令的作用是试一下你对它的沟通是否有效,你可以随意,但为了上下文统一,我们就写:

创建一个简单的HTML页面,显示“Hello, Claude Code!”,用好看的CSS样式。

你会看到Claude Code开始在你的目录中创建一个HTML文件,写入完整的代码。过程仅需10~30秒。

然后可以在浏览器中查看效果,如果能看到一个带样式的“Hello, Claude Code!”页面,恭喜你,一切正常。

这看起来非常简单,但意义不容忽视:一句自然语言,就让AI完成了“理解需求→创建文件→编写代码”的全过程。后面的所有进阶操作都建立在此基础之上。

对话式编程

不管是在终端、桌面端还是网页,编程的过程都是对话,现在我们尝试做一个个人主页,命名为”my-homepage“

同样按照上面的步骤:

mkdir my-homepage && cd my-homepage  // 创建并进入
claude   // 启动

就可以发指令了。

帮我做一个个人主页。单页HTML,要好看。
内容:我叫[你的名字],是一个[你的职业/身份]。
加一句自我介绍,一段关于我的描述,底部放几个社交媒体链接的placeholder。
用现代简约风格,响应式布局。

Claude Code会在30秒内生成一个完整的HTML文件。双击HTML文件即可查看效果。

你应该可以看到一个不错的页面。但它也许不是你理想中的样子——配色可能太普通,或者布局可以更好。没关系,可以继续提需求:

改一下配色,用深色背景+亮色文字。字体换成衬线体。
加一个渐变的背景动画效果。

Claude Code会自动修改文件,刷新浏览器就能看到变化。你可以再调几轮,直到满意为止。

整个过程不超过5分钟,但你已经完成了一次完整的对话式编程:描述需求→Claude Code实现→查看结果→提出修改→Claude Code调整。后续所有项目,不管多复杂,都遵循这个流程。

实现新闻聚合器

你可能下意识地想:我该怎么做?错。

从现在开始,转变思维,你是产品经理,Claude Code是工程师。你要做的是说清楚要什么,告诉AI该怎么做。

告诉Claude Code,你要什么

每个项目发指令的形式是类似的,只是内容不同,这个需求的指令示例如下:

帮我做一个AI新闻聚合CLI工具,需求如下。
1.从以下RSS源抓取最近24小时的文章
    - TechCrunch AI频道
    - The Verge AI频道
    - Hacker News AI标签流
2.提取每篇文章的标题、链接、发布时间、来源
3.按时间倒序排列,输出一份Markdown格式的日报到output/目录
4.用TypeScript写,用tsx直接运行
先别急着写代码,给我一个实现方案。

像不像在跟“人”交代任务?这就叫“需求描述”。

需求描述的质量直接决定输出质量。建议遵循几个原则:说清楚最终产物什么样(Markdown日报);指定技术选型(TypeScript+ tsx);给出具体的数据源URL。

不要一句一句的来,要像上面这样,把基本的框架列完,一次性给它,否则你需要来回沟通多次,反而增加成本。

注意,最后那句“先别急着写代码”不是客气话,而是一个重要技巧:让Claude Code先想清楚再动手。

看看它的计划

Claude Code在收到上述需求后,不会直接写代码,而是先给你一个方案。大致如下:

我来帮你做这个AI新闻聚合工具。先说一下方案:
项目结构:
ai-news-digest/
├── src/
│ ├──index.ts   #入口文件
│ ├──fetcher.ts  #RSS抓取逻辑
│ ├──formatter.ts  #Markdown格式化
│ └──types.ts   #类型定义
├──output/     #日报输出目录
├── package.json
└── tsconfig.json
技术方案:
- RSS解析用rss-parser库
- HTTP请求用node内置的fetch
- 日期处理用date-fns
- 用tsx直接运行TypeScript,不需要编译步骤
实现流程:
1.并行抓取3个RSS源
2.统一格式,过滤24小时内的文章
3.按时间排序
4.生成Markdown格式日报
5.写入 output/YYYY-MM-DD.md
需要我开始实现吗?

如果觉得方案可行,就直接说“好”;如果想调整,则提出修改意见,比如:

# 你的反馈
方案没问题。补充两点:
1.为日报里的文章加一句话摘要(从文章description里截取前100个字)
2.日报开头加统计数据:共收录X篇,来自Y个源

这就是对话式编程的核心:Claude Code出方案,你补充细节,Claude Code修正。不用画流程图,也不用写技术文档,像平时说话一样沟通就行。

看它干活

确认方案后,Claude Code开始执行。你会在终端看到一系列操作。

写完代码后,Claude Code通常会试着运行一次看看有没有报错。如果报错,它会自己读错误信息、找问题、修代码、再运行,形成一个自动修复循环。

整个过程需要2~5分钟。

在执行过程中,Claude Code可能会多次请求权限。初期,建议你每次都看一下它要执行的命令,熟悉后可以用/permissions预授权常见命令(后面会细讲),或者直接启用Auto模式。

“售后”服务

1.、运行出问题怎么办?

不要试图自行理解和描述(除非你确定),直接把错误信息给Claude Code:

运行报错了:
TypeError: Cannot read properties of undefined (reading 'map') at formatArticles (src/formatter.ts:15:23)

它会自动读取错误信息、定位问题、修改代码、再次运行。一般进行1~2轮就能搞定。

2、添加功能

用自然语言告诉Claude Code即可:

# 第一个改进:加AI摘要
现在每篇文章的摘要是从description里截取的,比较粗糙。
改成用AI来总结:对每篇文章的标题+description,用Claude API
生成一句话总结。
API key从环境变量ANTHROPIC_API_KEY读取。

每一轮,它都自动修改代码、运行测试、确认结果。你始终只需做两件事:说清楚要什么、验证结果。

到这里,第一个项目就完成了。回头看看整个过程:

不管项目大小,也不管是小工具还是完整产品,底层模式都是这5步。

新手建议

1、看不懂代码?直接问。

2、运行出问题?描述现象比定位代码行更有效,除非你知道问题出在哪儿。

3、执行跑偏了?偏得不远,直接纠正。偏得太远,直接中断。

4、该管到什么程度?基本原则:信任但验证。

让Claude Code去做,但检查每一步的结果。

方案阶段:仔细看,确保方向对。

编码阶段:大致看一下文件结构。

执行阶段:检查输出是否符合预期。

改进阶段:多测试边界情况,如空数据、网络超时、格式异常。

总结

到此,你已经完成了对于Claude Code的上手工作,而且可以做很多事情了,但是,如果你想在这个基础上更进一步,从会用工具到善用工具,和别人拉开差距,下一篇带来相关内容~

第一时间收取信息,可关注公众号“前端说书匠”。