Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

🎨 UI/UX Design Mockup Skill · samuraigpt | DecimalAI

design mediaby samuraigpt

🎨 UI/UX Design Mockup Skill

samuraigpt/muapi-ui-design

Source samuraigpt/generative-media-skills ↗License MIT

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

SkillScore68Maintained

Automatic

Design & UX Review pack

Last verified 8/10/2026

What it changes

Passed 15 of 22 test cases with the skill, and 10 of 22 without it.

Without skill45%

With skill68%

Checks it passed that the model alone missed

Includes --theme dark in the script command.
Identifies input fields as Atomic components.
Includes a call to bash scripts/generate-mockup.sh.

and 7 more in the full report

6 fixed9 passed either way6 still failing1 broke

Pass-rate lift: +23 pp
Tokens: -11%
Agent turns: 0%
Response time: -39%

Model gemini-3.6-flashMeasured 8/10/2026v115 of 22 cases passed with skill

Tokens, turns and time describe resource use, not a dollar price.

Use this skill

Save it into your project's skills folder. Claude Code picks it up in its next session.

curl -fsSL --create-dirs -o .claude/skills/samuraigpt-muapi-ui-design/SKILL.md https://app.decimal.ai/s/samuraigpt-muapi-ui-design/SKILL.md

Want it pinned and updatable? pip install "decimalai>=0.15", then decimalai skills add samuraigpt-muapi-ui-design, and start Claude Code with claude --plugin-dir "$(git rev-parse --show-toplevel)/.agents"

1 · One-time — install the CLI (docs ↗)

pip install "decimalai>=0.15"

2 · Get the skill — writes .agents/skills/samuraigpt-muapi-ui-design/ and pins it in .decimal/skills.lock

decimalai skills add samuraigpt-muapi-ui-design

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/samuraigpt-muapi-ui-design/SKILL.md https://app.decimal.ai/s/samuraigpt-muapi-ui-design/SKILL.md

Raw file: /s/samuraigpt-muapi-ui-design/SKILL.md ↗ · machine-readable summary at /s/samuraigpt-muapi-ui-design.json ↗

Safety checks: 3 of 3 passed

Code scan CleanIntent PassedContent Clean

See it in action

One of 6 test cases the skill fixed. Same model, same prompt, with and without the skill.

1 of 6

Prompt

Provide the exact shell command to generate a dark-themed glassmorphism mobile app mockup for a personal finance tracker.

What was checked, without and with the skill
Checked	Without skill	With skill
Includes --platform mobile in the script invocation.	Missed	Passed
Includes --theme dark in the script command.	Missed	Passed
Includes --style glassmorphism in the script command.	Missed	Passed

case-15 · gemini-3.6-flash · 8/10/2026 · answers are capped and redacted

What's inside

The instructions your model reads when the skill loads.

SKILL.md75 linessingle file

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

Track record

Benchmark

15 / 22

test cases passed, vs 10 / 22 without

Adoption

Users: 0
Times used: 0

Safety and source details

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

View 15 scanner checks

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

samuraigpt / generative-media-skills

.opencode/skills/muapi-ui-design/SKILL.md

View on GitHub ↗

License MITImported 8/3/2026Version v1

More skills from the same source and nearby in the registry, with their headline benchmark lift.

Ready to supercharge your AI agents?

See it in action

What's inside

🎨 UI/UX Design Mockup Skill

Core Competencies

🏗️ Technical Specification

1. Intent Mapping Table

2. Design Tokens & Variables

🧠 Prompt Optimization Protocol (Agent Instruction)

Track record

Benchmark

Adoption

SkillSafety

Source

Related skills