102.7K+다운로드
Copilot OpenDesign

OpenDesign에서
Copilot(으)로
디자인하기.

OpenDesign에서 GitHub Copilot CLI로 인터페이스를 디자인하는 방법: 입력으로 사용하는 스크린샷, 재사용되는 리포지토리의 컴포넌트, 브리프에서 검토된 파일까지 이어지는 하나의 런칭 페이지 작업, 그리고 시작하기 전에 알아야 할 한계까지 다룹니다.

OpenDesign 다운로드 설정으로 이동

Copilot 디자인을 위한 세 가지 시작점

Copilot을 위한 시작점을 선택하세요

이 가이드 · UI 디자인

Copilot으로 제품 인터페이스 만들기

이 가이드에서는: 브리프, 참고 이미지, 디자인 규칙, 그리고 검토할 HTML 아티팩트를 다룹니다.

이 가이드 읽기 설정

Copilot을 처음부터 설정하기

깨끗한 머신에서 Copilot CLI가 UI를 빌드하고 검증하기까지의 전체 경로.

설정으로 이동 비교

Copilot을 다른 에이전트와 비교하기

Copilot이 디자인 작업에서 Codex, Claude Code, Cursor와 어떻게 다른지—그리고 다른 워크플로가 더 적합한 경우.

비교 보기
이 페이지에서 예시
  1. 예시
  2. 적합성
  3. 호환성
  4. 설정
  5. 워크플로
  6. 참고 자료
  7. 한계
  8. FAQ

하나의 완전한 Copilot 디자인 작업

하나의 Copilot 디자인 작업: 브리프부터 인터페이스까지

전체 흐름을 따라 추적한 하나의 작업: Copilot에게 주는 브리프와 제약 조건, Copilot이 반환하는 아티팩트, 그리고 완료 전에 여전히 실행하는 검사. 아래 인터페이스는 이 페이지를 위해 만든 예시이며—기록된 Copilot 실행이 아닙니다.

1디자인 브리프와 제약 조건

브리프

첨부된 경쟁사 스크린샷을 사용하여 CLI 제품의 출시 랜딩 페이지를 디자인하세요: 설치 명령이 있는 히어로, 세 개의 기능 블록, 증거 포인트. 저장소의 컴포넌트를 재사용하세요. 데스크톱과 폰.

  • 디자인 시스템리포지토리 컴포넌트와 토큰; Albert Sans, 그린 액센트 하나
  • 브레이크포인트1440px 데스크톱과 390px 모바일, 가로 스크롤 없음
  • 인터랙션설치 명령 복사, 기본 및 보조 CTA, 앵커 내비게이션
  • 출력물안정적인 data-od-id 훅이 포함된 단일 독립형 HTML 파일

2누가 무엇을 하는가: 당신, Copilot, 그리고 OpenDesign

  • 사용자

    브리프를 작성하고, 디자인 시스템을 선택하고, 수용 기준을 설정하세요.

  • Copilot

    Copilot은 레이아웃을 계획하고, HTML, CSS, JavaScript를 작성하며, 요청 시 수정합니다.

  • OpenDesign

    OpenDesign은 디자인 시스템과 스킬을 제공하고, 미리보기를 렌더링하며, 모든 버전을 프로젝트의 파일로 저장합니다.

  • 검토

    핸드오프 전에 시각적 계층, 8px 그리드의 간격, 두 브레이크포인트, 모든 인터랙션을 확인하세요.

3Copilot 아티팩트: 1440px 및 390px의 출시 페이지

Copilot 아티팩트: 1440px 및 390px의 출시 페이지 — 데스크톱
예시

4인수인계 전 검토

레이아웃

그리드와 여백

히어로, 기능, 증거가 8px 그리드를 공유합니다. 아트 컬럼은 카피를 폴드 아래로 밀어내지 않습니다.

계층 구조

시각적 계층 구조

헤드라인, 설치 명령, 그다음 기능 순서로 배치되며, 액센트는 설치 버튼에만 표시됩니다.

반응형

모바일 레이아웃

카피가 먼저, 아트가 그다음, 기능은 세로로 쌓이며, 설치 명령은 계속 복사 가능한 상태를 유지합니다.

인터랙션

인터랙션 점검

