Pencil MCP: Tasarımlar Anında Koda Dönüşüyor, Frontend Geliştirme Verimliliği 8 Kat Artıyor

Herkese merhaba, ben denizaşırı ürünler geliştiren Liang Xiao. Yılbaşı yaklaşıyor, yıl bitmeden sizinle son keşiflerimi paylaşmak istedim.

Web siteleri veya uygulamalar geliştirirken hiç şöyle hissettiniz mi:

Güzel bir sayfa yapmak istiyorum ama tasarım yeteneğim yok Tasarımcı bulmak çok pahalı, ücretsiz şablonlar da uygun değil Zor bela bir tasarım elde ettim, onu koda dönüştürmek de bir sürü sorun çıkarıyor Doğrusunu söylemek gerekirse, daha önce frontend projelerinde tasarım üzerinden stil ayarlamak bile yarım günümü alıyordu. 2px'lik boşluk farkı, yanlış renk, yuvarlak köşeleri unutmak... Tekrar tekrar, sinir bozucu.

İyi haber şu ki: Artık Pencil adında bir MCP var ve bu sorunların çoğu çözülebiliyor.

Son zamanlarda birkaç sayfa geliştirmek için kullandım ve gerçekten çok iyi olduğunu fark ettim - tasarımdan koda geçişte verimlilik birkaç kat arttı. Ve en önemlisi, AI'nın oluşturduğu tasarımların kalitesi de fena değil, kodun aslına uygunluğu da yüksek.

Bu makalede şunları ele alacağız: Pencil tam olarak nedir, neden kullanmaya değer ve nasıl hızlıca başlanır.

01. Pencil Nedir? Basit Bir Dille Anlatalım

Basitçe söylemek gerekirse, Pencil tasarım ve kodu bir araya getirebilen bir araçtır.

Eski iş akışı şöyleydi:

Figma'da tasarım oluştur Tasarımcı boyutları, renkleri, boşlukları işaretler Geliştirici tasarıma bakarak satır satır kod yazar Yazdıktan sonra tasarımla karşılaştır, aslına uygunluk sadece %70-80 Tekrar tekrar ayarlamalar, iletişim...

Pencil'ın çözümü şöyle:

Sadece doğal dilde gereksinimleri tanımlamanız yeterli (örneğin, "Bana Apple tarzı bir müzik çalar tasarla"), AI doğrudan tuval üzerinde bir tasarım oluşturabilir ve ardından tek tıklamayla karşılık gelen kodu oluşturabilir (Next.js, Flutter, Vue vb. desteklenir).

Ve işin garibi, tasarım yaparken ayarlamalar yapabilirsiniz. Örneğin:

"Çok fazla mor var, biraz yeşille değiştir" "Boşluk biraz daha büyük olsun" "Bu web sitesinin stilini referans al" AI, tasarım ve kodu gerçek zamanlı olarak ayarlamanıza yardımcı olur, kendiniz hiçbir şey yapmanıza gerek kalmaz.

02. Neden Pencil'ı Kullanmaya Değer Buluyorum?

1) Verimlilik Gerçekten Yüksek

Geleneksel yöntemlerle bir sayfanın tasarımını yapmak 4-6 saat sürebilir. Pencil ile 20-40 dakikada halledebilirsiniz.

Ve kodun aslına uygunluğu %98+'e kadar çıkabiliyor, neredeyse hiç stil ayarlamanıza gerek kalmıyor.

Kendim denedim, basit bir Landing Page'i tasarımdan koda kadar her şeyi halletmek yaklaşık yarım saatimi aldı.

2) Tasarım Kalitesi İstikrarlı

Daha önce AI ile tasarım oluştururken sık sık şu sorunlarla karşılaşıyorduk:

Renk uyumu yok Boşluklar karmakarışık Yazı tipi boyutları tutarsız

Pencil'ın arkasında bir tasarım sistemi ve estetik standartlar var, bu nedenle oluşturulan tasarımların kalitesi daha istikrarlı. Mükemmel olmayabilir, ama en azından çok çirkin olmayacak.

