Tài liệu

Design Extractor hoạt động thế nào

Dán một URL, nhận một bản đặc tả thiết kế có cấu trúc. Màu sắc, kiểu chữ, khoảng cách và component nằm trong một DESIGN.md mà bạn có thể thả vào repo.

DESIGN.md là gì?

DESIGN.md là tài liệu hệ thống thiết kế dạng văn bản thuần mà cả con người lẫn agent AI đều đọc được. Hãy xem nó là phiên bản thiết kế của AGENTS.md. Nếu AGENTS.md cho agent biết cách xây dựng dự án, thì DESIGN.md cho agent biết dự án trông và tạo cảm giác ra sao.

Bên dưới, mỗi DESIGN.md có hai lớp: front matter YAML chứa design token mà máy đọc được, và phần thân markdown giải thích lý do đằng sau thiết kế. Token cho agent giá trị chính xác. Phần văn bản cho agent biết vì sao có những giá trị đó.

Đọc toàn bộ đặc tả DESIGN.md ->

Các mục chuẩn

  • Overview
  • Colors
  • Typography
  • Layout
  • Elevation & Depth
  • Shapes
  • Components
  • Do's and Don'ts

Cách hoạt động

  1. Đầu vào

    Dán một URL công khai (ví dụ design-extractor.com).

  2. Trích xuất

    Hệ thống thu thập trang và phân tích các thuộc tính trực quan: màu sắc, kiểu chữ, khoảng cách, mẫu component và ngôn ngữ thiết kế tổng thể.

  3. Kết quả

    Một DESIGN.md gồm:

    • Tổng quan và hướng dẫn phong cách thương hiệu
    • Bảng màu với các token được đặt tên
    • Các cấp kiểu chữ và thuộc tính font
    • Token bố cục, khoảng cách và hình dạng
    • Hướng dẫn component và tham chiếu token
    • Những điều nên và không nên làm, đóng vai trò rào chắn thiết kế

Kết quả

Mỗi lượt trích xuất tạo ra một DESIGN.md.

Markdown

  • DESIGN.md. Định dạng DESIGN.md chuẩn do Google Stitch giới thiệu. Thả nó vào bất kỳ repo nào để agent AI sử dụng.

Tiện ích mở rộng Chrome

Trích xuất trang trong tab hiện tại mà không cần quay lại đây. Tiện ích dùng lại phiên đăng nhập của bạn trên trang web và trừ cùng số credit. Xem cách tiện ích hoạt động ->

Điểm mấu chốt

Agent AI tạo ra thiết kế tốt hơn khi có cả token chính xác lẫn phần giải thích mà con người đọc được. Front matter YAML cho giá trị chính xác. Phần thân markdown giải thích cách dùng các giá trị đó trong thực tế.

Sẵn sàng thử chưa?

Lấy DESIGN.md từ bất kỳ URL công khai nào. Một lượt trích xuất mất ít nhất một phút.

Trích xuất trang web