팀을 위한 Open Design — 버전 관리되는 스킬, 나만의 브랜드 시스템, 그리고 안티슬롭 가드레일

이 가이드는 Open Design을 일회성 프로토타입 생성기가 아니라 진짜 버전 관리 가능한 디자인 워크플로로 사용하는 것에 관한 것입니다. 팀에게 이것을 흥미롭게 만드는 조합은 이렇습니다: 이미 쓰고 있는 에이전트, 파일 기반 스킬, 그리고 브랜드 DESIGN.md 시스템에, 결과물이 생성된 것처럼 보이지 않게 막아 주는 안티슬롭 가드레일까지. 이 글은 AICodeKing이 자신의 영상에서 제시한 분석을 따르되, 현재 릴리스에 맞춰 다시 쓰고 갱신한 것입니다. 전체 해설은 위 영상을 보거나, 글 버전은 아래에서 이어 읽으세요.

플러그인 라이브러리: 레지스트리에서 곧바로 스킬을 설치하세요 — anti-slop 디자인 스킬도 포함됩니다.

Open Design이란?

Open Design은 로컬 우선이자 오픈소스인 디자인 앱으로, 이미 사용 중인 코딩 에이전트에 연결됩니다. 자체 모델을 탑재하는 대신, Claude Code, Codex, Cursor, Gemini, OpenCode, Qwen Code 같은 도구를 경로에서 감지해 그 에이전트를 디자인 엔진으로 사용합니다 — 아무것도 설치돼 있지 않으면 Anthropic API(BYOK)로 폴백합니다. 라이선스는 Apache-2.0이며, 유일한 비용은 선택한 모델의 사용료뿐입니다. AICodeKing의 표현을 빌리면, 이것은 “이미 가지고 있는 에이전트를 감싸는 디자인 껍데기”입니다.

왜 단순한 채팅 박스가 아니라 팀 워크플로인가

AICodeKing이 높이 평가하는 이유: 이것은 미리보기가 달린 빈 프롬프트 박스가 아닙니다. 가치는 모두 버전 관리 가능한 세 가지의 조합에 있습니다:

1. 이미 쓰고 있는 코딩 에이전트 — 엔진이며, 이미 비용을 지불했습니다.
2. 파일 기반 스킬 — 각 스킬은 “멋진 페이지 하나 만들어 줘”가 아니라, 특정 표면(SaaS 랜딩, 대시보드, 가격 페이지, 문서, 블로그, 모바일 앱, 덱)에 대한 규칙을 에이전트에 제공합니다.
3. DESIGN.md 브랜드 시스템 — 색상, 타이포그래피, 간격, 레이아웃, 컴포넌트, 모션, 톤, 브랜드 규칙, 안티패턴을 아우르는 순수 markdown 디자인 시스템.

스킬과 디자인 시스템이 파일이기 때문에, 팀은 자체 내부 대시보드 스킬과 자체 브랜드 DESIGN.md를 만들고, 그것들을 git에 커밋하며, Claude Code, Codex 또는 어떤 에이전트든 그 규칙을 따르는 산출물을 생성하게 할 수 있습니다. 이는 버전 관리되고, 포크할 수 있고, 리뷰할 수 있는 디자인 워크플로입니다 — 닫혀 있는 디자인 채팅 박스가 제공할 수 없는 것이죠.

플러그인 허브: 레지스트리를 둘러보고, 플러그인을 가져오고, 팀을 위해 준비하세요.

안티슬롭 장치

AICodeKing이 가장 좋아하는 부분이자, 팀 산출물이 내놓을 만한 수준을 유지하는 이유입니다: Open Design은 AI 생성 UI의 티 나는 흔적과 싸웁니다. 프롬프트 스택은 산출물을 내보내기 전에 다차원 비평(디자인 철학, 위계, 실행, 구체성, 절제)을 돌리고, 각 스킬은 에이전트가 반드시 만족시켜야 하는 P0/P1/P2 체크리스트를 함께 담을 수 있으며, 저장소는 흔한 실패 패턴을 명시적으로 금지합니다 — 과한 보라색 그라데이션, 흔해 빠진 이모지 아이콘, 좌측 보더 강조가 붙은 아무 둥근 카드, 가짜 지표, 장식용 채움. 디스커버리 폼(작성 전에 표면, 대상, 톤, 브랜드, 규모를 묻는다)과 방향 선택기(결정론적 팔레트를 갖춘 엄선된 시각적 방향)와 짝지어, 에이전트는 매번 다듬을 때마다 표류하는 대신 안정적인 진실의 출처를 갖게 됩니다.

설치

git clone https://github.com/nexu-io/open-design.git
cd open-design
corepack enable && pnpm install
pnpm tools-dev run web

