Ui design

Skill SamurAIGPT/Generative-Media-Skills/library/visual/ui-design

Multi-modal Generative Media Skills for AI Agents (Claude Code, Cursor, Gemini CLI). High-quality image, video, and audio generation powered by muapi.ai.

Install

npx -y skills add SamurAIGPT/Generative-Media-Skills --skill ui-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its author says it does

Copied from the file, not written here

Generate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai

SKILL.md

3.5 KB, as published. Nobody here has run it

🎨 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.