Pi cho thiết kế.

Pi thực sự là gì

Pi là một agent lập trình AI mã nguồn mở (MIT) cho terminal, một phần của bộ công cụ pi từ earendil-works. Nó đọc repository của bạn, chỉnh sửa tệp, và chạy lệnh shell — lập kế hoạch và kiểm chứng công việc từ các tác vụ ngôn ngữ tự nhiên thay vì chỉ hoàn thành từng dòng. Lõi của nó cố tình nhỏ: bốn công cụ mặc định — read, write, edit và bash — cộng với grep, find và ls tích hợp sẵn.

Đối với công việc thiết kế, đặc tính nổi bật là Pi độc lập với nhà cung cấp. Nó chuẩn hóa xuyên Anthropic, OpenAI, Google và nhiều nhà cung cấp khác sau một API thống nhất, nên bạn mang theo khóa của riêng mình và chọn mô hình theo từng tác vụ — ví dụ một mô hình đa phương thức mạnh để đọc ảnh chụp tham chiếu — và đổi với /model hoặc Ctrl+L giữa phiên mà không thay đổi quy trình.

• Mô hình bất kỳ, khóa của bạn: Pi định tuyến tới hơn 20 nhà cung cấp bao gồm Anthropic và OpenAI. Bạn xác thực bằng các khóa API của riêng mình (BYOK), hoặc đăng nhập vào một gói thuê bao Claude Pro/Max, ChatGPT Plus/Pro, hoặc GitHub Copilot bằng /login.
• Skills + Extensions: Pi nạp Skills (gói năng lực Markdown theo chuẩn Agent Skills) và TypeScript Extensions — nơi tự nhiên để mã hóa quy ước thiết kế của bạn và thêm các công cụ tùy chỉnh.
• Phiên phân nhánh: Các phiên được lưu dưới dạng cây JSONL, nên bạn có thể phân nhánh một hướng khám phá và điều hướng lịch sử trong một tệp duy nhất mà không mất các lượt trước đó.

• Nhà cung cấp: earendil-works (dự án cộng đồng mã nguồn mở)
• Thông tin xác thực: khóa API nhà cung cấp của riêng bạn (BYOK — Anthropic, OpenAI, Google, v.v.) hoặc một đăng nhập gói thuê bao qua /login; lưu cục bộ trong ~/.pi/agent/auth.json (0600)
• Giấy phép: MIT, mã nguồn mở

Vì sao một agent BYOK đa nhà cung cấp phù hợp với thiết kế

Lợi thế thiết kế của Pi là tính linh hoạt, không phải một mô hình tích hợp sẵn duy nhất — nhưng, như với mọi agent, gu thẩm mỹ vẫn phải do bạn cung cấp.

• Chọn đúng mô hình theo từng tác vụ: Vì Pi định tuyến tới bất kỳ nhà cung cấp nào, bạn có thể với tới một mô hình đa phương thức mạnh để đọc ảnh chụp tham chiếu, rồi đổi sang mô hình khác để tái cấu trúc — mà không rời khỏi agent.
• Khóa của bạn, không bị khóa: BYOK nghĩa là bạn không bị ràng buộc vào giá hay giới hạn ngữ cảnh của một nhà cung cấp; chọn mô hình mà điểm mạnh phù hợp với công việc thiết kế trước mắt bạn.
• Quy ước trong Skills: Một Skill (cộng với một nguồn MCP như một máy chủ Figma) trỏ agent tới token, component và spec thật của bạn, nên nó làm việc đối chiếu với một thương hiệu thay vì một vẻ ngoài mặc định.

Bài học vẫn là bài học mà mọi agent dạy ta: Pi không có gu thẩm mỹ mặc định, và không lựa chọn mô hình nào cung cấp được nó. Nó tạo ra thiết kế tốt khi bạn cho nó các ràng buộc — một design system, một skill thẩm mỹ và những tham chiếu cụ thể. Open Design đóng gói chính xác những đầu vào đó, đó là lý do hai bên ăn khớp với nhau (thêm bên dưới).

