디자인을 위한 OpenCode.

OpenCode는 실제로 무엇인가

OpenCode는 터미널을 위해 만들어진 오픈소스 AI 코딩 에이전트로, SST(Anomaly Innovations)를 만든 팀이 유지보수합니다. 저장소를 읽고, 명령을 실행하고, 파일을 편집하며, 대규모 언어 모델과 대화합니다 — 하지만 공급사에 묶인 에이전트와 달리, 자체 모델을 함께 제공하지 않습니다. 원하는 어떤 공급자와 모델이든 가리키고 자신의 키를 가져옵니다.

터미널 UI(TUI)로 실행되며, 같은 엔진 위에 데스크톱 앱과 IDE 확장이 얹힙니다. 내부적으로 클라이언트/서버 아키텍처를 사용하므로, 실제로 작업을 하는 에이전트가 여러분이 구동하는 표면과 분리되어 있습니다. 두 가지 내장 에이전트 — build와 plan — 는 Tab 키로 전환됩니다.

• 모델에 구애받지 않음: 모델과 공급자는 개방형 카탈로그인 models.dev에서 가져옵니다. opencode.json에서 provider/model-id 문자열로 구성하고, 로드하고 싶지 않은 공급자를 비활성화할 수 있습니다 — 그래서 같은 디자인 워크플로가 Anthropic, OpenAI, Google, OpenRouter, 로컬 모델 등에서 실행됩니다.
• 지시 파일: OpenCode는 프로젝트 규칙을 위해 프로젝트의 AGENTS.md 파일(도구 간 표준이며 CLAUDE.md와도 호환)을 읽습니다 — 디자인 컨벤션을 담기에 자연스러운 곳입니다. /init를 실행해 하나 생성하세요.
• 확장 가능: LSP 통합, MCP 서버, 테마, 키바인드, 커스텀 명령을 지원하며, 협업을 위한 공유 가능한 세션 링크도 제공합니다.

• 유지보수: SST / Anomaly Innovations (오픈소스 프로젝트)
• 자격 증명: 자신의 모델 공급자 API 키 — BYOK, 공급사 종속 없음
• 라이선스: MIT, 오픈소스

개방형의 모든-모델 에이전트가 디자인 작업에 맞는 이유

OpenCode는 공급사 에이전트처럼 단일한 “디자인 모델”을 가지고 있지 않습니다 — 그리고 그것이 핵심입니다. 모델에 구애받지 않고 개방적이기 때문에, 현재 프런트엔드에 가장 강한 모델로 같은 디자인 워크플로를 실행하고, 나중에 바꾸고, 로컬 모델로 되돌릴 수 있습니다. 모두 설정을 바꾸지 않고서.

하지만 모델 선택만으로는 감각을 살 수 없습니다. 모든 코딩 에이전트가 그렇듯, OpenCode도 제약을 주지 않으면 평범한 UI를 만듭니다. 좋은 디자인 결과물은 여러분이 제공하는 세 가지 입력에서 나옵니다.

• 디자인 시스템: 에이전트가 재사용하는 실제 tokens, 기본 요소, 컨벤션 — 그래서 결과물이 평범한 모습으로 기본 회귀하지 않고 브랜드에 맞춰집니다.
• 미학 skill: 실제 감각을 강제하는 엄선된 skill — 절제된 모션, 브랜드 우선 위계, 서체 최대 두 종과 액센트 색 하나 — 그리고 에이전트가 만들기 전에 방향에 전념하게 합니다.
• 구체적 레퍼런스: 실제 레퍼런스 이미지와 여러 상태(데스크톱과 모바일, hover, 빈 상태, 로딩), 히어로 한 컷이 아니라.

교훈: OpenCode는 모델 자유를 주지만, 감각은 여전히 엄선된 디자인 컨텍스트에서 나옵니다. Open Design은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞물립니다 — 둘 다 오픈소스이고 로컬 우선입니다(아래에서 자세히).

디자인 작업을 위한 OpenCode 설정하기, 처음부터

