102.7K+다운로드
OpenCode OpenDesign

OpenDesign에서
OpenCode(으)로
디자인하기.

OpenDesign에서 OpenCode로 인터페이스를 디자인하는 방법: 무엇이든 생성되기 전에 바인딩되는 design.md, 선택하는 공급자, 브리프부터 검토된 파일까지 이어지는 하나의 shared-inbox 작업, 그리고 시작 전에 알아야 할 제한 사항.

OpenDesign 다운로드 설정으로 이동

이 OpenCode 가이드의 세 가지 진입점

OpenCode를 어디서부터 시작하시겠습니까?

이 가이드 · UI 디자인

OpenCode를 사용해 제품 인터페이스 제작

이 경로는 브리프, 참고 자료, 디자인 규칙, 그리고 검토된 HTML 아티팩트를 다룹니다.

이 가이드 읽기 설정

처음부터 OpenCode 설정하기

새 컴퓨터에서 시작해 UI를 빌드하고 검증하는 OpenCode 설정까지 전체 경로를 따릅니다.

설정으로 이동 비교

OpenCode를 다른 에이전트와 비교하기

OpenCode가 디자인 작업에서 Codex, Claude Code, Cursor와 어떻게 차별화되는지, 그리고 다른 워크플로가 더 나은 선택일 때를 다룹니다.

비교 보기
이 페이지에서 예시
  1. 예시
  2. 적합성
  3. 호환성
  4. 설정
  5. 워크플로
  6. 참고 자료
  7. 한계
  8. FAQ

하나의 완전한 OpenCode 디자인 작업

OpenCode 디자인 작업: 브리프에서 인터페이스까지

하나의 디자인 작업을 전체 루프에 걸쳐 추적합니다: 여러분이 전달하는 브리프와 제약 조건, 여러분에게 반환되는 아티팩트, 그리고 완료라고 부르기 전에 남아 있는 검사 항목입니다. 아래 인터페이스는 이 페이지를 위해 만든 예시이며, 실제 OpenCode 실행 기록이 아닙니다.

1디자인 브리프와 제약 조건

브리프

공유 팀 받은편지함을 디자인하세요: 담당자가 있는 대화 목록, 스레드 뷰, 고객 컨텍스트를 위한 오른쪽 레일이 포함됩니다. 생성 전에 design.md 시스템을 바인딩하세요. 데스크톱과 휴대폰을 모두 커버하세요.

  • 디자인 시스템design.md 토큰; Albert Sans, 그린 액센트 1종
  • 브레이크포인트1440px 데스크톱 및 390px 모바일; 가로 스크롤 없음
  • 인터랙션담당자 필터, 스레드 전환, 컨텍스트 레일 토글, 답장 액션
  • 출력물안정적인 data-od-id 훅이 포함된 단일 독립형 HTML 파일

2누가 무엇을 하는가: 여러분, OpenCode, 그리고 OpenDesign

  • 사용자

    여러분은 브리프를 작성하고, 디자인 시스템을 선택하며, 승인 기준을 설정합니다.

  • OpenCode

    OpenCode는 레이아웃을 계획하고 HTML, CSS, JavaScript를 작성한 뒤, 요청하면 수정합니다.

  • OpenDesign

    OpenDesign은 디자인 시스템과 스킬을 제공하고, 미리보기를 렌더링하며, 모든 버전을 프로젝트 내 파일로 보관합니다.

  • 검토

    핸드오프 전에 시각적 위계, 8px 그리드 간격, 두 브레이크포인트, 모든 인터랙션을 확인하세요.

3OpenCode 아티팩트: 1440px 및 390px의 팀 받은편지함

OpenCode 아티팩트: 1440px 및 390px의 팀 받은편지함 — 데스크톱
예시

4인수인계 전 검토

레이아웃

그리드와 여백

세 개의 창이 8px 그리드에 맞춰 정렬됩니다; 컨텍스트 레일은 스레드보다 먼저 접힙니다.

계층 구조

시각적 계층 구조

담당자와 제목이 앞서고; 강조 색은 “우리를 기다리는 중.”에만 사용됩니다.

반응형

모바일 레이아웃

목록이 먼저, 탭하면 스레드; 컨텍스트 레일은 시트로 바뀝니다.

인터랙션

