디자인을 위한 Pi.

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 트리로 저장되므로, 탐색을 분기하고 이전 패스를 잃지 않고 단일 파일에서 히스토리를 탐색할 수 있습니다.

• 벤더: earendil-works(오픈소스 커뮤니티 프로젝트)
• 자격증명: 직접 고른 공급자 API 키(BYOK — Anthropic, OpenAI, Google 등) 또는 /login을 통한 구독 로그인; ~/.pi/agent/auth.json(0600)에 로컬 저장
• 라이선스: MIT, 오픈소스

왜 다중 공급자 BYOK 에이전트가 디자인에 어울리는가

Pi의 디자인 강점은 내장된 단일 모델이 아니라 유연성입니다 — 다만 모든 에이전트가 그렇듯 안목은 여전히 사람이 제공해야 합니다.

• 작업마다 알맞은 모델 고르기: Pi가 어떤 공급자로든 라우팅하므로, 레퍼런스 스크린샷을 읽을 강력한 멀티모달 모델을 집었다가 리팩터링용으로 다른 모델로 — 에이전트를 떠나지 않고 — 전환할 수 있습니다.
• 당신의 키, 종속 없음: BYOK는 한 벤더의 가격이나 컨텍스트 한계에 묶이지 않는다는 뜻입니다. 눈앞의 디자인 작업에 강점이 맞는 모델을 고르세요.
• Skills 안의 규칙: Skill(과 Figma 서버 같은 MCP 소스)이 에이전트를 당신의 토큰·컴포넌트·실제 스펙으로 안내하므로, 기본 모양 대신 브랜드에 맞춰 작업합니다.

교훈은 모든 에이전트가 가르치는 것과 같습니다. Pi는 기본적으로 안목을 갖고 있지 않으며, 어떤 모델 선택도 그것을 공급하지 못합니다. 제약 — 디자인 시스템, 미적 skill, 구체적인 레퍼런스 — 을 주면 좋은 디자인을 만들어 냅니다. Open Design은 바로 그 입력들을 패키징하며, 그래서 둘이 잘 맞습니다(아래에서 자세히).

디자인 작업용 Pi를 처음부터 설정하기

깨끗한 컴퓨터에서 UI를 빌드·검증할 수 있는 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)

# 3. Start it in your project
cd your-project
pi

# 4. Switch models any time with /model or Ctrl+L

• 디자인 규칙을 코드로 남기기: 토큰·프리미티브·규칙을 Skill에 넣고 Pi가 그것들을 가리키게 하면, 흔한 디자인으로 기본값을 내는 대신 결과가 브랜드에 맞습니다.
• 브라우저 검증 추가: Playwright나 브라우저 MCP를 연결해 Pi가 실제 브라우저에서 렌더링하고 — 빌드 통과만 확인하는 게 아니라 — 여러 브레이크포인트에서 결과를 점검하게 하세요.

스크린샷-투-UI 워크플로

Pi로 가장 효과가 큰 디자인 루프는 레퍼런스 이미지를 동작하는 반응형 UI로 바꾸고 일치할 때까지 반복하는 것입니다 — 멀티모달 모델로 결과를 레퍼런스와 다시 비교하면서요. Pi가 공급자에 구애받지 않으므로, 이번 패스에 이미지를 가장 잘 읽는 모델을 지정하세요.

1. 가지고 있는 가장 또렷한 시각 레퍼런스에서 시작하세요 — 그리고 한 장의 히어로 샷만이 아니라 여러 상태(데스크톱과 모바일, 호버, 빈 상태, 로딩)를 포함하세요.
2. 이미지 이해가 스크린샷-투-UI 품질을 좌우하므로, /model로 이번 패스에 강력한 멀티모달 모델을 고르세요.
3. 프롬프트를 구체적으로 작성하세요. 모호한 프롬프트는 강력한 모델로도 흔한 UI를 만듭니다.
4. 디자인 시스템과 규칙을 Skill에 두고, 토큰과 정규 프리미티브가 어디 있는지 Pi에 알려 주세요.
5. dev 서버를 돌리고 Pi가 실제 브라우저에서 렌더링하게 한 뒤, 브레이크포인트로 크기를 조절하고, 구현 결과를 스크린샷과 다시 비교하며 반복하세요 — 단지 빌드가 되는지만 확인하지 마세요.

에이전트에게 레퍼런스와 구체적인 제약을 처음부터 주세요:

pi
# in the prompt:
> Implement reference-desktop.png and reference-mobile.png in
  React + Vite + Tailwind + TypeScript.
  Reuse my existing design-system components and tokens (see the Skill).
  Match spacing, layout, and hierarchy; make it responsive.
  Render it in the browser and iterate until it matches the references
  across breakpoints.

