skills.rest
semicolon-devteam
semicolon-devteamOFFICIAL
Explore all skills by this author β†’
WebsiteGitHub

generate-mockup

Generate UI mockups from design requirements using the 21st_magic_component_builder.

Updated Dec 11, 2025
Search Tags:#automation#ui#mcp#design-system#mockup
One-click install
npx skills add https://github.com/semicolon-devteam/semo --skill generate-mockup
Or copy as Structured Prompt for Agentβ–Ό
Please help me install this Agent Skill.
Skill: generate-mockup
Source: https://github.com/semicolon-devteam/semo/tree/main/packages/eng/nextjs/skills/generate-mockup
Command: npx skills add https://github.com/semicolon-devteam/semo --skill generate-mockup

SYSTEM DOCUMENTATION & REQUIREMENTS

πŸ’‘ This Skill includes references (resource) components.

What problem does it solve?

Magic MCPλ₯Ό ν™œμš©ν•œ ν˜„λŒ€μ  UI λͺ©μ—…을 μžλ™μœΌλ‘œ 생성해 λ””μžμ΄λ„ˆμ™€ 개발자 κ°„ ν˜‘μ—… 속도λ₯Ό λ†’μž…λ‹ˆλ‹€.

Core Features & Use Cases

  • λͺ©μ—… 생성 μžλ™ν™”: μš”κ΅¬μ‚¬ν•­μ— 맞좘 μ»΄ν¬λ„ŒνŠΈ λͺ©μ—… 생성
  • μ°Έκ³  및 영감 μ°ΎκΈ°: Inspire κΈ°λŠ₯으둜 λ””μžμΈ λ°©ν–₯ μ œμ‹œ
  • 좜λ ₯λ¬Ό 곡유: λͺ©μ—… μ½”λ“œ/μŠ€λ‹ˆνŽ«μ„ νŒ€κ³Ό 곡유

Quick Start

/SEMO:mockup λͺ…λ ΉμœΌλ‘œ λͺ©μ—… 생성 μš”μ²­. ν•„μš” μ‹œ νŠΉμ • μ»΄ν¬λ„ŒνŠΈ νƒ€μž…κ³Ό μŠ€νƒ€μΌ κ°€μ΄λ“œλ₯Ό μ „λ‹¬ν•©λ‹ˆλ‹€.

Frequently Asked Questions about generate-mockup

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

FAQPage Schema
How do I generate UI mockups from design requirements?β–Ό

Generate UI mockups by providing design requirements to this Skill, which calls the Magic MCP component builder to create UI components, prototypes, and design system components for web and mobile platforms. You receive component code and usage instructions for immediate implementation.

Can I use this for creating design system components?β–Ό

Yes, this Skill generates design system components across web and mobile. It analyzes your design needs and produces component code that follows your specifications, enabling consistent UI patterns across your product.

What's the best way to speed up designer-developer collaboration?β–Ό

Automate mockup generation using Magic MCP to eliminate back-and-forth iterations. The Skill produces shareable component code and snippets that developers can immediately integrate, reducing design-to-implementation time.

How do I get design inspiration and direction for my UI components?β–Ό

Use the Inspire feature within this Skill to generate design direction suggestions. It provides reference mockups and styling guidance to inform your component design before full implementation.

Does this work for both web and mobile UI prototyping?β–Ό

Yes, this Skill creates UI mockups for both web and mobile platforms. Specify your target platform and component type in your requirements, and receive platform-appropriate component code and prototypes.

Related Skills

Explore More Design & Creative Skills→
RIVO-NoordRIVO-Noord

mockup-forge

Generate UI mockups from wireframes, screen designs, or Excel tables.

Official
Advanced
xpert-aixpert-ai
8

share

Deploys prototypes to Sites or Vercel and generates shareable URLs.

Official
Intermediate
1479089714790897
7

kwp-design-design-system

Audit component libraries for naming inconsistencies and missing documentation.

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-figma-to-code

Convert Figma designs into React Native code using Locofy.ai and Builder.io.

Community
Intermediate