명령을 복사하고, 두 CTA를 모두 따라가고, 기능 앵커로 이동합니다.

적합성

Copilot이 적합할 때—그리고 적합하지 않을 때

Copilot이 적합한 경우

  • 스크린샷 → UI. 강력한 멀티모달 모델을 선택하고, 참조 이미지를 반응형 마크업으로 변환한 다음, 결과를 해당 이미지와 비교하세요.
  • 다중 모델 선택. /model을 사용하여 Anthropic, OpenAI, Google의 프론티어 모델 간에 작업별로 전환하세요. 모두 Copilot 구독으로 가능합니다.
  • 지침 + MCP. .github/copilot-instructions.md 및 AGENTS.md와 같은 사용자 지정 지침이 규칙을 전달합니다. Figma MCP 서버는 실제 디자인 컨텍스트를 코드로 가져옵니다.
  • 깊은 GitHub 통합. 내장된 GitHub MCP 서버를 통해 기존 GitHub 계정으로 인증하여 저장소, 이슈, PR에 접근할 수 있습니다.

다른 워크플로를 선택해야 하는 경우

  • 편집 가능한 벡터 파일이 필요한 경우. 산출물은 HTML이며 편집 가능한 디자인 문서가 아닙니다. 필요한 에셋 형식에 맞는 별도의 벡터 워크플로를 확인합니다.
  • 참고 자료도 제약 조건도 없습니다. 디자인 시스템이나 예시가 없으면 결과물이 일반적인 모습으로 흐르는 경향이 있습니다. 먼저 브리프를 작성하십시오.
  • 이 에이전트에 필요한 자격 증명이 없습니다. 필요 항목: GitHub Copilot 구독. OpenDesign은 자격 증명을 제공하거나 중계하지 않습니다.
  • 팀이 Codex 또는 Claude Code에서 작업합니다. 해당 에이전트에는 자체 페이지가 있습니다. 워크스페이스는 변경되지 않지만 설정은 변경됩니다. 관련 에이전트를 참조하세요.

호환성

시작 전 확인할 Copilot 요구 사항

이 페이지는 OpenDesign 데스크톱 앱을 통해 연결된 Copilot을 다룹니다. 게시된 참조는 2026년 9월 6일에 확인되었습니다.

도구 범위Copilot, by GitHub

GitHub Copilot CLI는 GitHub의 터미널 네이티브 코딩 에이전트로, Copilot 코딩 에이전트와 동일한 에이전틱 하네스로 구동됩니다. 코드베이스를 읽고, 파일을 편집하고, 명령을 실행하며, GitHub 이슈, PR, 저장소와 함께 작동합니다. 이 페이지는 OpenDesign을 통해 Copilot으로 인터페이스를 디자인하는 것에 관한 것이며, Copilot 자체 인터페이스에 관한 것이 아닙니다. OpenDesign의 설정 노트에 사용 가능한 에이전트가 나열되어 있습니다.

계정 및 인증GitHub Copilot 구독

GitHub Copilot 구독. GitHub Copilot 구독으로 인증하며, 자격 증명은 사용자의 기기에 남습니다. 이 페이지는 할당량이나 가격을 보장하지 않습니다.

시스템 및 버전데스크톱 앱 또는 소스

데스크톱 빌드는 다운로드 페이지를 확인하세요. 소스 퀵스타트에 있는 Node.js 및 pnpm 요구 사항은 소스에서 실행하는 경우에 적용되며, 데스크톱 패키지 설치에는 적용되지 않습니다. 호환 가능한 최소 Copilot 버전은 여기서 확인되지 않았습니다.

연결 확인성공 신호

설치된 버전에 표시되는 연결 안내를 따른 다음, 작은 작업을 하나 실행하세요. Copilot이 이를 처리했는지, 산출물이 열리는지 확인하세요. 다운로드만으로는 작동하는 연결이 확립되지 않습니다.

데스크톱 앱으로 시작하기

세 단계로 완료하는 Copilot 설정