인터랙션 점검

담당자별 필터, 스레드 열기, 레일 토글, 답장 보내기.

적합성

OpenCode가 맞는 곳—그리고 맞지 않는 곳

OpenCode가 적합한 경우

  • design.md 시스템. 브랜드 DESIGN.md(Stripe/Linear/Airbnb 스타일 규칙)을 프로젝트에 넣으면 OpenCode가 그에 맞는 UI를 생성합니다.
  • UI/UX 스킬. 디자인 인텔리전스 스킬은 수십 가지 UI 스타일과 팔레트를 제공하며, 코딩이 시작되기 전에 디자인 시스템을 생성합니다.
  • Figma & 비주얼 캔버스 MCP. MCP를 통해 Figma 또는 비주얼 캔버스를 연결하면 디자인-투-코드 루프를 얻을 수 있습니다.
  • 모델 취향. OpenCode는 BYOK이므로, 여러분의 취향과 예산에 가장 잘 맞는 디자인 모델을 선택할 수 있습니다.

다른 워크플로를 선택해야 하는 경우

  • 편집 가능한 벡터 파일이 필요합니다. 아티팩트는 HTML이며, 편집 가능한 디자인 문서가 아닙니다. 필요한 에셋 형식에 대해서는 별도의 벡터 워크플로를 참조하세요.
  • 참고 자료도 제약 조건도 없습니다. 디자인 시스템이나 예시가 없으면 결과물이 일반적인 모습으로 흐르기 쉬우니, 먼저 브리프를 작성하세요.
  • 이 에이전트에 필요한 자격 증명이 없습니다. 필요 사항: OpenCode 설정을 통한 공급자 키(직접 준비, BYOK). OpenDesign은 자격 증명을 제공하거나 대리하지 않습니다.
  • 팀이 Claude Code 또는 Aider에서 작업합니다. 해당 에이전트에는 자체 페이지가 있습니다; 워크스페이스는 동일하지만 설정은 다릅니다. 관련 에이전트를 참조하세요.

호환성

시작 전 OpenCode 요구 사항

이 페이지는 OpenDesign 데스크톱 앱을 통해 연결된 OpenCode를 다룹니다. 게시된 참고 자료는 2026년 9월 6일에 확인되었습니다.

도구 범위OpenCode, by Anomaly

OpenCode는 오픈소스(MIT) 터미널 AI 코딩 에이전트로 — TUI와 데스크톱 및 IDE 표면을 갖추고 있으며 — Anomaly(SST 팀)가 github.com/anomalyco/opencode에서 유지관리합니다. 이 페이지는 OpenDesign을 통해 OpenCode로 인터페이스를 디자인하는 것에 관한 것이지, OpenCode 자체 인터페이스에 관한 것이 아닙니다. OpenDesign의 설정 노트에 사용 가능한 에이전트가 나열되어 있습니다.

계정 및 인증OpenCode 구성(BYOK)을 통한 제공자 키

OpenCode 구성(BYOK)을 통한 제공자 키. OpenCode는 자체 구성(BYOK)을 통해 여러분의 제공자 키를 사용합니다 — 프록시되는 것은 없습니다. 이 페이지는 할당량이나 가격을 약속하지 않습니다.

시스템 및 버전데스크톱 앱 또는 소스

데스크톱 빌드는 다운로드 페이지를 참조하세요. 소스 퀵스타트의 Node.js 및 pnpm 요구사항은 소스에서 실행할 때 적용되며, 데스크톱 패키지를 설치할 때는 적용되지 않습니다. 최소 호환 OpenCode 버전: 여기서 확인되지 않았습니다.

연결 확인성공 신호

설치된 버전에 표시된 연결 지침을 사용한 다음, 작은 작업을 실행하세요. OpenCode가 이를 처리했는지와 아티팩트가 열리는지 확인하세요. 다운로드 자체만으로는 작동하는 연결이 확립되지 않습니다.

데스크톱 앱으로 시작하기

세 단계로 완료하는 OpenCode 설정

