Skills
.Work. You
Rest

role-visual-designer

Community

Transform UX to visual design specs.

Design & Creative#accessibility#design system#figma#design tokens#visual designer#ux to ui
AuthorChoiHyunjin
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill bridges the gap between UX structure and visual design, ensuring that user experience designs are translated into detailed, developer-ready visual specifications.

Core Features & Use Cases

  • Visual Design Translation: Converts UX structures into design tokens, component mappings, and visual states.
  • Specification Generation: Produces comprehensive specs for layout, components, tokens, states, responsiveness, assets, and accessibility.
  • Use Case: A UX designer provides a wireframe and user flow. This Skill generates the precise visual design specifications, including color palettes, typography, component variants, and responsive behavior for different screen sizes, ready for Figma implementation and developer handoff.

Quick Start

Act as a Visual Designer Agent and produce visual design specs for the provided UX structure.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: role-visual-designer
Download link: https://github.com/ChoiHyunjin/ai_skills/archive/main.zip#role-visual-designer

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.