claude-design-cdp

Automate Claude Design web interfaces via Chrome DevTools Protocol and Playwright.

Updated Feb 21, 2026

Search Tags:#accessibility #wcag #playwright #cdp #design-tokens #browser-automation #claude-design

Ready to run

npx skills add https://github.com/Gitnapp/Skills --skill claude-design-cdp

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: claude-design-cdp
Source: https://github.com/Gitnapp/Skills/tree/main/creative/claude-design-cdp
Command: npx skills add https://github.com/Gitnapp/Skills --skill claude-design-cdp

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about claude-design-cdp

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automate Claude Design browser workflows using Chrome DevTools Protocol?▼

You can automate Claude Design browser workflows by connecting Playwright to a local Chrome CDP session, allowing programmatic navigation of design projects, file browsing, and UI controls without manual interaction.

Can I check WCAG accessibility contrast in Claude Design programmatically?▼

Yes, you can request WCAG contrast reports by connecting to Claude Design through a CDP session and querying design content and tokens via Claude Design chat when the canvas data is sandboxed.

Do I need Playwright to inspect design files through a CDP connection?▼

Yes, Playwright is required to establish the CDP connection and automate the browser interactions needed to navigate Claude Design projects and inspect sandboxed design files.

What's the best way to extract design tokens from a sandboxed Claude Design canvas?▼

The best way to extract design tokens from a sandboxed canvas is using browser automation via CDP to interact with the Claude Design chat, querying the interface directly to retrieve content and accessibility information.

Why does Claude Design require a local Chrome CDP session for design analysis?▼

Claude Design requires a local Chrome CDP session because the design canvas data is sandboxed, preventing direct access and necessitating programmatic browser control to navigate files and query design tokens.

Are there limitations to using CDP for accessibility analysis in browser-based design tools?▼

CDP automation for accessibility analysis is limited by the sandboxed environment, meaning you cannot access canvas data directly and must rely on chat interactions within the web interface to retrieve design information.