프롬프트는 작고 집중되게 유지하고, 좋은 반복은 커밋하고 나쁜 반복은 되돌려(되돌릴 때 Pi에 알려 주세요) 매번의 패스가 깨끗한 기반 위에서 쌓이게 하세요. Pi의 분기되는 JSONL 세션 덕분에 원래 흐름을 잃지 않고 대안을 탐색할 수도 있습니다.

Skills, Extensions, 테마

Pi는 런타임에 몇 개 레이어를 통해 스스로 확장하며, 그것들이 개방형 디자인 워크플로에 깔끔하게 들어맞습니다.

• Skills: Agent Skills 표준을 따르는 Markdown 역량 패키지 — 디자인 규칙·토큰·리뷰 체크리스트를 담는 오래가고 이식 가능한 보금자리입니다. 같은 Skill이 Pi뿐 아니라 호환되는 여러 에이전트에서 작동합니다.
• Extensions와 프롬프트 템플릿: TypeScript Extensions가 맞춤 도구·명령·UI를 더하고, 재사용 가능한 프롬프트 템플릿은 /name으로 실행됩니다. 둘 다 터미널을 떠나지 않고 검증 루프를 스크립트로 짤 수 있게 합니다.
• MCP와 테마: Pi는 외부 디자인 컨텍스트(가장 관련 깊게는 Figma MCP 서버)를 가져오기 위해 MCP 서버에 연결하고, 테마는 핫 리로드되어 작업하는 동안 터미널 UI가 읽기 좋게 유지됩니다.

이것들은 이식 가능한 역량 — 특히 Skills와 MCP — 으로, 바로 Open Design이 프로젝트마다 다시 만드는 대신 오케스트레이션하도록 만들어진 종류의 것입니다.

디자인을 위한 Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI

디자인 작업에 단 하나의 승자는 없습니다 — 에이전트마다 강점이 다르고, 숙련된 팀은 이들을 겹쳐 씁니다. 공정한 요약:

Pi의 각도는 나머지와 직교합니다: 그 바탕 모델들 중 무엇이든 당신 소유의 키로 쓰게 해 주는 에이전트입니다. 커뮤니티에서 거듭 나오는 결론은 여전히 유효합니다 — 안목은 사람에게서 나옵니다. 이들 모두 skill·레퍼런스·제약이 없으면 흔한 미감으로 기본값을 냅니다. 그게 풀어야 할 진짜 문제이며, 모델 모양이 아니라 디자인 도구 모양의 문제입니다.

함정, 그리고 “AI 슬롭” 느낌을 피하는 법

AI가 만든 디자인에 대한 가장 흔한 불만은 흔해 보인다는 것입니다 — 부드러운 그라데이션, 떠다니는 패널, 지나치게 큰 둥근 모서리, 과한 그림자, “AI가 만들었다고 외치는” Inter-와-보라색 분위기. 그 밖에 보고되는 문제로는 깨진 모바일 레이아웃과 지시문이 UI 카피로 새어 나오는 것이 있습니다. 어느 것도 Pi나 어느 한 모델에만 있는 문제가 아닙니다. 엄선된 디자인 컨텍스트 없이 어떤 에이전트든 돌릴 때 생기는 일입니다.

• 미적 skill 추가: 엄선된 디자인 skill은 에이전트가 기본 모양 대신 실제 방향을 택하도록 강제합니다 — 게다가 이식 가능한 Skill이라 모델을 넘나들며 함께 따라갑니다.
• 실제 브라우저에서 검증: 멀티모달 모델을 고르고 Pi가 여러 브레이크포인트에서 렌더링하고 스스로 점검하게 해, 모바일에서 레이아웃이 조용히 깨지지 않게 하세요.
• 토큰과 레퍼런스 제공: 실제 디자인 토큰과 레퍼런스 스크린샷은 결과 품질에 가장 큰 단일 지렛대입니다.
• Pi가 읽는 곳에 규칙을 남기기: “히어로 카드 금지, 서체 최대 둘, 브랜드 우선 위계” 같은 규칙을 에이전트가 매번 로드하는 Skill에 두세요.

모든 완화책이 — 어떤 공급자로 라우팅하든 무관하게 — 에이전트에게 엄선된 디자인 컨텍스트를 주는 것에 관한 것임을 눈여겨보세요. 그 컨텍스트를 프로젝트마다 손으로 유지하는 수고를 Open Design이 없애 줍니다.

Open Design 안에서 Pi로 디자인하기