3) Birden Fazla Teknoloji Yığınını Destekler

Next.js, Flutter, Vue veya SwiftUI kullanıyor olmanız fark etmez, Pencil otomatik olarak karşılık gelen kodu oluşturabilir.

Bu, benim gibi çoklu platform geliştirme yapan kişiler için gerçekten çok uygun - tek bir tasarım, birden fazla platform için kodun tamamı hazır.

03. Pencil Nasıl Kurulur ve Kullanılır?

Aşağıda kendi kurulum ve kullanım sürecimi paylaşıyorum, şu anda en basit yöntem bu olmalı.

İlk Adım: Pencil MCP'yi Kurun

Doğrudan IDE'nizde (VS Code, Cursor vb.) "pencil" araması yapın

Sadece tıklayıp kurun, başka yerlerden indirmeyin (korsan sürüm indirmekten kaçının)

Dikkat: Doğrudan IDE'de arama yapmak en güvenli yöntemdir.

İkinci Adım: AI'nın Yapılandırmanıza Yardımcı Olmasına İzin Verin

Kurduktan sonra nasıl yapılandırılır?

Doğrusunu söylemek gerekirse, başlangıçta ben de pek anlamadım. Sonradan en basit yolun AI'nın size yardımcı olmasını sağlamak olduğunu fark ettim.

AI programlama yardımcınızı (Claude Code veya Codex) açın ve ona şunu söyleyin:

Bu IDE'ye "pencil" adlı MCP'yi kurdum, lütfen Claude Code, Codex ve VS Code'umun bu MCP'yi kullanabilmesi için yapılandırmama yardımcı ol.

Ardından yapılandırmanıza yardımcı olmasını bekleyin.

Üçüncü Adım: Pencil ile Tasarım Yapmaya Başlayın

Yapılandırdıktan sonra, IDE'nin sol tarafında bir kalem simgesi göreceksiniz, üzerine tıkladığınızda Pencil'ın tuvali açılır.

Ardından sağdaki AI sohbet kutusuna ne tür bir tasarım istediğinizi söyleyin.

Örneğin:

"Bana elma tarzı bir müzik çalar tasarla"

"Ana renk tonu mavi olan sade bir Landing Page yap"

"Bu web sitesinin tarzına bakarak benzer bir tane yap"

AI, tasarım taslaklarını tuval üzerinde oluşturacaktır. Memnun kalmazsanız, ayarlamaya devam etmesini sağlayabilirsiniz:

"Yazı tipi çok küçük, biraz büyüt"

"Boşlukları biraz daha artır"

"Daha yumuşak bir renk kullan"

Memnun kalana kadar ayarlamaya devam edin.

Dördüncü Adım: Kod Oluşturma

Tasarım taslağı tamamlandıktan sonra, AI'nın sizin için kod oluşturmasını sağlayabilirsiniz.

Doğrudan şunu söyleyebilirsiniz:

"Bana Next.js kodu oluştur"

"Flutter kodu oluştur"

"Vue 3 kodu oluştur"

AI, tasarım taslağınıza göre otomatik olarak ilgili kodu oluşturacaktır.

Gerçek efekt:

04. Bazı Gerçek Kullanım Deneyimleri

Birkaç kez kullandıktan sonra, paylaşmak istediğim birkaç his var:

1) İhtiyaçları Belirli Bir Şekilde Tanımlayın

Başlangıçta "Bana bir web sitesi yap" derdim ve sonuç olarak AI'nın ürettiği şey istediğim şey değildi.

Sonradan fark ettim ki, açıklama ne kadar spesifik olursa, sonuç o kadar iyi oluyor.

Örneğin:

Kötü açıklama: "Bana bir giriş sayfası yap"

İyi açıklama: "Bana üstte bir Logo, ortada e-posta ve şifre giriş kutuları, altta bir giriş düğmesi olan ve tarzı Apple'ın resmi web sitesine benzeyen sade bir giriş sayfası yap"