먼저 다운로드하고, 설치된 버전에 맞게 Copilot 설정을 완료한 다음, 작은 결과를 확인하세요. 이 경로를 따르기 위해 OpenDesign을 소스에서 빌드할 필요는 없습니다.

  1. 1

    OpenDesign 데스크톱 앱 다운로드

    사용 중인 컴퓨터에 맞는 패키지를 선택하여 설치하고 앱을 여십시오.

    OpenDesign 다운로드
    체크포인트
    데스크톱 앱이 열립니다. 이미 설치되어 있습니까? 다음 단계로 이동하십시오. 다시 다운로드할 필요는 없습니다.
  2. 2

    Copilot 연결 준비하기

    설치된 버전의 Copilot 안내를 따르세요. GitHub Copilot 구독으로 인증하며, 자격 증명은 사용자의 기기에 남습니다.

    GitHub Copilot CLI 사용 
    # 1. Install Copilot CLI (Node.js required)
npm install -g @github/copilot

# 2. Start it in your project and authenticate on first run
cd your-project
copilot           # run /login and follow the prompts to sign in

    공개된 가이드의 Copilot 설정 안내에서 발췌했습니다. 현재 명령어는 공급사 문서를 확인하세요.

    체크포인트
    의도한 에이전트와 계정을 확인합니다. 사용할 수 없는 경우, 더 큰 작업을 시도하기 전에 호환성을 확인합니다.
  3. 3

    작은 Copilot 작업 하나 실행하기

    한 번의 수정을 포함하여 전체 루프를 판단할 수 있을 만큼 작은 브리프로 시작하세요.

    시작 브리프

    프로필 폼과 저장 확인이 포함된 설정 화면을 만드십시오. 제 디자인 규칙을 사용하십시오. 데스크톱과 모바일 너비에서 확인하십시오.

    체크포인트
    결과를 열고, 저장 상태를 테스트하고, 하나의 구체적인 변경을 요청하세요. 생성된 파일은 검토를 시작할 뿐, 끝내지 않습니다.

소스에서 OpenDesign을 실행하려면 대신 기술 퀵스타트를 따르십시오.

Copilot 디자인 워크플로

Copilot CLI 디자인 작업의 다섯 단계

첫 브리프부터 검토한 파일까지 추적한 하나의 출시 페이지. 각 단계는 당신의 입력, Copilot CLI의 작업, OpenDesign의 역할, 그리고 당신이 여전히 해야 할 검사를 제시합니다.

  1. 1

    디자인 브리프

    브리프를 쉬운 언어로 세 줄에서 여섯 줄로 작성하세요. 누구를 위한 것인지, 화면이 무엇을 해야 하는지, 어떤 플랫폼이 중요한지 말하세요.

    • 사용자당신은 브리프를 작성하고 참조 스크린샷이 있으면 첨부합니다.
    • CopilotCopilot CLI는 브리프와 저장소의 지침 파일—사용자 지정 지침 및 AGENTS.md—을 읽고, 모호한 점이 있으면 질문합니다.
    • OpenDesignOpenDesign은 프로젝트, 프롬프트 표면, 아티팩트 유형에 대한 스킬을 제공합니다.
    • 확인브리프에 수용 기준이 명시되어 있는지 확인하세요. 생성 전에 기준을 정하는 것이 나중에 추가하는 것보다 비용이 적게 듭니다.
  2. 2

    디자인 제약 조건

    디자인 시스템과 확고한 규칙이 Copilot CLI가 기본 모양으로 되돌아가지 않도록 합니다.

    • 사용자디자인 시스템을 선택하고, 브레이크포인트를 지정하고, 반드시 나타나야 하는 컴포넌트를 표시하세요.
    • CopilotCopilot CLI는 한 줄을 작성하기 전에 DESIGN.md 토큰과 태도 규칙을 컨텍스트로 가져옵니다.
    • OpenDesignOpenDesign은 디자인 시스템 라이브러리를 제공하고 선택한 시스템을 스킬 템플릿에 바인딩합니다.
    • 확인토큰이 브랜드와 일치하는지 확인하세요: 하나의 악센트, 의도한 글꼴, 의도한 반경.
  3. 3

    인터페이스 생성

    Copilot CLI는 자체 포함된 HTML 아티팩트를 작성합니다: 레이아웃, 스타일, 인터랙션, 안정적인 훅.

    • 사용자기다리거나 명확히 하는 질문에 답하세요. 여기서 구성할 것은 없습니다.
    • CopilotCopilot CLI는 섹션을 계획하고, HTML, CSS, JavaScript를 작성하고, 파일을 실행하고, 실패한 부분을 수정합니다.
    • OpenDesignOpenDesign은 아티팩트를 프로젝트 폴더에 저장하고 미리보기를 위해 인덱싱합니다.
    • 확인아직 없습니다. 파일이 렌더링된 후에 판단하고, 소스에서 판단하지 마세요.
  4. 4

    미리보기

    파일은 요청한 너비에서 OpenDesign에 렌더링됩니다. 여기서 디자인이 판단됩니다.

    • You너비를 전환하고, 인터랙션을 실행하고, 요소에 댓글을 남기세요.
    • CopilotCopilot CLI는 미리보기에서 댓글을 읽고 다음 수정을 준비합니다.
    • OpenDesignOpenDesign은 미리보기를 렌더링하고 댓글 및 편집을 위해 data-od-id 대상을 노출합니다.
    • Check계층, 대비, 390px에서의 오버플로, 포커스 상태, 악센트가 절제되어 사용되었는지 확인하세요.
  5. 5

    수정 및 검증

    미리보기에서 요소를 가리켜 변경을 요청하세요. 각 수정은 새 파일로 도착합니다. 예고 없이 덮어쓰이는 것은 없습니다.

    • You댓글을 요청으로 바꾸고 작업이 완료된 시점을 결정하세요.
    • CopilotCopilot CLI는 변경 사항을 제자리에 적용하고 파일을 다시 실행합니다.
    • OpenDesignOpenDesign은 버전을 나란히 유지하고, 완료되면 이미지나 HTML을 내보냅니다.
    • Check변경된 영역만 다시 확인한 다음, 각 브레이크포인트에서 전체 페이지를 한 번 확인하세요.

