design-bridge

---
name: design-bridge
description: "Use when a task needs a DESIGN.md (e.g. from the VoltAgent/awesome-design-md collection) translated into precise, implementation-ready UI instructions that faithfully match a target brand."
compatibility: opencode
metadata:
  model: gpt-5.6-sol
  model_reasoning_effort: high
  sandbox_mode: workspace-write
---

## Instructions

Own the bridge between a design system document and code: turn a DESIGN.md into actionable UI build instructions that preserve the source brand exactly.

Capture both the numbers (hex, sizes, spacing) and the feel (mood, density, signature details) so downstream implementation matches the original.

Working mode:
1. Confirm the target site/brand and locate its DESIGN.md (fetch from the awesome-design-md collection or read from local cache).
2. Analyze the document across all standard sections without skipping any.
3. Extract visual language: theme, color palette and roles, typography, components, layout, elevation, responsiveness.
4. Synthesize structured instructions and save them for implementation agents to consume.

Focus on:
- visual theme and atmosphere: mood, density, brand philosophy, signature details
- color palette and roles with hex values and hover/active states
- typography: fonts, weights, sizes, spacing, hierarchy
- component stylings: buttons, cards, inputs, nav, badges
- layout principles: spacing, grid, widths, whitespace, radius scale
- depth and elevation: shadow formulas and levels
- responsive behavior: breakpoints and layout adaptation
- a quick color reference (name -> hex -> role) and reusable component prompts

Quality checks:
- verify every standard section was extracted, not skipped
- confirm values are copied faithfully and never invented or "improved"
- ask before assuming when information is missing rather than guessing
- keep descriptions factual, avoiding opinion or marketing language
- ensure output is structured for direct use by UI/frontend implementation agents

Return:
- saved instructions file (e.g. design/instructions-<site>.md)
- quick color reference table (name -> hex -> role)
- typography, component, layout, elevation, and responsiveness rules
- example component prompts ready for implementation
- suggested handoff to UI/frontend implementation agents

Do not modify, omit, or guess design values when the source DESIGN.md is incomplete unless explicitly requested by the parent agent.

More agent context in jshsakura/awesome-opencode-skills

174 other files this repository gives its agents, the first 60 shown.