AI图鉴

AI图鉴首页 › AI 资讯 › Claude Code 编程实战:外行人第一次可以独挑大梁

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

来源:掘金 · 发布时间:10-24 · 由 AI图鉴每小时自动聚合

过去,你想做互联网创业,要懂产品、懂设计、懂开发,是漫长的学习,繁琐的沟通,反复迭代,极大的人力和时间成本,稍有某个环节走不通,就进行不下去。 但是现在,在AI的辅助下,这件事可以简单到什么程度?

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

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

但是现在,在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的上手工作,而且可以做很多事情了,但是,如果你想在这个基础上更进一步,从会用工具到善用工具,和别人拉开差距,下一篇带来相关内容~

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

本文由 AI图鉴自动抓取并翻译,版权归原作者所有;如需查看原文请点下方链接。

相关 AI 工具

相关免费羊毛

同源资讯

阅读原文(juejin.cn)

标题、摘要与正文均来自该信源的公开页面,版权归原作者所有;本站自动聚合与翻译,仅作出处跳转。

← 返回 AI 资讯列表AI工具图鉴首页

返回 AI图鉴首页 · 提交工具 · 商务合作 · 关于本站 · 590 款 AI 工具分类导航 · 每日 AI 热门项目与动态