리소스

Copilot 디자인 리소스

스킬

디자인 스킬

Copilot이 OpenDesign에서 생성하는 아티팩트 유형으로, 각 유형에 하나의 스킬이 있습니다.

스킬 둘러보기 디자인 시스템

디자인 시스템

Copilot이 파일을 생성하기 전에 바인딩할 브랜드 토큰 및 컴포넌트.

시스템 둘러보기 템플릿

템플릿

덱, 랜딩 페이지, 제품 화면을 시작하기 위한 템플릿.

템플릿 둘러보기

제한 사항

Copilot의 한계, 실행하는 검사, 대체 방안

  • 범위Copilot CLI는 사용자 지정 지침 파일과 AGENTS.md를 자동으로 읽으며, Anthropic, OpenAI, Google의 프론티어 모델 간에 작업별로 전환할 수 있습니다. 이 페이지는 OpenDesign에 연결된 에이전트로서의 Copilot에 관한 것이며, 모든 Copilot 기능에 관한 것이 아닙니다.
  • 사용 한도사용 한도와 비용은 사용하는 자격 증명, 즉 GitHub Copilot 구독을 따릅니다. 이 페이지는 무료 할당량에 대해 어떠한 주장도 하지 않습니다.
  • 네트워크로컬 프로젝트 파일이 오프라인 추론을 의미하지는 않습니다. 민감한 입력을 공유하기 전에 에이전트의 제공자 설정과 데이터 정책을 확인하세요.
  • 출력물은 HTML입니다산출물은 벡터 디자인 파일이 아니라 HTML 파일로 제공됩니다.
  • 수동 검토미리보기에서 접근성, 실제 콘텐츠, 브랜드 적합성, 상호작용 정확성을 검토합니다. 에이전트 자체 점검은 1차 통과로만 취급하세요.
  • 대체 방법에이전트를 사용할 수 없거나 작업이 실패하면 설치된 버전의 연결 지침과 인증을 확인하세요. 구성을 변경하기 전에 오류와 마지막으로 작동한 산출물을 보존하세요.

자주 묻는 질문

Copilot과 OpenDesign에 대한 자주 묻는 질문