깨끗한 머신에서 UI를 만들고 검증할 수 있는 OpenCode까지 가는 전체 경로는 다음과 같습니다.

# 1. Install OpenCode
curl -fsSL https://opencode.ai/install | bash
# or: npm i -g opencode-ai@latest
# or: brew install sst/tap/opencode

# 2. Start the TUI in your project, then authenticate your provider
opencode          # then run /login and pick your provider + paste your key

# 3. Generate project context
opencode          # inside your project, run /init to create AGENTS.md

# 4. Pick your model (any provider, via models.dev)
#    set "provider/model-id" in opencode.json or switch in the TUI

# 5. Add an MCP server (optional, e.g. for design handoff)
#    configure it under the "mcp" key in opencode.json

• 디자인 규칙을 담기: tokens, 기본 요소, 컨벤션을 AGENTS.md(또는 거기서 참조하는 DESIGN.md)에 담아 결과물이 평범한 모습으로 기본 회귀하지 않고 브랜드에 맞춰지도록 하세요. opencode.json의 instructions 옵션은 glob을 통해 추가 규칙 파일을 가리킬 수 있습니다.
• 유능한 모델 고르기: OpenCode는 모델에 구애받지 않으므로, 디자인 패스를 위해 현재 프런트엔드에 가장 강한 공급자/모델을 고르고 — 워크플로의 나머지는 그대로 두세요.

스크린샷-투-UI 워크플로

어떤 에이전트로든 얻는 가장 효과적인 디자인 루프는 레퍼런스 이미지를 동작하는 반응형 UI로 바꾸고 맞아떨어질 때까지 반복하는 것입니다. OpenCode에서도 같은 다섯 단계 형태가 적용됩니다.

1. 가지고 있는 가장 명확한 시각 레퍼런스에서 시작하세요 — 그리고 히어로 한 컷이 아니라 여러 상태(데스크톱과 모바일, hover, 빈 상태, 로딩)를 포함하세요.
2. 프롬프트에서 구체적으로 쓰세요. 모호한 프롬프트는 평범한 UI를 낳습니다.
3. 디자인 시스템을 준비하고, tokens와 정식 기본 요소가 어디에 있는지(AGENTS.md에) OpenCode에게 알려 주세요.
4. dev 서버를 실행하고 에이전트가 실제 브라우저에서 렌더링하며 브레이크포인트로 크기를 바꿔 결과를 확인하게 하세요.
5. OpenCode가 자신의 구현을 스크린샷과 다시 비교하게 하여 반복하세요 — 단지 빌드가 되는지만 확인하지 마세요.

TUI에서 @로 파일을 참조해 작업 디렉터리를 퍼지 검색하고, 앞에 !를 붙여 셸 명령을 인라인으로 실행하며, / 명령으로 동작을 구동하세요. 그런 다음 구체적인 제약과 함께 프롬프트하세요:

opencode
# in the TUI:
> @reference-desktop.png @reference-mobile.png
  Implement this design in React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens from AGENTS.md.
  Match spacing, layout, and hierarchy; make it responsive.
  Run the dev server, open it in a browser, and iterate until the
  UI matches the references across breakpoints.

프롬프트는 작고 집중되게 유지하고, 좋은 반복은 커밋하고 나쁜 반복은 되돌리세요(되돌릴 때 OpenCode에게 알려 주세요). 그래야 각 패스가 깨끗한 기반 위에서 쌓입니다.

AGENTS.md, MCP, 그리고 공유 가능한 세션

세 가지 확장 지점이 OpenCode를 지속적인 디자인 작업에 실용적으로 만들며, 셋 모두 개방형 디자인 워크플로에 깔끔하게 매핑됩니다.