Thiết lập Pi cho công việc thiết kế, từ con số không

Đây là toàn bộ lộ trình từ một máy sạch đến một Pi có thể dựng và kiểm chứng UI.

# 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

• Mã hóa quy tắc thiết kế của bạn: Đặt token, primitive và quy ước của bạn trong một Skill và trỏ Pi tới chúng, để đầu ra khớp với một thương hiệu thay vì mặc định về một vẻ ngoài tầm thường.
• Thêm kiểm chứng trên trình duyệt: Nối một Playwright hoặc trình duyệt MCP để Pi kết xuất trong một trình duyệt thật và kiểm tra đầu ra qua các breakpoint thay vì chỉ xác nhận build thành công.

Quy trình ảnh-chụp-thành-UI

Vòng lặp thiết kế có đòn bẩy cao nhất với Pi là biến một ảnh tham chiếu thành UI hoạt động được, có khả năng đáp ứng và lặp lại cho đến khi khớp — dựa vào một mô hình đa phương thức để đối chiếu đầu ra với tham chiếu. Vì Pi độc lập với nhà cung cấp, hãy trỏ nó tới bất kỳ mô hình nào đọc ảnh tốt nhất cho lượt này.

1. Bắt đầu từ những tham chiếu hình ảnh rõ ràng nhất bạn có — và bao gồm nhiều trạng thái (desktop và di động, hover, trống, đang tải), không chỉ một ảnh hero.
2. Chọn một mô hình đa phương thức mạnh cho lượt với /model, vì hiểu ảnh là thứ thúc đẩy chất lượng ảnh-chụp-thành-UI.
3. Hãy cụ thể trong lời nhắc; lời nhắc mơ hồ tạo ra UI tầm thường ngay cả với một mô hình mạnh.
4. Giữ design system và quy ước của bạn trong một Skill, và cho Pi biết token cùng các primitive chuẩn nằm ở đâu.
5. Chạy một dev server và cho Pi kết xuất trong một trình duyệt thật, đổi kích thước về các breakpoint, rồi lặp lại bằng cách đối chiếu phần triển khai của nó với các ảnh chụp — chứ không chỉ xác nhận nó build được.

Cho agent các tham chiếu và ràng buộc cụ thể ngay từ đầu:

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.

Giữ lời nhắc nhỏ và tập trung, commit những lần lặp tốt và hoàn nguyên những lần lặp tệ (báo cho Pi khi bạn hoàn nguyên), để mỗi lần đi qua đều được xây trên một nền sạch. Các phiên JSONL phân nhánh của Pi cũng cho phép bạn khám phá một phương án thay thế mà không mất luồng gốc.

Skills, Extensions và theme

Pi tự mở rộng tại thời điểm chạy qua một vài lớp, và chúng ánh xạ gọn gàng vào một quy trình thiết kế mở.

• Skills: Các gói năng lực Markdown theo chuẩn Agent Skills — ngôi nhà bền vững, di động cho quy ước thiết kế, token và danh sách kiểm tra rà soát của bạn. Cùng một Skill hoạt động xuyên các agent tương thích, không chỉ Pi.
• Extensions và mẫu lời nhắc: TypeScript Extensions thêm công cụ, lệnh và UI tùy chỉnh; các mẫu lời nhắc tái sử dụng chạy qua /name. Cả hai cho phép bạn lập kịch bản vòng lặp kiểm chứng mà không rời khỏi terminal.
• MCP và theme: Pi kết nối tới các máy chủ MCP để đưa vào ngữ cảnh thiết kế ngoài (liên quan nhất là một máy chủ Figma MCP), và các theme tự nạp lại để UI terminal vẫn dễ đọc khi bạn làm việc.

Đây là những năng lực di động — đặc biệt là Skills và MCP — đúng loại thứ mà Open Design được xây để điều phối, thay vì tái tạo lại theo từng dự án.