다운로드로 시작해, 설치한 버전에 대한 OpenCode 설정을 완료한 다음, 작은 결과를 확인하세요. 이 경로를 따르는 데 OpenDesign을 소스에서 빌드할 필요는 없습니다.

  1. 1

    OpenDesign 데스크톱 앱 다운로드

    컴퓨터에 맞는 패키지를 선택해 설치하고 앱을 여세요.

    OpenDesign 다운로드
    체크포인트
    데스크톱 앱이 열립니다. 이미 설치되어 있다면 다음 단계로 이동하세요; 다시 다운로드할 필요가 없습니다.
  2. 2

    OpenCode 연결 준비

    설치된 버전에 포함된 OpenCode 지침을 따르세요. OpenCode는 자체 구성(BYOK)을 통해 여러분의 제공자 키를 사용합니다 — 프록시되는 것은 없습니다.

    # 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

    게시된 가이드의 OpenCode 설정 노트에서 발췌; 현재 명령은 벤더 문서를 확인하세요.

    체크포인트
    의도한 에이전트와 계정을 확인하세요. 사용할 수 없다면 더 큰 작업을 시도하기 전에 호환성을 확인하세요.
  3. 3

    작은 OpenCode 작업 하나 실행하기

    브리프를 적당히 유지해 한 차례의 수정을 포함한 전체 루프를 판단할 수 있도록 하세요.

    시작 브리프

    프로필 양식과 저장 확인이 있는 설정 화면을 만드세요. 내 디자인 규칙을 따르세요. 데스크톱 및 모바일 너비에서 확인하세요.

    체크포인트
    결과물을 열고, 저장 상태를 테스트하고, 구체적인 변경 하나를 요청하세요. 생성은 검토를 시작할 뿐, 끝내지 않습니다.

OpenDesign을 소스에서 실행하려면 대신 기술 퀵스타트를 사용하세요.

OpenCode 디자인 워크플로

다섯 단계의 OpenCode 디자인 패스

하나의 공유 받은편지함 예시가 작성된 브리프부터 검사된 HTML까지 이어집니다. 모든 단계에서: 여러분의 입력, OpenCode의 행동, OpenDesign의 기여, 그리고 아직 해야 할 검토입니다.

  1. 1

    디자인 브리프

    간단하고 짧게 유지하세요: 3~6줄. 누가 화면을 사용하는지, 어떤 작업을 수행하는지, 어떤 플랫폼에 맞춰야 하는지 명시하세요.

    • 사용자브리프를 작성하고 참고 스크린샷이 있으면 첨부하세요.
    • OpenCodeOpenCode는 브리프와 프로젝트의 AGENTS.md를 읽고, 세부 사항이 모호하면 질문합니다.
    • OpenDesignOpenDesign은 프로젝트, 터미널 프롬프트 표면, 아티팩트 유형에 맞는 스킬을 제공합니다.
    • 확인브리프에 승인 기준이 명시되어 있는지 확인하세요. 생성 전에 확정하는 것이 나중에 수정하는 것보다 비용이 적습니다.
  2. 2

    디자인 제약 조건

    디자인 시스템과 짧은 하드 규칙 목록. 이 조합은 OpenCode가 일반적인 모습으로 되돌아가지 않게 합니다.

    • 사용자디자인 시스템을 선택한 다음, 반드시 나타나야 하는 브레이크포인트와 컴포넌트를 명시하세요.
    • OpenCodeOpenCode는 마크업을 작성하기 전에 DESIGN.md 토큰과 포스처 규칙을 로드합니다.
    • OpenDesignOpenDesign은 디자인 시스템 라이브러리를 제공하고, 여러분의 선택을 스킬 템플릿에 바인딩합니다.
    • 확인토큰을 브랜드와 대조하세요: 하나의 강조 색, 의도한 글꼴, 올바른 반경.
  3. 3

    인터페이스 생성

    OpenCode는 하나의 자체 포함 HTML 파일을 작성합니다: 레이아웃, 스타일, 인터랙션, 안정적인 훅.

    • 사용자기다리거나, 명확히 하는 질문에 답하세요. 이 시점에서는 구성할 것이 없습니다.
    • OpenCode섹션을 계획하고 HTML, CSS, JavaScript를 작성한 뒤, 파일을 실행하고 실패한 부분을 수정합니다.
    • OpenDesignOpenDesign은 아티팩트를 프로젝트 폴더에 저장하고 미리보기를 위해 인덱싱합니다.
    • 확인아직 아닙니다. 소스 마크업이 아니라 렌더링된 파일을 판단하세요.
  4. 4

    미리보기

    OpenDesign는 지정한 너비에서 파일을 미리 보여 줍니다. 디자인이 평가되는 지점입니다.

    • You너비를 바꾸고, 인터랙션을 직접 사용해 보고, 요소에 댓글을 남깁니다.
    • OpenCodeOpenCode가 미리보기 댓글을 읽고 다음 수정본을 준비합니다.
    • OpenDesignOpenDesign는 미리보기를 렌더링하고 댓글과 편집을 위해 data-od-id 대상 요소를 노출합니다.
    • Check계층 구조, 대비, 390px에서의 오버플로, 포커스 상태, 그리고 액센트가 절제되어 있는지 확인합니다.
  5. 5

    수정 및 검증

    미리보기 요소를 가리켜 변경을 요청합니다. 각 수정본은 새 파일로 생성되며, 확인하지 않은 채 덮어써지는 것은 없습니다.

    • You댓글을 요청으로 바꾸고 작업이 언제 끝났는지 결정합니다.
    • OpenCodeOpenCode가 변경 사항을 적용하고 파일을 다시 실행합니다.
    • OpenDesignOpenDesign는 버전을 나란히 유지하며, 완료되면 이미지나 HTML로 내보냅니다.
    • Check변경된 영역을 먼저 검토한 다음, 각 브레이크포인트에서 전체 페이지를 한 번씩 검토합니다.