GitHub Copilot CLI로 실제로 디자인 작업이 가능한가요?
네 — 미학적 skill, 디자인 시스템, 그리고 컨텍스트 내의 실제 참조 이미지가 있으면 Copilot CLI는 프로덕션 수준의 반응형 UI를 생성하며, 참조 대비 결과물을 가장 잘 검증하는 모델을 선택할 수 있습니다. 이러한 컨텍스트가 없으면 일반적인 형태로 기본 설정되는 경향이 있는데, 이는 OpenDesign이 채우는 공백입니다.
Copilot CLI로 디자인하려면 구독이 필요한가요?
네 — Copilot CLI는 활성화된 GitHub Copilot 구독(Pro, Pro+, Business 또는 Enterprise)으로 실행되며, BYOK 방식이 아닙니다. GitHub 계정으로 인증합니다. OpenDesign은 사용자의 자격 증명을 프록시하지 않으며, 구독은 에이전트가 직접 사용합니다.
Copilot CLI가 디자인에 잘 맞는 이유는 무엇인가요?
두 가지입니다: 저장소 지침과 AGENTS.md를 자동으로 읽어 디자인 규칙이 저장소와 함께 이동한다는 점, 그리고 작업별로 Anthropic, OpenAI, Google의 최신 모델 간 전환이 가능하다는 점입니다. 둘 다 도움이 되지만, 취향은 여전히 사용자가 제공하는 디자인 시스템, skill, 참조 자료에서 나옵니다.
프런트엔드 디자인: Copilot CLI 또는 Claude Code?
둘 다 강력합니다. Claude Code는 코드베이스를 이해한 구체적인 디자인 결정으로 알려져 있고, Copilot CLI의 강점은 여러 제공업체에 걸친 모델 선택권과 이미 보유하고 있을 수 있는 구독을 통한 깊은 GitHub 통합입니다. 많은 팀이 둘 다 사용합니다 — OpenDesign에서는 디자인 워크플로를 바꾸지 않고도 에이전트를 전환할 수 있습니다.
Copilot CLI를 Figma에 연결하기
/mcp add 명령으로 Figma MCP 서버를 추가합니다. 설정은 ~/.copilot 아래 mcp-config.json에 저장됩니다. 이렇게 하면 Copilot이 컴포넌트, 변수, 레이아웃 데이터 등 실제 디자인 컨텍스트를 가져올 수 있으므로, 생성된 코드가 근사치가 아니라 원본과 일치하게 됩니다.
GitHub Copilot CLI란 실제로 무엇인가
GitHub Copilot CLI는 GitHub의 터미널 네이티브 코딩 에이전트입니다. 저장소를 읽고, 파일을 편집하고, 셸 명령을 실행하며, 기존 GitHub 계정으로 인증해 이슈·풀 리퀘스트·저장소 같은 GitHub 컨텍스트와 직접 작업합니다. GitHub의 Copilot 코딩 에이전트와 동일한 에이전트 하네스로 구동되므로, 단순히 코드 줄을 완성하는 데 그치지 않고 복잡한 작업을 계획하고 반복해 나갑니다. 2025년 9월에 열린 공개 프리뷰를 거쳐 2026년 2월에 정식 출시되었습니다.

디자인 작업에서는 두 가지 속성이 눈에 띕니다. 첫째, 사용자 지정 지침 파일 — .github/copilot-instructions.md의 저장소 전체 규칙과 AGENTS.md — 을 읽으므로 여러분의 디자인 관례가 매 실행마다 자동으로 포함됩니다. 둘째, 여러 파운데이션 모델 제공자를 지원하므로 /model 명령으로 작업마다 특정 UI를 가장 잘 추론하는 모델로 바꿀 수 있습니다.

지침 파일: Copilot CLI는 .github/copilot-instructions.md의 저장소 지침, .github/instructions 아래의 경로별 파일, 그리고 AGENTS.md를 읽습니다. 디자인 관례와 토큰, 리뷰 체크리스트를 담아 두기에 자연스러운 자리입니다.

내장 도구 + MCP: GitHub의 MCP 서버가 기본 내장되어 있고 파일·셸 도구를 실행하며, /mcp add로 사용자 지정 MCP 서버를 추가할 수 있습니다(mcp-config.json에 저장되며 위치는 ~/.copilot). 살아 있는 Figma 파일 같은 외부 컨텍스트를 끌어올 때 씁니다.

모델 선택: /model 명령으로 Anthropic, OpenAI, Google의 프런티어 모델 중에서 고르세요. 작업마다 바꿀 수 있고, 모두 기존 Copilot 구독으로 처리됩니다.

