Communitygithub.com

superdesigndev/superdesign

슈퍼디자인은 프론트엔드 UI/UX 디자인을 전문으로 하는 디자인 에이전트입니다. 디자인 사고가 필요한 UI를 구현하기 전에 이 스킬을 사용하세요.

superdesign란 무엇인가요?

Superdesign은 프론트엔드 UI/UX 디자인에 특화된 AI 에이전트 스킬입니다. 개발자가 UI를 구현하기 전에 디자인 단계를 체계적으로 관리할 수 있도록 도와줍니다. 프로젝트 생성, 디자인 초안 작성 및 반복 개선, 여러 페이지로의 확장, 재사용 가능한 컴포넌트 추출 및 업데이트, 기존 컴포넌트 목록 확인 등 다양한 명령어를 지원합니다. 특히 `--context-file` 플래그를 통해 기존 소스 코드를 컨텍스트로 제공하면, 현재 UI를 충실히 재현하거나 다양한 디자인 변형(예: 다크 테마, 미니멀 스타일)을 생성할 수 있습니다. 라인 범위(line ranges) 지정도 가능하여 특정 코드 부분만 참조할 수 있습니다. 이 스킬은 Claude Code, Cursor, Codex와 같은 AI 코딩 도구에서 사용할 수 있으며, 디자인과 개발 사이의 간극을 줄여 일관된 사용자 경험을 제공하는 데 유용합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/superdesigndev/superdesign-skill/tree/main/skills/superdesign

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

superdesign은(는) 무엇을 하나요?

슈퍼디자인은 프론트엔드 UI/UX 디자인을 전문으로 하는 디자인 에이전트입니다. 디자인 사고가 필요한 UI를 구현하기 전에 이 스킬을 사용하세요. 자주 사용되는 명령어: superdesign create-project --title "X" (프로젝트 설정), superdesign create-design-draft --project-id <id> --title "Current UI" -p "Faithfully reproduce..." --context-file src/Component.tsx (충실한 재현), superdesign iterate-design-draft --draft-id <id> -p "dark theme" -p "minimal" --mode branch --context-file src/Component.tsx (디자인 변형), superdesign execute-flow-pages --draft-id <id> --pages '[...]' --context-file src/Component.tsx (더 많은 페이지로 확장), superdesign create-component --project-id <id> --name "NavBar" --html-file /tmp/navbar.html --props '[...]' (재사용 가능한 컴포넌트 추출), superdesign update-component --component-id <id> --html-file /tmp/navbar.html (기존 컴포넌트 업데이트), superdesign list-components --project-id <id> (기존 컴포넌트 목록). 라인 범위 지원: --context-file path:startLine:endLine

관련 스킬