vibe-coding-cn/i18n/en/prompts/02-coding-prompts/Essential Technical Documentation Generation Prompt.md

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