npx claudepluginhub darkroomengineering/cc-settingsThis skill is limited to using the following tools:
Combines Figma MCP (structured data) with pinchtab browser control (visual interaction) for design-to-code workflows.
Translates Figma designs into production-ready UI code with 1:1 visual fidelity using MCP server. Use for node-specific implementations from Figma URLs or desktop selections.
Translates Figma designs into production-ready UI code with 1:1 visual fidelity using MCP server. Use for Figma node URLs, selections, or 'implement design' requests.
Share bugs, ideas, or general feedback.
Combines Figma MCP (structured data) with pinchtab browser control (visual interaction) for design-to-code workflows.
MCP = tokens, styles, component props, file structure. PinchTab = screenshots, navigation, layer inspection, interactive exploration.
Requires pinchtab (installed by setup.sh). Figma desktop app must be installed. The Figma Dev Mode MCP must be configured in settings.
# macOS — launch Figma with debugging port
open -a "Figma" --args --remote-debugging-port=9222
If Figma is already running, quit it first, then relaunch with the flag.
# Launch a persistent Figma profile instance connected via CDP
CDP_URL=ws://localhost:9222 pinchtab instance launch --profile=figma --mode headed
# List available tabs/windows
pinchtab tabs
# Switch to the correct tab (Figma file)
pinchtab tab info <tab-id>
pinchtab screenshot
# Should show the Figma canvas
Compare a Figma frame directly against the running implementation.
# Step 1: Connect and screenshot the Figma frame
open -a "Figma" --args --remote-debugging-port=9222
CDP_URL=ws://localhost:9222 pinchtab instance launch --profile=figma --mode headed
# Navigate to the target frame in Figma
pinchtab screenshot # Capture the design
# Step 2: Screenshot the implementation
pinchtab nav http://localhost:3000/target-page
pinchtab screenshot # Capture the implementation
# Step 3: Compare
# Use the /qa comparison review output format
Output format: Use the "Comparison Review (Implementation vs Mockup)" format from /qa:
## Design vs Implementation Review
**Fidelity score:** [1-10] / 10
### Deviations Found
1. **[Element]:** Mockup shows [X], implementation has [Y]
Impact: [High/Medium/Low]
-> **Fix:** [How to match the mockup]
### Matching Well
- [Elements that accurately match the design]
Pull design tokens from Figma — use MCP for structured data, PinchTab for visual inspection fallback.
MCP first (preferred):
mcp__figma__* tools to extract colors, typography, spacing, effectsPinchTab fallback (when MCP doesn't expose it):
# Assumes Figma is connected — see "Connecting to Figma Desktop" above
pinchtab screenshot # Capture the inspect panel values
# Read values from the dev mode measurements
Use PinchTab when you need:
Navigate Figma files interactively to inspect components, states, and variants.
# Assumes Figma is connected — see "Connecting to Figma Desktop" above
pinchtab screenshot # See current state
# Use Figma's UI to switch variants, states
pinchtab snap -i -c # Get accessibility tree for clickable elements
pinchtab click e5 # Click variant switcher, state toggle, etc.
pinchtab screenshot # Capture the new state
Use this for:
PinchTab supports persistent profiles so Figma auth persists across sessions:
# First time — launches browser, you log in to Figma
pinchtab instance launch --profile=figma --mode headed
# Future sessions — reuses saved profile (no re-auth needed)
pinchtab instance launch --profile=figma --mode headed
pinchtab tabs to find the right onepinchtab text for quick content extraction before taking full screenshots