리소스

OpenCode 디자인 리소스

더 읽어보기

OpenCode 관련 추가 자료

공개된 가이드에 나열된 대로, OpenCode 디자인 작업을 위한 튜토리얼, 문서, 워크스루.

스킬

디자인 스킬

OpenCode가 OpenDesign 안에서 만들 수 있는 아티팩트 유형과, 유형별 스킬 하나씩.

스킬 둘러보기 디자인 시스템

디자인 시스템

OpenCode가 출력을 생성하기 전에 바인딩해야 할 브랜드 토큰과 컴포넌트.

시스템 둘러보기 템플릿

템플릿

덱, 랜딩 페이지, 제품 화면을 위한 시작점입니다.

템플릿 둘러보기

제한 사항

OpenCode의 한계, 수동 확인, 대체 방안

  • 범위OpenCode는 설계 전용 도구가 아니라 코딩 에이전트입니다. 스킬, DESIGN.md 시스템 파일, Figma/visual-canvas MCP를 추가하여 시각적 출력을 형성합니다. 이 페이지는 OpenCode를 OpenDesign에 연결된 에이전트로 다루며, OpenCode의 모든 기능을 전면 조사한 내용은 아닙니다.
  • 사용 한도사용 한도와 비용은 직접 준비한 자격 증명(OpenCode 설정을 통한 제공자 키)을 따릅니다. 이 페이지는 무료 할당량에 대해 어떠한 주장도 하지 않습니다.
  • 네트워크로컬 프로젝트 파일이 오프라인 추론을 보장하지는 않습니다. 민감한 입력을 공유하기 전에 에이전트의 제공자 설정과 데이터 정책을 확인하세요.
  • 출력물은 HTML입니다아티팩트는 벡터 디자인 파일이 아니라 HTML 파일로 나옵니다.
  • 수동 검토미리보기에서 접근성, 실제 콘텐츠, 브랜드 적합성, 인터랙션 정확성을 검토합니다. 에이전트의 자체 확인은 1차 점검으로만 간주하세요.
  • 대체 방법에이전트를 사용할 수 없거나 작업이 실패하면 설치한 버전의 연결 지침과 인증을 확인하세요. 구성을 변경하기 전에 오류와 마지막으로 정상 동작한 아티팩트를 보관하세요.

자주 묻는 질문

OpenCode와 OpenDesign에 대한 자주 묻는 질문

