Agent skill

generate-mockup

Generate UI mockups using Magic MCP (21st.dev). Use when (1) creating new UI components, (2) prototyping interfaces, (3) building design system components.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/generate-mockup

SKILL.md

๐Ÿ”” ์‹œ์Šคํ…œ ๋ฉ”์‹œ์ง€: ์ด Skill์ด ํ˜ธ์ถœ๋˜๋ฉด [SEMO] Skill: generate-mockup ํ˜ธ์ถœ - UI ๋ชฉ์—… ์ƒ์„ฑ ์‹œ์Šคํ…œ ๋ฉ”์‹œ์ง€๋ฅผ ์ฒซ ์ค„์— ์ถœ๋ ฅํ•˜์„ธ์š”.

generate-mockup Skill

Magic MCP (21st.dev)๋ฅผ ํ™œ์šฉํ•œ UI ๋ชฉ์—… ์ƒ์„ฑ

์—ญํ• 

๋””์ž์ด๋„ˆ์˜ ์š”๊ตฌ์‚ฌํ•ญ์„ ๋ถ„์„ํ•˜์—ฌ ํ˜„๋Œ€์ ์ธ UI ์ปดํฌ๋„ŒํŠธ ๋ชฉ์—…์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

ํŠธ๋ฆฌ๊ฑฐ

  • /SEMO:mockup ๋ช…๋ น์–ด
  • "๋ชฉ์—…", "mockup", "UI ๋งŒ๋“ค์–ด" ํ‚ค์›Œ๋“œ

Process

Step 1: ์š”๊ตฌ์‚ฌํ•ญ ๋ถ„์„

์ปดํฌ๋„ŒํŠธ ์œ ํ˜•, ํ•„์š” ์š”์†Œ, ์Šคํƒ€์ผ ์š”๊ตฌ์‚ฌํ•ญ ๋ถ„์„

Step 2: Magic MCP ํ˜ธ์ถœ

21st_magic_component_builder ํ•จ์ˆ˜ ํ˜ธ์ถœ

Step 3: ๊ฒฐ๊ณผ ์ œ๊ณต

์ƒ์„ฑ๋œ ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ์™€ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• ์ œ๊ณต

Magic MCP Functions

Function ์šฉ๋„
21st_magic_component_builder ์ƒˆ ์ปดํฌ๋„ŒํŠธ ์ƒ์„ฑ
21st_magic_component_inspiration ์ฐธ๊ณ  ๊ฒ€์ƒ‰
21st_magic_component_refiner ๊ธฐ์กด ๊ฐœ์„ 

References

Didn't find tool you were looking for?

Be as detailed as possible for better results