What platforms does this skill support for mockup generation?

The skill supports both mobile (iOS/Android) and web applications, allowing for responsive design across various devices.

Can I customize the design tokens used in the mockups?

Yes, you can specify typography, spacing, and color palettes to align with your project's design system.

Is there a specific format for the product brief needed to use the skill?

Yes, the product brief should include a feature list and target audience, which the skill uses to generate the mockup.

What design principles does this skill adhere to?

The skill follows Atomic Design principles and ensures designs comply with usability standards, including WCAG accessibility guidelines.

Can I generate mockups that include skeuomorphic elements?

No, the skill enforces a flat design aesthetic and avoids skeuomorphism to maintain a clean and modern look.

UI/UX Design Mockup

Name: UI/UX Design Mockup
Availability: InStock
Author: samuraigpt

Free

Generate high-fidelity mockups using Atomic Design principles.

by samuraigpt4k stars on samuraigpt/generative-media-skills

2 views

Updated Aug 8, 2026

Get this skill

Free · Opens the source repo

What UI/UX Design Mockup does

The UI/UX Design Mockup skill is designed for developers and designers who need to create high-fidelity digital interfaces efficiently. By leveraging Atomic Design principles, this skill allows users to structure their interfaces systematically, from basic components like buttons (Atoms) to more complex structures like headers (Organisms). This structured approach ensures consistency across the design, which is crucial for maintaining a cohesive user experience.

This skill is particularly beneficial for those working on mobile and web applications, as it supports responsive design layouts tailored for both platforms. Users can specify design tokens such as typography, spacing, and color palettes, ensuring that their mockups adhere to modern design standards, including accessibility guidelines. The integration of design systems allows for quick adjustments and iterations, making it a valuable tool for teams that prioritize agile development.

To use the skill, developers must provide a detailed product brief that outlines the features and target audience. The accompanying script, generate-mockup.sh, processes this brief and generates the mockup based on the specified parameters. The skill enforces design constraints, such as avoiding skeuomorphism and ensuring high-contrast colors, which helps in producing clean, professional-looking mockups that are ready for presentation or further development.

Whether you're designing an enterprise SaaS application or a consumer-facing mobile app, this skill streamlines the mockup creation process, allowing for rapid prototyping and effective communication of design ideas. It is an essential tool for anyone involved in UI/UX design, from freelancers to large development teams.

When to use it

Use this skill when you need to quickly generate mockups for mobile or web applications that adhere to design principles and accessibility standards.

When not to use it

This skill may not be suitable for projects that require highly customized or unique design elements outside the Atomic Design framework.

What you can build with it

Creating a Fintech App Mockup

Generate a high-fidelity mockup for a crypto wallet app, specifying glassmorphism and dark theme.

Designing an E-commerce Website

Create a minimalist product grid layout for an online store, focusing on conversion and user engagement.

Prototyping a Portfolio Site

Use the skill to design an asymmetric, brutalist layout that showcases creative work effectively.

How to install UI/UX Design Mockup

View source

1. Install with the skills CLI

npx skills add samuraigpt/generative-media-skills/ui-design --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by samuraigpt

🎨 UI/UX Design Mockup Skill

A specialized skill for AI Agents to architect high-fidelity digital interfaces. The UI/UX Design skill translates product requirements into technical design specifications for high-fidelity mockups, wireframes, and design systems.

Core Competencies

Atomic Design Orchestration: Structuring interfaces from Atoms (buttons) to Organisms (headers) for system consistency.
Platform-Specific Layouts: Designing for responsive breakpoints across Mobile (iOS/Android) and Web (SaaS/E-commerce).
Design System Integration: Specifying typography scales, spacing tokens, and color palettes (Hex/HSL).
Heuristic Awareness: Ensuring designs follow established usability principles (Nielsen's 10 Heuristics).

🏗️ Technical Specification

1. Intent Mapping Table

Creative Intent	Style	Layout Pattern	Focus
Enterprise SaaS	Modern/Clean	Dashboard/Grid	Data Density
Consumer App	Glassmorphism	F-Pattern / Cards	Visual Flair
E-commerce	Minimalist	Z-Pattern / Product Grid	Conversion
Portfolio	Brutalist	Asymmetric	Identity
Utility/Tool	Neomorphism	Control Panel	Tactile Feedback

2. Design Tokens & Variables

Typography: Geometric Sans (Inter/Roboto) for tech; Serif (Playfair) for luxury.
Spacing: 8pt grid system for consistent rhythmic spacing.
Color: High-contrast accessible palettes (WCAG 2.1 compliant).
Elevation: Shadow-based depth vs. Flat design layers.

🧠 Prompt Optimization Protocol (Agent Instruction)

Before calling the script, the Agent MUST expand the user's requirements into a Design Specification:

ATOMIC STRUCTURE: Mention specific components (Atoms): Glassmorphic buttons, Input fields with 4px radius, Iconic sidebars.
HIERARCHY: Use layout patterns: F-Pattern for content-heavy sites, Z-Pattern for landing pages, Grid-based Dashboards.
TYPOGRAPHY & TOKENS: Injected design tokens: Inter Sans-serif, 8pt spacing system, WCAG high-contrast colors.
NO SKEUOMORPHISM: Ensure the prompt enforces Flat Design or Glassmorphism to avoid "photograph-of-screen" results.

🚀 Protocol: Using the UI Designer

Step 1: Define the Product Brief

Provide the agent with a feature list and target audience.

Step 2: Invoke the Script

The generate-mockup.sh script expands the brief using internal knowledge of design systems.

# Designing a Fintech Mobile App
bash scripts/generate-mockup.sh \
  --desc "crypto wallet home with price charts" \
  --platform mobile \
  --theme dark \
  --style glassmorphism

⚠️ Constraints & Guardrails

Device Realism: MANDATORY - Do not show hands, physical phones, or desks. Generate pure UI/UX mockups only.
Accessibility: Avoid low-contrast text on bright backgrounds.
Complexity: Keep "Atoms" consistent across a single page generation.
Text Rendering: Use Flux for legible headers; specify placeholder text for smaller body copy.

⚙️ Implementation Details

This skill translates a high-level DESCRIPTION into a UX_BRIEF that specifies layout patterns, design tokens, and aesthetic constraints for the core/media/generate-image.sh primitive.

Frequently asked questions about UI/UX Design Mockup

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.