Agent Skills: generate-mockup Skill

🔔 시스템 메시지: 이 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

• Component Types
• Design Principles