skills.rest
DynamoDS
DynamoDSOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dynamo-ux-designer

Plans UX flows and generates Figma mockups using Autodesk Weave Design System components.

2.0k|679|Updated Feb 9, 2012
Search Tags:#ux design#Figma#mockups# accessibility#autodesk#Design tokens#weave design system
One-click install
npx skills add https://github.com/DynamoDS/Dynamo --skill dynamo-ux-designer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dynamo-ux-designer
Source: https://github.com/DynamoDS/Dynamo/tree/main/.claude/skills/dynamo-ux-designer
Command: npx skills add https://github.com/DynamoDS/Dynamo --skill dynamo-ux-designer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing UI for Dynamo and Autodesk products requires strict alignment with the Weave Design System, and manually mapping product needs to the correct components, tokens, and governance rules is slow and error-prone. This Skill guides the full UX design process from user discovery through compliant Figma handoff.

Core Features & Use Cases

  • UX Flow Planning: Runs scoped user discovery (roles, context, pain points) and maps product needs to Weave Universal or Extended components and patterns.
  • Figma Mockup Generation: Produces structured frame hierarchies with state coverage (default, hover, error, loading, empty), tokens, variants, and responsive layout strategies.
  • Governance & Accessibility Validation: Runs a final checklist covering WCAG AA contrast, keyboard navigability, token compliance, and AI/Assistant conversational standards before handoff.
  • Use Case: A product manager asks for a new dashboard for Dynamo. The Skill scopes the request, maps it to Weave panels, data grids, and empty states, builds a Figma frame plan, and delivers a compliant high-fidelity mockup with a design-decision summary for developers.

Quick Start

Design a Dynamo settings panel with a search input, data grid, and empty state using Weave components and deliver a Figma-ready frame plan.

Frequently Asked Questions about dynamo-ux-designer

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

FAQPage Schema
How do I design a UI mockup with the Autodesk Weave Design System?▼

Start with user discovery to define roles and goals, then map needs to Weave Foundations, Universal components, and patterns. Build a structured Figma frame hierarchy using shared libraries, apply tokens instead of hard-coded styles, and run the governance checklist before handoff.

What is the difference between Weave Universal and Extended components?▼

Universal components are the default, reusable building blocks preferred for all designs. Extended components address workflow-specific needs but must still align visually and structurally with Universal and may require governance exceptions.

Does this skill support accessibility requirements like WCAG?▼

Yes, accessibility is a baseline requirement. Designs must meet WCAG AA contrast ratios, include clear focus states, avoid color-only signaling, support full keyboard navigation, and use touch targets of at least 44x44 pixels.

When should I not use this UX design skill?▼

Do not use it for pure visual exploration without UX intent, branding or illustration work, icon design, or copy-only requests with no UI implications. It is scoped to interface and interaction design aligned with Weave.

What states must a Weave component design include?▼

Each component should cover default, hover/focus, disabled, error, loading, and empty states where applicable. Variants should represent real use cases, and loading, empty, and error patterns must follow documented Weave patterns rather than ad-hoc UI.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
TheQtCompanyRnDTheQtCompanyRnD
351

qt-figma-component-generation

Convert Figma design components into QML control files for Qt Quick applications.

Official
Advanced
baphledbaphled
1

accessibility

Implement WCAG principles, keyboard navigation, and screen reader support in terminal applications.

Community
Intermediate
ramiro-qqramiro-qq

design-to-code

Convert Figma, screenshot, and Pencil prototypes into React/Tailwind/TypeScript code.

Community
Advanced