Pi vs Codex vs Claude Code vs Cursor vs Gemini CLI cho thiết kế

Không có người chiến thắng duy nhất cho công việc thiết kế — mỗi agent có một điểm mạnh khác nhau, và các nhóm dày kinh nghiệm kết hợp chúng. Một tóm tắt công bằng:

Góc tiếp cận của Pi vuông góc với những cái còn lại: nó là agent cho phép bạn dùng bất kỳ mô hình nền tảng nào trong số đó trên các khóa của riêng bạn. Phán quyết lặp đi lặp lại của cộng đồng vẫn đúng — gu thẩm mỹ đến từ con người: tất cả chúng đều mặc định về một thẩm mỹ tầm thường nếu thiếu skill, tham chiếu và ràng buộc. Đó mới là vấn đề thực sự cần giải, và nó có hình hài của một công cụ thiết kế, không phải của một mô hình.

Cạm bẫy, và cách tránh vẻ ngoài “AI làm cẩu thả”

Phàn nàn phổ biến nhất về thiết kế do AI tạo ra là nó trông tầm thường — gradient mềm, các panel lơ lửng, góc bo tròn quá khổ, đổ bóng kịch tính, một bầu không khí Inter-và-tím “hét lên rằng AI làm cái này.” Các vấn đề khác được báo cáo gồm bố cục di động bị vỡ và lời chỉ dẫn rò rỉ vào nội dung UI. Không vấn đề nào trong số này là riêng của Pi hay của bất kỳ một mô hình nào; chúng là điều xảy ra khi bất kỳ agent nào chạy mà thiếu một ngữ cảnh thiết kế được tuyển chọn.

• Thêm một skill thẩm mỹ: Một skill thiết kế được tuyển chọn buộc agent cam kết một hướng đi thực sự thay vì vẻ ngoài mặc định — và vì nó là một Skill di động, nó đi theo bạn xuyên các mô hình.
• Kiểm chứng trong một trình duyệt thật: Chọn một mô hình đa phương thức và cho Pi kết xuất và tự kiểm tra qua các breakpoint để bố cục không âm thầm vỡ trên di động.
• Cung cấp token và tham chiếu: Token thiết kế thật và ảnh chụp tham chiếu là đòn bẩy lớn nhất, đơn lẻ lên chất lượng đầu ra.
• Mã hóa quy tắc ở nơi Pi đọc chúng: Đặt các quy tắc kiểu “không thẻ hero, tối đa hai kiểu chữ, phân cấp đặt thương hiệu lên trước” trong một Skill mà agent nạp mỗi lần chạy.

Hãy lưu ý rằng mọi cách khắc phục đều xoay quanh việc cho agent một ngữ cảnh thiết kế được tuyển chọn — bất kể bạn định tuyến tới nhà cung cấp nào. Duy trì ngữ cảnh đó bằng tay, theo từng dự án, là công việc nhọc nhằn mà Open Design loại bỏ.

Thiết kế với Pi bên trong Open Design

Open Design là lớp thiết kế mã nguồn mở mà quy trình ở trên cứ liên tục đòi hỏi. Nó xem Pi như một adapter chính thức và bao nó trong một thư viện skill và design-system được tuyển chọn, một pipeline kết xuất có cấu trúc, và một giao diện máy tính cục bộ — để ngữ cảnh thiết kế khiến Pi trở nên giỏi đã có sẵn ngay từ lần chạy đầu tiên, chứ không phải lắp ráp bằng tay mỗi lần. Cả hai đều mã nguồn mở và ưu tiên cục bộ, điều đó khiến sự kết hợp trở nên tự nhiên.

