Auto-sync: 2026-04-20 00:02

Hermes/xingzhi/chrome-devtools-mcp-infographic-prompts-2026-04-20.md

@@ -0,0 +1,169 @@
+# Chrome DevTools MCP - Infographic Prompts
+
+Generated: 2026-04-20
+Layout: circular-flow
+Style: chalkboard
+Aspect: 16:9
+
+---
+
+## Part 1: System Prompt
+
+```
+Create a professional infographic with the following specifications:
+
+## Image Specifications
+- Type: Infographic
+- Layout: circular-flow (cyclic process showing continuous steps arranged in a circle)
+- Style: chalkboard (chalk on black board aesthetic)
+- Aspect Ratio: 16:9
+- Language: English
+
+## Core Principles
+- Follow the circular-flow layout structure: arrange information nodes in a circle with directional arrows
+- Each section represents a tool category as a node on the circle
+- Use chalk-drawn style: imperfect hand-drawn lines, chalk dust effects, white/yellow/pink/blue chalk colors
+- Black chalkboard background (#1A1A1A)
+- Center can hold the main concept "Chrome DevTools MCP"
+- Maintain authentic chalk texture on all elements
+- Use circular arrangement to show the tool workflow cycle
+- Clear visual hierarchy with color variety
+
+## Text Requirements
+- Main titles prominent and readable in chalk white
+- Key concepts emphasized with chalk yellow/pink
+- Labels clear and appropriately sized
+```
+
+---
+
+## Part 2: Style Locking Prompt
+
+```
+## Style Guidelines - chalkboard
+
+### Background
+- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
+- Texture: Realistic chalkboard texture with subtle scratches, dust particles
+
+### Typography
+- Hand-drawn chalk lettering with visible chalk texture
+- White or bright colored chalk for emphasis
+
+### Color Palette
+- Background: #1A1A1A (Chalkboard Black)
+- Primary Text: #F5F5F5 (Chalk White)
+- Accent 1: #FFE566 (Chalk Yellow) - highlights, emphasis
+- Accent 2: #FF9999 (Chalk Pink) - secondary highlights
+- Accent 3: #66B3FF (Chalk Blue) - links, connections
+- Accent 4: #90EE90 (Chalk Green) - success indicators
+
+### Visual Elements
+- Hand-drawn chalk illustrations with sketchy, imperfect lines
+- Chalk dust effects around text and key elements
+- Doodles: stars, arrows, underlines, circles
+- Connection lines with hand-drawn feel
+- Directional arrows showing cycle flow
+
+### Do
+- Maintain authentic chalk texture on all elements
+- Use imperfect, hand-drawn quality
+- Add subtle chalk dust and smudge effects
+- Create visual hierarchy with color variety
+- Include playful doodles and annotations
+
+### Don't
+- Use perfect geometric shapes
+- Create clean digital-looking lines
+- Add photorealistic elements
+- Use gradients or glossy effects
+```
+
+---
+
+## Part 3: Content Structure Prompt
+
+```
+## Content Structure - circular-flow
+
+### Center Element
+- "Chrome DevTools MCP" - main concept in center of circle
+
+### Circle Nodes (6 categories, clockwise flow):
+1. INPUT AUTOMATION (9 tools)
+   - click, drag, fill, fill_form, handle_dialog, hover, press_key, type_text, upload_file
+   - Chalk Pink icon/node
+
+2. NAVIGATION AUTOMATION (6 tools)
+   - close_page, list_pages, navigate_page, new_page, select_page, wait_for
+   - Chalk Blue icon/node
+
+3. EMULATION (2 tools)
+   - emulate, resize_page
+   - Chalk Yellow icon/node
+
+4. PERFORMANCE (4 tools)
+   - performance_analyze_insight, performance_start_trace, performance_stop_trace, take_memory_snapshot
+   - Chalk Green icon/node
+
+5. NETWORK (2 tools)
+   - get_network_request, list_network_requests
+   - Chalk Pink icon/node
+
+6. DEBUGGING (6 tools)
+   - evaluate_script, get_console_message, lighthouse_audit, list_console_messages, take_screenshot, take_snapshot
+   - Chalk Blue icon/node
+
+### Supported Clients (around the outer edge):
+- Claude Code, Cline, Cursor, VS Code, Copilot, Codex, Gemini, JetBrains, Kiro, Windsurf, Amp, Antigravity, Command Code, Factory, Mistral, OpenCode, Qoder, Warp
+
+### Configuration Options (bottom section):
+- --headless, --slim, --autoConnect, --browser-url, --channel, --viewport, --isolated, --user-data-dir
+
+### Arrows
+- Curved directional arrows connecting each node in clockwise direction
+- Showing continuous workflow cycle
+
+### Labels in English
+- All text labels in English
+- Use chalk white for main text, chalk yellow for emphasis
+```
+
+---
+
+## Visual Layout Diagram
+
+```
+                    [INPUT]
+                       ↓
+                  ↙       ↘
+        [DEBUGGING] ←   CENTER   → [NAVIGATION]
+                  ↗       ↣
+         ↙                               ↘
+    [NETWORK]  ←─────────────────────→  [EMULATION]
+         ↘                               ↙
+                  ↗       ↣
+        [PERFORMANCE]                   →
+                       ↓
+                    [???]
+
+Actually circular flow (clockwise):
+┌─────────────────────────────────────────┐
+│                                         │
+│   [EMULATION] → [PERFORMANCE]           │
+│      ↗              ↗                  │
+│      │              │                     │
+│ [DEBUGGING]    [NAVIGATION]              │
+│      │              │                     │
+│      ↖              ↘                  │
+│   [NETWORK] ← [INPUT]                  │
+│                                         │
+│   Center: "Chrome DevTools MCP"           │
+└─────────────────────────────────────────┘
+```
+
+---
+
+## Final Prompt Summary
+
+Generate a chalkboard-style infographic showing Chrome DevTools MCP tool categories arranged in a circular flow pattern. The circle has 6 nodes representing the tool categories (Input Automation, Navigation, Emulation, Performance, Network, Debugging). Each node displays the tool count and key tool names in chalk-style lettering. The center shows "Chrome DevTools MCP" as the main concept. Arrows show clockwise flow indicating the continuous nature of browser automation workflow. Use authentic chalkboard aesthetic with black background (#1A1A1A), chalk white text, and colorful chalk accents (yellow, pink, blue, green) for visual hierarchy. Include chalk dust effects and hand-drawn imperfect lines throughout.