OpenDesign은 디자인 시스템, 시각적 편집, 원하는 AI 설정을 하나의 AI 웹사이트 빌더에 담았습니다. 브랜드에 어울리는 웹사이트를 만들고, 미리보기에서 다듬은 뒤 프런트엔드 파일을 계속 활용할 수 있습니다.
여백을 살린 브랜드, 제품, 에디토리얼 작업.
프로젝트 시작하기
“독립 스튜디오를 위한 차분한 에디토리얼 사이트. 명확한 연락 유도 버튼 하나.”
AI로 생성한 콘셉트 이미지 세 가지는 SaaS 사이트, 포트폴리오, 제품 출시 페이지의 서로 다른 방향을 보여줍니다. 시각적 방향을 설명하기 위한 예시이며, 고객이 실제로 제작한 사이트나 제품 스크린샷, 테스트를 거친 웹사이트 구현 사례가 아닙니다.
밝은 분석 서비스 콘셉트로, 대시보드 일러스트 옆에 제품 설명과 전환 경로를 배치했습니다. 실제 사이트를 만들 때는 승인된 제품 화면과 검증된 근거 자료를 제공하세요. 여기에 표시된 인터페이스, 로고, 지표는 예시입니다.
건축 포트폴리오 콘셉트로, 큼직한 대표 이미지와 차분한 보조 이미지, 절제된 타이포그래피를 사용했습니다. 구성 순서를 참고해 자신의 작업을 배치한 다음, 실제 프로젝트와 캡션, 크레딧, 이미지 사용 권한을 제공하세요.
시네마틱한 제품 콘셉트로 큰 이미지와 핵심 메시지, 간결한 사양 섹션의 균형을 잡았습니다. 이 이미지는 아트 디렉션을 보여줄 뿐, 작동하는 쇼핑몰을 의미하지 않습니다. 예시 문구와 사양은 승인된 정보로 바꾸고 구매 버튼은 사용하는 커머스 서비스에 연결하세요.
프로젝트 파일에 접근하려면 로컬 코딩 에이전트를, 모델에 직접 접근하려면 BYOK를, 호스팅된 모델로 시작하려면 OpenDesign Cloud를 선택하세요. 그런 다음 디자인 시스템을 고르고 웹사이트를 설명합니다. 앱은 무료 오픈 소스이지만 에이전트 구독, 제공업체 사용 요금, Cloud 크레딧에는 선택한 설정에 따라 비용이 들 수 있습니다.
사진작가를 위한 포트폴리오 — 화면을 가득 채우는 이미지, 짧은 소개, 명확한 연락 방법.
디자인 시스템을 고르고, 직접 만든 에셋을 추가한 뒤, 대상 사용자와 페이지, 다음 행동을 일상적인 언어로 설명하세요.
작동하는 페이지를 데스크톱, 태블릿, 모바일 미리보기에서 비교하세요. 콘텐츠, 줄바꿈, 이미지 자르기, 탐색 메뉴를 확인하세요.
편집 가능한 HTML에서 텍스트, 이미지, 링크를 선택해 수정하세요. 레이아웃을 크게 바꾸려면 에이전트가 작업하도록 표시한 뒤 결과를 검토하세요.
Codex
Claude Code
Cursor
승인된 결과물을 템플릿으로 저장하거나 HTML, 소스 코드, 에셋을 내보내세요. 개발이나 게시를 이어가기 전에 패키지를 확인하세요.
생성된 웹사이트와 그 뒤의 세부 요소를 오가며 작업할 수 있습니다. OpenDesign은 재사용 가능한 디자인 컨텍스트, 지원되는 시각적 편집, 에이전트에게 전달하는 표시 기반 피드백, 그리고 활용도 높은 프런트엔드 출력을 하나의 워크플로로 제공합니다.
OpenDesign에서는 디자인 시스템을 선택하거나 웹사이트, 저장소 또는 승인된 Figma 자료를 바탕으로 디자인 컨텍스트를 만들 수 있습니다. 해당 규칙과 함께 대상 사용자와 원하는 행동도 추가하세요. 생성 과정에 시각적 참고 자료와 목적을 모두 제공할 수 있지만, 참고 자료가 완벽히 반영된다고 가정하지 말고 결과를 검토하세요.
OpenDesign의 편집 가능한 HTML 미리보기에서 지원되는 요소를 선택해 텍스트, 이미지와 대체 텍스트, 링크 주소를 변경할 수 있습니다. 시각적 편집 도구로 글꼴, 크기, 간격, 정렬도 조정할 수 있습니다. 눈에 보이는 세부 요소를 수정한 다음 주변 콘텐츠와 모바일 화면에서의 줄바꿈도 확인하세요.
OpenDesign에서는 미리보기의 특정 영역을 표시해 에이전트에게 피드백과 함께 전달할 수 있습니다. 대상이 명확히 드러나도록 계층을 더 명확하게 하거나, 이미지 표현을 바꾸거나, 섹션 배치를 조정해 달라고 요청하세요. 변경된 페이지는 적용하기 전에 검토해야 합니다. 주석은 구현 방향을 안내하지만 결과를 보증하지는 않습니다.
OpenDesign은 로컬 코딩 에이전트 연결, 지원되는 모델 제공업체에 개인 키 연결, OpenDesign Cloud를 지원합니다. 현재 사용 중인 설정과 모델 이용 방식에 따라 선택하세요. 프로젝트 권한, 제공업체 요금, Cloud 크레딧은 선택한 방식에 따라 달라지며, Cloud의 모델 이용은 웹사이트 호스팅이 아닙니다.
OpenDesign 웹사이트 미리보기에서는 데스크톱, 태블릿, 모바일 뷰포트 크기를 확인할 수 있습니다. 눈길을 끄는 첫 화면만 보지 말고 전체 내비게이션, 긴 문구, 이미지 자르기, 양식, 컨트롤 상태를 살펴보세요. 수정을 요청할 때 같은 디자인 컨텍스트를 사용하고 레이아웃을 바꾼 뒤에는 각 화면 크기를 다시 확인하세요.
OpenDesign에서는 승인된 결과물을 템플릿으로 저장할 수 있으며, HTML 또는 소스와 에셋을 내보낼 수 있습니다. 패키지에 포함된 항목을 확인하고 사용할 환경에서 테스트하세요. 재사용 가능한 시작점은 다음 프로젝트에 도움이 되며, 내보낸 프런트엔드는 엔지니어링과 게시 작업에도 계속 활용할 수 있습니다.
OpenDesign은 디자인 시스템 워크플로, 편집 가능한 HTML 미리보기, 에이전트에게 전달하는 표시 기반 피드백, 세 가지 AI 설정 옵션을 제공합니다. 이러한 제품 기능을 활용해 브랜드를 웹사이트에 반영하고 프로젝트가 진행되는 동안 세부 요소를 조정할 수 있습니다.
“글꼴, 색상, 간격 규칙을 적용하세요. 선정된 작업물과 명확한 문의 버튼 하나가 있는 스튜디오 웹사이트를 만들어 주세요.”
OpenDesign에서 디자인 시스템을 선택하거나 웹사이트, GitHub 저장소, Figma 자료를 바탕으로 만들 수 있습니다. OpenDesign은 생성 과정에 디자인 컨텍스트를 제공하므로 브랜드의 글꼴, 색상, 간격, 컴포넌트 규칙을 여러 페이지에서 재사용할 수 있습니다.
OpenDesign의 편집 가능한 HTML 미리보기에서 텍스트, 이미지, 링크를 선택해 지원되는 콘텐츠와 스타일을 변경할 수 있습니다. 더 큰 변경을 요청하려면 영역을 표시해 에이전트에게 전달하세요. 두 도구 모두 페이지 전체를 다시 설명하는 대신 피드백의 대상을 눈에 보이게 해줍니다.
OpenDesign은 로컬 코딩 에이전트, BYOK, OpenDesign Cloud를 지원합니다. 모델 이용 방식과 프로젝트 요구에 맞는 설정을 연결하세요. 앱은 무료 오픈 소스이며, 에이전트 구독료, 제공업체 사용료, Cloud 크레딧은 별도입니다.
OpenDesign은 HTML 및 소스와 에셋 내보내기 옵션을 제공합니다. 생성된 패키지를 확인한 다음 Codex, Claude Code, Cursor 또는 원하는 편집기에서 작업을 이어가세요. 팀은 다시 만들어야 하는 디자인 참고 자료가 아니라 편집 가능한 프런트엔드 결과물을 바탕으로 작업할 수 있습니다.
계속 다듬어 갈 브랜드 중심 웹사이트를 만든다면 OpenDesign을 선택하세요. 포트폴리오, 캠페인 사이트, SaaS 사이트는 재사용 가능한 디자인 규칙, 대상이 명확한 시각적 수정, 다음 작업자도 활용할 수 있는 프런트엔드 파일의 이점을 얻을 수 있습니다. 처음 생성한 결과가 자동으로 완성된다는 약속이 아니라, 이러한 조합이 OpenDesign을 선택하는 이유입니다.
주요 요구가 올인원 운영 서비스라면 관리형 플랫폼을 선택하세요. OpenDesign은 디자인 및 프런트엔드 작업 공간이지, 관리형 CMS·스토어·데이터베이스가 아닙니다. 게시 연동에는 제공업체 설정이 필요하며, 양식, 결제, 운영 데이터에는 연결된 서비스가 필요합니다. 웹사이트를 직접 관리하는 일이 중요하고 그 뒤에서 작동할 서비스를 준비할 수 있다면 OpenDesign을 선택하세요.
사이트는 빌더 안의 미리보기로만 존재하지 않습니다. 실제 파일과 컴포넌트가 프로젝트에 저장되므로 변경 사항을 하나씩 검토하고 Codex, Claude Code, Cursor 또는 개발팀과 함께 결과물을 계속 다듬을 수 있습니다.
Codex
Claude Code
Cursor
Codex
Claude Code
Cursor
각 경로는 서로 다른 브리프와 구조, 완료 기준에서 시작합니다.
Figma에서 웹사이트로기존 시각적 방향을 반응형으로 편집 가능한 프런트엔드 파일에 반영하세요.둘러보기
OpenDesign은 반응형 페이지와 재사용 가능한 컴포넌트, 스타일, 보관할 수 있는 파일 등 웹사이트의 사용자에게 보이는 경험을 만듭니다. 인터페이스 뒤에서 작동하는 인프라는 제공하지 않습니다.
제공업체를 설정한 뒤 지원되는 Cloudflare Pages 또는 Vercel 연동을 사용하거나, 호환되는 호스트에 내보내세요. 게시 대상은 연동 방식에 따라 다릅니다. 게시된 사이트의 에셋 경로와 링크, 양식을 확인하세요. 제공업체 계정과 도메인, 관련 요금은 별도입니다.
OpenDesign이 만드는 결과와 워크플로를 이어가는 방법, 다른 도구가 필요한 경우를 알아보세요.
AI 웹사이트 빌더는 일상적인 언어로 작성한 브리프를 웹사이트 구조와 시각 시스템, 작동하는 프런트엔드로 변환합니다. OpenDesign은 직접 확인하고 편집한 뒤 개발을 이어갈 수 있는 브랜드 맞춤형 반응형 프런트엔드 파일에 중점을 둡니다.
첫 버전을 직접 작성하지 않고도 프런트엔드 방향을 생성하고 지원되는 HTML 세부 사항을 다듬을 수 있습니다. 프로젝트 파일 작업에는 로컬 코딩 에이전트를, 제공업체와 모델 선택에는 BYOK를, 호스팅 모델 이용에는 OpenDesign Cloud를 선택하세요. 앱은 무료지만 선택한 모델 서비스에 요금이 부과될 수 있습니다. 양식과 결제, 인증, 프로덕션 데이터에는 여전히 연결된 서비스나 엔지니어링 작업이 필요합니다.
반응형 프런트엔드를 요청하고 작동하는 페이지를 데스크톱, 태블릿, 모바일 미리보기에서 검토할 수 있습니다. 화면 크기별로 탐색 메뉴와 긴 텍스트, 컨트롤, 이미지 자르기를 확인하세요. 미리보기만으로 반응형 품질이 보장되지는 않으며, 위의 콘셉트 이미지는 모바일 구현을 테스트했다는 근거가 아닙니다.
편집 가능한 HTML에서 텍스트와 이미지, 링크를 선택해 콘텐츠와 이미지 소스 및 대체 텍스트, 링크 대상, 타이포그래피, 간격을 수정하세요. 큰 변경 사항은 에이전트가 작업하도록 표시할 수 있습니다. 로컬 파일의 구현을 변경하려면 프로젝트에 접근할 수 있는 코딩 에이전트를 사용하세요. 승인된 결과물은 템플릿으로 저장하거나 인계 전에 HTML 또는 소스 내보내기를 확인하세요.
OpenDesign은 로컬 .fig 내보내기 파일을 노드 트리와 토큰, 에셋, 미리보기가 포함된 구조화된 스냅샷으로 해독한 다음, 해당 자료를 디자인 맥락을 만드는 데 활용할 수 있습니다. Figma URL에 접근할 수 없다면 승인된 로컬 파일을 가져오세요. 생성된 웹사이트를 원본과 비교해 검토하세요. 손실 없는 변환이나 실시간 동기화, 모든 반응형 및 상호작용 결정을 자동으로 완료하는 기능은 보장되지 않습니다.
프런트엔드에 시맨틱 HTML과 설명이 포함된 메타데이터, 구조화된 제목, 이미지 대체 텍스트, 성능을 고려한 에셋을 포함할 수 있습니다. 이러한 기반은 사이트를 최적화하기 쉽게 하지만, 어떤 빌더도 검색 순위를 보장하지 않습니다. 검색 성과는 유용한 콘텐츠와 크롤링 가능성, 내부 링크, 권위, 배포 품질, 지속적인 기술 검토에 달려 있습니다.
OpenDesign은 설정된 Cloudflare Pages 및 Vercel 제공업체를 위한 게시 연동을 지원하며, 다른 호환 호스트에 사용할 파일도 내보낼 수 있습니다. 제공업체 계정과 도메인, 관리형 CMS, 결제 서비스, 프로덕션 데이터베이스는 제공하지 않습니다. 게시 대상과 비용은 제공업체 및 연동 방식에 따라 다르므로, 게시 후 실제 사이트를 확인하세요.
마케팅 사이트와 포트폴리오, SaaS 웹사이트, 스타트업 사이트, 소상공인 사이트, 에이전시 사이트, 개인 사이트, 정적 사이트, 캠페인 페이지, 제품 출시 페이지에 적합합니다. 시각적 위계와 콘텐츠, 반응형 동작, 재사용 가능한 컴포넌트가 중요한 프런트엔드 경험을 만드는 작업에 활용할 수 있습니다.
디자인 시스템으로 시작하고 에이전트나 모델을 선택한 다음 작업 중인 미리보기에서 웹사이트를 다듬으세요. 준비가 되면 프런트엔드 파일을 다음 단계로 가져갈 수 있습니다.
OpenDesign 다운로드무료 오픈 소스 · 원하는 AI 설정 · 편집 가능한 프런트엔드 파일