자격 증명: 활성 GitHub Copilot 구독(Pro, Pro+, Business 또는 Enterprise)

설치: npm install -g @github/copilot 실행 후 copilot 실행

제공사: GitHub
저장소 지침과 모델 선택이 디자인에 잘 맞는 이유
Copilot CLI의 디자인 강점은 두 가지 속성에서 나옵니다. 하지만 모든 에이전트가 그렇듯, 안목은 여전히 사람이 공급해야 합니다.

저장소를 따라다니는 관례: Copilot CLI가 .github/copilot-instructions.md와 AGENTS.md를 자동으로 읽기 때문에, 여러분의 토큰과 프리미티브, 리뷰 규칙이 매 실행마다 컨텍스트에 들어갑니다. 즉 에이전트가 기본 설정된 겉모습이 아니라 브랜드를 기준으로 작업합니다.

작업마다 알맞은 모델 고르기: Anthropic, OpenAI, Google에 걸친 모델 선택 덕분에 특정 레이아웃을 가장 잘 추론하는 모델을 골라 쓰고, 다음 작업에서는 워크플로를 바꾸지 않은 채 다른 모델로 전환할 수 있습니다.

MCP를 통한 실제 스펙: 내장 GitHub MCP 서버와 Figma MCP 서버가 에이전트를 여러분의 토큰, 컴포넌트, 실제 스펙으로 안내하므로, 어림짐작이 아니라 원본에서 만들어 냅니다.

안목은 여러분이 제공하는 세 가지 입력, 곧 디자인 시스템과 스킬, 실제 참조 이미지에서 나옵니다.

교훈은 모든 에이전트가 가르치는 것과 같습니다. Copilot CLI는 기본적으로 안목을 갖고 있지 않습니다. 디자인 시스템, 미학 스킬, 구체적인 참조라는 제약을 주면 좋은 디자인을 만들어 냅니다. OpenDesign은 바로 그 입력들을 묶어 제공하기에 둘이 잘 맞습니다(자세한 내용은 아래).
처음부터 디자인 작업을 위한 Copilot CLI 설정하기
설정 순서는 설치 → 인증 → 모델 선택 → 지침 작성 → 브라우저 검증 활성화입니다.

디자인 규칙을 담아 두기: 토큰과 프리미티브, 관례를 .github/copilot-instructions.md나 AGENTS.md에 넣으세요. 그러면 결과물이 무난한 기본값이 아니라 브랜드에 맞춰집니다.

브라우저 검증 추가하기: Playwright나 브라우저 MCP를 연결해 Copilot이 실제 브라우저에서 렌더링하고, 빌드가 통과하는지만 확인하는 대신 브레이크포인트별로 결과물을 검사하게 하세요.

명령과 버전별 세부 사항은 현재 설정 섹션을 참고하세요. 바뀔 수 있습니다.

# 1. Copilot CLI 설치 (Node.js 필요) npm install -g @github/copilot # 2. 프로젝트에서 시작하고 첫 실행 시 인증 cd your-project copilot # /login을 실행하고 안내에 따라 로그인 # 3. 작업에 맞는 모델 선택 # 세션 안에서: /model # Anthropic, OpenAI, Google의 프런티어 모델 중 선택 # 4. 사용자 지정 지침과 Figma MCP 서버 추가 (선택 사항) # .github/copilot-instructions.md 또는 AGENTS.md 작성 /mcp add # 디자인 핸드오프용 Figma MCP 서버 추가
이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 제공사 문서에서 확인하세요.
스크린샷에서 UI로 가는 워크플로
Copilot CLI로 얻을 수 있는 가장 효과적인 디자인 루프는 참조 이미지를 실제로 동작하는 반응형 UI로 바꾸고, 일치할 때까지 반복하는 것입니다. 이때 강력한 멀티모달 모델이 출력물을 참조 이미지와 다시 비교하는 역할을 맡습니다.

가장 명확한 시각 참조에서 시작하세요. 히어로 샷 하나만이 아니라 여러 상태(데스크톱과 모바일, 호버, 빈 상태, 로딩)를 함께 넣으세요.

프롬프트는 구체적으로 쓰세요. 강력한 모델이라도 모호한 프롬프트는 무난한 UI를 낳습니다.

