claude-design-cdp
CommunityAutomate Claude Design workflows via CDP
AuthorGitnapp
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves the challenge of controlling Claude Design's browser-based interface programmatically when direct design canvas access and manual interaction are inefficient.
Core Features & Use Cases
- Browser Automation: Connects to Chrome through DevTools Protocol and Playwright to navigate Claude Design projects, files, and UI controls.
- Design Analysis Workflows: Enables querying design content, tokens, and WCAG contrast information through Claude Design chat when canvas data is sandboxed.
- Use Case: A designer or developer can automate opening a Claude Design project, inspect design files, request accessibility contrast reports, and apply design improvements through the web interface.
Quick Start
Use the claude-design-cdp skill to connect to my Chrome session and inspect the Claude Design project for accessibility contrast details.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: claude-design-cdp Download link: https://github.com/Gitnapp/Skills/archive/main.zip#claude-design-cdp Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 545,000+ vetted skills library on demand.