ux-design

Name: ux-design
Availability: InStock
Author: speqqai

Generate Figma mocks from PRDs using Speqq design system tokens.

Updated Apr 27, 2026

Search Tags:#figma #mcp #prd #wireframes #ux #design-system #design-tokens

Ready to run

npx skills add https://github.com/speqqai/claude --skill ux-design-speqqai

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ux-design
Source: https://github.com/speqqai/claude/tree/main/skills/ux-design
Command: npx skills add https://github.com/speqqai/claude --skill ux-design-speqqai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The agent transforms PRDs into production-ready UX design artifacts by generating exact Figma mocks that capture every screen, state, and interaction using the Speqq design system tokens.

Core Features & Use Cases

Automates translation of product requirements into flow-driven UX frames, components, and variants.
Reuses existing design system components and tokens to ensure consistency across screens and devices.
Supports mapping to code-connect rules and design-system guidance for implementation.

Quick Start

Create a new Figma file named "{project-name} — UX Design" and begin modeling PRD-driven user flows with screens, states, and responsive variants.

Frequently Asked Questions about ux-design

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

FAQPage Schema

How do I turn a PRD into Figma wireframes?▼

To turn a PRD into Figma wireframes, use this skill to automate the translation of requirements into flow-driven UX frames. It generates production-ready Figma mocks anchored to the Speqq design system tokens and components.

How do I generate responsive variants from a PRD in Figma?▼

To generate responsive variants from a PRD in Figma, use this skill to automatically create screens, states, and responsive variants. It enforces component reuse and validates conformance against the Speqq design system.

Do I need a design system to convert PRDs into UX mocks?▼

Yes, converting PRDs into UX mocks requires a design system. This skill integrates with the Speqq design tooling to enforce token usage, component reuse, and conformance while validating against the PRD.

What's the best way to ensure Figma mocks match my design tokens?▼

The best way to ensure Figma mocks match your design tokens is to use a tool that validates against your design system rules. This skill enforces Speqq token usage and component reuse by mapping to code-connect rules.

Can I automate user flow creation from product requirements?▼

Yes, you can automate user flow creation from product requirements. This skill transforms PRDs into flow-driven UX frames, components, and variants by reusing existing design system components and tokens for cross-device consistency.

Why use design tokens when creating UX mocks from PRDs?▼

Use design tokens when creating UX mocks from PRDs to ensure consistency across screens and devices. This skill enforces Speqq token usage and component reuse, validating conformance against the PRD.