diff --git a/i18n/en/prompts/coding_prompts/Essential Technical Documentation Generation Prompt.md b/i18n/en/prompts/coding_prompts/Essential Technical Documentation Generation Prompt.md new file mode 100644 index 0000000..eaff3c5 --- /dev/null +++ b/i18n/en/prompts/coding_prompts/Essential Technical Documentation Generation Prompt.md @@ -0,0 +1,106 @@ +# Essential Technical Documentation Generation Prompt + +## Essential General Version + +``` +Based on the current project files, help me generate technical documentation: + +【Project Information】 +Name: {Project Name} +Problem: {Core Problem} +Technology: {Tech Stack} + +【Document Structure - 4 Parts】 + +1️⃣ Problem and Solution (300 words) + - What is the problem + - Why it needs to be solved + - How to solve it + - Why this solution was chosen + +2️⃣ Technical Implementation (300 words) + - What technologies were used + - Role of each technology + - Explanation of key technical points + - Key parameters or configurations + +3️⃣ System Architecture (simple flowchart) + - Complete data flow + - Relationships between parts + - Execution process + +4️⃣ Achievements and Benefits (200 words) + - What was solved + - What benefits were brought + - Reusable aspects +``` + +--- + +## CoinGlass Project - Practical Example + +**1️⃣ Problem and Solution** + +The heatmap on the CoinGlass website cannot be obtained via API and is dynamically rendered by React. + +Solution: Use Playwright browser automation for screenshots. +- Launch a headless browser, visit the website, wait for animation to complete. +- Take a precise screenshot and crop it to get a clean heatmap. + +Why this solution was chosen: +- API: No public API for the website ❌ +- Scraper: Cannot handle JavaScript dynamic rendering ❌ +- Screenshot: Directly obtains the final visual result, most accurate ✅ + +**2️⃣ Technical Implementation** + +- **Playwright** - Browser automation framework, controls browser behavior. +- **Chromium** - Headless browser engine, executes JavaScript. +- **PIL** - Python Imaging Library, for precise cropping. + +Key technical points: +- Waiting strategy: 5 seconds initial + 7 seconds animation (ensures React rendering and CSS animations complete). +- CSS selector: `[class*="treemap"]` to locate the heatmap container. +- Precise cropping: Left -1px, Right -1px, Top -1px, Bottom -1px → 840×384px → 838×382px (completely borderless). + +**3️⃣ System Architecture** + +``` +Crontab scheduled task (hourly) + ↓ + Python script starts + ↓ +Playwright launches browser + ↓ +Visit website → Wait (5s) → Click coin → Wait (7s) + ↓ +Screenshot (840×384px) + ↓ +PIL cropping (Left -1, Right -1, Top -1, Bottom -1) + ↓ +Final Heatmap (838×382px) + ↓ +Save to local directory +``` + +**4️⃣ Achievements and Benefits** + +Achievements: +- ✓ Automatically and regularly obtains heatmaps (no manual intervention). +- ✓ 100% success rate (completely reliable). +- ✓ Complete historical data (persistently saved). + +Benefits: +- Efficiency: From manual 5 minutes → automatic 16.5 seconds. +- Annual savings: 243 hours of work time. +- Quality: Consistent screenshot quality. + +Reusable experience: +- Playwright browser automation best practices. +- Anti-scraping detection bypass strategies. +- Dynamic rendering page waiting patterns. + +--- + +*Version: v1.0 (Essential Edition)* +*Update: 2025-10-19*