skills.rest
slamb2k
slamb2kCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixel-pusher

Convert vague website-design requests into HTML mockups and JSON design systems.

5|Updated Nov 12, 2025
Search Tags:#responsive design#design system#prototyping#web design#UI/UX design#mockups#HTML/CSS
One-click install
npx skills add https://github.com/slamb2k/mad-skills --skill pixel-pusher
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixel-pusher
Source: https://github.com/slamb2k/mad-skills/tree/main/pixel-pusher
Command: npx skills add https://github.com/slamb2k/mad-skills --skill pixel-pusher

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

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.

Frequently Asked Questions about pixel-pusher

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

FAQPage Schema
How do I create a design system from website inspiration?▼

A design system extracts and documents colors, typography, spacing, and component patterns into structured JSON. pixel-pusher analyzes 2-3 reference websites or screenshots to generate a comprehensive design system that ensures consistency across your mockups.

Can I generate responsive HTML mockups from design requirements?▼

Yes. pixel-pusher converts design requirements into 2-3 distinct, responsive HTML mockups that adhere to your design system, with built-in accessibility considerations, ready for review and iteration.

What's the workflow for designing a landing page from scratch?▼

pixel-pusher guides a multi-stage process: gather requirements, extract a design system from inspiration URLs or screenshots, generate initial HTML mockups, refine iteratively, and deliver packaged design artifacts.

Does pixel-pusher work with UI/UX design for web apps and dashboards?▼

Yes. pixel-pusher applies to website projects, landing pages, web apps, dashboards, and UI prototype tasks, handling responsive design and design-system extraction for any web interface context.

Can I use competitor websites as design references?▼

Yes. Provide 2-3 competitor URLs or screenshots as inspiration. pixel-pusher analyzes those sites to extract design patterns, colors, and typography, then generates mockups aligned to a unified design system.

What accessibility features are included in the generated mockups?▼

pixel-pusher embeds accessibility considerations into responsive HTML/CSS mockups during generation, ensuring compliance without requiring separate remediation steps.

Related Skills

Explore More Design & Creative Skills→
chekoschekos
5

design-guidelines

Reference brand guidelines and visual standards from shared design documents.

Community
Basic
campbellmcgregorcampbellmcgregor

design-assistant

Create UI/UX mockups, wireframes, and visual designs in React, HTML, or SVG.

Community
Basic
haxlyshaxlys

tailwind-design-system

Create scalable Tailwind v4 design systems with semantic tokens and CVA components.

Community
Advanced
jinwoonghongjinwoonghong

moai-design-tools

Convert Pencil design files into React and Tailwind CSS code.

Community
Advanced