Pencil: Khi Claude Code “nhìn thấy” thiết kế của bạn

Bạn đang dùng Claude Code để xây dựng sản phẩm. Nhưng mỗi lần cần thêm một giao diện mới lại phải mô tả từng chi tiết bằng chữ – màu sắc, layout, khoảng cách – mà kết quả vẫn không như tưởng tượng?

Pencil giải quyết đúng vấn đề đó. Thay vì mô tả bằng chữ, bạn thiết kế trực tiếp trên canvas, rồi để Claude Code tự đọc bản thiết kế và build theo. Không cần biết code. Không cần biết thiết kế. Chỉ cần mô tả bằng ngôn ngữ tự nhiên là xong.

Bài viết này sẽ hướng dẫn bạn từng bước: từ cài đặt Pencil, kết nối với Claude, đến tạo ra bản thiết kế đầu tiên hoàn toàn bằng AI.

Phần 1: Pencil là gì?

Pencil là công cụ thiết kế giao diện bằng AI, được xây dựng riêng để làm việc cùng các AI agent như Claude Code. Bạn thiết kế trên một canvas trực quan, AI tự hiểu và thực hiện theo yêu cầu của bạn.

Điểm đặc biệt của Pencil là toàn bộ file thiết kế được lưu trực tiếp vào thư mục dự án dưới dạng file .pen. Điều này có nghĩa là Claude Code có thể đọc bản thiết kế và build thành giao diện thực tế, chính xác đến từng pixel mà không cần bạn phải giải thích gì thêm.

Hiện tại Pencil hoàn toàn miễn phí. Bạn chỉ cần trả tiền cho gói Claude subscription đang dùng.

Bài viết này chỉ bao gồm những tính năng cơ bản nhất để bạn bắt đầu. Nếu muốn khám phá thêm các tính năng nâng cao, bạn có thể tham khảo tài liệu chính thức tại docs.pencil.dev.

Phần 2: Cài đặt và kết nối Pencil với Claude

2.1. Tải và cài đặt Pencil

Bước 1. Truy cập pencil.dev, chọn phiên bản phù hợp với máy của bạn (MacOS hoặc Windows) và tải về.

Bước 2. Cài đặt như bình thường. Trên Mac: mở file .dmg vừa tải, kéo ứng dụng vào thư mục Applications. Trên Windows: chạy file .exe và làm theo hướng dẫn.

Bước 3. Mở Pencil. Lần đầu khởi động, ứng dụng sẽ yêu cầu kích hoạt tài khoản:

• Nhập địa chỉ email của bạn khi được hỏi
• Kiểm tra hộp thư đến (kể cả thư mục Spam) để lấy mã kích hoạt
• Nhập mã đó vào Pencil để hoàn tất

Sau khi kích hoạt xong, Pencil sẽ mở thẳng vào file pencil-welcome-desktop.pen – một canvas demo có sẵn với 4 bước hướng dẫn để bạn làm quen với công cụ. Bạn có thể thử ngay ở đây trước khi bắt đầu dự án của mình.

2.2. Kết nối Pencil với Claude

Lưu ý trước khi bắt đầu: Bước kết nối này yêu cầu bạn đã cài Claude Desktop trên máy và đang đăng nhập bằng tài khoản Claude Pro/Max. Nếu chưa có, tải tại claude.ai/download.

Đây là bước quan trọng nhất, giúp Pencil và Claude “nói chuyện” được với nhau thông qua MCP – cổng “USB” giúp Claude kết nối với Pencil.

Bước 1. Nhìn lên góc trên bên phải của Pencil, nhấn vào button Agents.

Bước 2. Cửa sổ Settings → Agents sẽ mở ra. Bạn sẽ thấy mục Anthropic Claude Code ở trên cùng.

Bước 3. Ở ô Authenticate with, nhấn vào dropdown và chọn Your Claude Code settings (e.g. subscription). Đây là lựa chọn dùng tài khoản Claude subscription, không chọn “API key” vì sẽ tốn phí riêng.

Sau bước này, Pencil sẽ tự đọc thông tin đăng nhập từ Claude Code đang có trên máy, không cần đăng nhập thêm gì. Mọi yêu cầu thiết kế bạn gõ vào sẽ được Claude xử lý tự động.

Phần 3: Tạo thiết kế đầu tiên bằng ngôn ngữ tự nhiên

3.1. Ra lệnh cho Pencil bằng lời

Bạn không cần kéo thả hay tự vẽ gì cả. Chỉ cần gõ yêu cầu vào ô Design with Claude or Codex… ở phía dưới màn hình, nhấn Enter, rồi chờ Claude làm việc.

Một số lệnh bạn có thể thử ngay:

• “Thiết kế một trang landing page cho ứng dụng quản lý công việc”
• “Chuyển frame này sang dark mode”
• “Thêm một section giới thiệu tính năng với 3 cột”
• “Thay đổi màu chủ đạo sang xanh navy”

Trong lúc Claude xử lý, bạn sẽ thấy mô tả trực tiếp trên panel trái – Claude đang làm gì, thay đổi chỗ nào. Khá trực quan để theo dõi.

