design-source
Convert screenshots, Figma/design references, existing design systems, and product examples into compact implementation-ready visual structure and design tokens without copying proprietary assets or blindly inventing measurements.
Resources
1Install
npx skillscat add laivannha0202/opencode-agent-skill/design-source Install via the SkillsCat registry.
Design Source
Inspect the existing project design system first. When a reference is provided, extract only implementation-relevant facts: regions, hierarchy, spacing scale, typography roles, radii, image aspect ratios, component patterns, and responsive relationships.
Prefer structured DESIGN_TOKENS / VISUAL_SPEC artifacts over long prose. Distinguish measured facts from estimates. Reuse project tokens/components when they can satisfy the reference. Never claim exact pixel fidelity without rendered verification.
Categories
Install
npx skillscat add laivannha0202/opencode-agent-skill/design-source Install via the SkillsCat registry.