skills.rest
codigodoleo
codigodoleoOFFICIAL
Explore all skills by this author →
GitHub

superpowers-sage:designing

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams need a reliable path to translate UI/UX designs into Sage project implementations by extracting references and design patterns from design sources.

Core Features & Use Cases

  • Integrates Paper, Figma, Stitch, or local assets as the source of truth for UI/UX design references.
  • Routes and aligns design inputs to appropriate Sage implementation workflows, enabling per-section extraction and design-to-code alignment.
  • Supports visual verification, design system alignment, and design approval before writing Blade components, tokens, and layouts.

Quick Start

Provide a design source URL or local asset path to begin extracting layout, content, and visuals for implementation.

Frequently Asked Questions about superpowers-sage:designing

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

FAQPage Schema
How do I translate Figma designs into Sage project implementations?▼

You can translate Figma designs into Sage implementations by sourcing references from Figma, applying per-section extraction, and organizing visual assets for downstream development.

What is the best way to extract UI/UX design references for Sage workflows?▼

Extracting UI/UX design references for Sage workflows involves multi-source routing from Paper, Figma, Stitch, or local assets to capture layout, content, and visuals before building components.

Can I use local assets as a design source for UI implementation?▼

Yes, you can use local asset paths as a design source to extract layout, content, and visuals, ensuring design-to-code alignment alongside cloud-based tools like Figma and Paper.

How do I verify visual outputs against the original UI design before building?▼

Visual verification involves comparing implementation outputs with the original design source, enforcing design system alignment and approval before writing Blade components, tokens, and layouts.

Does this design implementation workflow support per-section extraction?▼

Yes, the workflow supports per-section extraction, routing design inputs from multiple sources to align with appropriate Sage implementation workflows for organized asset generation.

Why do I need to populate plan assets with screenshots during design implementation?▼

Populating plan assets with screenshots captures visual references and design patterns before building, ensuring downstream development aligns with the original UI/UX design source.

Related Skills

Explore More Design & Creative Skills→
hekivohekivo
13

superpowers-sage:designing

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

Official
Advanced
codigodoleocodigodoleo
13

superpowers-sage:sage-design-system

Automate Sage design system token extraction and component scaffolding.

Official
Advanced
OmexITOmexIT
13

ui-design

Convert specification documents into UI/UX design artifacts with wireframes and design tokens.

Community
Advanced
SL-IT-AMAZINGSL-IT-AMAZING

frontend-ui-ux

Translate visual UI concepts into accessible HTML/CSS/JS frontend components.

Official
Basic