DESIGN.md Generator

Buat DESIGN.md dari website live. Masukkan URL-nya dan generator menyusun file yang dibaca agen coding Anda: token warna, tipografi, spacing, dan komponen, beserta aturan pemakaiannya. Baru mengenal format ini? Baca apa itu DESIGN.md.

Cara generator menyusun DESIGN.md

  1. Masukkan URL website

    Halaman publik apa pun bisa: situs pemasaran, situs dokumentasi, atau landing page sebuah web app. Daftar terlebih dahulu; setiap ekstraksi memakai kredit dari paket prabayar.

  2. Generator membaca situsnya

    Generator membuka situs di browser sungguhan dan mengukur warna, font, spacing, radius sudut, dan komponen yang benar-benar dipakainya. Ekstraksi Pro mengambil sampel sekitar lima halaman dari situs. Setiap ekstraksi memakan waktu setidaknya satu menit.

  3. Anda mendapatkan DESIGN.md

    Token masuk ke front matter YAML, aturan pemakaiannya ke markdown: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components, dan Do's and Don'ts. Salin, unduh, atau edit di Ekstraksi saya.

Contoh hasil: DESIGN.md Anthropic

Cuplikan file yang dibuat generator dari anthropic.com, dipotong menjadi beberapa token per grup dan awal bagian Overview. File lengkapnya juga mencakup bagian Layout, Elevation, Shapes, Components, serta 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.

Lihat DESIGN.md Anthropic lengkapJelajahi contoh DESIGN.md lainnya

FAQ

Pertanyaan tentang DESIGN.md generator

Apa yang dibuat generator, berapa biayanya, dan cara memakai file-nya dengan agen coding Anda.

Satu file DESIGN.md yang mengikuti spesifikasi DESIGN.md dari Google. Front matter YAML berisi token warna, tipografi, spacing, radius sudut, dan komponen situs. Isi markdown-nya menjelaskan cara memakainya, bagian demi bagian, sehingga agen coding bisa membangun UI baru yang sesuai dengan situs tersebut.

Tidak dengan generator ini: generator menyusun file dari website live yang publik. Jika Anda mendesain dari nol, tulis DESIGN.md secara manual mengikuti spesifikasinya, lalu cek struktur dan token-nya dengan Validator DESIGN.md gratis.

Website publik apa pun yang bisa dijangkau lewat HTTP atau HTTPS, termasuk situs statis, single-page app, dan halaman yang dirender di server. Halaman di balik login, di localhost, atau di jaringan privat tidak didukung, dan beberapa situs memblokir browser otomatis.

Anda mendaftar dan membeli paket kredit prabayar, mulai dari US$5 untuk 50 kredit. Tidak ada langganan dan kredit tidak pernah kedaluwarsa. Setiap ekstraksi memakai kredit, dan halaman harga menampilkan biaya terkini per ekstraksi. Jika ekstraksi gagal karena kendala di sisi kami, kreditnya dikembalikan.

Simpan sebagai DESIGN.md di root proyek atau folder docs Anda, lalu sebutkan di prompt. Claude Code, Cursor, GitHub Copilot, Windsurf, dan agen lain yang punya akses file membacanya sebagai acuan gaya. Agen juga bisa menjalankan generator sendiri melalui server MCP Design Extractor.

Bisa. Setiap DESIGN.md yang Anda buat tersimpan di Ekstraksi saya, tempat Anda bisa mengeditnya, mengunduhnya lagi, atau mengekstrak ulang situsnya nanti. File ini berupa teks biasa, jadi Anda juga bisa mengeditnya di editor Anda sendiri.