design-bridge

Installation
SKILL.md

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.
Installs
7
GitHub Stars
25
First Seen
Jun 28, 2026
design-bridge — jshsakura/awesome-opencode-skills