Motif'i yapay zekâyla kullan

Ne işe yarar

Linki okur

Araç, değişen ayarlar, seed, tuval boyu ve kartela kodu.

Ayarı değiştirir

Tek bir alan, hazır ayar, Rastgele, varyasyon ya da palet.

Dosya çizer

PNG, SVG, CSS ve kod; hepsi tek bir klasöre yazılır.

Yeni link verir

Link editörde aynı eseri aynı kartela koduyla (GR‑3488) açar.

Açık editörü değiştirmez: yaptığı her şey bir link ve dosyalardır.

Kurulum

1. Sunucuyu derleyin

   Node 22 gerekir (22.12 ya da üstü). Motif'in deposunun kökünde:

   npm install
   npm run build:mcp

2. Uygulamanıza tanıtın

   Claude Code

   Deponun kökündeki .mcp.json sunucuyu zaten tanıtır; depoda bir oturum açmanız yeter. İlk oturumda /mcp listesinde onay bekleyen motif sunucusunu onaylayın.

   {
     "mcpServers": {
       "motif": {
         "type": "stdio",
         "command": "node",
         "args": ["mcp/dist/server.mjs"],
         "env": { "MOTIF_LINK_ROOT": "http://localhost:4310" }
       }
     }
   }

   Claude Desktop

   Bunu ~/Library/Application Support/Claude/claude_desktop_config.json dosyasına ekleyin. Desktop kabuğun yolunu görmez: iki yolu da kendinizinkiyle değiştirin (node'un yolu which node ile bulunur). Sonra Desktop'ı yeniden başlatın.

   {
     "mcpServers": {
       "motif": {
         "command": "/Users/<kullanıcı>/.nvm/versions/node/v22.14.0/bin/node",
         "args": ["/Users/<kullanıcı>/prs/motif/mcp/dist/server.mjs"],
         "env": { "MOTIF_LINK_ROOT": "http://localhost:4310" }
       }
     }
   }

   Codex

   Bunu kendi .codex/config.toml dosyanıza ekleyin: deponun kökünde ya da ~/.codex/config.toml'da. İkincisinde sunucunun yolunu tam yazın (/Users/<kullanıcı>/prs/motif/mcp/dist/server.mjs). Bu kurulum Codex'te henüz denenmedi.

   [mcp_servers.motif]
   command = "node"
   args = ["mcp/dist/server.mjs"]
   
   [mcp_servers.motif.env]
   MOTIF_LINK_ROOT = "http://localhost:4310"

3. Linkler için önizlemeyi açın

   Sunucunun verdiği linkler şimdilik yerel önizlemeye gider (localhost:4310):

   npm run build
   npm run preview

   Linkleri başka bir adrese yönlendirmek için MOTIF_LINK_ROOT değişkenini değiştirin.

Sekiz araç

Yapay zekâ bunları kendisi seçer; adlarını bilmeniz gerekmez. Örnek, aracın aldığı girdidir.

list_tools

Motif'in araçlarını, kartela öneklerini ve çıktılarını listeler.{ "locale": "en" }

get_schema

Bir aracın ayarlarını, değer biçimlerini ve hazır ayarlarını verir.{ "tool": "dither" }

read_link

Bir linki editörün açtığı gibi açar ve özetler.{ "link": "/tr/gradient?type=radial&angle=40" }

render

Bir linki ya da aracın boş hâlini açar, hazır ayarı ve ayarları uygular, dosyaları çizer.{ "tool": "mesh-gradient", "width": 1920, "height": 1080, "formats": ["png", "css"] }

randomize

Editörün Rastgele düğmesi; aynı seed aynı sonucu verir.{ "tool": "confetti", "seed": "v1" }

vary

Tuvaldeki zar: birkaç şekil alanını yeniden örnekler, renkler kalır.{ "tool": "blob", "seed": "a1" }

apply_palette

Bir paleti aracın kendi kuralıyla esere yazar; kilitli renkler kalır.{ "tool": "css-pattern", "palette": "cini-atolyesi" }

search_palettes

Motif'in palet kütüphanesinde ad, etiket ya da hex ile arar.{ "query": "çini", "limit": 3 }

Örnek istemler

Olduğu gibi yapıştırabilirsiniz. Linkler editörde aynı kartela koduyla açılır.

• Mesh gradyan üret, PNG ver.
• Bu linkteki grenin miktarını %20 yap: http://localhost:4310/tr/gradient?type=radial&angle=40&seed=k2m9xp
• Çini paletini CSS Desen'e uygula, CSS'ini ver.
• Konfeti'den üç varyasyon çiz.
• Bu Dither linkini GameBoy efektine çevir: http://localhost:4310/tr/dither?effect=halftone
• Ege hazır ayarlı mesh gradyan, 1920 × 1080, PNG ve SVG.

Sınırlar

• Video linkleri açılmaz: editörde videoyu kapatıp görselin linkini verin.
• Bilgisayarınızdan yüklediğiniz görseller sunucuya ulaşmaz; yalnız Motif'in örnek görselleri kullanılır.
• Dönüştürücü çizilmez, yalnız linki okunur.
• Tuval 16–8000 px, PNG ölçeği 1–4, PNG en çok 64 megapiksel.
• Büyük dosyalar birkaç saniye sürer: 3840 × 2160 @2x bir Mesh 7 saniye kadar.

Bağlanmazsa

/mcp'de motif onay bekliyor

Sunucuyu /mcp listesinden onaylayın.

Cannot find module …/mcp/dist/server.mjs

Sunucu derlenmemiş: npm run build:mcp.

Yeni bir araç ya da alan görünmüyor

npm run build:mcp, sonra sunucuyu yeniden bağlayın: Claude Code'da /mcp, Desktop'ta uygulamayı yeniden açarak.

Link açılmıyor

Önizleme kapalı: npm run build ve npm run preview.

Sunucu başka bir Node'la başlıyor

Motif Node 22 ister; node -v ile bakın. Desktop'ta command bu Node'un tam yolu olmalı.

Ayrıntılar, nasıl çizdiği ve geliştirici notları depodaki mcp/README.md dosyasında.