2) Referans Resimleri Yüklenebilir

Bir web sitesinin tasarımını beğendiyseniz, ekran görüntüsünü AI'ya yükleyebilir ve ona referans almasını söyleyebilirsiniz.

Bu şekilde oluşturulan tasarım taslağı beklentilerinize daha yakın olacaktır.

3) Yineleme, Tek Seferde Mükemmel Olmaktan Daha Önemlidir

Tek seferde mükemmel bir tasarım oluşturmayı beklemeyin, bu gerçekçi değil.

Doğru yaklaşım şudur: Önce kabaca bir tane oluşturun, sonra yavaş yavaş ayarlayın.

Her seferinde yalnızca bir veya iki şeyi ayarlayın, örneğin "boşlukları biraz daha artır" "rengi biraz daha yumuşat", bu şekilde verimlilik en yüksek olur.

4) Kod Kalitesi Fena Değil

Birkaç kez denedim ve oluşturulan kodun kalitesi oldukça yüksek:

Kod yapısı açık

Stil geri yükleme oranı yüksek (%98+)

Responsive düzen de iyi yapılmış

Temel olarak alıp biraz değiştirerek kullanabilirsiniz.

05. Dikkat Edilmesi Gereken Birkaç Nokta

Pencil kullanımı kolay olsa da, dikkat edilmesi gereken bazı noktalar vardır:

1) Estetik Hala Size Bağlı

AI, tasarım taslakları oluşturmanıza yardımcı olabilir, ancak iyi olup olmadığını kendiniz değerlendirmeniz gerekir.

Bu nedenle, genellikle iyi tasarımlara bakın, estetiğinizi geliştirin, böylece Pencil'ı kullanırken daha iyi rehberlik sağlayabilirsiniz.

Tasarım referansları bulmak için birkaç yer önerilir:

Dribbble

Mobbin (mobil UI toplamak için özel)

Çeşitli mükemmel web sitelerinin ekran görüntüleri

2) Karmaşık Etkileşimler Hala Kendiniz Yazılmalı

Pencil, statik sayfalar ve normal etkileşimler yapmak için uygundur, ancak karmaşık animasyonlar, hareketler vb. söz konusu olduğunda, kodu kendiniz yazmanız gerekir.

Ancak çoğu senaryo için Pencil zaten yeterli.

3) Doğru AI Modelini Seçmek Önemlidir

Birkaç modeli denedim ve Claude Opus 4.5'in görsel performansının en iyi olduğunu gördüm.

Diğer modelleri kullanırsanız, oluşturulan tasarım taslağının kalitesi biraz daha düşük olabilir.

06. Verimlilik Karşılaştırma Verileri

Son olarak, kendim tarafından test edilen bir veri kümesini paylaşacağım:

Benim için en büyük değer şudur: Enerjiyi "nasıl uygulanır"dan "hangi işlevler yapılır"a kaydırmak.

07. Özet

Pencil temelde tasarımı ve geliştirmeyi bir araya getirerek, tüm süreci doğal dil ile yönlendirmenizi sağlar.

Ön uç geliştirme yapıyorsanız, kendi ürünlerinizi yapıyorsanız, Pencil'ı denemenizi şiddetle tavsiye ederim:Kararlı Kod Kalitesi: %98+ Doğruluk, Temel Olarak Stil Ayarlamaya Gerek Yok

Çoklu Teknoloji Yığınlarını Destekler: Next.js, Flutter, Vue vb. Hepsi Kullanılabilir

Doğal Dil Odaklı: İhtiyaçları İnsan Dilinde Açıklayın, AI Otomatik Olarak Oluştursun

Son olarak, eğer siz de bağımsız geliştirme, AI programlama yapıyorsanız, yorumlarda sohbet etmeye hoş geldiniz:

Tasarımı genellikle nasıl yapıyorsunuz?

Pencil'ı kullandınız mı? Etkisi nasıl?

Tüm yorumları dikkatlice okuyacağım. Bir sonraki yazıda görüşmek üzere.