Open Design은 위 워크플로가 계속 요구하는 바로 그 오픈소스 디자인 레이어입니다. Pi를 1차 어댑터로 취급해 엄선된 skill과 디자인 시스템 라이브러리, 구조화된 렌더 파이프라인, 로컬 데스크톱 UI로 감쌉니다 — 그래서 Pi를 좋게 만드는 디자인 컨텍스트가 매번 손으로 조립되는 게 아니라 첫 실행부터 거기 있습니다. 둘 다 오픈소스이고 로컬 우선이라 자연스럽게 어울리는 조합입니다.

1. Open Design을 설치하고 Pi를 에이전트로 선택하세요.
2. 당신 소유의 공급자 API 키(BYOK)나 구독 로그인으로 인증하세요 — 자격증명은 당신의 컴퓨터의 ~/.pi/agent/auth.json에 머물며 결코 우리를 거쳐 중계되지 않습니다.
3. 디자인 시스템과 skill을 고른 뒤, 일관된 안목으로 덱·프로토타입·랜딩 페이지를 생성하세요.
4. 모든 산출물과 DESIGN.md 파일은 호스팅 클라우드가 아니라 당신 소유의 저장소에 있습니다.

같은 Pi 에이전트, 같은 키, 모델을 전환할 같은 자유 — 거기에 실제로 이식 가능한 오픈소스 디자인 워크플로를 둘러 줍니다. 로컬 우선이고 MIT라, 당신의 작업이나 자격증명에 관한 무엇도 당신의 컴퓨터를 떠나지 않습니다.

자주 묻는 질문

1. 01 Pi가 정말 디자인 작업을 할 수 있나요? +

   네 — 미적 skill, 디자인 시스템, 컨텍스트 속 실제 레퍼런스 이미지가 있으면 Pi는 프로덕션 품질의 반응형 UI를 만들어 내고, 강력한 멀티모달 모델로 라우팅해 레퍼런스에 맞춰 결과를 검증할 수 있습니다. 그 컨텍스트가 없으면 흔한 모양으로 기본값을 내는 경향이 있는데, 그 간극을 Open Design이 메웁니다.

2. 02 Pi로 디자인하려면 비용을 내야 하나요? +

   Pi 자체는 무료이고 오픈소스(MIT)입니다. 바탕 모델에 대해서만 비용을 냅니다 — 직접 고른 공급자 API 키(BYOK)를 가져오거나, /login으로 Claude Pro/Max, ChatGPT Plus/Pro, GitHub Copilot 구독을 쓰세요. Open Design은 어느 쪽이든 당신의 자격증명을 중계하지 않습니다.

3. 03 Pi가 디자인에 특히 좋은 이유는 무엇인가요? +

   공급자에 구애받지 않기 때문입니다: 직접 고른 키를 가져와 20개 이상의 공급자 중 무엇으로든 라우팅하고, 강점이 작업에 맞는 모델을 골라 세션 도중에 전환합니다. 다만 안목은 여전히 모델이 아니라 당신이 제공하는 디자인 시스템, skill, 레퍼런스에서 나옵니다.

4. 04 프런트엔드 디자인에는 Pi로 어떤 모델을 써야 하나요? +

   Pi는 여러 공급자로 라우팅하므로 작업마다 고르세요 — 강력한 멀티모달 모델은 레퍼런스 스크린샷을 잘 읽고, 다른 모델은 리팩터링에 맞을 수 있습니다. Pi의 장점은 워크플로를 바꾸지 않고 전환할 수 있다는 점입니다. Open Design을 쓰면 어떤 모델을 고르든 같은 디자인 컨텍스트를 유지할 수 있습니다.

5. 05 Pi를 Figma에 어떻게 연결하나요? +

   Pi는 MCP 서버를 지원하므로, Figma MCP 서버를 추가해 실제 디자인 컨텍스트 — 컴포넌트, 변수, 레이아웃 데이터 — 를 가져올 수 있습니다. 그러면 생성 코드가 소스를 근사하는 대신 일치하게 됩니다.

6. 06 Open Design은 Pi와 제휴 관계인가요? +

   아니요. Pi는 earendil-works의 독립적인 오픈소스 프로젝트이고, Open Design은 Pi를 1차 어댑터로 지원하는 별개의 독립적인 오픈소스 프로젝트입니다.

7. 07 제 파일과 자격증명은 안전한가요? +

   네 — Open Design은 로컬 우선이고 오픈소스입니다. 파일·산출물·DESIGN.md는 당신 소유의 저장소에 머물고, 공급자 키는 Pi가 직접 사용하며(~/.pi/agent/auth.json에 로컬 저장) 결코 Open Design 서버를 거치지 않습니다.