로컬 코딩 에이전트를 연결하거나, 직접 모델 키를 가져오거나, OpenDesign Cloud에서 시작하세요. 재사용 가능한 디자인 시스템을 적용하고 반응형 프런트엔드를 생성·검토한 다음, 후속 엔지니어링 작업에 사용할 프로젝트 파일을 보관하세요.
로컬 에이전트 · 직접 키 가져오기 · OpenDesign Cloud
에디토리얼한 경험과 반응형 페이지를 갖추고, 엔지니어링 검토에 바로 사용할 수 있는 소스 파일을 포함한 세련된 브랜드 웹사이트입니다.
숙박 경험 살펴보기
“예약으로 이어지는 명확한 경로, 몰입감 있는 비주얼 스토리텔링, 재사용 가능한 컴포넌트, 코딩 에이전트가 계속 따를 수 있는 디자인 시스템을 갖춘 세련된 호스피탈리티 웹사이트.”
개발자는 다양한 대상에게 필요한 웹사이트를 만듭니다. OpenDesign은 브랜드와 방문자의 목적에 맞춰 화면 결과물을 구성하고, 그 결과를 디자인 규칙, 로컬 파일, 개발자 워크플로와 연결합니다.
개발자는 호스피탈리티, 커머스, 에디토리얼, 포트폴리오 또는 제품 웹사이트를 만들 수 있습니다. OpenDesign은 각 목적에 맞게 비주얼 방향을 조정합니다. 개발자에게 유용한 가치는 결과물 뒤에 있습니다. 조정 가능한 모델, 재사용 가능한 디자인 규칙, 반응형 검토, 엔지니어링 워크플로에서 계속 사용할 수 있는 로컬 파일을 제공합니다.
생성 전에 설정을 선택하세요. 프로젝트 파일에 접근하려면 로컬 코딩 에이전트를 사용하고, 모델을 직접 제어하려면 본인 키를 가져오거나, 둘 다 설정하지 않고 OpenDesign Cloud에서 시작하세요.
Codex, Claude Code, Cursor 같은 코딩 에이전트를 설치해 OpenDesign을 실행하세요. 에이전트가 로컬 프로젝트를 읽고 수정할 권한이 필요할 때 선택하는 방식입니다.
Codex
Claude Code
Cursor제공업체 키, 엔드포인트, 모델을 추가한 뒤 생성 전에 연결을 테스트하세요. OpenDesign 크레딧을 사용하는 대신 제공업체에 사용 요금을 직접 지불합니다.
로그인한 뒤 OpenDesign Cloud에서 제공하는 호스팅 모델을 사용하세요. 로컬 개발 워크플로를 설정하기 전에 디자인을 시작하고 싶을 때 가장 간단한 방법입니다.
하나의 제품, 서로 다른 제어 방식 로컬 에이전트와 BYOK는 OpenDesign 계정 없이 시작할 수 있습니다. OpenDesign Cloud는 계정과 요금제 크레딧을 사용합니다. 선택한 에이전트 또는 모델 제공업체에서 별도로 요금을 청구할 수 있습니다.
OpenDesign은 디자인 생성 단계를 담당한 뒤, 검토와 리팩터링, 통합, 배포가 이루어지는 엔지니어링 워크플로에 프런트엔드를 전달합니다.
파일을 수정해야 한다면 로컬 코딩 에이전트를 연결하고, 모델에 직접 접근하려면 본인 키를 가져오거나, 호스팅 방식으로 시작하려면 OpenDesign Cloud에 로그인하세요.
152개 이상의 오픈소스 시스템 중에서 선택하거나 웹사이트, GitHub 저장소 또는 Figma 파일을 바탕으로 직접 만드세요.
대상, 페이지, 브랜드 방향, 기술적 제약을 설명하세요. 반응형 결과를 검토한 뒤 프롬프트나 직접 선택으로 다듬으세요.
로컬 프로젝트를 구현 자료로 활용하세요. 내용을 살펴보고 버전 관리에 추가한 뒤 테스트하고 리팩터링하여 나머지 기술 스택과 연결하세요.
승인된 디자인 시스템을 유지하세요. 반복되는 내비게이션, 히어로, 푸터를 저장소 규칙에 맞는 재사용 컴포넌트로 분리하세요. 변경된 파일을 보여 주세요. 설명 없이 의존성을 추가하지 마세요.
유용한 결과물은 렌더링에 그치지 않습니다. 반응형 웹사이트, 확인 가능한 프로젝트 자료, 다음 에이전트 작업에서 재사용할 수 있는 디자인 규칙이 함께 제공됩니다.
납작한 스크린샷이나 다시 구현해야 하는 시각 자료가 아니라, 실제 웹사이트 페이지와 재사용 섹션을 생성하세요.
HTML, CSS, 관련 에셋과 프로젝트 구조를 컴퓨터에 보관해 일반적인 소스 관리와 검토 절차로 이어가세요.
선택한 색상, 서체, 간격, 컴포넌트 규칙을 공유 맥락으로 유지해 다음 페이지와 코딩 에이전트 작업에 활용하세요.
152개 이상의 오픈소스 디자인 시스템 중에서 선택하거나 웹사이트, GitHub 저장소 또는 Figma 파일을 바탕으로 직접 만드세요. OpenDesign은 색상, 서체, 간격, 컴포넌트 관련 결정을 재사용 가능한 맥락으로 정리해 생성하는 모든 페이지의 방향을 잡도록 합니다.
몇 가지 형용사만으로 모델에 새로운 스타일을 만들어 달라고 요청하는 대신, 정해진 비주얼 시스템을 사용하세요.
웹사이트, GitHub 저장소 또는 Figma 파일을 프로젝트별 디자인 시스템의 원본 자료로 사용하세요.
재사용 가능한 디자인 규칙과 프로젝트 파일을 함께 보관해 이후 코딩 에이전트 작업이 스크린샷 이상의 정보를 바탕으로 시작되도록 하세요.
같은 비주얼 결정을 유지하면서 문구, 레이아웃, 컴포넌트, 새 페이지를 다듬으세요.
모델 설정, 프로젝트 파일 권한, 프로덕션 준비는 각각 별도로 결정해야 합니다. 지원되는 게시 통합을 사용하더라도 배포 제공업체와 설정이 필요합니다.
OpenDesign은 개발자 워크플로의 디자인 생성 단계이지, 풀스택 애플리케이션 플랫폼이 아닙니다. 생성된 프런트엔드는 구현 자료로 보고 검토, 테스트, 접근성 확인, 보안 작업을 거쳐 저장소의 규칙에 맞게 조정하세요.
제공업체 설정, 로컬 에이전트 접근, 디자인 시스템 입력 자료, 계속 개발할 수 있는 프로젝트 파일에 대해 알아보세요.
네. 제공업체 API 키, 엔드포인트, 모델을 추가한 뒤 연결을 테스트하세요. 모델 사용 요금은 제공업체에서 직접 청구하므로 OpenDesign 크레딧을 사용하지 않습니다. BYOK로 디자인을 생성할 수 있지만, 그 자체로는 프로젝트 파일을 수정하지 않습니다. 파일 접근이 필요하면 로컬 코딩 에이전트를 사용하세요.
로컬 코딩 에이전트 또는 직접 키 가져오기 워크플로에는 필요하지 않습니다. OpenDesign Cloud는 호스팅 모델과 요금제 크레딧을 사용하므로 계정이 필요합니다.
로컬 코딩 에이전트는 접근 권한이 있는 파일에서 작업할 수 있으므로, 기존 저장소에 생성된 프런트엔드를 적용할 때 적합한 방식입니다. 출시 전에 변경 사항을 검토하고 자체 프레임워크, 테스트, 규칙에 맞추세요.
152개 이상의 오픈소스 디자인 시스템 중에서 선택하거나 웹사이트, GitHub 저장소 또는 Figma 파일을 바탕으로 직접 만들 수 있습니다. 이렇게 구성한 색상, 서체, 간격, 컴포넌트 방향은 웹사이트와 이후 반복 작업을 이끌 수 있습니다.
OpenDesign은 확인하고 계속 개발할 수 있는 웹사이트 프런트엔드를 만듭니다. 독립 실행형 HTML 또는 제공되는 소스와 에셋을 내보내고, 검토용 PDF나 이미지를 사용할 수 있습니다. Cloudflare Pages 또는 Vercel 통합을 설정하면 지원되는 결과물을 게시할 수 있습니다. 제공업체 계정, 인프라, 백엔드 서비스, 프로덕션 검토는 사용자가 직접 담당해야 합니다.
실행 환경을 선택하고 재사용 가능한 디자인 시스템을 적용한 다음, 반응형 프런트엔드를 검토하고 로컬 프로젝트 파일로 계속 작업하세요.
OpenDesign 다운로드무료 오픈 소스 · 종속 없음 · 코딩 에이전트와 함께 사용