• AGENTS.md 규칙: 프로젝트 규칙은 레포 루트의 AGENTS.md(또는 ~/.config/opencode/AGENTS.md의 전역 규칙)에 존재합니다. 매번 읽히는, 여러분의 디자인 컨벤션을 위한 견고한 거처이며, 다른 에이전트가 쓰는 CLAUDE.md 파일과 호환됩니다.
• MCP 서버: OpenCode는 로컬(command)과 원격(URL) MCP 서버를 모두 지원하며 mcp 키 아래에서 구성됩니다 — OpenCode뿐 아니라 여러 에이전트에서 작동하는 디자인 컨텍스트와 외부 도구를 끌어오는 이식 가능한 방법입니다.
• 공유 가능한 세션: /share 명령은 협업이나 리뷰를 위해 대화에 대한 공개 링크를 만들고, /unshare가 이를 취소합니다 — 디자인 패스에 대한 피드백을 받기에 유용합니다.

이것들은 이식 가능한 멀티 에이전트 역량입니다 — 바로 Open Design이 프로젝트마다 다시 만드는 대신 오케스트레이션하도록 설계된 종류의 것입니다.

디자인을 위한 OpenCode vs Codex vs Claude Code vs Cursor

디자인 작업에 단 하나의 승자는 없습니다 — 에이전트마다 강점이 다르고, 숙련된 팀은 이들을 함께 쌓아 씁니다. 공정한 요약은 다음과 같습니다:

커뮤니티에서 반복되는 결론은 감각이 사람에게서 나온다는 것입니다: 모두 skill, 레퍼런스, 제약이 없으면 평범한 미학으로 기본 회귀합니다. 그것이 풀어야 할 진짜 문제이며 — 모델 모양이 아니라 디자인 도구 모양의 문제입니다. 바로 그래서 OpenCode 같은 개방형 에이전트가 개방형 디자인 레이어와 그토록 잘 어울립니다.

함정, 그리고 “AI 티” 나는 결과물을 피하는 법

AI가 생성한 디자인에 대한 가장 흔한 불만은 평범해 보인다는 것입니다 — 부드러운 그라데이션, 떠 있는 패널, 과도하게 둥근 모서리, 극적인 그림자, “AI가 만들었다고 외치는” Inter-와-보라색 분위기. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃과 지시문이 UI 카피에 새어 나오는 것이 있습니다. 이 중 어느 것도 OpenCode만의 문제가 아닙니다. 모두 어떤 에이전트든 엄선된 디자인 컨텍스트 없이 실행될 때 일어나는 일입니다.

• 미학 skill 추가하기: 엄선된 디자인 skill은 에이전트가 기본 모습 대신 실제 방향에 전념하도록 강제합니다.
• 실제 브라우저에서 검증하기: 브레이크포인트 전반에 걸쳐 렌더링하고 스스로 점검하여 레이아웃이 모바일에서 조용히 깨지지 않도록 하세요.
• tokens와 레퍼런스 제공하기: 실제 디자인 tokens와 레퍼런스 스크린샷은 결과물 품질을 좌우하는 가장 큰 단일 지렛대입니다.
• AGENTS.md에 규칙 담기: “히어로 카드 금지, 서체 최대 두 종, 브랜드 우선 위계” 같은 스타일 규칙을 에이전트가 매번 읽는 곳에 두세요.

모든 완화책이 — 어떤 모델을 실행하든 무관하게 — 에이전트에게 엄선된 디자인 컨텍스트를 주는 것임에 주목하세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 수고가 바로 Open Design이 없애는 것입니다.

Open Design 안에서 OpenCode로 디자인하기

Open Design은 위 워크플로가 계속 요구하던 그 오픈소스 디자인 레이어입니다. OpenCode를 일급 어댑터로 취급하고 엄선된 skill 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감싸 줍니다 — 그래서 어떤 에이전트든 좋게 만드는 디자인 컨텍스트가 매번 손으로 조립하는 대신 첫 실행부터 갖춰져 있습니다. 두 프로젝트 모두 오픈소스이고 로컬 우선이라, 이 짝은 자연스럽게 잘 맞습니다.

1. Open Design을 설치하고 에이전트로 OpenCode를 선택하세요.
2. 자신의 모델 공급자 API 키(BYOK)로 인증하세요 — 자격 증명은 여러분의 머신에 머물며 결코 저희를 거쳐 프록시되지 않습니다.
3. 어떤 공급자와 모델이든 고르고, 디자인 시스템과 skill을 더한 다음, 일관된 감각으로 덱, 프로토타입, 랜딩 페이지를 생성하세요.
4. 모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 여러분 자신의 레포에 존재합니다.