Bạn cũng có thể đính kèm file vào prompt bằng icon 📎 ở thanh dưới – ví dụ đính kèm file logo để Claude dùng trực tiếp trong thiết kế mà không cần mô tả bằng chữ.

3.2. Chọn phong cách thiết kế với Styles

Thay vì phải tả màu sắc, font chữ, vibe thiết kế bằng lời, bạn có thể dùng tính năng Styles để Pencil tự điền “ngôn ngữ thiết kế” vào prompt cho bạn.

Nhấn vào Styles ở thanh dưới màn hình → một màn hình grid hiện ra với nhiều style template có sẵn, mỗi cái đều có preview trực quan. Chọn một style bạn thích – Pencil sẽ tự động điền mô tả style đó vào ô nhập lệnh, ví dụ:

“Use the following style: Zigzag Bold Split — headings: Funnel Sans, body: Inter, colorPalette: Forest Sage, roundness: Basic Roundness, elevation: Gentle Lift…”

Bạn chỉ cần thêm yêu cầu thiết kế vào phía sau rồi nhấn Enter như bình thường. Toàn bộ màu sắc, font chữ, và cảm giác thị giác sẽ tự động nhất quán theo style đó.

3.3. Chọn model AI

Pencil không giới hạn bạn chỉ dùng Claude. Ở góc dưới bên trái màn hình, có một dropdown cho phép bạn chọn model AI sẽ xử lý yêu cầu thiết kế – bao gồm các model từ Anthropic, Google, và OpenAI.

Với hầu hết nhu cầu thông thường, Claude Sonnet là lựa chọn cân bằng tốt giữa chất lượng và tốc độ. Nếu yêu cầu phức tạp hơn, bạn có thể thử Claude Opus. Nhưng lưu ý rằng model càng mạnh thì chi phí token cũng cao hơn.

3.4. Tăng tốc với nhiều AI agent làm song song

Khi bạn gửi một yêu cầu phức tạp, bạn có thể tăng số agent chạy song song bằng icon ⚡ ở thanh dưới – chọn 1x, 2x, 3x… đến 6x. Pencil sẽ chia công việc ra và xử lý nhiều phần cùng lúc, giống như thuê nhiều designer làm việc cùng một lúc.

Khi đang chạy, bạn sẽ thấy chỉ số x/x agents running ở panel bên trái – ví dụ “2/2 agents running”.

Lưu ý: Càng nhiều agent thì tốc độ càng nhanh, nhưng chi phí sử dụng Claude cũng tăng theo. Với dự án nhỏ hoặc khi mới bắt đầu, 1x là đủ.

3.5. Thử nghiệm nhiều phiên bản cùng lúc

Nếu bạn chưa chắc muốn thiết kế theo hướng nào, có thể nhờ Pencil tự sinh ra nhiều phiên bản để so sánh.

Nhấn vào Let it cook ở thanh dưới → chọn tab Layout hoặc Style → chọn số Variants (2, 3, 4…). Pencil sẽ tạo ra nhiều phiên bản thiết kế song song, mỗi cái theo một hướng khác nhau, rồi hiển thị cạnh nhau trên canvas để bạn chọn cái ưng nhất.

• Layout variants: thử nghiệm các cách sắp xếp bố cục khác nhau
• Style variants: thử nghiệm các phong cách visual khác nhau với cùng một bố cục

3.6. Lưu file thiết kế

Bạn có thể lưu file bằng cách ấn phím tắt sau:

• Mac: Cmd + Shift + S
• Windows: Ctrl + Shift + S

Đặt tên file theo định dạng Pencil, ví dụ: ZTOLabs.pen.

3.7. Tạo file thiết kế mới

Để bắt đầu một canvas mới, di trỏ chuột đến góc trên bên trái màn hình, chọn File → New File. Pencil sẽ mở ra một canvas trắng để bạn thiết kế từ đầu.

Các file đã tạo trước đó vẫn được giữ nguyên – bạn có thể chuyển qua lại giữa các file bất kỳ lúc nào.

Lời kết

Pencil không thay thế kỹ năng thiết kế. Công cụ này giúp những người không có kỹ năng đó vẫn tạo ra được bản thiết kế đủ tốt để làm việc với AI. Khi đã có file .pen, Claude Code có thể đọc và build thành giao diện thực tế mà không cần bạn giải thích thêm gì.

Nhưng cụ thể làm như thế nào? Trong những bài viết sau, ZTO Labs sẽ hướng dẫn chi tiết cách chuyển bản thiết kế trong Pencil thành một trang web chạy được thật sự, không cần viết một dòng code nào.

Mỗi bài viết là một bước trong hành trình xây dựng sản phẩm bằng AI, không cần nền tảng kỹ thuật từ trước. Hãy theo dõi blog của ZTO Labs để không bỏ lỡ bước nào nhé!

Nếu bạn muốn tìm hiểu thêm về cách ứng dụng AI vào công việc hàng ngày, hãy khám phá các chương trình đào tạo của ZTO Labs tại https://www.ztolabs.com/programs.html