skills.rest
Eva813
Eva813COMMUNITY
Explore all skills by this author →
WebsiteGitHub

ai-pm

Generate engineer-ready draft specifications from Figma designs.

2|1|Updated Jan 3, 2026
Search Tags:#figma#generate#product-management#ui-analysis#component-splitting#draft-spec#node-coverage
One-click install
npx skills add https://github.com/Eva813/skills-base --skill ai-pm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ai-pm
Source: https://github.com/Eva813/skills-base/tree/main/.agents/skills/ai-pm
Command: npx skills add https://github.com/Eva813/skills-base --skill ai-pm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the common gap when product managers or designers provide only Figma designs without engineering-ready specifications, enabling structured, reviewable draft specs for frontend implementation.

Core Features & Use Cases

  • Figma-driven spec generation: Parse Figma pages and frames to produce a draft-spec.md containing page structure order and a Node Coverage Ledger with exact Node IDs.
  • Engineering handoff readiness: Provide component splitting recommendations (Base / Feature / Container), interaction behavior tables, inferred field names and types marked as assumptions, and an open-questions list for unresolved decisions.
  • Blocked-input safety: Detect missing required inputs (Figma URL) and output a blocked payload prompting the user to supply required material before proceeding.

Quick Start

Provide the Figma URL (and optional user story) and ask the agent to generate a draft-spec.md based on the design.

Frequently Asked Questions about ai-pm

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

FAQPage Schema
How do I generate engineering specs from a Figma design?▼

Generating engineering specs from a Figma design requires parsing the provided Figma URL to output a draft-spec.md with page structure order, a Node Coverage Ledger, and component splitting recommendations.

What is a Node Coverage Ledger and how does it help with UI analysis?▼

A Node Coverage Ledger tracks exact Node IDs and their statuses during UI analysis, ensuring complete node-level coverage of Figma frames so engineers can verify every UI element is mapped for frontend implementation.

How do I split Figma components for frontend engineering handoff?▼

Splitting Figma components for frontend handoff involves categorizing design elements into Base, Feature, and Container components to structure the draft specification for modular UI implementation.

Can I use Figma designs for frontend development without writing manual specifications?▼

You can convert Figma designs directly into engineer-ready draft specifications without manual writing by automatically inferring field names and types while marking them as assumptions for frontend development.

What happens if I provide a Figma design without a user story for spec generation?▼

Providing a Figma design without a user story still generates a draft specification, but infers field names and types as assumptions while listing unresolved decisions in an open-questions section for later API enrichment.

Why does Figma to draft spec conversion require a Figma URL?▼

Figma to draft spec conversion requires a Figma URL because it serves as the essential input for parsing page structures, and missing it triggers a blocked payload prompting you to supply the required material before proceeding.

Related Skills

Explore More Product & Management Skills→
allofmengallofmeng
12

figma-implement-design

Translate Figma design components into production-ready frontend code.

Community
Advanced
mattg101mattg101
1

tech-spec-writer

Generate implementation-ready software technical specifications in markdown format.

Community
Intermediate
kennypallchizaca-coderkennypallchizaca-coder

02-component-architecture

Define portable component primitives and strict boundaries for cross-framework frontend features.

Community
Advanced
iJosueehiJosueeh

design-maker

Generate design mockups from Product-Spec.md and Design-Brief.md using Pencil or Figma.

Community
Advanced