출력되는 로컬 URL을 여세요(포트는 동적입니다 — 하드코딩하지 마세요). 설정 없이 쓰고 싶나요? open-design.ai/download에서 데스크톱 앱을 받으세요. 처음 로드할 때 설치된 에이전트 CLI를 감지합니다. 하나를 고르거나 Anthropic BYOK 옵션을 사용하세요. 전체 플러그인 라이브러리는 open-design.ai/plugins에서 둘러볼 수 있습니다.

팀 색채가 담긴 데모

AICodeKing이 제안하는 흐름은 실제 업무에 깔끔하게 대응됩니다: 에이전트로 Codex나 Claude Code를 고르고, 스킬(SaaS 랜딩 또는 대시보드)을 고르고, 디자인 시스템(예: Linear 또는 Stripe — 판단하기 쉽다)을 고르세요. 사내 제품을 위한 랜딩 페이지처럼 구체적인 것을 프롬프트로 주고, 디스커버리 폼을 채우고, 방향을 고른 뒤 돌리세요. 계획이 스트리밍으로 흘러 들어오고, 에이전트가 스킬과 DESIGN.md를 읽으며 실제 파일을 작성합니다.

HyperFrames 갤러리: 코드 기반의 모션과 비디오 작품을 포크하고 리믹스할 수 있습니다.

산출물은 샌드박스 미리보기에서 렌더링되며 HTML, PDF, ZIP, Markdown(덱 스킬은 PPTX 형식)으로 내보낼 수 있습니다. 디자인 시스템과 스킬이 프롬프트 스택에 남아 있기 때문에 다듬는 과정에서 표류하지 않습니다 — 에이전트는 매 턴마다 룩을 새로 발명하는 대신 안정적인 참조를 유지합니다.

프로덕션에 대해 솔직해지기

AICodeKing은 냉정하게 보고 있고, 당신도 그래야 합니다: 이것은 초기 단계의 프로젝트이므로, 바로 투입 가능한 프로덕션 디자인 팀이 아니라 강력한 출발점으로 다루세요. 산출물의 품질은 당신이 가리키는 모델에 크게 좌우됩니다 — 약한 모델에 좋은 디자인 시스템을 더해도 디자인 판단력은 여전히 약합니다. Claude Code는 가장 풍부한 스트리밍을 제공합니다. 다른 CLI는 줄 단위로 버퍼링됩니다. 그리고 데몬이 작업 디렉터리를 가지고 에이전트를 띄우므로, 어떤 스킬을 설치하고 어떤 디렉터리를 노출할지 신중하게 생각하세요. 빠른 프로토타입, 랜딩 페이지, 사내 대시보드, 덱에는 정말로 유용합니다. 출시할 프로덕션 UI에는, 먼저 생성한 뒤 코드를 리뷰하고, 반응형을 테스트하고, 다듬으세요.

팁

• 자신만의 스킬 + 브랜드 DESIGN.md를 작성하고 커밋하세요 — 그것이 팀의 초능력입니다.
• 산출물을 판단할 때는 알아보기 쉬운 디자인 시스템(Linear/Stripe)을 골라 품질을 평가하기 쉽게 하세요.
• 디스커버리 폼과 방향 선택기를 활용해 생성 전에 방향을 고정하세요.
• 로컬 CLI를 사용해 생성을 이미 지불 중인 구독 위에서 돌리세요.
• 프로덕션을 위해서는 산출물을 출발점으로 다루세요 — 리뷰하고, 테스트하고, 다듬으세요.

자주 묻는 질문

팀이 자체 스킬과 디자인 시스템을 만들 수 있나요? 네 — 스킬은 폴더이고 디자인 시스템은 DESIGN.md 파일입니다. git에 커밋하면 연결된 어떤 에이전트든 그것에 맞춰 생성하므로, 워크플로 전체가 버전 관리되고 포크할 수 있습니다.

산출물이 AI 생성처럼 보이지 않게 하는 것은 무엇인가요? 출력 전 다차원 자기 비평, 스킬별 P0/P1/P2 체크리스트, 흔한 슬롭 패턴(보라색 그라데이션, 흔해 빠진 아이콘, 가짜 지표)에 대한 명시적 금지, 그리고 디스커버리 폼과 방향 선택기입니다.

프로덕션에 바로 쓸 수 있나요? 초기 단계지만 역량 있는 출발점입니다. 프로토타입, 대시보드, 랜딩 페이지, 덱에 사용하세요. 프로덕션 UI에는 생성된 코드를 리뷰하고 다듬으세요.

무료인가요? 앱은 Apache-2.0 하에 오픈소스이며 로컬에서 무료로 실행됩니다. 연결한 에이전트와 키의 모델 사용량에 대해서만 비용을 지불합니다.

---

이 글 가이드는 AICodeKing의 분석에 기반합니다. 위의 전체 영상을 보시고, 더 많은 AI 도구 심층 분석을 위해 AICodeKing을 구독하세요.