首页 > 分享 > Claude Code 实战

Claude Code 实战

花匠小妙招
2026-03-26 05:08

本章节我们将介绍如何用 Claude Code 通过我们的描述提示词开发华尔街日报风格新闻卡片应用。

整个过程尽量不写一行代码，用我们的自然语言描述让 AI 帮我们完成整个项目。

目标: 使用 React + Tailwind CSS 创建一个华尔街日报风格的新闻卡片生成器

功能特性:

经典的 WSJ 设计风格（衬线字体、简洁排版）新闻卡片生成（标题、摘要、作者、时间）支持图片上传和预览导出为图片功能响应式设计实时预览编辑

技术栈:

React 18 Tailwind CSS 3 Vite (构建工具) html2canvas (导出图片)

完整开发流程

第一阶段：项目初始化）

Step 1: 创建项目结构

打开终端，启动 Claude Code：

cd ~/projects claude

在 Claude Code 中输入：

我要创建一个新的 React 项目，使用 Vite 作为构建工具项目名称：wsj-news-card-generator 要求： 1. 使用 Vite 创建 React 项目 2. 集成 Tailwind CSS 3. 添加必要的依赖：html2canvas（用于导出图片） 4. 创建清晰的文件夹结构请给我完整的命令行步骤

Claude 会返回类似如下的内容：

Claude Code 给出了完整的操作步骤，我们可以按它给的内容完成项目创建，然后按以下步骤一步步创建文件，慢慢调整。

另外你也可以在提示词设置让它自动创建，要确保有可执行权限。

自动创建的过程，有一些提示，选择 yes，回车即可：

完成后，生成了完整的项目结构，如下所示：

然后，继续在 Claude Code 中：

现在帮我配置 Tailwind CSS 修改 tailwind.config.js，添加自定义配置： 1. 添加 WSJ 风格的颜色（深灰色文字、金色强调色） 2. 添加衬线字体（Playfair Display, Merriweather） 3. 扩展阴影效果

Claude 会生成 tailwind.config.js：

继续配置 CSS：

修改 src/index.css，导入 Tailwind 和字体

第二阶段：创建核心组件

Step 2: 创建项目文件结构

创建以下文件夹结构： src/ components/ NewsCard.jsx # 新闻卡片组件 NewsCardEditor.jsx # 编辑器组件 ExportButton.jsx # 导出按钮组件 utils/ exportImage.js # 导出图片工具函数 App.jsx main.jsx

执行过程，一路 yes：

Step 3: 开发 NewsCard 组件

创建 src/components/NewsCard.jsx 要求： 1. 华尔街日报经典风格的新闻卡片 2. 包含：大标题、副标题、正文摘要、作者、日期、分类标签 3. 可选的特色图片（如果提供） 4. 使用 Tailwind 类名，体现 WSJ 的排版美学 5. 添加金色装饰线条 6. 卡片尺寸：适合社交媒体分享（1200x630px）

执行过程，一路 yes：