XCode 实战：新闻卡片生成器

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

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

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

功能特性：

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

技术栈：

• React 18
• Tailwind CSS 3
• Vite（构建工具）
• html2canvas（导出图片）

---

完整开发流程

第一阶段：项目初始化

#### Step 1：创建项目结构

打开终端，启动 XCode：

cd ~/projects
xcode

在 XCode 中输入：

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

XCode 会返回完整的操作步骤，我们可以按它给的内容完成项目创建，然后按以下步骤一步步创建文件，慢慢调整。

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

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

完成后，生成了完整的项目结构。

然后，继续在 XCode 中：

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

XCode 会生成 tailwind.config.js。

继续配置 CSS：