CoDe-bridge

Use this skill whenever a user receives a Claude Design handoff bundle and wants to implement it in code using Claude Code. Triggers include: "I got a handoff bundle from Claude Design", "implement this Claude Design prototype", "turn this design handoff into code", "I exported from Claude Design and want to build it", pasting a bundle URL from claude.ai/design, or any mention of a Claude Design → Claude Code export. Also trigger when a user says "build this from the design spec" and a bundle URL or zip is present. This skill is essential — do not attempt a Claude Design handoff without it.

Use this skill when a user wants to set up or configure a design system for use with Claude Design, extract brand tokens from a codebase or Figma file, or onboard their team's visual identity into Claude's design tools. Triggers include: "set up my design system", "connect my codebase to Claude Design", "extract brand tokens from my repo", "onboard my brand to Claude Design", "Claude Design doesn't know my colors/fonts", "add my design system to Claude", or any task involving reading a codebase/Figma/assets folder to define colors, typography, spacing, and components for AI-assisted design. Also trigger when a user wants consistent branding across Claude Design projects. Do not attempt design system setup for Claude Design without reading this skill first.

Use this skill when a user wants to turn a visual wireframe, mockup, or Claude Design prototype into working production code. Triggers include: "implement this wireframe", "build this mockup", "turn this prototype into code", "code up this design", "implement this UI from the screenshot/image", "PM handed me a wireframe to build", "translate this Claude Design prototype to React/Next.js/Vue/HTML", or any task where the user provides a visual design artifact (image, URL, description of screens) and wants functional code. Also trigger when a user says "hand this off to engineering" and a prototype is present. This skill covers the full prototype-to-production pipeline. Always use it before writing UI code from a design artifact.