Open Design를 떠받치는 네 가지 라이브러리 — Skills, Systems, Templates, 그리고 Craft

왜 Open Design의 결과물은 일반적인 AI 디자인 도구보다 더 나아 보일까요? 네 가지 콘텐츠 라이브러리가 함께 작동하기 때문입니다 — 그리고 그중 하나인 craft는 좀처럼 언급되지 않습니다. 이 가이드는 그 네 가지를 모두 둘러봅니다. AI Fusion이 영상에서 제공한 워크스루를 따르되, 현재 릴리스에 맞게 다시 쓰고 최신화했습니다. 위의 영상을 보거나, 아래의 글 버전을 읽어 보세요.

플러그인 라이브러리: 레지스트리에서 스킬을 바로 설치하세요 — 조악함을 배격하는 디자인 스킬도 포함됩니다.

Open Design이란?

Open Design은 폐쇄형 클라우드 디자인 도구에 대한 오픈소스, 로컬 우선 대안입니다. 자체 AI 에이전트를 탑재하지 않습니다 — 대신 당신이 이미 가지고 있는 코딩 에이전트를 감지합니다(Claude Code, Codex, Cursor, Gemini, OpenCode 등). 또는 자신의 API 키를 가져올 수도 있습니다(Anthropic, OpenAI, Azure, Google Gemini, 심지어 Ollama를 통한 로컬 모델까지). 아키텍처는 깔끔합니다: 프런트엔드가 로컬 데몬과 통신하고 모든 것이 로컬 SQLite 데이터베이스에 저장되므로, 다시 돌아왔을 때 프로젝트는 항상 그대로 있습니다.

네 가지 라이브러리

1. Skills — '어떻게 만들 것인가' 레이어

스킬은 모드, 시나리오, 플랫폼별로 정리되어 있습니다. 각 스킬은 말 그대로 단 하나의 스킬 파일이 들어 있는 폴더입니다 — 넣고, 데몬을 재시작하면 피커에 나타납니다. 뻔한 것들(SaaS 랜딩, 대시보드, 문서) 외에도 눈에 띄는 것들이 있습니다: 스위스 인터내셔널풍 덱(16컬럼 그리드, 단일 강조색, 고정된 레이아웃 변형), 매거진 에디토리얼풍 덱(잉크와 전자종이 미학), 그리고 글리치 타이틀 카드나 커서 광선 궤적 인트로 같은 창의적인 영상 스킬 등입니다.

2. Design systems — '어떻게 보일 것인가' 레이어

각 디자인 시스템은 전체 토큰 사양을 담은 하나의 markdown 파일입니다: 색상, 타이포그래피, 간격, 컴포넌트, 모션. Apple의 프리미엄한 여백, Airbnb의 따뜻한 코랄색 사진 주도 UI, Airtable의 구조화된 데이터 느낌, 데이터가 밀집한 앱을 위한 Ant Design — 모든 산출물을 시각적으로 일관되게 유지하는 크고 이식 가능한 라이브러리입니다.

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

3. Templates — '무언가에서 시작하기' 레이어

샘플 데이터가 이미 들어 있는, 곧바로 fork할 수 있는 완성된 산출물 번들입니다. 폴더를 fork하고, 당신의 데이터로 바꿔 넣고, 출시하세요. 매거진 포스터 템플릿(초대형 세리프 헤드라인, 2단 본문)이나 음악은 Suno/Udio로, 음성은 ElevenLabs/MiniMax로 라우팅하는 오디오 징글 템플릿을 떠올려 보세요.

4. Craft — '왜 고품질인가' 레이어(가장 덜 논의되는 것)

이것은 대부분의 리뷰가 건너뛰는 부분입니다. Craft는 스킬이 필요하다고 선언할 수 있는 브랜드 비의존적 렌더링 원칙의 집합이며, 에이전트는 관련 원칙을 자동으로 시스템 프롬프트에 로드합니다:

• 법적 최소치를 넘어서는 접근성 기준선.
• 애니메이션 절제 — 모션이 제 자리를 얻는 때, 그리고 그 제약.
• 색상 규칙, 장문을 위한 에디토리얼 타이포그래피 위계, 그리고 폼 검증 규칙.

결정적으로, 일부는 linter에 의해 자동으로 강제되므로, 이를 어기는 것은 스타일 취향이 아니라 회귀(regression)로 취급됩니다. 이것이 결과물의 품질이 AI 디자인 도구에서 기대할 법한 수준보다 높은 큰 이유입니다 — 기준이 제안이 아니라 강제되기 때문입니다.

슬라이드 덱 모드: 덱 카테고리를 선택하고 예시를 시작점으로 fork하세요.

설치하고 사용해 보기

open-design.ai/download에서 설치 프로그램(macOS/Windows)을 다운로드하고 실행하세요 — 깔끔한 인터페이스, 상단의 채팅 영역, 카테고리별로 곧바로 쓸 수 있는 커뮤니티 옵션(prototype, live artifact, slides, image, video, hyperframes, audio). AI Fusion은 Gemini API 키를 추가하고, 연결을 테스트한 다음, 커뮤니티 live-artifact(소셜 미디어 매트릭스 트래커 대시보드)를 fork합니다. 먼저 전체 계획을 펼쳐 보인 다음, 태블릿/모바일에서 확인하고, 테마를 바꾸고, 코드로 보고, HTML로 다운로드할 수 있는 반응형 결과물을 만들어 냅니다.

팁

• 구조에는 스킬을, 스타일에는 디자인 시스템을 고르세요 — 그 조합이 품질의 대부분을 차지합니다.
• 빈 프롬프트가 아니라 완성된 무언가에서 시작하고 싶을 때는 템플릿을 fork하세요.
• craft는 강제된다는 점을 알아 두세요 — 접근성/애니메이션/타이포그래피 기준선은 lint되며, 선택 사항이 아닙니다.
• 현재의 스킬과 시스템을 보려면 open-design.ai/plugins를 둘러보세요.
• 어떤 모델이든 작동합니다 — 품질은 라이브러리가 책임집니다. 가지고 있는 것을 무엇이든 연결하세요.

자주 묻는 질문

실제로 결과물을 좋게 만드는 것은 무엇인가요? 네 가지 라이브러리입니다: skills(구조), design systems(스타일), templates(시작점), 그리고 craft(렌더링 원칙, 일부는 linter가 자동으로 강제).

'craft' 레이어란 무엇인가요? 브랜드 비의존적 렌더링 규칙(접근성, 애니메이션 절제, 색상, 타이포그래피, 폼 검증)으로, 스킬이 이를 선택해 채택하고 에이전트가 자동으로 로드합니다 — 몇 가지는 lint되므로 위반은 회귀입니다.

스킬과 시스템을 추가하기 쉬운가요? 네 — 스킬은 스킬 파일이 든 폴더이고, 디자인 시스템은 하나의 markdown 파일입니다. 넣기만 하면 인식됩니다.

무료이고 오픈소스인가요? 네 — Apache-2.0, 로컬 우선입니다. 무료로 실행하세요. 당신이 연결한 모델/미디어의 사용량에 대해서만 지불하면 됩니다.

---

이 글 가이드는 AI Fusion의 워크스루를 바탕으로 합니다. 위의 전체 영상을 보고, 더 많은 오픈소스 AI 도구를 위해 AI Fusion을 구독하세요.