DESIGN.md oluşturucu

Canlı bir web sitesinden DESIGN.md oluştur. URL'sini gir, oluşturucu kodlama ajanının okuyacağı dosyayı hazırlar: renk, tipografi, boşluk ve bileşen token'ları ile bunların kullanım kuralları. Bu formatı ilk kez mi duyuyorsun? DESIGN.md'nin ne olduğunu oku.

Oluşturucu bir DESIGN.md'yi nasıl hazırlar

  1. Bir web sitesi URL'si gir

    Herkese açık her sayfa olur: bir tanıtım sitesi, bir doküman sitesi ya da bir web uygulamasının açılış sayfası. Önce kaydol; her çıkarma, önceden satın alınmış bir paketten kredi harcar.

  2. Oluşturucu siteyi okur

    Siteyi gerçek bir tarayıcıda açar ve gerçekten kullandığı renkleri, fontları, boşlukları, köşe yarıçaplarını ve bileşenleri ölçer. Bir Pro çıkarma, sitenin yaklaşık beş sayfasını örnekler. Her çıkarma en az bir dakika sürer.

  3. Bir DESIGN.md alırsın

    Token'lar YAML frontmatter'a, kullanım kuralları ise Markdown'a yazılır: Overview, Colors, Typography, Layout, Elevation and Depth, Shapes, Components ve Do's and Don'ts. Dosyayı kopyala, indir ya da Çıkarmalarım sayfasında düzenle.

Örnek çıktı: Anthropic'in DESIGN.md dosyası

Oluşturucunun anthropic.com'dan hazırladığı dosyadan bir kesit: her gruptan birkaç token ve Overview bölümünün başı. Tam dosya ayrıca layout, elevation, shapes, components ve do's and don'ts bölümlerini de kapsar.

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.

Anthropic DESIGN.md dosyasının tamamını görDaha fazla DESIGN.md örneğine göz at

SSS

DESIGN.md oluşturucu hakkında sorular

Oluşturucunun ne ürettiği, ne kadar tuttuğu ve dosyayı kodlama ajanınla nasıl kullanacağın.

Google'ın DESIGN.md spesifikasyonuna uyan tek bir DESIGN.md dosyası. YAML frontmatter, sitenin renk, tipografi, boşluk, köşe yarıçapı ve bileşen token'larını içerir. Markdown gövdesi bunların nasıl kullanılacağını bölüm bölüm anlatır; böylece bir kodlama ajanı siteyle uyumlu yeni arayüzler oluşturabilir.

Oluşturucuyla hayır: dosyayı canlı, herkese açık bir web sitesinden hazırlar. Sıfırdan tasarlıyorsan DESIGN.md'yi spesifikasyona göre elle yaz, yapısını ve token'larını ücretsiz DESIGN.md doğrulayıcı ile kontrol et.

HTTP veya HTTPS üzerinden erişilebilen her herkese açık web sitesini; statik siteler, tek sayfalı uygulamalar ve sunucu tarafında oluşturulan sayfalar dahil. Giriş gerektiren sayfalar, localhost'taki ya da özel bir ağdaki sayfalar desteklenmez ve bazı siteler otomatik tarayıcıları engeller.

Kaydolur ve ön ödemeli bir kredi paketi satın alırsın; paketler 50 kredi için $5 fiyatından başlar. Abonelik yoktur ve kredilerin süresi dolmaz. Her çıkarma kredi harcar; çıkarma başına güncel maliyet fiyatlandırma sayfasında yazar. Bir çıkarma bizim tarafımızda başarısız olursa krediler iade edilir.

Dosyayı projenin kök dizinine veya docs klasörüne DESIGN.md olarak kaydet ve prompt'unda ondan bahset. Claude Code, Cursor, GitHub Copilot, Windsurf ve dosya erişimi olan diğer ajanlar onu stil referansı olarak okur. Ajanlar, Design Extractor MCP sunucusu üzerinden oluşturucuyu kendileri de çalıştırabilir.

Evet. Oluşturduğun her DESIGN.md, Çıkarmalarım sayfasına kaydedilir; orada düzenleyebilir, yeniden indirebilir ya da siteyi daha sonra yeniden çıkarabilirsin. Düz metin olduğu için kendi editöründe de düzenleyebilirsin.