skills.rest
hekivo
hekivoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

superpowers-sage:designing

Extract per-section UI design details from Paper, Figma, Stitch, Pencil, or screenshots.

13|Updated Mar 19, 2026
Search Tags:#ui/ux#figma#design tokens#design-to-code#mcp integration#paper.design#wordpress sage
One-click install
npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-designing-hekivo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superpowers-sage:designing
Source: https://github.com/hekivo/superpowers-sage/tree/main/skills/designing
Command: npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-designing-hekivo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Extracting layout, typography, spacing, and component details from design tools is slow and error-prone, especially when you need exact text and visual references before implementation in a Sage (Roots) project.

Core Features & Use Cases

  • URL-based design routing: Automatically selects the right extractor based on Paper, Figma, Stitch, Pencil (.pen), or offline screenshots.
  • Per-section granular extraction: Pulls one section/screen at a time (layout, headline/body verbatim, components, colors, typography, spacing, icons) to prevent context overflow.
  • Plan asset persistence: Saves extracted details (and screenshots/notes) into the active plan’s assets so implementation can re-read sources reliably.

Quick Start

Send a Paper design link (paper.design/...) or a Figma file URL and ask the skill to extract a specific screen/section and save it into your active plan assets.

Frequently Asked Questions about superpowers-sage:designing

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

FAQPage Schema
How do I extract UI design notes from Figma or Paper for WordPress Sage implementation?▼

The skill routes design URLs from Paper, Figma, Stitch, or Pencil to extract granular section details including verbatim text, layout, typography, spacing, and colors, saving them into plan assets.

Can I use offline screenshots to extract design tokens and section details?▼

Yes, offline screenshots are supported alongside Paper, Figma, Stitch, and Pencil (.pen) sources to extract exact section details like verbatim text, colors, and spacing into structured plan assets.

What is the best way to compare my build output against the original Figma design?▼

The best way to compare build output to design is using per-section extraction to pull exact text, colors, and component details from the source URL, persisting them into plan assets for reliable re-reading.

Does this design extraction tool require MCP integration to process Figma URLs?▼

Yes, MCP namespace and tool gating are required to route design URLs from sources like Figma, Paper, and Stitch, ensuring the correct extractor is selected for granular section extraction.

Why does the design extraction process pull one section at a time instead of the whole screen?▼

The extraction process pulls one section at a time to prevent context overflow, ensuring exact text, layout, typography, and colors are captured accurately without overwhelming the implementation context.

How do I save extracted design data into my active plan assets?▼

Extracted design details, including screenshots and structured UI notes, are automatically persisted into your active plan's assets with updated plan metadata, allowing implementation to reliably re-read sources.

Related Skills

Explore More Design & Creative Skills→
jinwoonghongjinwoonghong

moai-design-tools

Convert Pencil design files into React and Tailwind CSS code.

Community
Advanced
codigodoleocodigodoleo
13

superpowers-sage:designing

Translate UI/UX designs from Paper, Figma, Stitch, or local assets into Sage implementations.

Official
Advanced
codigodoleocodigodoleo
13

superpowers-sage:acorn-livewire

Integrate Livewire components into Sage/Acorn WordPress themes for server-driven UI.

Official
Advanced
guilhermemarketingguilhermemarketing
59

figma

Extract design context, assets, and style tokens from Figma MCP.

Community
Advanced