roche-k 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.