skills.rest
Gitnapp
GitnappCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/Gitnapp/Skills --skill claude-design-cdp
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
hongmaple0820hongmaple0820
9

ux-ui-design-system

Audit interfaces for WCAG 2.2 AA compliance and design consistency.

Community
Advanced
PracticalSwanPracticalSwan
7

web-testing

Automate web application testing with Playwright and Chrome DevTools.

Community
Advanced
browser-usebrowser-use
615

browser-use-terminal

Automate browser tasks via Python scripts and direct CDP control of Chrome.

Official
Advanced