谨以此文,纪念可能是最后一次的”程序员节“。
过去,你想做互联网创业,要懂产品、懂设计、懂开发,是漫长的学习,繁琐的沟通,反复迭代,极大的人力和时间成本,稍有某个环节走不通,就进行不下去。
但是现在,在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图鉴自动抓取并翻译,版权归原作者所有;如需查看原文请点下方链接。
In this context, the commemoration may be the last of the programmers' festivals.
In the past, if you want to be an Internet entrepreneur, you need to understand products, design, development, long learning, cumbersome communication, iterative, enormous human and time costs, and a little bit of a failure to get through.
But now, with AI's help, how simple can this be? You just type.
Because AI's brain contains all the things that you already have and don't have, and analyses, sorts, solves problems.
This tool, which is described in this series, is one of many that stands out.
Installation and Usage
When the author first installed Claude Code, only one line of command was entered in the terminal, and it was automatically installed in 30 seconds. Enter the claude in the dialogue box and press Enter, and a flash cursor appears immediately on the screen. Enter "Hello." It answered immediately. The whole process was less than one minute.
As to how you install it, it depends on your system, following official instructions.
The rules are divided into: terminal CLI, desktop end, web page, extension/plug-in, related to personal habits, randomly selected, which is more appropriate if you want to work in immersion without heart.
First Directive
Before giving orders, just get ready: where does AI work? It is also simple to set your project catalogue to working directory (select a folder) to allow Claude Code to add, delete, modify, etc. to the project.
Then banging on a "claude" and there's an interface.
The first directive is to see if your communication with it is effective.
Creates a simple HTML page showing " Hello, Claude Code!" with a nice CSS style.
You'll see Claude Code starts creating an HTML file in your directory, writing the complete code. The process takes 10-30 seconds.
Then you can see the effects in the browser if you can see a styled "Hello, Claude Code!" page. Congratulations, everything is fine.
This appears to be very simple, but its significance cannot be ignored: a natural language allows AI to complete the entire process of “understanding the need to create a document code”. All the later stages are built on this basis.
Dialogue programming
Whether it's a terminal, a desktop or a web page, the programming process is a conversation, and now we're trying to make a home page called "my-homepage"
Also in line with the above steps:
mkdir my-homepage & cd my-homepage// create and enter
claude / / Start
You can give orders.
Help me make a home page. One page HTML, look good.
Content: My name is [your name] and it's a [your profession/identity].
Add a self-presentation, a description of me with a few social media links at the bottom.
In a modern style of simplicity, a responsive layout.
Claude Code will generate a complete HTML file in 30 seconds. Double-click an HTML file to see effects.
You should see a nice page. But it may not be the way you want it to be -- it might be too common, or it could be better. It's all right.
Align colour with dark background + bright text. Font to liner.
Add a gradual background animation effect.
Claude Code will automatically modify the file and refresh the browser to see changes. You can change a few more rounds until you're satisfied.
The whole process will not exceed five minutes, but you have completed a complete dialogue-style programming: a description of the need for Claude Code to achieve a view and propose changes to Claude Code. All follow-up projects, however complex, follow this process.
Achieving news aggregaters
You might think unconsciously: What should I do? Wrong.
From now on, change your mind, you're the product manager, Claude Code is the engineer. All you have to do is say what you want and tell AI what to do.
Tell Claude Code what you want.
The form of instructions issued for each project is similar, albeit different in content, and this requirement is illustrated by the following:
Help me make an AI NewsSyndication CLI tool.
1. Taking the last 24 hours of articles from RSS sources below
- TechCrunch AI.
- The Verge AI channel.
- Hacker News AI tag stream
2. Title, link, publish time, source of each article
3. Output of a daily report in Markdown format to output/directory, in chronological order
Written in TypeScript, running directly in tsx
Don't rush the code. Give me a plan.
Does it look like you're talking about people? This is called a “demand description”.
The quality of the demand description directly determines the output quality. The recommendations follow several principles: clarify what the end product looks like (Marktown daily); specify a technology selection (TypeScript+tsx); and give a specific data source URL.
Let's not say that, like the above, we're going to finish the basic framework and give it one-off, or you're going to have to communicate more than once, which is going to cost you more.
Note that the last phrase, “don't hurry to write the code”, is not a courtesy but an important technique: let Claude Code think about it first.
Look at the plan.
Claude Code will not write the code directly upon receipt of the above-mentioned request, but will give you a programme first. It is broadly as follows:
I'll help you with this AI News Syndication tool. The programme begins:
Project structure:
ai-news-digest/
├── src/
I miss-index.ts #entry files
I miss-fetcher.ts #RSS capture logic
#Markdown
│-types.ts#type definition
Ideas -output/ #dailies output directory
├── package.json
└── tsconfig.json
Technical programmes:
- RSS parser library
- HTTP requests a setch from the code.
- Date-fns for date processing
- Run TypeScript directly with tsx, no step to compile
Implementation process:
Parallel capture of 3 RSS sources
2. Uniform format, filtering articles within 24 hours
3. Timing
4. Generate a daily newspaper in Markdown format
5. Write output/YYYYY-MM-DD.md
Do you want me to start?
If it is felt that the programme is feasible, say “good”; if it is to be adjusted, amendments are proposed, such as:
# Your feedback
The plan is fine. Two additional points:
Add a sentence summary for the articles in the daily newspaper (100 words in front of the article description)
2. At the beginning of the daily newspaper plus statistics: X entries, from Y sources
This is the core of the dialogue programming: Claude Code out, you add details, Claude Code amends. You don't have to draw flow charts, you don't have to write technical documents, you just talk like you normally do.
Look at it.
When the programme was confirmed, Claude Code began to implement. You'll see a series of operations at the terminal.
After writing the code, Claude Code usually tries to run it once to see if it's wrong. If an error is reported, it reads the wrong information itself, finds problems, fixes the code, re-runs it into an automatic repair cycle.
The whole process takes two to five minutes.
During the course of implementation, Claude Code may request permission several times. In the early stages, it is suggested that you look at the orders it is about to execute, either by pre-authorizing common commands (detailed later), or directly using Auto mode.
“After-sale” services
1. What about running problems?
Don't try to understand and describe yourself (unless you're certain) by giving Claude Code the wrong information:
Other Organiser
TypeError: Cannot read properties of undefined (reading 'map') at formatArticles (src/formatter.ts:15:23)
It automatically reads error information, position problems, changes codes, runs again. It's usually one or two rounds.
2. Add function
Just tell Claude Code in natural language:
# First improvement: plus AZsummary
Now summary from every article is taken from the description, which is rougher.
Replace with AI to sum up: +description for each article with Claude API
Generate a summary.
API key read from the environment variable ANTHROPIC API KEY.
For each round, it automatically changes the code, runs the test, and confirms the result. You always have to do two things: say what you want, validate the results.
Here, the first project is completed. Look at the whole process:
The bottom model is five steps in size, small tools and complete products.
beginner Recommendations
Can't read the code? Just ask.
Two, running problems? The description is more effective than the locator line unless you know where the problem is.
3. Implementation is off course? Not far away, right away. Too far, straight out.
How far does it go? Basic principles: trust but certification.
Let Claude Code do it, but check the results of every step.
Programme stage: Take a closer look and ensure that direction is right.
Encoding Phase: An overview of the document structure.
Implementation phase: Check whether output meets expectations.
Improvement phase: Multiple testing of boundary situations such as empty data, network timeout, abnormal format.
Summary
So, you've done your best work on Claude Code, and you can do a lot of things, but if you want to build on this, you're going to use the tools, you're going to use the tools, and you're going to make a difference with others.
First-time information can be collected with attention to WeChat Official Account's “front-end booksmith”.
Auto-fetched and translated by AI Atlas. All rights belong to the original author.