skills.rest
ChoiHyunjin
ChoiHyunjinCOMMUNITY
Explore all skills by this author →
GitHub

role-visual-designer

Convert UX structures into detailed visual design specifications.

Updated Jan 30, 2026
Search Tags:#accessibility#design system#figma#design tokens#visual designer#ux to ui
One-click install
npx skills add https://github.com/ChoiHyunjin/ai_skills --skill role-visual-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: role-visual-designer
Source: https://github.com/ChoiHyunjin/ai_skills/tree/main/skills/role-visual-designer
Command: npx skills add https://github.com/ChoiHyunjin/ai_skills --skill role-visual-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about role-visual-designer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert UX wireframes into visual design specs for developer handoff?▼

Generating design tokens from UX structures involves mapping visual states, component variants, and accessibility standards. This Skill transitions into a visual designer role to output comprehensive token sets and responsive layout specifications.

What is the best way to translate UX structures into design tokens and accessibility standards?▼

Translating UX structures into design tokens and accessibility standards involves specifying color palettes, typography, component variants, and responsive behavior. This Skill processes UX wireframes to produce these developer-ready visual specifications.

Can I generate responsive layout specifications and component mappings from a UX user flow?▼

Generating responsive layout specifications and component mappings from a UX user flow is supported. The Skill processes UX structures to output visual states, component variants, and responsive behavior rules for different screen sizes.

Do I need existing design tokens to produce visual states and component variants?▼

Existing design tokens are not required to produce visual states and component variants. The Skill generates these tokens directly from provided UX wireframes and user flows, establishing the foundational visual design system from scratch.

Does this visual design specification approach work for Figma implementation?▼

Figma implementation is the primary target for the generated visual design specifications. The Skill outputs precise design tokens, component mappings, and visual states that directly translate into Figma libraries and developer handoff documentation.

Related Skills

Explore More Design & Creative Skills→
bacocobacoco
67

bmad-ux

Translate PRD requirements into user flows, wireframes, and design systems.

Community
Intermediate
PremModhaOfficialPremModhaOfficial
1

figma-to-code

Convert Figma design data into frontend templates and semantic design tokens.

Community
Advanced
alo-expalo-exp
6

design-handoff

Generate developer handoff specs with layout, tokens, component props, states, breakpoints, and accessibility notes from Figma URLs or descriptions.

Official
Advanced
element22llcelement22llc
2

explain

Render feature specifications as visual Claude Code Artifacts with Markdown fallback.

Official
Intermediate