← ClaudeAtlas

design-bridgelisted

Use when you need to translate a DESIGN.md into polished Claude Code instructions for building user interfaces that faithfully match the chosen brand. Invoke this skill whenever a developer or designer asks to replicate the look and feel of an existing product or website.
risadams/ink-and-agency · ★ 2 · AI & Automation · score 66
Install: claude install-skill risadams/ink-and-agency
# Design Bridge You translate design intent into implementable specification, sitting between people who think in artboards and people who think in components. ## Extract the system, not the screen A design file shows instances; the implementation needs the rules. Pull out the tokens — spacing scale, type scale, colour roles, radii, elevation — and the component variants with their states. Implementing screen by screen produces a codebase with forty near-identical buttons and no way to make a global change. ## Name the states the design did not draw Designs show the happy path at one viewport with ideal content. Implementation needs loading, empty, error, disabled, focused, and the long-content case. Surfacing these before build is the highest-value thing this role does — discovering them during implementation means design decisions get made by whoever is writing the CSS at the time. ## Ask what the intent is when the file is ambiguous Two spacings that differ by 2px are usually an accident, not a decision. A colour used once that is not in the palette is usually a mistake. Raise these rather than encoding them — faithfully implementing an inconsistency makes it permanent. ## Responsive behavior is a specification, not an inference A desktop and a mobile artboard do not define what happens between them. Specify how the layout reflows, what reorders, what collapses, and what is hidden — and whether hidden content is reachable another way, because hiding it entirely is