Open Design 전체 기능 투어 — 슬라이드, 프로토타입, 이미지, 동영상, 그리고 데스크톱 펫

이 가이드는 Open Design을 폭넓게 둘러보는 투어입니다. 하나를 깊게 만들어 보는 것이 아니라, 이 워크스페이스가 만들어 낼 수 있는 모든 것을 훑어봅니다 — 슬라이드 덱, 포스터, 스케치에서 만든 이미지, 스케치에서 만든 앱 프로토타입, 코드 기반 모션 그래픽, 동영상, 심지어 데스크톱 펫까지. 硅基麻辣拌이 자신의 워크스루에서 진행하는 기능 투어를 따라가되, 영어로 다시 쓰고 현재 릴리스에 맞춰 업데이트했습니다. 실시간 진행은 위의 동영상을 보고, 글로 된 버전은 이어서 읽어 보세요.

Open Design 워크스페이스 — 프로토타입, 슬라이드 덱, 이미지, 동영상이 하나의 차분하고 익숙한 캔버스에 담겨 있습니다.

Open Design이란?

Open Design은 이미 사용하고 있는 코딩 에이전트 위에서 동작하는 오픈소스 로컬 우선 디자인 플랫폼입니다. 프로젝트 전체가 로컬에 배포되는 웹 앱이며, 직접 쓰는 코딩 에이전트를 완전히 지원하는 모델 레이어를 갖추고 있습니다 — API 키로 연결하든, OAuth 구독으로 연결하든, 기존 CLI를 직접 연결하든 상관없습니다.

硅基麻辣拌은 진정한 강점으로 한 가지를 꼽습니다. API 키나 인증 토큰을 절대 노출할 필요가 없다는 점입니다. Open Design을 로컬의 Codex나 Claude Code에 CLI로 연결하면, 생성 작업이 기기를 절대 벗어나지 않는 자격 증명을 통해 실행됩니다 — 더 많은 오픈소스 에이전트 프로젝트가 따라 했으면 하는 보안 특성입니다. 동영상에서는 GPT-5.5 기반 OpenAI Codex 구독으로 모든 것을 구동합니다.

1단계 — 에이전트 설치 및 연결

가장 빠른 길은 open-design.ai/download에서 받는 데스크톱 앱입니다 — 설정이 필요 없고, 설치된 에이전트 CLI를 자동으로 감지합니다. 소스에서 실행하려면:

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

출력되는 로컬 URL을 엽니다(포트는 동적으로 정해지므로 하드코딩하지 마세요). 硅基麻辣拌이 짚어 주듯, 문서를 아예 읽지 않아도 됩니다. 에이전트에게 레포 링크를 건네고 dev 모드 설정으로 Open Design을 설치하라고 시키면 됩니다. 첫 실행 시 로컬 CLI — Codex, Claude Code, Cursor, OpenCode — 를 가리키도록 설정하면 준비가 끝납니다.

실제로 만들 수 있는 것

시작 화면은 예시로 가득합니다 — 웹 페이지, 포스터, 앱 아이콘, 모션 그래픽, 아티클 커버 이미지, 픽셀 스타일 애니메이션, 슬라이드 덱, 재무 보고서, 매거진 포스터. 모든 예시는 Open Design의 내장 프롬프트와 스킬이 직접 만들어 낼 수 있는 결과물이며, 각 예시는 그 뒤에 있는 프롬프트와 디자인 시스템을 함께 보여 줍니다.

디자인 시스템 라이브러리: 각 항목은 실제 브랜드를 팔레트, 타이포그래피, 컴포넌트, 그리고 재사용할 수 있는 비주얼 분위기로 분해해 보여 줍니다.

이제 기능을 하나씩 살펴보겠습니다.

슬라이드 덱 (PPT)

Slideshow를 클릭하고 이름을 붙인 뒤 디자인 시스템을 고릅니다(硅基麻辣拌은 Anthropic/Claude 스타일 시스템을 사용합니다). 그러면 Open Design은 단순히 에이전트에게 슬라이드를 요청하는 것과 차별화되는 일을 합니다. 프롬프트를 바탕으로 동적 디스커버리 폼을 생성하는 것입니다 — 캔버스 비율, 대상 청중, 슬라이드 수, 리서치 포지셔닝, 비주얼 방향성 — 그리고 만들기 전에 원하는 바를 확인합니다. 이 폼은 하드코딩되어 있지 않습니다. 프롬프트로부터 생성되어 프롬프트의 빈틈에 맞춰 조정됩니다. 결과물은 선택한 브랜드 스타일의 깔끔한 가로형 덱입니다.

손으로 그린 스케치에서 만드는 이미지

Open Design은 손으로 그린 입력을 지원합니다. 무언가를 거칠게 스케치하고 — 동영상에서는 의도적으로 추상적인 “용” — 그 스케치에서 실제 이미지를 생성해 달라고 요청합니다. 방향과 배경에 대한 질문을 한 뒤 이미지를 생성해 디자인 파일에 다시 넣어 줍니다. 핵심이 와닿습니다. 그림 실력은 필요 없고, 아이디어만 있으면 됩니다.

스케치에서 만드는 앱 프로토타입

