superpowers-sage:designing

Name: superpowers-sage:designing
Availability: InStock
Author: codigodoleo

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

Ready to run

npx skills add https://github.com/codigodoleo/superpowers-sage --skill superpowers-sage-designing

💬 Prompt for ChatGPT / Claude Chat▼

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.