pen.dev Đang hoạt động

pen.dev là canvas thiết kế chạy trong môi trường lập trình, nơi nhà phát triển có thể tạo giao diện sản phẩm, khám phá luồng trang và duy trì mối liên kết giữa thiết kế với mã. Tệp thiết kế được lưu trong kho mã dưới định dạng .pen, có thể sử dụng Git để quản lý phiên bản, nhánh và hợp nhất, đồng thời chuyển đổi thiết kế thành HTML, CSS hoặc React. Công cụ cũng hỗ trợ đọc và ghi canvas thông qua MCP.

Nhà phát triển frontend

Thiết kế trang và thành phần trực tiếp trong IDE, sau đó chuyển kết quả thiết kế thành HTML, CSS hoặc React để giảm việc chuyển đổi giữa công cụ thiết kế và môi trường mã.

Nhà phát triển sử dụng công cụ lập trình AI

Gọi các khả năng của canvas thông qua Cursor, VSCode, Claude Code hoặc OpenAI Codex để tạo giao diện hoặc khám phá song song nhiều hướng thiết kế.

Đội ngũ phát triển có hệ thống thiết kế

Kết nối hệ thống thiết kế hiện có trong kho mã với canvas, xây dựng giao diện bằng bộ thành phần thiết kế và duy trì tính nhất quán giữa thiết kế với triển khai.

Canvas thiết kế không giới hạn

Tạo và điều chỉnh giao diện sản phẩm trong IDE, hỗ trợ định vị đến từng pixel để thiết kế và mã luôn nằm trong cùng môi trường làm việc liền mạch.

Tạo trang và luồng bằng AI

Sử dụng lời nhắc để tạo trang hoàn chỉnh hoặc toàn bộ luồng giao diện, đồng thời cho phép nhiều trợ lý AI khám phá song song các hướng thiết kế khác nhau.

Thao tác thiết kế theo ngữ cảnh

Nhập yêu cầu cho toàn bộ màn hình hoặc một khu vực cụ thể, sử dụng thao tác cài sẵn để điều chỉnh nhanh hoặc tự viết thao tác tùy chỉnh từ đầu.

Chuyển thiết kế thành mã frontend

Chuyển thiết kế trong canvas thành HTML, CSS hoặc React, giúp nhà phát triển tiếp tục biến phương án hình ảnh thành ứng dụng có thể sử dụng.

Quản lý phiên bản tệp thiết kế

Lưu nội dung thiết kế trong tệp .pen và đưa vào kho mã, cho phép sử dụng Git để quản lý phiên bản, nhánh và hợp nhất như với mã phát triển.

Nhập thiết kế Figma

Sao chép và dán trực tiếp thiết kế Figma để đưa vector, văn bản và kiểu vào pen.dev và tiếp tục chỉnh sửa.

Thao tác canvas hai chiều qua MCP

Đọc và ghi canvas thiết kế thông qua MCP, đồng thời kết nối với cơ sở dữ liệu, API, dữ liệu biểu đồ hoặc các nguồn bên ngoài như Playwright và Puppeteer.

Tệp thiết kế nằm trong kho mã

Thiết kế không bị tách biệt trong một công cụ độc lập mà được lưu dưới dạng tệp trong kho dự án, có thể quản lý phiên bản cùng với mã.

Định dạng tệp mở

Tệp thiết kế có thể được đọc, gỡ lỗi và mở rộng. Nhà phát triển có thể sử dụng công cụ của riêng mình để xử lý tệp thay vì phụ thuộc vào định dạng hộp đen.

Khả năng MCP hai chiều

Ngoài việc đọc thông tin canvas, pen.dev còn cung cấp đầy đủ quyền ghi, cho phép MCP bên ngoài, nguồn dữ liệu và các tác nhân khác tham gia thao tác canvas.

Làm việc đồng thời trên thiết kế và mã

Đưa canvas thiết kế đến từng pixel vào môi trường lập trình, giúp nhà phát triển chuyển đổi nhanh giữa thiết kế và triển khai, giảm quy trình bàn giao thiết kế truyền thống.

• Trang chủ chính thức: pen.dev – Design on canvas. Land in code.
• Trang giá chính thức: pen.dev – Design on canvas. Land in code.