Trình tạo DESIGN.md

Tạo DESIGN.md từ một trang web đang hoạt động. Nhập URL của trang, trình tạo sẽ dựng tệp mà agent lập trình của bạn đọc: token màu sắc, typography, khoảng cách và component, cùng các quy tắc sử dụng chúng. Mới làm quen với định dạng này? Hãy đọc DESIGN.md là gì.

Trình tạo dựng DESIGN.md như thế nào

  1. Nhập URL trang web

    Trang công khai nào cũng được: trang marketing, trang tài liệu hay trang đích của một ứng dụng web. Hãy đăng ký trước; mỗi lượt chạy tiêu tốn credit từ một gói trả trước.

  2. Trình tạo đọc trang web

    Trình tạo mở trang web trong một trình duyệt thật và đo màu sắc, font, khoảng cách, bo góc và component mà trang thực sự sử dụng. Một lượt chạy Pro lấy mẫu khoảng năm trang của trang web. Mỗi lượt chạy mất ít nhất một phút.

  3. Bạn nhận được DESIGN.md

    Token nằm trong front matter YAML, các quy tắc sử dụng nằm trong phần markdown: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components và Do's and Don'ts. Sao chép, tải xuống hoặc chỉnh sửa trong Lượt trích xuất của tôi.

Kết quả mẫu: DESIGN.md của Anthropic

Một đoạn trích từ tệp mà trình tạo đã tạo từ anthropic.com, rút gọn còn vài token mỗi nhóm và phần đầu của mục Overview. Tệp đầy đủ còn bao gồm layout, elevation, shapes, components và do’s and don’ts.

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

Xem toàn bộ DESIGN.md của AnthropicXem thêm mẫu DESIGN.md

FAQ

Câu hỏi về trình tạo DESIGN.md

Trình tạo tạo ra gì, chi phí bao nhiêu và cách dùng tệp với agent lập trình của bạn.

Một tệp DESIGN.md tuân theo đặc tả DESIGN.md của Google. Phần front matter YAML chứa các token màu sắc, typography, khoảng cách, bo góc và component của trang web. Phần thân markdown giải thích cách sử dụng chúng theo từng mục, để agent lập trình có thể dựng giao diện mới khớp với trang web.

Không thể với trình tạo: nó dựng tệp từ một trang web công khai đang hoạt động. Nếu bạn thiết kế từ đầu, hãy tự viết DESIGN.md theo đặc tả và kiểm tra cấu trúc cùng token bằng Trình kiểm tra DESIGN.md miễn phí.

Bất kỳ trang web công khai nào truy cập được qua HTTP hoặc HTTPS, kể cả trang tĩnh, ứng dụng một trang và trang được render phía máy chủ. Các trang cần đăng nhập, trên localhost hoặc trong mạng riêng không được hỗ trợ, và một số trang web chặn trình duyệt tự động.

Bạn đăng ký và mua một gói credit trả trước, từ 5 US$ cho 50 credit. Không có thuê bao và credit không bao giờ hết hạn. Mỗi lượt chạy tiêu tốn credit, và trang bảng giá hiển thị chi phí hiện tại cho mỗi lượt chạy. Nếu lượt chạy thất bại do lỗi từ phía chúng tôi, credit sẽ được hoàn lại.

Lưu tệp với tên DESIGN.md trong thư mục gốc của dự án hoặc thư mục docs và nhắc đến nó trong prompt. Claude Code, Cursor, GitHub Copilot, Windsurf và các agent khác có quyền truy cập tệp sẽ đọc nó làm tham chiếu style. Agent cũng có thể tự chạy trình tạo qua máy chủ MCP của Design Extractor.

Có. Mọi tệp DESIGN.md bạn tạo đều được lưu trong Lượt trích xuất của tôi, nơi bạn có thể chỉnh sửa, tải xuống lại hoặc trích xuất lại trang web sau này. Đây là văn bản thuần, nên bạn cũng có thể chỉnh sửa nó trong trình soạn thảo của riêng bạn.