Comprehensive UI/UX design system for creating professional web interfaces through structured multi-stage process. Use when users request website designs, landing pages, web apps, UI mockups, design systems, or interface prototypes. Guides through requirements gathering, design system creation from references/screenshots, HTML mockup generation, iterative refinement, and final design delivery. Ideal for "design me a website", "create a landing page", "build a UI for X", or providing design inspiration screenshots/URLs.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Comprehensive UI/UX design system for creating professional web interfaces through structured multi-stage process. Use when users request website designs, landing pages, web apps, UI mockups, design systems, or interface prototypes. Guides through requirements gathering, design system creation from references/screenshots, HTML mockup generation, iterative refinement, and final design delivery. Ideal for "design me a website", "create a landing page", "build a UI for X", or providing design inspiration screenshots/URLs.
Pixel Pusher Design System
Professional UI/UX design skill that transforms vague requirements into polished web interfaces through systematic design thinking and iterative refinement.
Design Philosophy
Never accept vague design requests. Transform "make it beautiful" into concrete design systems with specific colors, typography, spacing, and component patterns. Work systematically through discovery, design system creation, mockup generation, and iterative refinement.
Multi-Stage Design Process
Stage 1: Discovery & Requirements Gathering
Begin by understanding what the user wants to create and gathering design inspiration.
Initial questions to ask if not provided:
Purpose: What is this interface for? (landing page, web app, dashboard, portfolio, etc.)
Audience: Who will use this? (consumers, professionals, internal team, etc.)
Key features: What are the 3-5 most important elements? (hero section, forms, data visualization, etc.)
Inspiration: Do you have reference designs? (URLs, screenshots, or describe style preferences)
Brand elements: Do you have existing brand colors, fonts, or logo?
Technical constraints: Any specific frameworks or technologies? (React, Vue, vanilla HTML, etc.)
Critical assets to request:
Screenshots or URLs of designs they like
Existing brand guidelines or assets
Content examples (copy, images, data)
Specific interactions or animations they envision
Do not proceed to design system creation until you have:
Clear understanding of purpose and audience
At least 2-3 reference designs (screenshots or URLs)
Key features and content requirements
Any brand constraints
Stage 2: Design System Extraction
Extract a comprehensive JSON design system from reference materials. If user provides URLs, fetch them first to analyze the design patterns.
For each reference, analyze and extract:
Color palette - All colors with hex values, usage context (primary, secondary, accent, surface, text)
Typography - Font families, sizes, weights, line heights for each text level
Spacing system - Margin/padding patterns (identify the base unit: 4px, 8px, etc.)
When user requests, create user personas to guide design decisions:
Demographics and psychographics
Goals and pain points
Technical proficiency
Design preferences
See references/persona-template.md for structure.
User Flow Mapping
For complex applications, map user journeys:
Entry points and goals
Decision points and paths
Pain points and friction
Success metrics
See references/user-flow-template.md for structure.
A/B Testing Variations
Generate multiple variations for testing:
Different CTA placements
Color scheme variations
Layout alternatives
Copy variations
Integration with Claude Code Workflow
This skill aligns with Claude Code best practices:
Use Planning Mode (Shift+Tab) before generating mockups to:
Research current design trends
Outline implementation approach
Identify technical considerations
Leverage image analysis (Control+V) to:
Analyze provided screenshots
Extract design patterns
Identify visual hierarchy
Create custom commands for reusable design tasks:
Design system validation
Accessibility checks
Responsive testing
Use sub-agents for complex projects:
One agent for design system
One agent per mockup variation
One agent for component library
Example Workflows
Example 1: Landing Page from Scratch
User: "Create a landing page for my SaaS product"
1. Ask about product, audience, competitors
2. Request 2-3 competitor URLs for inspiration
3. Fetch and analyze competitor designs
4. Extract design system (colors, typography, components)
5. Generate 3 mockup variations
6. Gather feedback
7. Refine chosen mockup
8. Deliver final design + system documentation
Example 2: Redesign from Screenshot
User: [Provides screenshot] "Make something similar but more modern"
1. Analyze screenshot (colors, layout, typography)
2. Ask what "more modern" means to them
3. Research current design trends
4. Extract design system from screenshot
5. Modernize system (updated colors, typography, spacing)
6. Generate 2-3 modern variations
7. Iterate based on feedback
8. Deliver final design
Example 3: Design System from Brand Guidelines
User: "Create website designs using our brand guidelines" [provides PDF]
1. Extract brand colors, fonts, logo from guidelines
2. Ask about website purpose and features
3. Request competitor/inspiration references
4. Build design system extending brand guidelines
5. Generate mockups that honor brand identity
6. Validate brand consistency
7. Deliver with brand compliance documentation
Quality Checklist
Before delivering final designs, verify:
All colors from design system only
Typography scale applied consistently
Spacing follows system (no arbitrary values)
Responsive across breakpoints (320px, 768px, 1024px, 1440px)
Accessibility: color contrast, focus states, semantic HTML
