Install
/plugin marketplace add ckryptickunal/OpenDesigner
/plugin install opendesigner@opendesigner이런 분께 적합합니다
AI 코딩 어시스턴트는 이미 쓰고 있지만 프로젝트에는 아직 통일된 비주얼 규칙이 없는 개발자와 작은 팀을 위한 것입니다. 손에는 몇 장의 디자인 시안이나 단편적인 구두 설명밖에 없는데, 코드에 쓰인 색상·서체·간격은 페이지마다 제각각입니다. 프로젝트가 막 시작되어서 디자인 시스템부터 만들기에는 시간이 없는 경우도 마찬가지입니다.
이것은 지금 쓰는 AI 도구에 얹는 애드온입니다. 말로 설명하기 어려운 취향을 코드가 그대로 읽어들일 수 있는 파일로 바꾸는 것이 목적이고, 별도의 디자인 프로그램을 여는 도구가 아닙니다. MIT 라이선스의 무료 오픈소스 프로젝트로, 지금 쓰는 에디터를 대체하지 않고 기능을 한 겹 더 얹을 뿐입니다. 몇 개의 짧은 질문에 답하고, 결과가 프로젝트 디렉터리에 기록되는 것을 받아들이고, 머지 전에 한 번 더 스스로 확인하고 싶은 분이라면 먼저 한 번 돌려보기에 좋습니다. 방금 남의 코드를 인계받아 시각적 분위기부터 파악하고 싶은 분도 이걸로 빠르게 훑어볼 수 있습니다.
3분 만에 첫 시도 완료
먼저 사전 조건을 확인합니다. 로컬에 Python 3.10 이상이 있어야 합니다. 엔진은 Python 파일 하나일 뿐이라 설치할 의존성이 없습니다.
첫째, 스킬을 설치합니다. 권장 경로는 Claude Code의 플러그인 마켓플레이스입니다. 대화창에 /plugin marketplace add ckryptickunal/OpenDesigner 를 입력하고 Enter를 누른 뒤, 이어서 /plugin install opendesigner@opendesigner 를 입력합니다.
둘째, 설치 위치를 확인합니다. Agent Plugins를 지원하는 도구는 루트의 plugin.json을 읽고, 스킬을 읽는 클라이언트는 .agents/skills/ 디렉터리에서 파일을 가져오도록 정해져 있습니다. 플러그인 마켓플레이스를 거치지 않는 클라이언트라면 스킬을 프로젝트의 .agents/skills/ 에 직접 복사해야 합니다.
셋째, 위험도가 낮은 작업을 실행합니다. 프로젝트를 열고 대화에서 "Create a design system for this project." 라고 말하면 짧은 질문이 최대 다섯 개 나옵니다. 각 질문에는 추천 답안과 그 이유가 붙어 있으니 하나씩 확인하거나 고치면 됩니다. 처음에는 깨끗한 디렉터리에서 돌리거나 먼저 브랜치를 따두면, 생성된 토큰이 기존 코드와 뒤섞이지 않습니다.
넷째, 부작용과 확인 지점을 미리 정합니다. 엔진은 결과를 DESIGN.md, PRODUCT.md, 그리고 opendesigner/ 디렉터리로 기록합니다. 그 안에는 토큰과 여러 가지 내보내기, 그리고 한 장의 개요 페이지가 들어 있습니다. 디스크에 쓰는 순간 저장소 내용이 바로 바뀌므로, 먼저 브랜치를 만들거나 커밋 하나를 남기고, 답을 확인한 뒤에 쓰게 하세요.
다섯째, 관찰할 수 있는 성공 신호를 봅니다. 프로젝트에 위의 세 결과물이 생기고, 셀프 점검 단계에서 오류가 없어야 합니다. 텍스트 대비는 WCAG 2.2 AA 기준으로 확인하고, 클릭 영역은 24 px 이상이며, 키보드 포커스가 보이고, 모션 감소 설정을 처리해야 합니다. 오류가 하나라도 있으면 빌드는 멈춥니다.
사용 사례
사례 하나: 새 프로젝트에 첫 번째 디자인 시스템을 깔기. 플러그인을 설치한 뒤 프로젝트에서 위의 영어 트리거 문장을 말하고, 최대 다섯 개의 짧은 질문에 답하면 흩어진 조각이 아니라 완성된 디자인 시스템을 받게 됩니다. 첫 판이 완벽할 필요는 없고, 이 자체가 더 질문하고 다듬기 시작할 지점입니다. 이어서 색상, 서체, 간격, 모션 네 갈래는 각각 한 차례 더 질문해 세밀하게 다듬을 수 있고, 결과물은 언제나 같은 세 개의 파일과 디렉터리에 남습니다. 근거는 여기까지입니다. 공식 문서는 질문 상한을 다섯으로, 세밀화 대상을 이 네 갈래로 명시했지만, 질문 수를 바꿀 수 있는지는 설명하지 않았고, 각 세밀화 라운드의 대화 형식도 다루지 않았습니다.
사례 둘: 플러그인 마켓플레이스가 없는 클라이언트에서 같은 스킬을 다시 쓰기. 스킬을 프로젝트의 .agents/skills/ 디렉터리에 복사한 뒤, 늘 하던 대로 대화에서 디자인 시스템 생성을 요청하고 질문에 답하면, 산출물과 셀프 점검 규칙은 사례 하나와 완전히 같습니다. 프로젝트에 이미 토큰 명명 규칙이 있다면 복사하기 전에 두 규칙이 서로 부딪히지 않는지 확인하세요. 공식 문서는 이 클라이언트들이 그 디렉터리에서 스킬을 읽는다는 사실만 알려줄 뿐, 복사한 뒤 어떻게 갱신하는지는 밝히지 않았고, 추가 의존성이나 설정 단계도 제시하지 않았습니다.
사용 경계
엔진의 필수 요건은 하나뿐입니다. Python 3.10 이상이며, 그 외에 설치할 의존성은 없습니다. 설치 방법도 공식 문서가 밝힌 것들뿐입니다. 플러그인 마켓플레이스 밖에서는 스킬을 직접 복사하는 수밖에 없고, 공식 쪽에서 이 수동 경로용 자동 업데이트 명령이나 검증 명령을 제공하지는 않습니다. 실행할 때 프로젝트 파일을 직접 덮어쓰므로, 시작하기 전에 브랜치나 커밋을 확보해 두세요. 내장 셀프 점검은 통과 기준이 분명합니다. 대비가 WCAG 2.2 AA에 못 미치거나, 클릭 영역이 24 px 미만이고, 키보드 포커스가 보이지 않거나, 모션 감소 설정을 처리하지 않았다면 빌드가 멈춥니다. 알아서 고쳐 주지는 않으니 고치고 다시 돌려야 합니다. 다섯 개 질문이라는 전제는 질문에 짧게 답할 수 있다는 것입니다. 복잡한 업무 규칙이 얽히면 엔진은 판단을 내릴 수 없습니다. 디자인 시스템이 최종 산출물인 것도 아닙니다. 토큰과 문서는 저장소에 남고, 기존 컴포넌트 라이브러리와 어떻게 합칠지, 버전 관리에 포함할지를 공식 문서는 밝히지 않았으니 직접 판단해야 합니다. 저장소 주소: <https://github.com/ckryptickunal/OpenDesigner >.