OpenCode 
OpenDesign OpenDesign에서 OpenCode로 인터페이스를 디자인하는 방법: 무엇이든 생성되기 전에 바인딩되는 design.md, 선택하는 공급자, 브리프부터 검토된 파일까지 이어지는 하나의 shared-inbox 작업, 그리고 시작 전에 알아야 할 제한 사항.
“기본값이 아니라
design.md를 기반으로 만든 공유 수신함.”
이 OpenCode 가이드로 들어가는 세 가지 방법
하나의 완전한 OpenCode 디자인 작업
하나의 작업을 처음부터 끝까지 보여줍니다: 전달하는 브리프와 제약 조건, 돌아오는 산출물, 그리고 완료되기 전에 여전히 실행하는 검사입니다. 아래 인터페이스는 이 페이지를 위해 제작된 예시이며, 실제로 기록된 OpenCode 실행 결과가 아닙니다.
브리프공유 팀 인박스를 디자인합니다: 담당자가 표시된 대화 목록, 스레드 뷰, 고객 컨텍스트를 담은 우측 레일로 구성합니다. 생성 전에 design.md 시스템을 바인딩합니다. 데스크톱과 폰.
data-od-id 훅이 포함된 단일 독립형 HTML 파일브리프를 작성하고, 디자인 시스템을 선택하고, 승인 기준을 정의합니다.
레이아웃을 계획하고 HTML, CSS, JavaScript를 작성하며 요청에 따라 수정합니다.
디자인 시스템과 스킬을 제공하고, 프리뷰를 렌더링하며, 모든 버전을 프로젝트 내 파일로 저장합니다.
시각적 계층 구조, 8px 그리드에 따른 여백, 두 브레이크포인트, 모든 인터랙션을 인수 전에 확인합니다.
8px 그리드 위의 3단 패널; 컨텍스트 레일이 스레드보다 먼저 접힙니다.
담당자와 제목을 먼저 배치하며, 액센트는 “우리 쪽 대응 대기” 상태만 표시합니다.
목록을 먼저 보여주고, 탭하면 스레드로 전환합니다; 컨텍스트 레일은 시트로 바뀝니다.
담당자로 필터링하고, 스레드를 열고, 레일을 토글하고, 답장을 보냅니다.
적합성
호환성
이 가이드는 OpenDesign 데스크톱 앱을 통해 연결된 OpenCode를 다룹니다. 게시된 참고 자료는 2026년 9월 6일 기준으로 확인했습니다.
OpenCode는 오픈소스(MIT) 터미널 AI 코딩 에이전트로, TUI에 데스크톱 및 IDE 화면을 더한 형태이며 Anomaly(SST 팀)가 github.com/anomalyco/opencode에서 유지 관리합니다. 이 페이지는 OpenCode 자체의 인터페이스가 아니라 OpenDesign을 통해 OpenCode로 인터페이스를 디자인하는 방법을 다룹니다. OpenDesign의 설정 안내에서 사용 가능한 에이전트 목록을 확인할 수 있습니다.
OpenCode config를 통한 공급자 키(BYOK). OpenCode는 자체 config를 통해 사용자의 공급자 키를 사용합니다(BYOK) — 아무것도 대리하지 않습니다. 이 페이지는 할당량이나 가격을 보장하지 않습니다.
데스크톱 빌드는 다운로드 페이지를 확인하십시오. 소스 빠른 시작에 명시된 Node.js 및 pnpm 요구 사항은 소스에서 실행하는 경우에 적용되며, 데스크톱 패키지 설치에는 적용되지 않습니다. 호환되는 최소 OpenCode 버전은 여기서 확인되지 않았습니다.
설치한 버전에 표시된 연결 안내를 따른 다음 작은 작업을 실행하십시오. OpenCode가 이를 처리했는지, 그리고 산출물이 열리는지 확인하십시오. 다운로드만으로는 작동하는 연결이 성립되지 않습니다.
데스크톱 앱으로 시작하기
먼저 다운로드하고, 설치한 버전에 맞게 OpenCode 설정을 완료한 다음 작은 결과를 확인하십시오. 이 경로를 따르기 위해 OpenDesign을 소스에서 빌드할 필요는 없습니다.
사용 중인 컴퓨터에 맞는 패키지를 선택하여 설치하고 앱을 여십시오.
OpenDesign 다운로드설치한 버전에 있는 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 설정 노트를 참고했습니다. 최신 명령은 공급업체 문서를 확인하십시오.
수정 한 번을 포함한 전체 루프를 판단할 수 있도록 작은 브리프를 사용하십시오.
프로필 폼과 저장 확인이 포함된 설정 화면을 만드십시오. 제 디자인 규칙을 사용하십시오. 데스크톱과 모바일 너비에서 확인하십시오.
소스에서 OpenDesign을 실행하려면 대신 기술 퀵스타트를 따르십시오.
OpenCode 디자인 워크플로
브리프에서 검증된 파일까지 이어지는 동일한 팀 수신함 작업입니다. 각 단계는 사용자가 제공하는 것, OpenCode가 수행하는 것, OpenDesign이 기여하는 것, 그리고 확인해야 할 것을 나열합니다.
평이한 언어로 세 줄에서 여섯 줄 사이로 작성합니다. 대상 사용자, 화면의 목적, 플랫폼을 명시하십시오.
디자인 시스템과 몇 가지 확고한 규칙입니다. 이것이 브랜드에 맞는 결과물과 일반적인 결과물을 가르는 요소입니다.
OpenCode는 레이아웃, 스타일, 인터랙션, 안정적인 훅을 포함한 독립형 HTML 파일을 작성합니다.
파일은 요청한 너비로 OpenDesign 내부에 렌더링됩니다. 디자인은 바로 여기서 판단됩니다.
data-od-id 대상을 노출합니다.프리뷰의 요소를 가리켜 변경을 요청합니다. 모든 수정본은 새 파일로 생성되며, 아무것도 조용히 덮어씌워지지 않습니다.
리소스
게시된 가이드에 정리된, OpenCode로 디자인하기 위한 튜토리얼, 문서, 안내서입니다.
제한 사항
자주 묻는 질문
작은 작업부터 시작해 왕복 과정을 판단한 다음 실제 브리프를 가져오십시오. 설정에 맞는 옵션을 선택하십시오. 이 페이지는 설정을 자동으로 감지하지 않습니다.