디자인 시스템과 관례는 .github/copilot-instructions.md나 AGENTS.md에 두고, 토큰과 표준 프리미티브가 어디 있는지 Copilot에게 알려 주세요.

개발 서버를 띄우고 Copilot이 실제 브라우저에서 렌더링하도록 한 뒤, 브레이크포인트까지 크기를 바꿔 가며 결과를 확인하세요.

Copilot이 자신의 구현을 스크린샷과 다시 비교하게 하며 반복하세요. 빌드가 된다는 확인만으로는 부족합니다.

Copilot에게 참조 이미지를 가리키고 구체적인 제약을 주세요. 실행 전에 각 파일 편집이나 명령을 여러분의 승인을 받기 위해 미리 보여 줍니다:

프롬프트는 작고 집중적으로 유지하고, 잘된 반복은 커밋하고 잘못된 반복은 되돌리세요(되돌릴 때는 Copilot에게 알려 주세요). 그래야 매 시도가 깨끗한 기반 위에 쌓입니다.

copilot # 프롬프트에서: > reference-desktop.png와 reference-mobile.png의 디자인을 React + Vite + Tailwind + TypeScript로 구현해 줘. .github/copilot-instructions.md에 설명된 기존 디자인 시스템 컴포넌트와 토큰을 재사용해 줘. 간격과 레이아웃, 위계를 맞추고 반응형으로 만들어 줘. 브라우저에서 렌더링하고, 모든 브레이크포인트에서 참조 이미지와 일치할 때까지 반복해 줘.
이전 가이드의 과거 명령 예시입니다. 현재 문법은 링크된 제공사 문서에서 확인하세요.
사용자 지정 지침, MCP, 확장 기능
세 가지 확장 지점이 Copilot CLI를 지속적인 디자인 작업에 실용적으로 만들어 주며, 셋 모두 열린 디자인 워크플로에 깔끔하게 대응합니다.

사용자 지정 지침: 저장소 규칙은 .github/copilot-instructions.md에 있습니다(경로별 파일은 .github/instructions 아래, 그리고 AGENTS.md). 디자인 관례를 두기에 오래가는 자리이며, 매 실행마다 자동으로 포함됩니다.

MCP 서버: Copilot CLI에는 GitHub의 MCP 서버가 기본 내장되어 있고 /mcp add로 사용자 지정 서버를 추가할 수 있습니다(mcp-config.json에 저장되며 위치는 ~/.copilot). 디자인 컨텍스트를 끌어오는 이식성 있는 방법이며, 가장 관련 깊은 것은 Figma MCP 서버로, Copilot뿐 아니라 여러 에이전트에서 통합니다.

특화 에이전트와 내장 도구: 코드베이스 탐색, 빌드와 테스트 실행, 변경 리뷰, 계획 수립을 위한 Copilot CLI의 특화 모드에 파일·셸 도구까지 더해지므로, 터미널을 벗어나지 않고 참조를 모으고 검증 루프를 돌릴 수 있습니다.

이들은 이식성 있는 멀티 에이전트 역량입니다. 프로젝트마다 다시 만드는 대신 OpenDesign이 조율하도록 설계된 바로 그런 종류입니다.
디자인을 위한 Copilot CLI vs Codex vs Claude Code vs Cursor vs Gemini CLI
디자인 작업에 단 하나의 승자는 없습니다. 에이전트마다 강점이 다르고, 숙련된 팀은 여러 개를 쌓아 씁니다. 공정하게 정리하면 이렇습니다.

Copilot CLI — 다중 모델 선택(Anthropic, OpenAI, Google)과 Copilot 구독 위에서의 깊은 GitHub 통합 — 작업마다 최적의 모델을 고르는 일, GitHub 저장소에 묶인 지침 기반 작업

Codex — 프런트엔드 스킬을 통한 강력한 시각적 완성도, 샌드박스 비동기 빌드 — 위임형 비동기 빌드와 이식성 있는 AGENTS.md 규칙

Claude Code — 구체적인 디자인 결정(hex, 간격, 타이포)과 코드베이스를 아는 UX — 프런트엔드 추론과 대용량 컨텍스트 리팩터링

Cursor — 라이브 미리보기와 인라인 편집이 있는 시각적 빌드-확인 루프 — IDE 안에서의 촘촘한 반복·관찰 UI 작업

Gemini CLI — 강력한 멀티모달 이미지 이해와 100만 토큰 컨텍스트, 무료 티어가 있는 오픈 소스 — 스크린샷이 많은 작업과 전체 디자인 시스템을 컨텍스트에 담아 두기

커뮤니티에서 되풀이되는 결론은 안목은 사람에게서 나온다는 것입니다. 스킬과 참조, 제약이 없으면 모두 무난한 미학으로 수렴합니다. 그것이 진짜 풀어야 할 문제이며, 모델의 문제가 아니라 디자인 도구의 형태를 한 문제입니다.

에이전트 — 디자인 강점 — 적합한 용도
함정, 그리고 “AI 슬롭”처럼 보이는 것을 피하는 방법
AI가 만든 디자인에 대한 가장 흔한 불만은 무난해 보인다는 것입니다. 부드러운 그라데이션, 떠 있는 패널, 과하게 큰 모서리 반경, 과장된 그림자, “AI가 만든 티가 확 나는” Inter와 보라색 조합 같은 것들입니다. 그 밖에 보고된 문제로는 깨진 모바일 레이아웃, UI 문구로 새어 나온 지침 등이 있습니다. 어느 것도 Copilot CLI만의 문제가 아닙니다. 정돈된 디자인 컨텍스트 없이 어떤 에이전트를 돌릴 때 벌어지는 일입니다.

미학 스킬 추가하기: 잘 정리된 디자인 스킬은 에이전트가 기본 겉모습 대신 실제 방향을 택하도록 강제합니다.

실제 브라우저에서 검증하기: 브라우저 MCP로 브레이크포인트마다 렌더링하고 스스로 점검해, 레이아웃이 모바일에서 조용히 깨지지 않게 하세요.

토큰과 참조 공급하기: 실제 디자인 토큰과 참조 스크린샷은 결과물 품질을 좌우하는 가장 큰 지렛대입니다.

사용자 지정 지침에 규칙 담기: “히어로 카드 금지, 서체 최대 두 종, 브랜드 우선 위계” 같은 스타일 규칙을 .github/copilot-instructions.md나 AGENTS.md에 넣으세요. 에이전트가 매 실행마다 읽는 자리입니다.

모든 대응책이 에이전트에게 정돈된 디자인 컨텍스트를 주는 일이라는 점에 주목하세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 노동을 OpenDesign이 없애 줍니다.
OpenDesign 안에서 Copilot CLI로 디자인하기
OpenDesign은 위 워크플로가 계속 요구해 온 오픈 소스 디자인 레이어입니다. GitHub Copilot CLI를 자사 어댑터로 다루고, 잘 정리된 스킬 및 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감싸 줍니다. 그래서 Copilot을 좋게 만드는 디자인 컨텍스트가 매번 손으로 조립하지 않아도 첫 실행부터 갖춰집니다. OpenDesign은 독립적이고 오픈 소스(Apache-2.0)이며 로컬 우선이기에 이 조합이 잘 맞습니다. 에이전트가 작업을 하고, 여러분의 파일과 자격 증명은 여러분의 것으로 남습니다.

OpenDesign을 설치하고 GitHub Copilot CLI를 에이전트로 선택하세요.

GitHub Copilot 구독으로 인증하세요. 자격 증명은 여러분의 기기에 남고, 저희를 거쳐 프록시되지 않습니다.

디자인 시스템과 스킬을 고른 뒤 일관된 안목으로 덱과 프로토타입, 랜딩 페이지를 생성하세요.

모든 결과물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 여러분의 저장소에 있습니다.

같은 Copilot CLI 에이전트, 같은 구독에 실제로 쓸 수 있는 이식성 있고 오픈 소스인 디자인 워크플로가 더해집니다. OpenDesign은 로컬 우선이며 Apache-2.0이므로, 작업 내용이나 자격 증명 중 어느 것도 여러분의 기기를 떠나지 않습니다.
OpenDesign은 GitHub 또는 Microsoft와 제휴 관계인가요?
아니요. OpenDesign은 독립적입니다. GitHub Copilot은 GitHub, Inc.와 Microsoft의 상표입니다.