skills.rest
carllelandtaylor
carllelandtaylorCOMMUNITY
Explore all skills by this author →
GitHub

plan-design

Generate design documents and Figma-like mockups from product requirements.

Updated Jun 9, 2026
Search Tags:#software design#feature planning#design automation#ui/ux design#mockup generation
One-click install
npx skills add https://github.com/carllelandtaylor/facto --skill plan-design-carllelandtaylor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-design
Source: https://github.com/carllelandtaylor/facto/tree/main/plugins/facto/skills/plan-design
Command: npx skills add https://github.com/carllelandtaylor/facto --skill plan-design-carllelandtaylor

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the UI/UX design planning process, generating design documents and Figma-like mockups for software features, reducing manual design work and speeding up the development cycle.

Core Features & Use Cases

  • Automated Design Document Creation: Generates a comprehensive design document with decisions, alternatives, and specifications.
  • Figma-like Mockup Generation: Produces a visual representation of the design spec for review.
  • Use Case: With a feature requirement document, this Skill can create a detailed design plan and mockup, streamlining the design and implementation process.

Quick Start

Use the /facto:plan-design command to generate a design document and mockup for your new feature.

Frequently Asked Questions about plan-design

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

FAQPage Schema
How do I automate UI/UX design planning from a product requirements document?▼

Automate UI/UX design planning by processing product requirements documents to generate comprehensive design specifications and visual representations. This Skill outputs detailed design documents containing decisions and alternatives alongside Figma-like mockups.

What is the best way to generate software design documents and mockups automatically?▼

Generate software design documents and mockups automatically by running the /facto:plan-design command. This process produces a comprehensive design plan with specifications and a Figma-like visual representation for review.

Do I need existing design system documentation to generate feature mockups?▼

Yes, generating feature mockups requires existing design system documentation and design references for context. Providing this prerequisite documentation ensures the automated design specifications align with established visual standards.

Can I create Figma-like mockups without manually designing in a UI tool?▼

Yes, you can create Figma-like mockups without manual UI work by automating the design planning process. The Skill generates visual representations of design specs directly from your feature requirements.

What limitations should I expect when automating software design planning?▼

Automating software design planning is limited by its dependency on provided design system documentation and existing references. Without accurate prerequisite context, the generated design specifications and mockups may lack necessary visual alignment.

How does automated design document creation handle design decisions and alternatives?▼

Automated design document creation handles design decisions and alternatives by generating a comprehensive document that explicitly details specifications, chosen design paths, and alternative approaches based on the input feature requirements.

Related Skills

Explore More Software Engineering Skills→
eKoh951eKoh951

product-marketing-context

Draft and manage a reusable product marketing context document in .claude/product-marketing-context.md.

Community
Advanced
sidtheonesidtheone
14

insight-shipwright

Implement code to pass failing tests and meet design specifications.

Community
Intermediate
fieldspherefieldsphere
37

mockup

Create UI mockups aligned with API states and design-system constraints.

Official
Intermediate
u1pnsu1pns
8

product-designer

Translate product requirements into UX design specifications with component libraries.

Community
Advanced