skills.rest
n0rvyn
n0rvynCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

generate-design-prompt

Extract UI information from code and docs into Stitch or Figma prompts.

1|Updated Feb 15, 2026
Search Tags:#figma#generate#prompt-engineering#design-automation#stitch#design-prompt#ui-extraction
One-click install
npx skills add https://github.com/n0rvyn/indie-toolkit --skill generate-design-prompt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-design-prompt
Source: https://github.com/n0rvyn/indie-toolkit/tree/main/dev-workflow/skills/generate-design-prompt
Command: npx skills add https://github.com/n0rvyn/indie-toolkit --skill generate-design-prompt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Converts scattered product and UI information in code and documentation into precise, copy-paste prompts for visual design tools so designers can rapidly generate prototypes without manual synthesis.

Core Features & Use Cases

  • Automatic tool detection and formatting: Detects available Stitch or Figma MCP tools and assembles prompts in the appropriate format with Stitch character checks and Figma system guidance.
  • Source-aware UI extraction: Reads README, design docs, UI components, type definitions, and design tokens to produce screen-by-screen UI zone breakdowns, component lists, and interaction chains.
  • Initial and refinement modes: Generates initial prompts for main screens, follow-up prompts for additional screens, and refinement prompts from design-analysis feedback for iterative design workflows.

Quick Start

Generate a Figma prompt for the main screen by analyzing the repository README, design docs, and UI components.

Frequently Asked Questions about generate-design-prompt

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

FAQPage Schema
How do I generate Figma prompts from existing code and documentation?▼

To generate Figma prompts, this tool extracts UI and product information from README files, design docs, and component code, then assembles copy-paste prompts formatted specifically for Figma.

Can I automatically create design prompts for Stitch from a web app repository?▼

Yes, you can automatically create design prompts for Stitch by reading project code and type definitions, applying automatic MCP tool detection, and enforcing Stitch character-length checks.

What is the best way to turn design-analysis feedback into UI refinement prompts?▼

The best way to turn design-analysis feedback into UI refinement prompts is using the tool's refinement mode, which iteratively processes feedback to generate targeted follow-up prompts for visual design tools.

Does this tool extract UI zones and interaction chains from component code?▼

Yes, it performs source-aware UI extraction from component code and type definitions to produce detailed screen-by-screen UI zone breakdowns, component lists, and interaction chains.

How do I generate design prompts for mobile app projects without manual synthesis?▼

You can generate design prompts for mobile app projects without manual synthesis by automatically reading design tokens and documentation to assemble structured, copy-paste prompts for your design tools.

Related Skills

Explore More Design & Creative Skills→
v1nizxv1nizx

stitch::extract-design-md

Extract color palettes, typography scales, and component styling patterns from frontend source code.

Community
Advanced
royvillasanaroyvillasana
34

ai-prototype-prompter

Convert Figma design data into structured prompts for AI UI prototyping tools.

Community
Intermediate
Adityashandilya555Adityashandilya555

local-test

Build, run, and validate IronClaw locally with Docker and Chrome MCP.

Community
Intermediate
aws-samplesaws-samples
29

3a-guide

Provide curated design guidance for AI agent architecture and best practices.

Official
Advanced