Chủ đề Thiết kế · Trí tuệ Apache-2.0 · Làm trên Trái Đất
Sao · 59.1KTải xuống
VI
Dành cho · Kỹ thuật

Từ đặc tả đến front-end, không bàn giao ở giữa

Hãy trỏ agent của bạn vào một DESIGN.md và một bản mô tả; nó viết mã front-end thật, đúng hệ thống — thành phần, màn hình, dashboard — ngay trong dự án của bạn. Không bản đánh dấu chỉnh sửa, không “chờ thiết kế.”

Star trên GitHub Tải ứng dụng desktop
Minh họa kiểu biên tập về một DESIGN.md chảy thẳng vào mã front-end và giao diện được kết xuất, bỏ qua bước bàn giao

Tóm lại một câu

Open Design khép lại khoảng cách từ nhà thiết kế đến kỹ sư bằng cách làm cho hệ thống thiết kế trở nên máy đọc được: chính agent viết mã của bạn cũng áp dụng hệ thống và kết xuất giao diện thật.

Cách một kỹ sư dùng Open Design

  1. 01

    Đọc hệ thống, không phải bản đánh dấu

    DESIGN.md nằm trong repo. Agent của bạn đọc nó theo cách nó đọc phần còn lại của mã nguồn — không có đặc tả xuất ra để diễn giải.

  2. 02

    Tạo giao diện đúng hệ thống

    Hãy mô tả màn hình hoặc thành phần; agent viết front-end vốn đã khớp với hệ thống. Prototype, dashboard quản trị, công cụ nội bộ — trong vài phút.

  3. 03

    Nó đã là mã của bạn rồi

    Đầu ra là HTML / mã framework trong repo của bạn, có thể xem xét trong một PR. Không có bước phiên dịch giữa “thiết kế” và “bản dựng.”

Những gì một kỹ sư có thể tạo ra

Front-end với Open Design so với cách bàn giao

Điều bạn cần Với Open Design Bàn giao từ thiết kế sang phát triển
Có một thiết kế để dựng từ đó ●Một DESIGN.md mà agent của bạn đọc trực tiếp Một tệp Figma mà bạn diễn giải lại bằng tay
Khớp với hệ thống ●Được thực thi tự động ngay lúc tạo Ước lượng bằng mắt so với đặc tả, sai lệch len lỏi vào
Dựng công cụ nội bộ / dashboard ●Câu lệnh → front-end đúng hệ thống trong repo Chờ một nhà thiết kế, rồi dựng nó hai lần
Xem xét ●Đó là mã — so sánh khác biệt trong một PR So sánh từng điểm ảnh với một bản mô phỏng
Chi phí & khóa nhà cung cấp ●Mã nguồn mở, trong repo của bạn, chạy cục bộ Một công cụ thiết kế mà cả đội phải mua bản quyền

Front-end thật, đúng hệ thống được tạo ra ngay trong repo. Hãy chọn một thứ gần với cái bạn đang dựng và mô tả nó.

Duyệt mẫu →

Câu hỏi thường gặp về kỹ thuật

  1. 01 Tôi vẫn cần một nhà thiết kế chứ?

    Cho thương hiệu và định hướng thì có. Nhưng để dựng giao diện đúng hệ thống và công cụ nội bộ, agent đọc DESIGN.md và viết front-end — không cần vòng bàn giao qua lại.

  2. 02 Nó tạo ra cái gì?

    Mã HTML / framework thật trong repo của bạn, có thể xem xét trong một PR — không phải một bản mô phỏng bạn phải dựng lại.

  3. 03 Làm sao nó giữ đúng hệ thống?

    DESIGN.md là nguồn chân lý; agent áp dụng nó ngay lúc tạo, nên đầu ra khớp mà không cần kiểm tra điểm ảnh thủ công.

  4. 04 Tôi có thể dùng những agent nào?

    Claude Code, Codex, Cursor Agent, Gemini CLI và nhiều adapter chính chủ khác, với khóa nhà cung cấp của riêng bạn.

Tạo giao diện tiếp theo của bạn ngay tối nay

Gắn sao cho repo, cài Open Design, và biến một DESIGN.md thành front-end — ngay trong agent bạn đang dùng.

Star trên GitHub Tải ứng dụng desktop
● Apache-2.0 Apache-2.0 · Làm trên Trái Đất · BYOK macOS · Windows · Linux