1. Cài Open Design và chọn Pi làm agent của bạn.
2. Xác thực bằng khóa API nhà cung cấp của riêng bạn (BYOK) hoặc một đăng nhập gói thuê bao — thông tin xác thực ở lại trên máy bạn trong ~/.pi/agent/auth.json và không bao giờ được trung chuyển qua chúng tôi.
3. Chọn một design system và một skill, rồi tạo deck, prototype và landing page với gu thẩm mỹ nhất quán.
4. Mọi artifact và tệp DESIGN.md đều nằm trong repo của riêng bạn, không phải một đám mây lưu trữ.

Cùng một agent Pi, cùng các khóa, cùng quyền tự do đổi mô hình — cộng thêm một quy trình thiết kế thực thụ, di động, mã nguồn mở bao quanh nó. Nó ưu tiên cục bộ và MIT, nên không có gì về công việc hay thông tin xác thực của bạn rời khỏi máy bạn.

Các câu hỏi thường gặp

1. 01 Pi có thực sự làm được công việc thiết kế không? +

   Có — với một skill thẩm mỹ, một design system và ảnh tham chiếu thật trong ngữ cảnh, Pi tạo ra UI chất lượng sản xuất, có khả năng đáp ứng, và bạn có thể định tuyến nó tới một mô hình đa phương thức mạnh để kiểm chứng đầu ra đối chiếu với tham chiếu. Thiếu ngữ cảnh đó, nó có xu hướng mặc định về một vẻ ngoài tầm thường, đó chính là khoảng trống mà Open Design lấp đầy.

2. 02 Tôi có cần trả tiền để thiết kế với Pi không? +

   Bản thân Pi miễn phí và mã nguồn mở (MIT). Bạn chỉ trả cho mô hình nền tảng — mang theo khóa API nhà cung cấp của riêng bạn (BYOK), hoặc dùng một gói thuê bao Claude Pro/Max, ChatGPT Plus/Pro, hoặc GitHub Copilot qua /login. Open Design dù sao cũng không bao giờ trung chuyển thông tin xác thực của bạn.

3. 03 Điều gì khiến Pi tốt riêng cho thiết kế? +

   Nó độc lập với nhà cung cấp: bạn mang theo khóa của riêng mình và định tuyến tới bất kỳ nhà cung cấp nào trong số hơn 20 nhà, chọn mô hình có điểm mạnh phù hợp với tác vụ và đổi giữa phiên. Nhưng gu thẩm mỹ vẫn đến từ design system, skill và tham chiếu mà bạn cung cấp, không phải từ mô hình.

4. 04 Tôi nên dùng mô hình nào với Pi cho thiết kế frontend? +

   Pi định tuyến tới nhiều nhà cung cấp, nên hãy chọn theo từng tác vụ — một mô hình đa phương thức mạnh đọc ảnh chụp tham chiếu tốt, trong khi những mô hình khác có thể phù hợp cho tái cấu trúc. Lợi thế của Pi là bạn có thể đổi mà không thay đổi quy trình. Open Design cho phép bạn giữ cùng một ngữ cảnh thiết kế xuyên bất kỳ mô hình nào bạn chọn.

5. 05 Làm thế nào để kết nối Pi với Figma? +

   Pi hỗ trợ các máy chủ MCP, nên bạn có thể thêm một máy chủ Figma MCP và kéo ngữ cảnh thiết kế thật — component, biến, dữ liệu bố cục — nên mã sinh ra khớp với nguồn thay vì xấp xỉ nó.

6. 06 Open Design có liên kết với Pi không? +

   Không. Pi là một dự án mã nguồn mở độc lập từ earendil-works; Open Design là một dự án mã nguồn mở độc lập riêng biệt hỗ trợ Pi như một adapter chính thức.

7. 07 Tệp và thông tin xác thực của tôi có an toàn không? +

   Có — Open Design ưu tiên cục bộ và mã nguồn mở. Tệp, artifact và DESIGN.md của bạn ở lại trong repo của riêng bạn, và các khóa nhà cung cấp của bạn được Pi dùng trực tiếp (lưu cục bộ trong ~/.pi/agent/auth.json), không bao giờ định tuyến qua máy chủ của Open Design.