Claude Design을 Claude Code용 플러그인으로 추출했습니다
I extract Claude Design as a skills plugin you can install in Claude Code
핵심 요약
Claude.ai의 디자인 모드를 로컬 Claude Code 환경에서 사용할 수 있도록 10가지 기능의 플러그인으로 구현했습니다.
- 기능 추출 — Claude.ai의 디자인 모드를 로컬 환경에서 활용 가능하도록 플러그인화함.
- 다양한 도구 — 와이어프레임, 프로토타입, 디자인 시스템 생성 등 10가지 핵심 기능을 제공함.
- 간편한 설치 — Claude Code 플러그인 마켓플레이스를 통해 쉽게 설치하고 바로 사용 가능함.
- 오픈 소스 — MIT 라이선스로 공개되어 누구나 자유롭게 활용 및 기여할 수 있음.
Claude Design(claude.ai의 디자인 모드)은 훌륭하지만 웹 앱 안에서만 쓸 수 있습니다.
저는 제 파일들로 실행되는 Claude Code 안에서도 똑같은 워크플로우를 원했고, 기존 디자인 시스템을 루프에 포함하고 싶었습니다.
그래서 플러그인으로 출시했습니다. 10가지 스킬, MIT 라이선스입니다:
-
/opendesign:
entry point. 디자인 시스템을 스캔하고, intake를 실행하며, 적절한 전문 스킬로 라우팅합니다. -
/create-design-system:
브랜드, 코드베이스, 또는 제품으로부터 재사용 가능한 시스템을 생성합니다. -
/frontend-design:
기존 시스템 없이 디자인하며, 확정된 미학을 추구합니다. -
/wireframe:
공간을 빠르게 탐색하고, 여러 거친 아이디어를 생성합니다. -
/interactive-prototype:
실제 앱처럼 동작하는 클릭 가능한 프로토타입을 만듭니다. -
/make-a-deck:
슬라이드 덱, 고정된 1920×1080 캔버스. -
/make-tweakable:
변형, 색상, 문구를 위한 디자인 내 컨트롤. -
/handoff-to-claude-code:
구현을 위해 코딩 에이전트로 넘깁니다. -
2 setup helpers (미리보기 서버 실행, 폴더 초기화)
결과물은 HTML입니다. 여러 HTML 목업과 디자인 시스템을 관리할 수 있는 대시보드도 있습니다.
설치:
/plugin marketplace add manalkaff/opendesign
/plugin install opendesign@opendesign
그다음 그냥 이렇게 하세요:
- "/opendedsign redesign my landing page, give me tweakable style"
- "/opendesign make new design system from the current /dashboard style"
저장소: 댓글에 남김
저는 프론트엔드 작업할 때 이걸 매일 씁니다. 새로운 페이지나 폼을 만들거나 기존 것을 리디자인하고 싶을 때마다요.
이건 스킬을 지원하는 어떤 모델이나 CLI 도구와도 함께 사용할 수 있습니다.