같은 OpenCode 에이전트, 같은 모델 자유 — 그 위에 실제로 이식 가능한 오픈소스 디자인 워크플로가 더해집니다. 로컬 우선이며 Apache-2.0이라, 여러분의 작업이나 자격 증명 중 어떤 것도 머신을 떠나지 않습니다.

자주 묻는 질문

1. 01 OpenCode가 정말 디자인 작업을 할 수 있나요? +

   네 — 미학 skill, 디자인 시스템, 그리고 실제 레퍼런스 이미지가 컨텍스트에 있으면 OpenCode는 양산 품질의 반응형 UI를 만들고 브라우저에서 검증할 수 있습니다. 모델에 구애받지 않으므로, 현재 프런트엔드에 가장 좋은 모델을 실행할 수 있습니다. 그런 엄선된 컨텍스트가 없으면 평범한 모습으로 기본 회귀하는 경향이 있는데, 그것이 바로 Open Design이 메우는 격차입니다.

2. 02 디자인에는 OpenCode와 어떤 모델을 써야 하나요? +

   원하는 어떤 것이든 — OpenCode는 models.dev를 통해 공급자에 구애받지 않으므로, 같은 워크플로 뒤에서 Anthropic, OpenAI, Google, OpenRouter, 또는 로컬 모델을 실행하고 언제든 전환할 수 있습니다. 디자인 결과물의 품질은 모델 자체보다 여러분의 skill, 디자인 시스템, 레퍼런스에 훨씬 더 좌우됩니다.

3. 03 Open Design은 OpenCode(SST) 팀이 만들었나요? +

   아니요. Open Design은 OpenCode를 에이전트로 통합하는 독립적인 오픈소스 프로젝트입니다. 로컬 우선의 개방적인 skill 및 디자인 시스템 라이브러리로 OpenCode를 보완합니다.

4. 04 OpenCode로 디자인하려면 특별한 구독이 필요한가요? +

   아니요 — OpenCode는 BYOK입니다. 자신의 모델 공급자 API 키를 가져오고, Open Design은 결코 여러분의 자격 증명을 프록시하지 않습니다. 공급사 종속이 없습니다.

5. 05 프런트엔드 디자인에는 OpenCode인가요, Codex인가요, Claude Code인가요? +

   모두 강력하며, 많은 팀이 이들을 함께 쌓아 씁니다. OpenCode의 강점은 완전히 오픈소스이고 모델에 구애받지 않는다는 점이며, Codex는 위임된 샌드박스 빌드에 뛰어나고, Claude Code는 구체적이고 코드베이스를 이해하는 디자인 결정으로 알려져 있습니다. Open Design을 쓰면 디자인 워크플로를 바꾸지 않고 에이전트를 전환할 수 있습니다.

6. 06 디자인 컨텍스트를 위해 OpenCode를 어떻게 확장하나요? +

   규칙을 AGENTS.md에 담고, 이식 가능한 도구와 디자인 컨텍스트를 위해 mcp 키 아래에 MCP 서버를 추가하며, 리뷰를 위해 공유 가능한 세션을 사용하세요. Open Design은 엄선된 skill 및 디자인 시스템 라이브러리를 제공하여 프로젝트마다 하는 설정을 건너뛰게 해 줍니다.

7. 07 Open Design은 OpenCode 또는 SST와 제휴되어 있나요? +

   아니요. OpenCode는 SST(Anomaly Innovations)가 유지보수하는 오픈소스 프로젝트이며, Open Design은 이를 일급 어댑터로 지원하는 독립적인 오픈소스 프로젝트입니다.

8. 08 제 파일과 자격 증명은 안전한가요? +

   네 — Open Design은 로컬 우선입니다. 여러분의 파일, 산출물, DESIGN.md는 여러분 자신의 레포에 머물고, 모델 공급자 자격 증명은 에이전트가 직접 사용하며 결코 Open Design 서버를 거치지 않습니다.