OpenCode가 실제로 디자인 작업을 처리할 수 있을까?
가능합니다 — 심미적 skill, 디자인 시스템, 그리고 실제 참조 이미지를 컨텍스트에 포함하면 OpenCode는 프로덕션 품질의 반응형 UI를 생성하고 브라우저에서 이를 검증할 수 있습니다. 모델에 구애받지 않으므로 현재 프런트엔드에 가장 뛰어난 모델을 자유롭게 사용할 수 있습니다. 이러한 정제된 컨텍스트가 없으면 일반적인 스타일로 흐르는 경향이 있는데, 이것이 바로 OpenDesign이 채우는 공백입니다.
디자인 작업에 OpenCode와 함께 어떤 모델을 사용해야 하나요?
원하는 모델을 자유롭게 선택할 수 있습니다 — OpenCode는 models.dev를 통해 provider에 구애받지 않으므로, Anthropic, OpenAI, Google, OpenRouter 또는 로컬 모델을 동일한 워크플로우 안에서 실행하고 언제든지 전환할 수 있습니다. 디자인 결과물의 품질은 모델 자체보다 skill, 디자인 시스템, 참조 자료에 훨씬 더 크게 좌우됩니다.
OpenDesign은 OpenCode(SST) 팀이 만든 것인가요?
아닙니다. OpenDesign은 OpenCode를 에이전트로 통합하는 독립적인 오픈소스 프로젝트입니다. 로컬 우선의 개방형 skill 및 디자인 시스템 라이브러리로 OpenCode를 보완합니다.
OpenCode로 디자인하려면 특별한 구독이 필요한가요?
아닙니다 — OpenCode는 BYOK 방식입니다. 직접 모델 provider의 API 키를 준비하며, OpenDesign은 자격 증명을 대리로 처리하지 않습니다. 특정 vendor에 종속되지 않습니다.
프런트엔드 디자인에는 OpenCode, Codex, Claude Code 중 무엇이 좋을까요?
모두 강력하며, 많은 팀이 이를 함께 조합해 사용합니다. OpenCode의 강점은 완전한 오픈소스이면서 모델에 구애받지 않는다는 점이고, Codex는 위임된 샌드박스 빌드에 뛰어나며, Claude Code는 코드베이스를 이해한 구체적인 디자인 결정으로 알려져 있습니다. OpenDesign을 사용하면 디자인 워크플로우를 바꾸지 않고도 에이전트를 전환할 수 있습니다.
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를 만들어냅니다. 좋은 디자인 결과물은 사용자가 제공하는 세 가지 입력에서 나옵니다.

디자인 시스템: 에이전트가 재사용하는 실제 토큰, 프리미티브, 컨벤션. 덕분에 결과물이 기본값 같은 모양으로 수렴하지 않고 브랜드에 맞습니다.

미적 스킬: 실제 취향을 강제하는 큐레이션된 스킬 — 절제된 모션, 브랜드 우선의 위계, 최대 두 개의 서체와 한 개의 악센트 컬러 — 이며, 에이전트가 만들기 전에 방향을 확정하도록 만듭니다.

구체적인 레퍼런스: 히어로 샷 하나가 아니라 실제 레퍼런스 이미지와 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩).

취향은 사용자가 제공하는 세 가지 입력 — 디자인 시스템, 스킬, 실제 레퍼런스 이미지 — 에서 나오며, 어떤 모델을 돌리든 무관합니다.

교훈: OpenCode는 모델의 자유를 주지만, 취향은 여전히 큐레이션된 디자인 컨텍스트에서 나옵니다. OpenDesign은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞습니다 — 둘 다 오픈소스이고 로컬 우선입니다(아래에서 더 설명).
처음부터 디자인을 위한 OpenCode 설정하기
설정 순서: 설치 → 인증(제공자 키) → AGENTS.md 구성 → 스킬 추가 → 실제 브라우저에서 검증.

디자인 규칙 담기: 토큰, 프리미티브, 컨벤션을 AGENTS.md(또는 거기서 참조하는 DESIGN.md)에 넣으면 결과물이 기본값 같은 모양으로 수렴하지 않고 브랜드에 맞습니다. opencode.json의 instructions 옵션은 glob으로 추가 규칙 파일을 가리킬 수 있습니다.

역량 있는 모델 선택: OpenCode는 모델 비종속적이므로, 디자인 패스에는 현재 프런트엔드에서 가장 강한 제공자/모델을 고르고 나머지 워크플로는 그대로 두면 됩니다.

명령과 버전별 세부 사항은 현재 설정 섹션을 참고하세요. 이는 바뀔 수 있습니다.

