Claude Code 实战---开发华尔街日报风格新闻卡片应用

⚡⚡⚡ 欢迎预览，批评指正⚡⚡⚡

文章目录

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

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

1，需求

1.1，目标

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

1.2，实现功能

功能特性:

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

技术栈:

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

2，开发流程

完整开发流程

2.1，项目初始化

第一阶段：项目初始化

Step 1: 创建项目结构

打开终端，启动 Claude Code：

bash 复制代码

cd ~/projects
claude

在 Claude Code 中输入：

bash 复制代码

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

请给我完整的命令行步骤

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

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

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

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

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

然后，继续在 Claude Code 中：

bash 复制代码

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

Claude 会生成 tailwind.config.js：

继续配置 CSS：

bash 复制代码

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

2.2，创建核心组件

第二阶段：创建核心组件

Step 2: 创建项目文件结构

bash 复制代码

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

执行过程，一路 yes

Step 3: 开发 NewsCard 组件

bash 复制代码

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

Step 4: 创建编辑器组件

bash 复制代码

创建 src/components/NewsCardEditor.vue
要求：
1. 左侧是表单编辑区域
2. 右侧是实时预览区域
3. 表单包含：分类、标题、副标题、摘要、作者、日期、图片上传
4. 使用受控组件
5. 图片上传支持拖拽和点击
6. 优雅的表单设计，符合 WSJ 风格

Step 5: 创建导出功能

bash 复制代码

创建 src/components/ExportButton.vue
要求：
1. 使用 html2canvas 导出卡片为 PNG
2. 显示加载状态
3. 点击后自动下载
4. 优雅的按钮设计

2.3，优化与增强

第三阶段：优化与增强

Step 7: 添加预设模板功能

bash 复制代码

在 NewsCardEditor 组件中添加预设模板功能
要求：
1. 创建 3-5 个不同主题的新闻模板
2. 用户可以快速选择模板
3. 选择后自动填充表单
4. 在编辑器上方显示模板选择器

3，实现效果

最后运行项目：

bash 复制代码

npm run dev

完整效果：

感谢阅读，下期更精彩 👋👋👋