Codex/ChatGPT용 Open Design 플러그인

아래 안내 문구를 원하는 작업의 ChatGPT 데스크톱 앱에 입력하세요

Read open-design.ai/codex-plugin to install the Open Design plugin and set up a new task for me.

한 번 설치하고, Codex/ChatGPT에서 바로 제작하세요.

먼저 Codex와 Open Design의 전체 작업 공간을 살펴본 뒤, 실제 설치부터 결과물 완성까지의 과정을 따라가세요.

Open Design 플러그인을 사용한 실제 Codex 작업과 완성된 Goodfield 카페 웹사이트
실제 Codex 작업 프롬프트, Open Design으로의 작업 전달, 생성된 파일, 완성된 웹사이트를 하나의 작업 공간에서 모두 확인할 수 있습니다.
  1. 01 설치

    Codex에 설치를 요청하세요

    이 안내 문구를 Codex 작업에 붙여 넣으세요. Codex가 저장소의 설치 절차를 읽고, 공개 마켓플레이스 등록 없이도 플러그인과 로컬 MCP 설정을 완료합니다.

    Read open-design.ai/codex-plugin to install the Open Design plugin and set up a new task for me.
  2. 02 사용

    새 Codex 작업을 시작하세요

    Codex가 설치를 마치면 새 작업에서 설치된 Open Design 플러그인을 열고 “Try now”를 선택해 시작하세요.

    Try now 버튼이 보이는 실제 Codex의 Open Design 플러그인 상세 화면
  3. 03 제작

    디자인 브리프를 작성하세요

    Open Design을 멘션한 뒤 만들 결과물과 콘텐츠, 시각적 방향, 반응형 요구사항을 설명하세요.

    Open Design에 따뜻한 분위기의 동네 카페 웹사이트 제작을 요청하는 실제 Codex 프롬프트
  4. 04 제작

    실시간 작업 전달 과정을 확인하세요

    Codex가 방향을 확인하고 프로젝트를 만든 뒤 Open Design에 작업을 넘기면 파일이 실시간으로 나타납니다.

    동네 카페 웹사이트를 생성하고 있는 실제 Codex 및 Open Design 작업 공간
  5. 05 제작

    완성된 결과를 검토하세요

    같은 작업 안에서 반응형 Goodfield 카페 랜딩 페이지와 생성된 이미지, 편집 가능한 파일을 받을 수 있습니다.

    Codex의 Open Design 플러그인으로 완성한 Goodfield 동네 카페 랜딩 페이지

정확한 프롬프트로 시작하세요.

Codex의 플러그인 메뉴에서 Open Design을 선택하고 결과물을 설명한 뒤 같은 작업에서 계속 다듬으세요. Codex는 플러그인 멘션을 Open Design 칩으로 표시합니다.

질감이 느껴지는 커팅 매트와 코르크 오브젝트를 활용한 Oryzo 제품 랜딩 페이지

제품 출시

@open-design Create a tactile product launch page for Oryzo, a sustainable rice-husk material. Use a cutting-mat grid, cork-toned product photography, oversized typography, technical labels, and a warm editorial layout.
타이포그래피 지도를 활용한 Open Design Osaka 이벤트 랜딩 페이지

이벤트 페이지

@open-design Create an event landing page for Open Design Osaka. Lead with a typographic map of Japan, restrained ivory and olive colors, the date and location, speaker details, and a clear registration action.
어두운 편집 디자인 스타일의 Fable 5 제품 웹사이트

편집 디자인 사이트

@open-design Create a dark editorial website for Fable 5. Use a near-black canvas, small navigation, a bold serif headline, restrained white typography, and subtle interactive controls.
밝은 캔버스 위에 구성한 Open Design 모델 타임라인 인터페이스

인터랙티브 스토리

@open-design Create an interactive release story for Open Design 0.9.0. Visualize a model timeline on a bright canvas with floating cards, connecting lines, color-coded labels, and responsive horizontal exploration.

설치 전에 확인할 내용

작업 제어는 Codex가 맡고, 시각적 제작 과정은 Open Design이 처리합니다.

  1. 이 플러그인을 설치하면 Codex에 무엇이 추가되나요?

    웹사이트, 슬라이드, 프로토타입, 디자인 시스템을 위한 Open Design 워크플로가 Codex에 추가됩니다. 플러그인은 브리프, 프로젝트, 결과물 생성을 위해 로컬 Open Design MCP에 연결됩니다.

  2. 어떤 Codex 제품을 지원하나요?

    현재 패키지는 Codex Desktop과 Codex CLI를 지원합니다. Codex가 첫 번째 지원 호스트입니다.

  3. 설치 전에 무엇이 필요한가요?

    Codex CLI 0.144.6 이상과 Open Design 0.17.0 이상이 필요합니다. 로컬 MCP를 등록하기 전에 Open Design을 설치하세요.

  4. 왜 새 Codex 작업을 시작해야 하나요?

    Codex는 작업을 시작할 때 플러그인과 MCP 기능을 불러옵니다. 새 작업을 열어야 방금 설치한 Open Design Cloud 플러그인을 사용할 수 있습니다.

  5. Open Design 창을 계속 열어 두어야 하나요?

    아니요. 등록된 로컬 MCP는 필요할 때 서명된 Open Design 런타임을 헤드리스 모드로 시작할 수 있습니다.

다음 Codex/ChatGPT 작업에 Open Design을 더하세요.

플러그인을 설치하고 로컬 MCP를 연결한 뒤 @open-design을 호출하세요.

Open Design 데스크톱

하나의 디자인 시스템으로 모든 결과물에 브랜드 일관성을

완전한 Vibe Design Workspace에서 하나의 브랜드 규칙을 웹사이트, 슬라이드, 인터랙티브 프로토타입, 대시보드, 이미지, HTML 영상에 적용하세요. 로컬 Codex, Claude Code, Cursor 등을 연결해 무료로 제작할 수 있습니다.

  • 웹, 슬라이드, 프로토타입, 대시보드, 이미지, 영상
  • 140개+ 디자인 시스템과 전체 템플릿·스킬 라이브러리
  • 로컬 Codex 및 21개+ 코딩 에이전트 연결 · 무료
무료 다운로드

macOS, Windows, Linux 지원