skills.rest
Nabole05
Nabole05COMMUNITY
Explore all skills by this author →
GitHub

blast-prototipador

Analyze visual references to generate UI design variants and token specifications.

Updated Jan 25, 2026
Search Tags:#handoff#design-system#design-prototyping#visual-references#color-psychology#ui-variants
One-click install
npx skills add https://github.com/Nabole05/mytrip-guru --skill blast-prototipador
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blast-prototipador
Source: https://github.com/Nabole05/mytrip-guru/tree/main/.agent/skills/blast-prototipador
Command: npx skills add https://github.com/Nabole05/mytrip-guru --skill blast-prototipador

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps design teams avoid repeating work by defining Look & Feel from visual references before coding, streamlining the prototyping phase.

Core Features & Use Cases

  • Analyzes visual references to extract tokens for color, typography, spacing, and shadows.
  • Generates 2-3 design variants for key UI elements (e.g., navigation, cards, buttons) to align with the user’s vision.
  • Provides a handoff-ready design system guide and token definitions for implementation by the development team.

Quick Start

Provide two to three design variants based on a visual reference and prepare a handoff specification.

Frequently Asked Questions about blast-prototipador

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

FAQPage Schema
How do I define UI look and feel from visual references before coding?▼

Defining UI look and feel from visual references involves extracting design tokens for color, typography, spacing, and shadows to formalize visual decisions and reduce redesign cycles before development.

What is the best way to generate UI variants for a design sprint?▼

Generating UI variants for a design sprint involves creating 2-3 design options for key elements like navigation, cards, and buttons based on visual references to align with the user's vision.

How do I prepare a design system handoff with token definitions?▼

Preparing a design system handoff with token definitions requires generating a handoff-ready guide that specifies extracted color, typography, spacing, and shadow tokens for the development team.

Can I extract design tokens from references for a token-based design system?▼

Yes, you can extract design tokens from references for a token-based design system by analyzing visual inputs to isolate specific color, typography, spacing, and shadow values for implementation.

Why does visual prototyping reduce redesign cycles in UI design?▼

Visual prototyping reduces redesign cycles in UI design by formalizing look and feel decisions from references early, ensuring development teams receive validated variants and token specifications before coding.

Does visual prototyping work without existing design system components?▼

Yes, visual prototyping works without existing design system components because it generates the foundational token definitions and variant guides needed to establish the design system from scratch.

Related Skills

Explore More Design & Creative Skills→
KhaledMKhaledKhaledMKhaled

recreate-screenshot

Recreate screenshot references into pixel-perfect UI implementations with exact colors and typography.

Community
Advanced
mchien15mchien15

frontend-design

Convert design references into reusable HTML/CSS/JS components and design tokens.

Community
Advanced
WcofWcof
1

pm-wireframe

Generate traceable wireframes from PMContext definitions with Mermaid navigation flows.

Community
Advanced
Higashi-KotaHigashi-Kota

ui-theme

Generate CSS variables and Tailwind theme from JSON design tokens.

Community
Intermediate