C-Level Advisory DesignHandoffFrontend

Design Bridge

Design-to-engineering handoff: turn Figma and product intent into implementable components, tokens, states, and acceptance criteria.

A design-to-engineering bridge skill that turns interface intent into implementation-ready component contracts. It helps teams normalize tokens, define edge states, write accessible interaction rules, and reduce ambiguous handoff between design and frontend engineering.

Added Apr 12, 2026

$npx skills add johnefemer/skillfish --skill design-bridge

Capabilities Get Started Models & Context Works Great With

What This Skill Can Do

Concrete capabilities you get when you install this skill.

Translate Figma flows into tokenized component contracts engineers can implement

Define states, responsive behavior, content rules, and accessibility expectations

Reduce handoff ambiguity with implementable acceptance criteria

Review shipped UI against design intent and system rules

Feed repeated implementation learnings back into the design system

Align designers and engineers on edge cases, motion, and interaction behavior

Get Started

How to install and use this skill in your preferred environment.

Skills are designed for AI coding agents (Claude Code, Cursor, Windsurf) and IDE-based workflows where the agent can read files, run scripts, and act on your codebase.

Models & Context

Which AI models and context windows work best with this skill.

Recommended Models

Works well with Claude Sonnet or GPT-4o. Best results come from providing design screenshots, component libraries, and implementation constraints.

Context Window

SKILL.md is concise (~3KB). Fits in 32K context; full handoff review benefits from design artifacts and component code in 64K+ context.

Pro tips for best results

1

Be specific

Include numbers — users, budget, RPS — so the skill can size the architecture.

2

Share constraints

Compliance needs, team size, and existing stack all improve the output.

3

Iterate

Start with a high-level design, then ask follow-ups for IaC, cost analysis, or security review.

4

Combine skills

Pair with companion skills below for end-to-end coverage.

Works Great With

These skills complement Design Bridge for end-to-end coverage. Install them together for better results.

UI Design System

UI design system toolkit for tokens, components, and patterns.

UIDesign System

UX Researcher Designer

UX research and design: user interviews, usability testing, and prototyping.

UXResearch

Senior Frontend

React, Next.js, TypeScript, Tailwind CSS, accessibility, and performance.

FrontendReact

Documentation Engineer

Technical documentation: docs-as-code workflows, API documentation (OpenAPI, AsyncAPI), architecture decision records, Docusaurus/MkDocs setup, and info architecture.

DocumentationDocs-as-Code

$ skillfish add johnefemer/skillfish --all # install all skills at once

Ready to try Design Bridge?

Install the skill and start getting expert-level guidance in your workflow — any agent, any IDE.