YouTip

In this chapter, we'll introduce how to use Claude Code to develop a Wall Street Journal style news card application through our description prompts. Throughout this process, we'll try not to write a single line of code, using our natural language descriptions to let AI help us complete the entire project. **Goal**: Create a Wall Street Journal style news card generator using React + Tailwind CSS **Features**: * Classic WSJ design style (serif fonts, clean typography) * News card generation (title, summary, author, time) * Image upload and preview support * Export as image functionality * Responsive design * Real-time preview editing **Tech Stack**: * React 18 * Tailwind CSS 3 * Vite (Build Tool) * html2canvas (Image Export) * * * ## Complete Development Process ### Phase 1: Project Initialization #### Step 1: Create Project Structure Open terminal and launch Claude Code: cd ~/projects claude In Claude Code, enter: I want to create a new React project using Vite as the build tool Project name: wsj-news-card-generator Requirements: 1. Use Vite to create a React project 2. Integrate Tailwind CSS 3. Add necessary dependencies: html2canvas (for image export) 4. Create a clear folder structure Please give me the complete command line steps Claude will return something similar to the following: !(#) Claude Code provides complete operation steps. We can complete the project creation according to the content it provides, and then create files step by step and adjust gradually. You can also set it to automatically create in the prompt, making sure it has executable permissions. During the automatic creation process, there are some prompts, select yes and press enter: !(#) After completion, a complete project structure is generated, as follows: !(#) Then, continue in Claude Code: Now help me configure Tailwind CSS Modify tailwind.config.js and add custom configuration: 1. Add WSJ style colors (dark gray text, gold accent color) 2. Add serif fonts (Playfair Display, Merriweather) 3. Extend shadow effects !(#) Claude will generate tailwind.config.js: !(#) Continue configuring CSS: Modify src/index.css, import Tailwind and fonts !(#) ### Phase 2: Create Core Components #### Step 2: Create Project File Structure Create the following folder structure: src/ components/ NewsCard.jsx # News card component NewsCardEditor.jsx # Editor component ExportButton.jsx # Export button component utils/ exportImage.js # Export image utility function App.jsx main.jsx Execution process, all yes: !(#) #### Step 3: Develop NewsCard Component Create src/components/NewsCard.jsx Requirements: 1. Classic Wall Street Journal style news card 2. Include: main headline, subtitle, body summary, author, date, category tag 3. Optional featured image (if provided) 4. Use Tailwind class names, reflecting WSJ's typography aesthetics 5. Add gold decorative lines 6. Card size: suitable for social media sharing (1200x630px) Execution process, all yes: !(#) Claude generates NewsCard.jsx: !(#) #### Step 4: Create Editor Component Create src/components/NewsCardEditor.jsx Requirements: 1. Left side is form editing area 2. Right side is real-time preview area 3. Form includes: category, title, subtitle, summary, author, date, image upload 4. Use controlled components 5. Image upload supports drag and click 6. Elegant form design, matching WSJ style !(#) #### Step 5: Create Export Function Create src/components/ExportButton.jsx Requirements: 1. Use html2canvas to export card as PNG 2. Show loading state 3. Auto download after click 4. Elegant button design !(#) ### Phase 3: Optimization and Enhancement #### Step 7: Add Preset Template Function Add preset template function in NewsCardEditor component Requirements: 1. Create 3-5 news templates with different themes 2. Users can quickly select templates 3. Auto fill form after selection 4. Show template selector above editor !(#) Complete effect: !(#) Let it be changed to suitable for Chinese information content All descriptions changed to Chinese, suitable for generating Chinese information news Complete effect: !(#)