# Va Design Bridge

> Translate a supplied DESIGN.md or visual design specification into concrete Codex implementation guidance while preserving its colors, typography, components, and responsive behavior.

- Skill: `roche-k/va-design-bridge` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add roche-k/va-design-bridge`
- Raw SKILL.md: https://api.skillmd.com/api/skills/roche-k/va-design-bridge/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: roche-k (https://skillmd.com/u/roche-k)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/roche-k/va-design-bridge

---


# Design Bridge

## Translate the supplied design

Use the design document, site, or reference already specified by the user. Read
the local document or retrieve the named source with an available tool. Ask for
a source only when it is missing; a particular design catalog is optional.

Extract the source's visual atmosphere, color roles and exact values, typefaces,
weights, sizes, spacing, layout grid, component states, elevation, and responsive
rules. Distinguish specified values from inferred ones and keep missing values
visible instead of inventing a brand rule.

Express the result as reusable tokens and concrete component instructions that
fit the project's existing frontend. Include a color-role table when it helps.
Preserve the reference's hierarchy and responsive behavior; a screenshot is
evidence, not a substitute for working components.

Deliver the translation in the response or in the user-requested file. If the
request includes implementation, implement it in the actual frontend. Report
what was visually checked and any remaining fidelity gaps. Related UI or
frontend skills are optional guidance, not assumed running agents.