skills.rest
gridi-ai
gridi-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

product-designer

Generate design-spec.md files and Figma designs from user stories and wireframes.

1|Updated Mar 24, 2026
Search Tags:#design#figma#mcp#ui-design#wireframes#design-spec
One-click install
npx skills add https://github.com/gridi-ai/gridi-skills --skill product-designer-gridi-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: product-designer
Source: https://github.com/gridi-ai/gridi-skills/tree/main/skills/product-designer
Command: npx skills add https://github.com/gridi-ai/gridi-skills --skill product-designer-gridi-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables teams to generate comprehensive design specifications and Figma-ready designs directly from user stories, wireframes, and technical notes, reducing manual handoffs and miscommunication.

Core Features & Use Cases

  • Generates design-spec.md automatically from input documents.
  • Creates Figma designs via cursor-talk-to-figma-mcp when an MCP connection is available.
  • Suitable for UI design requests, design-system documentation, and handoff to development.

Quick Start

Use this skill to convert a user story into a complete design-spec.md and, if MCP is connected, generate corresponding Figma designs.

Frequently Asked Questions about product-designer

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

FAQPage Schema
How do I generate design specs from user stories for UI design workflows?▼

Yes, you can generate Figma-ready designs from technical specifications when an MCP connection is available. The Skill uses cursor-talk-to-figma-mcp to create Figma designs directly from your technical notes and links them in the design-spec.md output.

Do I need an MCP connection to produce design-spec.md files?▼

No, you do not need an MCP connection to produce design-spec.md files. The Skill always generates the design specification document from your input wireframes and user stories, but only creates Figma designs when the MCP connection is active.

How does design-system documentation work with wireframes and technical notes?▼

Design-system documentation works by ingesting your wireframes and technical notes to standardize UI components. The Skill converts these inputs into a structured design-spec.md, ensuring consistent design handoffs and reducing manual miscommunication across discovery to implementation.

What is the best way to convert wireframes into Figma designs using MCP?▼

The best way to convert wireframes into Figma designs is providing them as input to this Skill alongside an active MCP connection. It processes the wireframes to generate Figma designs via cursor-talk-to-figma-mcp and automatically links the generated files in your design-spec.md.

Are there limitations when generating Figma designs without an MCP connection?▼

Yes, the limitation is that without an MCP connection, the Skill cannot generate Figma designs or link them in the specification. It will only produce the design-spec.md file from your user stories and wireframes, requiring manual Figma creation.

Related Skills

Explore More Design & Creative Skills→
guhans6guhans6

figma-create-design-system-rules

Generate custom design system rules for Figma-to-code workflows.

Community
Advanced
lalaABClalaABC

figma-implement-design

Convert Figma frames into project-aligned UI code using design tokens.

Community
Advanced
vm0-aivm0-ai
76

figma

Accesses Figma REST API to read files, export images, and retrieve metadata.

Official
Intermediate
elsolalelsolal
1

figma-implement-design

Translate Figma designs into UI components and code with design tokens.

Community
Advanced