OpenDesign

코딩 에이전트와 재사용 가능한 디자인 시스템을 활용해 편집 가능한 프로토타입, 웹사이트 및 프레젠테이션을 제작하는 오픈 소스 디자인 작업 공간입니다.

커뮤니티:

UI 및 UX 디자인 AI 디자인 보조 AI 웹사이트 디자인 AI PPT 및 프레젠테이션 메이커

웹사이트 방문

Atoms - AI로 손쉽게 웹사이트·앱 제작

StoreClaw

Sponsor

온라인 판매자를 위한 자율 커머스 엔진으로, 모든 주요 전자상거래 플랫폼에서 스토어를 24시간 모니터링하고, 실행하며, 성장시킵니다. 수동 개입이 필요하지 않습니다.

개요
대안
분석

Atoms - AI로 손쉽게 웹사이트·앱 제작

제품 개요

OpenDesign이란 무엇인가요?

OpenDesign은 코딩 에이전트와 비주얼 작업 공간을 연결하여 프롬프트를 실제로 작동하는 HTML 프로토타입, 웹사이트, 대시보드 및 프레젠테이션으로 구현합니다. 사용자는 공유 디자인 시스템을 적용하고, 레이아웃을 직접 다듬으며, 추가 개발을 위해 프로젝트 파일을 로컬에 보관할 수 있습니다. 로컬 에이전트, 개인 API 키 및 호스팅 모델을 지원하며, 디자인 검토와 엔지니어링 핸드오프를 위한 다양한 내보내기 옵션을 제공합니다.

주요 기능

코딩 에이전트 연동
Claude Code, Codex, Cursor를 비롯한 다양한 코딩 에이전트와 함께 작업하거나, 개인 API 키 및 OpenDesign Cloud를 통해 모델을 연결할 수 있습니다.
재사용 가능한 디자인 시스템
150개 이상의 디자인 시스템 중에서 선택하거나 웹사이트, GitHub 저장소 또는 Figma 파일을 기반으로 새로운 디자인 시스템을 만들어 일관된 시각적 스타일을 유지할 수 있습니다.
직접적인 비주얼 편집
전체 레이아웃을 다시 생성하지 않고도 요소를 이동하거나 크기를 조절하고, 텍스트와 색상을 편집하며, 간격을 조정해 생성된 디자인을 다듬을 수 있습니다.
로컬 프로젝트 소유권
프로젝트를 로컬 HTML, CSS 및 관련 파일로 보관하여 에디터에서 열거나 코딩 에이전트에 전달할 수 있습니다.
유연한 내보내기 옵션
디자인을 독립 실행형 HTML, PDF 또는 PNG로 내보낼 수 있으며, 프레젠테이션은 편집 가능한 PowerPoint 파일로 내보낼 수 있습니다.
확장 가능한 스킬
리서치, 콘텐츠 제작, 디자인 및 결과물 전달 워크플로를 위한 커뮤니티 스킬을 추가하고 맞춤 설정할 수 있습니다.

사용 사례

제품 프로토타이핑 : 제품 요구사항을 인터랙티브 인터페이스 프로토타입으로 전환하여 개발 전에 화면 레이아웃과 사용자 흐름을 검토할 수 있습니다.
웹사이트 디자인 : 일관된 타이포그래피, 색상 및 컴포넌트를 적용한 랜딩 페이지와 웹사이트 콘셉트를 만들 수 있습니다.
대시보드 탐색 : 대시보드 레이아웃을 생성하고 다듬어 정보 계층과 인터페이스 구조를 평가할 수 있습니다.
프레젠테이션 제작 : 브랜드 스타일이 적용된 슬라이드 덱을 제작하고, 추가 수정을 위해 편집 가능한 PowerPoint 파일로 내보낼 수 있습니다.
엔지니어링 핸드오프 : 정적인 목업에만 의존하는 대신, 개발자가 구현의 시작점으로 활용할 수 있는 편집 가능한 HTML 및 CSS 파일을 제공할 수 있습니다.