Claude-skill-registry 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.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/generate-mockup" ~/.claude/skills/majiayu000-claude-skill-registry-generate-mockup && rm -rf "$T"

manifest: skills/data/generate-mockup/SKILL.md

source content

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