catlog22/Claude-Code-Workflow
1
0
Fork 0
mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-02-05 01:50:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: add Chrome DevTools MCP requirement for UI workflows

Browse Source 
Add documentation for Chrome DevTools MCP server requirement across
English and Chinese README files:

Changes:
- Add Chrome DevTools MCP to MCP servers table with installation link
- Mark as required for UI workflows (URL mode design extraction)
- Add UI Workflows benefit to MCP benefits section
- Add warning note before UI Design Workflow Commands section
- Document graceful fallback to visual analysis when unavailable

Reference: https://github.com/ChromeDevTools/chrome-devtools-mcp

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
catlog22
2025-10-16 14:37:55 +08:00
parent 610f75de52
commit 3066680f16
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -270,12 +270,14 @@ MCP (Model Context Protocol) tools provide advanced codebase analysis. **Recomme
|------------|---------|-------------------|
| **Exa MCP** | External API patterns & best practices | [Install Guide](https://smithery.ai/server/exa) |
| **Code Index MCP** | Advanced internal code search | [Install Guide](https://github.com/johnhuang316/code-index-mcp) |
| **Chrome DevTools MCP** | ⚠️ **Required for UI workflows** - URL mode design extraction | [Install Guide](https://github.com/ChromeDevTools/chrome-devtools-mcp) |
#### Benefits When Enabled
- 📊 **Faster Analysis**: Direct codebase indexing vs manual searching
- 🌐 **External Context**: Real-world API patterns and examples
- 🔍 **Advanced Search**: Pattern matching and similarity detection
- ⚡ **Better Reliability**: Primary tools for certain workflows
- 🎨 **UI Workflows**: Chrome DevTools enables pixel-perfect design extraction from live URLs
⚠️ **Note**: Some workflows expect MCP tools to be available. Without them, you may experience:
- Slower code analysis and search operations
@@ -492,6 +494,8 @@ cd .workflow/WFS-auth/.design/prototypes && python -m http.server 8080
The design workflow system provides complete UI design refinement with **layout/style separation architecture**, **pure Claude execution**, **intelligent target inference**, and **zero external dependencies**.
⚠️ **For URL-based design extraction**: Install [Chrome DevTools MCP](https://github.com/ChromeDevTools/chrome-devtools-mcp) to enable auto-extraction of computed styles and DOM structure from live URLs. Falls back to visual analysis if unavailable.
#### 📐 Architecture Overview
The UI workflow follows a **separation of concerns** philosophy: