102.7K+다운로드
Pi OpenDesign

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

OpenDesign에서 Pi로 인터페이스를 디자인하는 방법: 이동 가능한 스킬, 직접 선택하는 모델과 키, 브리프부터 검토된 파일까지 이어지는 플랜 비교 작업 하나, 시작 전에 알아야 할 한계.

OpenDesign 다운로드 설정으로 이동

이 Pi 가이드에서 살펴볼 세 가지 경로

Pi를 시작할 지점 고르기

이 가이드 · UI 디자인

Pi로 제품 인터페이스 만들기

이 가이드에서 다루는 것: 간단한 개요, 참고 자료, 디자인 규칙, 그리고 검토를 거치는 HTML 결과물.

이 가이드 읽기 설정

처음부터 Pi 설정하기

새 머신에서 UI를 만들고 검증할 수 있는 Pi 환경까지 이어지는 전체 경로를 따라갑니다.

설정으로 이동 비교

Pi를 다른 에이전트와 비교하기

디자인 작업에서 Pi가 Codex, Claude Code, Cursor와 어떻게 다른지, 그리고 다른 워크플로가 더 나은 선택인 경우를 살펴봅니다.

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

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

Pi 디자인 작업: 브리프에서 인터페이스까지

하나의 작업을 전체 루프에 걸쳐 추적합니다: 브리프와 제약 조건으로 넘겨주는 것, Pi가 반환하는 산출물, 그리고 완료라고 부르기 전에 남는 검사 항목. 아래 인터페이스는 이 페이지를 위해 만든 예시이며, 기록된 Pi 실행이 아닙니다.

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

브리프

노트 작성 앱을 위한 플랜 비교 페이지를 디자인합니다: 무료, 개인, 팀 플랜, 기능 비교, 짧은 FAQ. 데스크톱과 휴대폰.

  • 디자인 시스템OpenDesign 페이퍼 캔버스: Albert Sans, 그린 강조색 하나
  • 브레이크포인트1440px 데스크톱과 390px 모바일, 가로 스크롤 없음
  • 상호작용요금제 전환 토글, 플랜 CTA, 펼칠 수 있는 비교 행
  • 출력물안정적인 data-od-id 훅이 포함된 단일 독립형 HTML 파일

2누가 무엇을 하는가: 나, Pi, OpenDesign

  • 사용자

    브리프를 작성하고, 디자인 시스템을 고르고, 승인 기준을 정합니다.

  • Pi

    Pi는 레이아웃을 계획하고 HTML, CSS, JavaScript를 작성하며, 요청에 따라 수정합니다.

  • OpenDesign

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

  • 검토

    핸드오프 전에 시각적 위계, 8px 그리드의 간격, 두 브레이크포인트, 모든 상호작용을 확인합니다.

3Pi 산출물: 1440px 및 390px의 플랜 비교 페이지

Pi 산출물: 1440px 및 390px의 플랜 비교 페이지 — 데스크톱
예시

4인수인계 전 검토

레이아웃

그리드와 여백

세 가지 플랜과 비교 영역이 동일한 8px 그리드를 사용하며, 기능 행이 열마다 정렬됩니다.

계층 구조

시각적 계층 구조

가격과 플랜 이름이 앞서고, 강조 색이 가장 많이 선택된 배지와 그 버튼을 표시합니다.

반응형

모바일 레이아웃

순서: 개인 플랜, 무료, 팀 순이며, 토글은 맨 위에 유지됩니다.

인터랙션

인터랙션 점검

스위치를 토글하고, CTA를 탭으로 이동하며, 비교 행 하나를 펼쳐봅니다.

적합성

Pi가 적합할 때—그리고 적합하지 않을 때

Pi가 적합한 경우

  • 모든 모델, 당신의 키. 자신의 키로 Anthropic, OpenAI, Google 등에 요청을 보내세요. 스크린샷→UI에는 강력한 멀티모달 모델을 선택하고 /model로 전환하세요.
  • 이식 가능한 스킬. 디자인 관례를 Agent-Skills 표준 스킬에 담아 Pi뿐 아니라 호환되는 에이전트와 함께 이동하세요.
  • MCP + 확장. Figma MCP 서버를 통해 실제 디자인 컨텍스트를 가져오고, TypeScript 확장으로 검증 루프를 자동화하세요.
  • 오픈 소스 및 BYOK. MIT 라이선스이며 로컬 우선입니다. 기반 모델 비용만 지불하고, 자격 증명은 컴퓨터에 남습니다.

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

  • 편집 가능한 벡터 파일이 필요합니다. 산출물은 HTML이며 편집 가능한 디자인 문서가 아닙니다. 필요한 에셋 형식에 맞는 별도의 벡터 워크플로를 찾아보세요.
  • 참고 자료도 제약도 없습니다. 디자인 시스템이나 예시가 없으면 결과물이 일반적인 모습으로 흐르기 쉽습니다. 먼저 브리프를 작성하세요.
  • 이 에이전트에 필요한 자격 증명이 없습니다. 필수: 자체 공급자 API 키(BYOK) 또는 /login을 통한 구독 로그인. OpenDesign은 자격 증명을 제공하거나 중개하지 않습니다.
  • 팀이 Aider나 OpenCode에서 작업합니다. 해당 에이전트에는 각자의 페이지가 있습니다. 공통 작업 공간은 유지되지만 설정은 다릅니다. 관련 에이전트를 참고하세요.

호환성

시작 전 Pi 요구 사항

이 페이지는 OpenDesign 데스크톱 앱을 통해 연결된 Pi를 다룹니다. 게시된 참고 자료는 2026년 9월 6일에 확인했습니다.

도구 범위Pi, 커뮤니티 제작

Pi는 earendil-works의 오픈 소스(MIT) 터미널 AI 코딩 에이전트입니다. 코드베이스를 읽고, 파일을 편집하고, 명령을 실행하며, 간결한 네 가지 도구 핵심—read, write, edit, bash—으로 동작합니다. 이 페이지는 OpenDesign를 통해 Pi로 인터페이스를 디자인하는 것에 관한 것이지, Pi 자체의 인터페이스가 아닙니다. OpenDesign의 설정 노트에 사용 가능한 에이전트가 나열되어 있습니다.

계정 및 인증자신의 제공업체 API 키(BYOK) 또는

자신의 제공업체 API 키(BYOK) 또는 /login을 통한 구독 로그인입니다. 자신의 제공업체 API 키(BYOK) 또는 구독 로그인으로 인증하십시오 — 자격 증명은 사용자의 기기에 남습니다. 이 페이지는 할당량이나 가격을 보장하지 않습니다.

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

데스크톱 빌드는 다운로드 페이지를 참고하세요. 소스 퀵스타트에 나오는 Node.js 및 pnpm 요구 사항은 소스에서 실행할 때 적용되며, 데스크톱 패키지를 설치할 때는 적용되지 않습니다. 최소 호환 Pi 버전: 여기서는 확인하지 않았습니다.

연결 확인성공 신호

설치한 버전에서 표시하는 연결 지침을 사용한 다음 작은 작업을 실행하세요. Pi가 작업을 처리했는지, 산출물이 열리는지 확인하세요. 다운로드만으로는 작동하는 연결이 확인되지 않습니다.

데스크톱 앱으로 시작하기

세 단계로 완료하는 Pi 설정

먼저 다운로드하고, 설치한 버전에 맞게 Pi 설정을 마친 다음, 작은 결과물을 확인하세요. 이 경로에서는 OpenDesign를 소스에서 빌드할 필요가 없습니다.

  1. 1

    OpenDesign 데스크톱 앱 다운로드

    컴퓨터에 맞는 패키지를 고르고 설치한 뒤 앱을 실행하세요.

    OpenDesign 다운로드
    체크포인트
    데스크톱 앱이 열립니다. 이미 설치했다면? 다음 단계로 가세요. 다시 다운로드할 필요가 없습니다.
  2. 2

    Pi 연결 준비

    설치한 버전의 Pi 지침을 따르세요. 자신의 제공자 API 키(BYOK) 또는 구독 로그인으로 인증하세요. 자격 증명은 컴퓨터에 남습니다.

    Pi 공급자 및 인증 문서 
    # 1. Install the Pi coding agent CLI (Node)
npm install -g --ignore-scripts @earendil-works/pi-coding-agent

# 2. Authenticate with your own provider key (BYOK)
export ANTHROPIC_API_KEY=sk-ant-...   # or OPENAI_API_KEY=sk-...
#    (or run /login inside Pi for a Claude / ChatGPT / Copilot subscription)

    게시된 가이드의 Pi 설정 노트에서 가져왔습니다. 현재 명령은 벤더 문서를 확인하세요.

    체크포인트
    의도한 에이전트와 계정인지 확인하세요. 사용할 수 없다면 더 큰 작업을 시도하기 전에 호환성을 확인하세요.
  3. 3

    작은 Pi 작업 하나 실행하기

    전체 루프를 판단할 수 있는 범위가 정해진 브리프로 시작하세요. 수정 한 번을 포함합니다.

    시작 브리프

    프로필 양식과 저장 확인이 있는 설정 화면을 만들어 주세요. 내 디자인 규칙을 적용하세요. 데스크톱과 모바일 너비에서 확인하세요.

    체크포인트
    결과를 열고, 저장 상태를 테스트하고, 구체적인 변경 하나를 요청하세요. 파일이 생성될 때 검토가 시작되며, 거기서 끝나지 않습니다.

OpenDesign를 소스에서 실행하려면 대신 기술 퀵스타트를 사용하세요.

Pi 디자인 워크플로

Pi의 5단계 디자인 워크플로

하나의 플랜 비교 페이지를 브리프에서 검토된 산출물까지 추적합니다. 각 단계는 당신의 입력, Pi의 움직임, OpenDesign의 기여, 그리고 검토 지점을 보여줍니다.

  1. 1

    디자인 브리프

    간단하고 짧게 유지하세요: 세 줄에서 여섯 줄. 대상 독자, 화면의 목적, 플랫폼을 명시하세요.

    • 사용자브리프를 작성하고, 가능하면 참고 스크린샷을 첨부하세요.
    • Pi브리프와 프로젝트의 스킬 파일을 읽고, 모호한 점이 있으면 질문합니다.
    • OpenDesign프로젝트, 프롬프트 인터페이스, 산출물 유형에 맞는 스킬을 제공합니다.
    • 확인브리프에 승인 기준이 포함되어 있는지 확인하세요. 지금 추가하는 편이 생성 후 수정하는 것보다 비용이 적습니다.
  2. 2

    디자인 제약 조건

    디자인 시스템에 엄격한 규칙을 더합니다. 이것이 Pi의 결과물을 일반적이지 않고 브랜드에 맞게 유지합니다.

    • 사용자디자인 시스템을 선택하고, 브레이크포인트와 필요한 컴포넌트를 지정하세요.
    • Pi코드를 작성하기 전에 DESIGN.md 토큰과 포스처 규칙을 컨텍스트에 로드합니다.
    • OpenDesign디자인 시스템 라이브러리를 제공하고, 선택 사항을 스킬 템플릿에 바인딩합니다.
    • 확인토큰이 브랜드와 일치하는지 확인하세요: 단일 악센트, 올바른 폰트, 적절한 모서리 반경.
  3. 3

    인터페이스 생성

    Pi는 레이아웃, 스타일, 상호작용, 안정적인 훅을 포함한 단일 자체 완결형 HTML 파일을 만듭니다.

    • 사용자기다리거나 명확히 하는 질문에 답하세요. 구성은 필요 없습니다.
    • Pi섹션을 계획하고 HTML, CSS, JavaScript를 작성하고, 파일을 실행하고, 실패를 수정합니다.
    • OpenDesign산출물을 프로젝트 폴더에 저장하고 미리보기용으로 인덱싱합니다.
    • 확인아직 없습니다. 소스가 아니라 렌더링된 파일을 판단하세요.
  4. 4

    미리보기

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

    • You너비를 전환하고, 상호작용을 테스트하고, 요소에 댓글을 남기세요.
    • Pi미리보기 댓글을 읽고 다음 수정을 준비합니다.
    • OpenDesign미리보기를 렌더링하고 댓글과 편집을 위한 data-od-id 대상을 노출합니다.
    • Check위계, 대비, 390px에서의 오버플로, 포커스 상태, 그리고 악센트가 절제되어 있는지 확인하세요.
  5. 5

    수정 및 검증

    미리보기에서 요소를 가리켜 변경을 요청하세요. 각 수정본은 새 파일이며, 아무것도 조용히 덮어쓰이지 않습니다.

    • You코멘트를 요청으로 변환하고, 작업이 완료된 시점을 결정합니다.
    • Pi변경 사항을 제자리에서 적용하고 파일을 다시 실행합니다.
    • OpenDesign버전을 나란히 보관하고, 완료되면 이미지나 HTML을 내보냅니다.
    • Check변경된 영역만 다시 확인한 다음, 각 중단점에서 전체 페이지를 한 번씩 확인합니다.

리소스

Pi 디자인 리소스

스킬

디자인 스킬

OpenDesign에서 Pi가 생성할 수 있는 아티팩트 유형, 유형당 하나의 Skill.

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

디자인 시스템

Pi가 출력을 생성하기 전에 바인딩할 브랜드 토큰 및 컴포넌트.

시스템 둘러보기 템플릿

템플릿

덱, 랜딩 페이지, 제품 화면을 위한 시작점입니다.

템플릿 둘러보기

제한 사항

Pi의 한계, 수동 확인 및 대체 방법

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

자주 묻는 질문

Pi와 OpenDesign에 대한 자주 묻는 질문

Pi가 실제로 디자인 작업을 할 수 있습니까?
네 — 미학적 스킬, 디자인 시스템, 그리고 컨텍스트 내의 실제 참조 이미지가 있다면 Pi는 프로덕션 품질의 반응형 UI를 만들어내며, 강력한 멀티모달 모델로 라우팅하여 출력을 참조와 대조 검증할 수 있습니다. 이러한 컨텍스트가 없으면 일반적인 모습으로 기본 설정되는 경향이 있으며, 이것이 바로 OpenDesign이 채우는 공백입니다.
Pi로 디자인하려면 비용을 지불해야 합니까?
Pi 자체는 무료이며 오픈소스(MIT)입니다. 비용을 지불하는 대상은 기반 모델뿐입니다 — 자신의 프로바이더 API 키(BYOK)를 사용하거나, /login을 통해 Claude Pro/Max, ChatGPT Plus/Pro 또는 GitHub Copilot 구독을 사용할 수 있습니다. 어느 경우든 OpenDesign은 사용자의 자격 증명을 대리로 처리하지 않습니다.
Pi가 디자인에 적합한 이유는?
Pi는 프로바이더에 종속되지 않습니다. 자신의 키를 사용하여 20개 이상의 프로바이더 중 어디로든 라우팅할 수 있으며, 작업에 적합한 강점을 가진 모델을 선택하고 세션 중간에도 전환할 수 있습니다. 하지만 감각은 여전히 모델이 아니라 사용자가 제공하는 디자인 시스템, 스킬, 참조에서 나옵니다.
프런트엔드 디자인에 Pi와 함께 어떤 모델을 사용해야 합니까?
Pi는 여러 프로바이더로 라우팅되므로 작업별로 선택하십시오 — 강력한 멀티모달 모델은 참조 스크린샷을 잘 읽어내는 반면, 다른 모델은 리팩터링에 더 적합할 수 있습니다. Pi의 장점은 워크플로를 바꾸지 않고도 전환할 수 있다는 점입니다. OpenDesign을 사용하면 어떤 모델을 선택하든 동일한 디자인 컨텍스트를 유지할 수 있습니다.
Pi를 Figma에 연결하는 방법은 무엇입니까?
Pi는 MCP 서버를 지원하므로 Figma MCP 서버를 추가하여 실제 디자인 컨텍스트—컴포넌트, 변수, 레이아웃 데이터—를 가져올 수 있습니다. 이를 통해 생성된 코드가 근사치가 아니라 소스와 정확히 일치하게 됩니다.
Pi란 실제로 무엇인가
Pi는 터미널용 오픈소스(MIT) AI 코딩 에이전트로, earendil-works pi 툴킷의 일부입니다. 저장소를 읽고, 파일을 편집하고, 셸 명령을 실행합니다. 단순히 코드 라인을 완성하는 것이 아니라 자연어 작업으로부터 계획을 세우고 작업을 검증합니다. 핵심은 의도적으로 작게 유지됩니다. 기본 도구 네 가지(read, write, edit, bash)에 내장된 grep, find, ls가 더해집니다.

디자인 작업에서 가장 눈에 띄는 특성은 Pi가 특정 프로바이더에 종속되지 않는다는 점입니다. Anthropic, OpenAI, Google을 비롯한 여러 프로바이더를 하나의 통합 API 뒤에서 정규화하므로, 자신의 키를 가져와 작업마다 모델을 선택할 수 있습니다. 예를 들어 참고 스크린샷을 읽을 때는 강력한 멀티모달 모델을 쓰고, 워크플로를 바꾸지 않은 채 세션 도중 /model이나 Ctrl+L로 전환할 수 있습니다.

어떤 모델이든, 당신의 키로: Pi는 Anthropic과 OpenAI를 포함한 20개 이상의 프로바이더로 라우팅합니다. 자신의 API 키(BYOK)로 인증하거나, /login으로 Claude Pro/Max, ChatGPT Plus/Pro, GitHub Copilot 구독에 로그인할 수 있습니다.

Skills + Extensions: Pi는 Skills(Agent Skills 표준을 따르는 Markdown 기능 패키지)와 TypeScript Extensions를 로드합니다. 디자인 관례를 담아두고 사용자 정의 도구를 추가하기에 자연스러운 자리입니다.

세션 분기: 세션은 JSONL 트리로 저장되므로, 탐색을 분기하고 이전 시도를 잃지 않으면서 하나의 파일에서 기록을 오갈 수 있습니다.

자격 증명: 자신의 프로바이더 API 키(BYOK — Anthropic, OpenAI, Google 등) 또는 /login을 통한 구독 로그인. ~/.pi/agent/auth.json(0600)에 로컬로 저장됩니다.

제공: earendil-works (오픈소스 커뮤니티 프로젝트)

라이선스: MIT, 오픈소스
멀티 프로바이더, BYOK 에이전트가 디자인에 잘 맞는 이유
Pi의 디자인 강점은 내장된 단일 모델이 아니라 유연성입니다. 다만 모든 에이전트와 마찬가지로, 안목은 여전히 사람이 공급해야 합니다.

작업마다 알맞은 모델 선택: Pi는 어떤 프로바이더로든 라우팅하므로, 참고 스크린샷을 읽을 때 강력한 멀티모달 모델을 쓰고 리팩터링에는 다른 모델로 바꿀 수 있습니다. 에이전트를 떠날 필요가 없습니다.

당신의 키, 락인 없음: BYOK는 특정 벤더의 가격이나 컨텍스트 한도에 묶이지 않는다는 뜻입니다. 눈앞의 디자인 작업에 강점이 맞는 모델을 고르세요.

Skills에 담긴 관례: Skill(그리고 Figma 서버 같은 MCP 소스)은 에이전트가 당신의 토큰, 컴포넌트, 실제 스펙을 참조하게 하므로, 기본 룩이 아니라 브랜드에 맞춰 작업합니다.

안목은 당신이 제공하는 세 가지 입력, 즉 디자인 시스템, 스킬, 실제 참고 이미지에서 나옵니다.

교훈은 모든 에이전트가 가르치는 것과 같습니다. Pi는 기본적으로 안목을 갖지 않으며, 어떤 모델을 골라도 그것이 생기지 않습니다. 디자인 시스템, 미학 스킬, 구체적인 참고 자료라는 제약을 주면 좋은 디자인을 만들어냅니다. OpenDesign은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞습니다(아래에서 더 설명합니다).
처음부터 디자인 작업을 위한 Pi 설정
설정 순서: 설치 → 인증(BYOK) → Skill에 디자인 규칙 담기 → 모델 선택 → 브라우저 검증 활성화.

디자인 규칙 담기: 토큰, 프리미티브, 관례를 Skill에 넣고 Pi가 이를 참조하게 하면, 결과물이 뻔한 룩으로 흐르지 않고 브랜드에 맞습니다.

브라우저 검증 추가: Playwright나 브라우저 MCP를 연결해 Pi가 실제 브라우저에서 렌더링하고 브레이크포인트 전반에서 결과물을 확인하도록 하세요. 빌드가 통과하는지만 확인하는 데서 그치지 않습니다.

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

# 1. Pi 코딩 에이전트 CLI 설치 (Node) npm install -g --ignore-scripts @earendil-works/pi-coding-agent # 2. 자신의 프로바이더 키로 인증 (BYOK) export ANTHROPIC_API_KEY=sk-ant-... # 또는 OPENAI_API_KEY=sk-... # (또는 Pi 안에서 /login을 실행해 Claude / ChatGPT / Copilot 구독 사용) # 3. 프로젝트에서 실행 cd your-project pi # 4. /model 또는 Ctrl+L로 언제든 모델 전환
이전 가이드의 예시 명령입니다. 현재 문법은 링크된 벤더 문서에서 확인하세요.
스크린샷 → UI 워크플로
Pi를 활용한 가장 효과 큰 디자인 루프는 참고 이미지를 실제로 동작하는 반응형 UI로 바꾸고, 일치할 때까지 반복하는 것입니다. 이때 멀티모달 모델로 결과물을 참고 이미지와 비교합니다. Pi는 프로바이더에 종속되지 않으므로, 이번 작업에서 이미지를 가장 잘 읽는 모델을 지정하면 됩니다.

가장 명확한 시각 자료에서 시작하세요. 히어로 샷 하나만이 아니라 여러 상태(데스크톱과 모바일, 호버, 비어 있음, 로딩)를 포함하세요.

이미지 이해가 스크린샷→UI 품질을 좌우하므로, /model로 이번 작업에 강력한 멀티모달 모델을 고르세요.

프롬프트를 구체적으로 쓰세요. 모호한 프롬프트는 강력한 모델에서도 뻔한 UI를 만듭니다.

디자인 시스템과 관례는 Skill에 두고, 토큰과 표준 프리미티브가 어디에 있는지 Pi에게 알려주세요.

개발 서버를 실행하고 Pi가 실제 브라우저에서 렌더링하며 브레이크포인트로 크기를 조정하게 한 뒤, 구현을 스크린샷과 비교하며 반복하세요. 빌드 성공만 확인하는 것으로는 부족합니다.

에이전트에게 참고 자료와 구체적인 제약을 처음부터 주세요.

프롬프트는 작고 집중적으로 유지하고, 좋은 반복은 커밋하고 나쁜 반복은 되돌리세요(되돌릴 때 Pi에게 알려주세요). 그래야 매 시도가 깨끗한 기반 위에 쌓입니다. Pi의 분기형 JSONL 세션을 쓰면 원래 흐름을 잃지 않고 대안을 탐색할 수도 있습니다.

pi # 프롬프트에: > reference-desktop.png와 reference-mobile.png를 React + Vite + Tailwind + TypeScript로 구현해줘. 기존 디자인 시스템 컴포넌트와 토큰을 재사용해 (Skill 참고). 간격, 레이아웃, 위계를 맞추고 반응형으로 만들어줘. 브라우저에서 렌더링하고, 브레이크포인트 전반에서 참고 자료와 일치할 때까지 반복해줘.
이전 가이드의 예시 명령입니다. 현재 문법은 링크된 벤더 문서에서 확인하세요.
Skills, Extensions, 테마
Pi는 런타임에 몇 개의 계층을 통해 스스로를 확장하며, 이들은 열린 디자인 워크플로에 깔끔하게 대응합니다.

Skills: Agent Skills 표준을 따르는 Markdown 기능 패키지로, 디자인 관례와 토큰, 리뷰 체크리스트를 담는 오래가고 이식성 높은 자리입니다. 같은 Skill이 Pi뿐 아니라 호환되는 에이전트에서도 작동합니다.

Extensions와 프롬프트 템플릿: TypeScript Extensions는 사용자 정의 도구, 명령, UI를 추가하고, 재사용 가능한 프롬프트 템플릿은 /name으로 실행합니다. 둘 다 터미널을 떠나지 않고 검증 루프를 스크립트로 만들 수 있게 합니다.

MCP와 테마: Pi는 MCP 서버에 연결해 외부 디자인 컨텍스트(가장 관련성이 높은 것은 Figma MCP 서버)를 가져오고, 테마는 핫 리로드되어 작업하는 동안에도 터미널 UI가 읽기 편하게 유지됩니다.

이것들은 이식 가능한 기능이며, 특히 Skills와 MCP는 OpenDesign이 프로젝트마다 다시 만드는 대신 조율하도록 만들어진 바로 그런 요소입니다.
디자인 관점의 Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI
디자인 작업에 단 하나의 승자는 없습니다. 에이전트마다 강점이 다르고, 숙련된 팀은 이들을 조합합니다. 공정하게 요약하면 다음과 같습니다.

Pi — 프로바이더 비종속 및 BYOK — 어떤 모델(Anthropic, OpenAI, Google…)로든 라우팅하고 세션 도중 전환, MIT, 자기 확장 가능 — 벤더 락인 없이 작업마다 최적의 모델 선택

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

Claude Code — 구체적인 디자인 결정(헥스, 간격, 타이포)과 코드베이스 인지 UX — 프런트엔드 추론과 대규모 컨텍스트 리팩터링

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

Gemini CLI — 강력한 멀티모달 이미지 이해와 1M 토큰 컨텍스트, 무료 티어 — 스크린샷이 많은 작업과 전체 디자인 시스템을 컨텍스트에 유지하기

Pi의 관점은 다른 것들과 축이 다릅니다. 다시 말해 위에 나열된 어떤 기반 모델이든 자신의 키로 사용하게 해주는 에이전트입니다. 커뮤니티에서 반복되는 평결은 여전히 유효합니다. 안목은 사람에게서 나옵니다. 스킬과 참고 자료, 제약이 없으면 모두가 뻔한 미학으로 흘러갑니다. 진짜 풀어야 할 문제는 그것이며, 이는 모델의 문제가 아니라 디자인 도구의 문제입니다.

에이전트 — 디자인 강점 — 적합한 용도
함정, 그리고 ‘AI 슬롭’ 룩을 피하는 방법
AI가 만든 디자인에 대한 가장 흔한 불만은 뻔해 보인다는 것입니다. 부드러운 그라디언트, 떠 있는 패널, 지나치게 큰 라운드 코너, 과장된 그림자, “AI가 만든 게 틀림없다”고 소리치는 듯한 Inter와 보라색 분위기 등입니다. 그 밖에 보고되는 문제로는 깨진 모바일 레이아웃과 지시문이 UI 문구로 새어 나오는 경우가 있습니다. 이 중 어느 것도 Pi나 특정 모델만의 문제가 아닙니다. 어떤 에이전트든 큐레이션된 디자인 컨텍스트 없이 실행될 때 벌어지는 일입니다.

미학 스킬 추가: 큐레이션된 디자인 스킬은 에이전트가 기본 룩 대신 실제 방향성을 따르도록 강제합니다. 이식 가능한 Skill이므로 모델을 바꿔도 함께 따라갑니다.

실제 브라우저에서 검증: 멀티모달 모델을 골라 Pi가 브레이크포인트 전반에서 렌더링하고 스스로 점검하게 하면, 모바일에서 레이아웃이 조용히 깨지지 않습니다.

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

Pi가 읽는 곳에 규칙 담기: “히어로 카드 금지, 서체 최대 두 가지, 브랜드 우선 위계” 같은 규칙을 에이전트가 매 실행마다 로드하는 Skill에 넣으세요.

주목할 점은 모든 완화책이 에이전트에게 큐레이션된 디자인 컨텍스트를 주는 일이라는 것입니다. 어떤 프로바이더로 라우팅하든 마찬가지입니다. 그 컨텍스트를 프로젝트마다 손으로 유지하는 수고를 OpenDesign이 없애줍니다.
OpenDesign 안에서 Pi로 디자인하기
OpenDesign은 위 워크플로가 계속 요구해 온 오픈소스 디자인 레이어입니다. Pi를 퍼스트파티 어댑터로 취급하고, 큐레이션된 스킬과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다. 그래서 Pi를 좋게 만드는 디자인 컨텍스트가 첫 실행부터 갖춰져 있고, 매번 손으로 조립할 필요가 없습니다. 둘 다 오픈소스이자 로컬 우선이라 조합이 자연스럽습니다.

자신의 프로바이더 API 키(BYOK) 또는 구독 로그인으로 인증하세요. 자격 증명은 ~/.pi/agent/auth.json으로 당신의 머신에 남으며, 결코 저희를 거쳐 프록시되지 않습니다.

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

모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 당신의 저장소에 있습니다.

같은 Pi 에이전트, 같은 키, 모델을 바꿀 같은 자유에, 그 주위를 감싸는 실제적이고 이식 가능한 오픈소스 디자인 워크플로가 더해집니다. 로컬 우선이고 MIT이므로, 작업 내용이나 자격 증명 중 어느 것도 머신을 떠나지 않습니다.

OpenDesign을 설치하고 Pi를 에이전트로 선택하세요.
OpenDesign은 Pi와 제휴 관계인가요?
아니요. OpenDesign은 독립적이며, Pi를 커뮤니티 지원 어댑터로 통합합니다.