같은 방식, 다른 결과물입니다. 거친 와이어프레임을 그리고 — 여기에 원 하나, 저기에 사각형 하나 — 스케치 파일을 저장한 뒤 이를 참조해 모바일 앱 화면을 요청합니다. Open Design은 동일한 폼-확인-생성 루프를 사용해 추상적인 스케치를 완성도 높아 보이는 화면으로 바꿔 줍니다.

코드로 만드는 모션 그래픽

내장 모션 스킬을 사용해 硅基麻辣拌은 의인화된 아이폰 두 대가 만나 대화하는 애니메이션을 생성합니다. 전적으로 SVG와 CSS 애니메이션으로 만들어집니다 — 모든 비주얼 요소가 코드입니다 — 그래서 무언가를 움직이게 해야 할 때 덱이나 페이지에 깔끔하게 들어갑니다.

템플릿 라이브러리: 유형별로 필터링하고 포크해서 시작할 수 있는 프로토타입, 슬라이드, 이미지, 동영상 출발점.

이미지와 동영상 생성

이미지 라이브러리는 GPT Image 같은 일반적인 사례를 다루며, 프롬프트가 미리 패키징되어 있습니다 — 하나를 골라 생성하면 됩니다. 동영상도 지원되며, 모델이 생성한 클립과 제품/동적 덱 효과도 포함됩니다. 모션 비중이 큰 동영상 작업은 hyperframes 프로젝트와 협업해 이루어지며, 이 프로젝트는 코드를 사용해 제품 프로토타입과 데이터 시각화 애니메이션을 구동합니다.

데스크톱 펫

가장 매력적인 기능: 펫 기르기. 하나를 고르고 — 커뮤니티가 기여한 캐릭터도 포함됩니다 — 저장을 누르면 데스크톱에 나타나 상호작용할 수 있습니다. 작은 기능이지만, 결과물만이 아니라 도구의 감성적인 결까지 신경 쓰는 프로젝트라는 신호입니다.

솔직한 평가

硅基麻辣拌은 장단점에 공정합니다. 내부적으로 Open Design은 조합 가능한 스킬 세트(Open Design 안에서 사용하거나 혹은 자신의 Codex/Claude Code로 추출할 수 있음)와 잘 알려진 브랜드를 다루는 깊이 있는 디자인 시스템 라이브러리를 제공합니다 — 그리고 Claude-Design 스타일 프레임워크 전체가 레포에 오픈소스로 공개되어 있어, 새로운 디자인 유형을 직접 추가할 수 있습니다.

현재의 한계: 일부 다듬기 기능은 아직 빠져 있습니다 — 특히 렌더링된 페이지를 주석 달고 수정하는 픽셀 단위 코멘트 모드가 그렇습니다. 하지만 이를 상쇄하는 강점은 분명합니다. 폭넓은 에이전트 지원(Codex, Claude Code, Cursor, OpenCode)에 API 키 노출이 없고, 빠르게 발전하는 프로젝트라는 점입니다. 확장 가능하고 직접 기여할 수 있는 플랫폼을 원한다면 훌륭한 출발점입니다.

팁

• 로컬 CLI로 구동하세요 — API 키가 기기를 벗어나지 않고, 생성 작업은 이미 결제하고 있는 구독에 얹혀 실행됩니다.
• 디스커버리 폼이 제 역할을 하게 두세요 — 그 질문들에 먼저 답하는 것이 덱과 프로토타입을 첫 시도에서 제대로 나오게 하는 비결입니다.
• 형태가 중요할 때는 설명하지 말고 스케치하세요 — 손으로 그린 입력은 이미지와 앱 프로토타입 모두에 통합니다.
• 덱이나 페이지에 움직임이 필요하면 모션 스킬을 활용하세요. 코드이므로 어디든 옮길 수 있습니다.
• GUI 밖에서 어떤 기능을 쓰고 싶을 때는 스킬을 자신의 에이전트로 추출하세요.

FAQ

API 키를 노출해야 하나요? 아니요 — 그게 바로 강조되는 강점입니다. 로컬의 Codex, Claude Code, Cursor, OpenCode로 CLI를 통해 Open Design을 구동하면 자격 증명이 기기를 절대 벗어나지 않습니다.

정적 디자인뿐 아니라 정말 동영상과 애니메이션도 만들 수 있나요? 네. 코드 기반 모션 그래픽(SVG + CSS), 이미지와 동영상 생성, 그리고 hyperframes 프로젝트와 협업한 모션 비중이 큰 작업까지 해냅니다.

아직 빠져 있는 건 무엇인가요? 워크스루 시점에는 렌더링된 페이지에 주석을 다는 픽셀 단위 코멘트 모드가 아직 제공되지 않았습니다. 프로젝트가 빠르게 움직이니 현재 릴리스를 확인하세요.

무료인가요? 앱은 Apache-2.0 하에 오픈소스이며 로컬에서 무료로 실행할 수 있습니다. 연결하는 에이전트와 제공업체의 모델 및 미디어 사용량에 대해서만 비용을 냅니다.

---

이 글로 된 가이드는 硅基麻辣拌의 기능 투어를 바탕으로 합니다. 위의 전체 동영상을 보고, 더 많은 AI 도구 워크스루를 원한다면 硅基麻辣拌을 구독하세요.