pixel-pusher

What problem does it solve?

Designing professional UI/UX from vague requirements can be challenging and time-consuming, often leading to inconsistent results. This skill provides a structured, multi-stage process to create polished web interfaces and comprehensive design systems, ensuring consistency and quality.

Core Features & Use Cases

• Structured Design Process: Guides through requirements gathering, design system extraction, mockup generation, iterative refinement, and final delivery.
• Design System Creation: Extracts and documents comprehensive JSON design systems (colors, typography, spacing, components) from inspiration or brand guidelines.
• HTML Mockup Generation: Creates 2-3 distinct, responsive HTML mockups that adhere to the generated design system, saved as files for user review.
• Use Case: You want a landing page for your new product but only have a few competitor websites as inspiration. Use this skill to analyze those sites, extract a design system, and then generate multiple HTML mockups for you to review and refine, leading to a professional, consistent design.

Quick Start

Provide 2-3 URLs or screenshots of websites you like for inspiration. Then, ask the pixel-pusher skill to create a design system and generate initial mockups for a landing page.