# 1. OpenCode 설치 curl -fsSL https://opencode.ai/install | bash # 또는: npm i -g opencode-ai@latest # 또는: brew install sst/tap/opencode # 2. 프로젝트에서 TUI를 시작한 뒤 제공자 인증 opencode # 그런 다음 /login을 실행해 제공자를 고르고 키를 붙여넣습니다 # 3. 프로젝트 컨텍스트 생성 opencode # 프로젝트 안에서 /init을 실행해 AGENTS.md를 만듭니다 # 4. 모델 선택 (models.dev를 통해 어떤 제공자든) # opencode.json에 "provider/model-id"를 설정하거나 TUI에서 전환 # 5. MCP 서버 추가 (선택 사항, 예: 디자인 핸드오프용) # opencode.json의 "mcp" 키 아래에서 구성
이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 벤더 문서에서 확인하세요.
OpenCode에서 스크린샷을 UI로 만드는 워크플로
어떤 에이전트든 레버리지가 가장 큰 디자인 루프는 레퍼런스 이미지를 작동하는 반응형 UI로 바꾸고 일치할 때까지 반복하는 것입니다. 동일한 5단계 구조가 OpenCode에도 그대로 적용됩니다.

가장 명확한 시각적 레퍼런스에서 시작하세요. 그리고 히어로 샷 하나만이 아니라 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩)를 포함하세요.

프롬프트를 구체적으로 작성하세요. 모호한 프롬프트는 일반적인 UI를 만들어냅니다.

디자인 시스템을 준비하고 토큰과 표준 프리미티브가 어디에 있는지(AGENTS.md에) OpenCode에 알려주세요.

개발 서버를 실행하고 에이전트가 실제 브라우저에 렌더링하게 하세요. 브레이크포인트에 맞춰 크기를 바꿔가며 결과를 확인하세요.

OpenCode가 자신의 구현을 스크린샷과 비교하게 하여 반복하세요 — 단순히 빌드가 되는지 확인하는 데서 그치지 마세요.

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

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

opencode # 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.
이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 벤더 문서에서 확인하세요.
AGENTS.md, MCP, 그리고 공유 가능한 세션
세 가지 확장 지점이 OpenCode를 지속적인 디자인 작업에 실용적으로 만들며, 세 가지 모두 개방형 디자인 워크플로에 깔끔하게 대응합니다.

AGENTS.md 규칙: 프로젝트 규칙은 저장소 루트의 AGENTS.md(또는 ~/.config/opencode/AGENTS.md의 전역 규칙)에 있습니다. 디자인 컨벤션을 담는 지속적인 공간이며 매 실행마다 읽히고, 다른 에이전트가 사용하는 CLAUDE.md 파일과도 호환됩니다.

MCP 서버: OpenCode는 로컬(명령)과 원격(URL) MCP 서버를 모두 지원하며 mcp 키 아래에서 구성합니다 — OpenCode만이 아니라 여러 에이전트에서 작동하는 디자인 컨텍스트와 외부 도구를 끌어오는 이식성 있는 방법입니다.

공유 가능한 세션: /share 명령은 협업이나 리뷰를 위해 대화의 공개 링크를 만들고, /unshare는 이를 취소합니다 — 디자인 패스에 피드백을 받을 때 유용합니다.

이들은 이식성 있고 멀티 에이전트적인 기능입니다 — 프로젝트마다 새로 만드는 대신 OpenDesign이 오케스트레이션하도록 설계된 바로 그런 것입니다.
디자인을 위한 OpenCode vs Codex vs Claude Code vs Cursor
디자인 작업에는 단일한 승자가 없습니다 — 각 에이전트의 강점이 다르고, 숙련된 팀은 이들을 조합합니다. 공정한 요약:

OpenCode — 오픈소스이며 모델 비종속적. 하나의 터미널 워크플로 뒤에서 어떤 제공자든 실행 — BYOK의 자유, 모델 전환, 완전히 개방적이고 로컬 우선인 구성

Codex — 프런트엔드 스킬을 통한 강력한 시각적 완성도; 이미지 이해 — 위임된 비동기, 샌드박스 빌드, 이식성 있는 AGENTS.md 규칙

Claude Code — 구체적인 디자인 결정(hex, 간격, 타이포)과 코드베이스 인지 UX — 프런트엔드 추론과 대규모 컨텍스트 리팩터링

Cursor — 라이브 프리뷰와 인라인 편집을 통한 시각적 빌드 앤 시 루프 — IDE 안에서의 밀착된 반복·관찰 UI 작업

커뮤니티에서 되풀이되는 결론은 취향은 사람에게서 온다는 것입니다. 스킬과 레퍼런스, 제약이 없으면 이들 모두 일반적인 미학으로 수렴합니다. 그것이 진짜 해결해야 할 문제이며, 모델 모양이 아니라 디자인 도구 모양의 문제입니다. 그래서 OpenCode 같은 개방형 에이전트가 개방형 디자인 레이어와 잘 어울립니다.

에이전트 — 디자인 강점 — 최적 용도
함정과 “AI Slop” 같은 느낌 피하기
AI가 생성한 디자인에 대한 가장 흔한 불만은 그것이 일반적으로 보인다는 것입니다 — 부드러운 그라디언트, 떠 있는 패널, 지나치게 큰 둥근 모서리, 극적인 그림자, 그리고 “AI가 만든 티가 확 나는” Inter와 보라색 분위기. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃, 지침이 UI 문구로 새어 나오는 것 등이 있습니다. 이 중 어느 것도 OpenCode만의 문제가 아닙니다. 큐레이션된 디자인 컨텍스트 없이 어떤 에이전트를 돌릴 때 벌어지는 일일 뿐입니다.

미적 스킬 추가: 큐레이션된 디자인 스킬은 기본 모양 대신 실제 방향을 확정하도록 에이전트를 강제합니다.

실제 브라우저에서 검증: 브레이크포인트 전반에서 렌더링하고 스스로 점검하여 모바일에서 레이아웃이 조용히 깨지지 않게 하세요.

토큰과 레퍼런스 제공: 실제 디자인 토큰과 레퍼런스 스크린샷은 결과물 품질에 가장 큰 영향을 주는 지렛대입니다.

AGENTS.md에 규칙 담기: “히어로 카드 금지, 서체 최대 두 개, 브랜드 우선 위계” 같은 규칙을 에이전트가 매 실행마다 읽는 위치에 넣으세요.

모든 완화책이 어떤 모델을 돌리든 에이전트에 큐레이션된 디자인 컨텍스트를 주는 일에 관한 것임을 눈여겨보세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 것이 OpenDesign이 없애는 수고입니다.
OpenDesign 안에서 OpenCode로 디자인하기
OpenDesign은 위 워크플로가 계속 요구해 온 오픈소스 디자인 레이어입니다. OpenCode를 일급 어댑터로 취급하고, 큐레이션된 스킬과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다 — 그래서 어떤 에이전트든 좋게 만드는 디자인 컨텍스트가 첫 실행부터 존재하고, 매번 손으로 조립하지 않아도 됩니다. 두 프로젝트 모두 오픈소스이고 로컬 우선이라 짝이 자연스럽습니다.

본인의 모델 제공자 API 키(BYOK)로 인증하세요 — 자격 증명은 사용자 머신에 남고 우리를 거쳐 프록시되지 않습니다.

어떤 제공자와 모델이든 고르고, 디자인 시스템과 스킬을 선택한 뒤 일관된 취향으로 덱, 프로토타입, 랜딩 페이지를 생성하세요.

모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 사용자의 저장소에 있습니다.

같은 OpenCode 에이전트, 같은 모델의 자유 — 거기에 실제적이고 이식성 있으며 오픈소스인 디자인 워크플로가 더해집니다. 로컬 우선이고 Apache-2.0이므로 작업물이나 자격 증명 중 어느 것도 사용자 머신을 떠나지 않습니다.

OpenDesign을 설치하고 에이전트로 OpenCode를 선택하세요.
이 OpenCode는 어떤 것인가?
github.com/anomalyco/opencode(이전 sst/opencode)에 있는 오픈소스 터미널 에이전트이며, Anomaly가 유지 관리합니다. 비슷한 이름의 도구와 혼동하지 마세요.
OpenDesign은 OpenCode와 같은 프로젝트인가?
아니요. 둘 다 오픈소스지만 서로 다른 프로젝트입니다. OpenDesign은 OpenCode를 일급 에이전트 어댑터로 통합합니다.