image-to-codeyazan Leonxlnx

Image to Code Skill.

Claude Code ve Codex için UI tasarım skill'i: önce bir tasarım görseli oluşturur ve analiz eder, ardından eşleşen sayfayı kodlar.

Web & UI
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

Leonxlnx/taste-skill · skills/image-to-code-skill/SKILL.mdSKILL.md

--- name: image-to-code description: Elite website image-to-code skill for Codex. For visually important web tasks, it must first generate the design image(s) itself, deeply analyze them, then implement the website to match them as closely as possible. In Codex, it must prefer large, readable, section-specific images instead of tiny compressed boards, generate fresh standalone images for sections or detail views instead of cropping old ones, avoid lazy … --- ## 1. ACTIVE BASELINE CONFIGURATION ## 2. MANDATORY IMAGE-FIRST RULE ## 3. GENERATE ENOUGH IMAGES RULE ## 4. CODEX-SPECIFIC SECTION IMAGE RULE ## 5. DO NOT CROP OLD IMAGES RULE ## 6. FRESH RE-GENERATION RULE

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam hâliyle 36.361 karakter

01 Ne yapar

Claude Code ve Codex'te image-to-code Skill'i Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Bu skill, görsel açıdan önemli web görevleri için zorunlu bir görsel-öncelikli iş akışı uygular. Ajan, herhangi bir kod yazmadan önce tasarım görsellerini kendisi oluşturmalı, ardından tipografiyi, boşluk düzenini, buton yapısını, renkleri ve düzen mantığını çıkarmak için bu görselleri derinlemesine analiz etmelidir. Codex'te, sıkıştırılmış çok bölümlü panolar yerine varsayılan olarak her bölüm için tek büyük, okunaklı bir görsel oluşturur ve bölümler veya detay görünümleri için kırpma yapmak yerine yeni, bağımsız görseller oluşturur.

İç içe kutu düzenlerinden, sahte UI etiketlerinden, küçük pillerden ve sıkışık hero bölümlerinden kesinlikle kaçınır. Hero, en fazla 1-3 satırlık başlıklarla sade kalmalıdır. Skill, bol boşluk kullanımını zorunlu kılar, görsel karmaşayı azaltır ve oluşturulan referanslara sadık kalan, jenerik kodlanmış düzenlere kaymayan bir frontend uygular.

Görsel oluşturma hizmetiUI kodu

Örnek istemi görün ↗

Nasıl Çalışır

01
Codex'te Ayrı Bölüm Görselleri Oluşturma
Codex içinde, skill birden fazla bölümü tek bir panoda sıkıştırmak yerine her bölüm için tek büyük, okunaklı bir görsel oluşturur.
02
Yeni Görseller Oluşturun, Asla Kırpmayın
Bir bölüm için özel bir görünüm gerektiğinde, skill önceden oluşturulmuş daha büyük bir görselden kırpma yapmak yerine aynı tasarım dilini koruyan yeni bir görsel oluşturur.
03
Oluşturulan Tüm Görselleri Derinlemesine Analiz Etme
Skill, uygulamadan önce her görselden tam görünür metni, tipografi ilişkilerini, boşluk mantığını, buton detaylarını, renk paletini, düzen yapısını ve bileşen stilini çıkarır.
04
Referanslarla Eşleşecek Şekilde Frontend Uygulama
Kod, analiz edilen tasarımı sadakatle çevirir; jenerik kalıplara kaymadan düzen mantığını, boşluk ritmini, bölüm sıralamasını, tipografi havasını ve bileşen stilini korur.

02 Uyumunuzu bulun

image-to-code Skill Ne Zaman Kullanılır

Bu tür UI tasarımı işlerinde Claude Code veya Codex'te image-to-code becerisini kullanın. Uygunluk ve sınırlamalar becerinin kendi dosyasından alınmıştır.

İyi Uyum

Görsel kalitenin önemli olduğu hero bölümleri, açılış sayfaları, pazarlama siteleri, startup siteleri ve editoryal marka sayfaları
Görsel zevkin ve uygulama sadakatinin merkezi olduğu premium çok bölümlü web siteleri ve yeniden tasarımlar

Sınırları Bilin

Görsel oluşturmanın gereksiz olduğu, tamamen teknik görevler, hata düzeltmeleri veya zaten kesin bir tasarım sistemi sağlayan talepler
Doğası itibarıyla görsel değil, esas olarak teknik olan yapısal görevler

Ne Sağlamalısınız

Bölüm sayısı veya site türüSkill, kaç görsel oluşturulacağını belirlemek için gereken bölüm sayısını veya web sitesinin türünü (yalnızca hero, 4 bölümlük açılış sayfası, 8 bölümlük site vb.) çıkarır.
Görsel yön veya stil tercihleri'Sade', 'çok yaratıcı', 'premium SaaS' veya 'editoryal' gibi kullanıcı istekleri, skill'in DESIGN_VARIANCE, ART_DIRECTION ve diğer temel yapılandırma parametrelerini yorumlamasına yön verir.

03 Skill'in içinde

image-to-code Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 6 somut talimat, varsayılan değer ve sınır — dosyanın sonucu değiştiren kısmı.

Görsel Oluşturma Önce Zorunludur
Görsel kalitenin önemli olduğu web sitesi tasarım taleplerinde, skill herhangi bir kod yazmadan önce tasarım görselleri oluşturmalıdır.
Hero Başlıkları En Fazla 1-3 Satır Kalır
Hero başlığı ideal olarak 1-3 satır içinde kalmalıdır. Başlık çok uzun hale gelirse, skill daha fazla satır zorlamak yerine kelime sayısını azaltmalıdır.
Kart içinde kart içinde kart olmasın
Skill, kartların daha büyük kartların içine, onların da dış kartların içine yerleştirildiği, iç içe geçmiş kutu düzenlerine ve dev yuvarlatılmış bölüm kapsayıcılarına varsayılan olarak yönelmemelidir.
Mikro-UI Karmaşasını Agresif Şekilde Azaltın
Skill, tasarımları gereksiz pillerle, sahte sistem işaretleriyle, uydurma kontrol etiketleriyle, kod benzeri süsleyici etiketlerle veya netliği artırmayan anlamsız küçük meta verilerle karmaşıklaştırmamalıdır.
Kalite İçin Yeterli Sayıda Görsel Üretin
Skill, tasarımı okunabilir ve çıkarılabilir kılmak için gerektiği kadar görsel üretmelidir. Çok az sıkıştırılmış görsel üretmek yerine, çok fazla net görsel üretmek daha iyidir.
İlk Ekran Küçük Dizüstü Bilgisayarlarda Temiz Olmalı
Hero ve ilk görünüm alanı küçük bir dizüstü bilgisayarda kullanılabilir ve temiz hissettirmelidir.

04 İşe koyun

Claude Code veya Codex'e image-to-code Kur

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

Claude Code, Codex veya Ajanınıza image-to-code Ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill image-to-code

skills/image-to-code-skill/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk UI Tasarım Görevini Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Design me an 8-section landing page for [AI startup name]. Keep the hero clean and readable, use separate images for each section so I can extract typography and spacing properly, and make sure the first screen feels premium on a small laptop. Avoid nested cards and fake system labels.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Görsel olarak önemli görevler için herhangi bir kod uygulamasından önce tasarım görsellerinin önce üretildiğini doğrulayın
Metnin okunabilir kaldığını doğrulayın; değilse, kırpma yapmak yerine ek detay görsellerinin veya yeni yeniden üretimlerin oluşturulduğunu kontrol edin
Yeterli sayıda görsel üretildiğini ve görsel sayısının kolaylık için tembelce azaltılmadığını kontrol edin
Hero'nun en fazla 1-3 satırlık başlıklarla temiz kaldığını ve küçük bir dizüstü bilgisayarda aşırı dolu hissettirmediğini doğrulayın
Gereksiz iç içe kutulamaların, işe yaramaz pillerin, etiketlerin ve sahte teknik mikro-öğelerin kaldırıldığını doğrulayın
Uygulanan kodun, genel kodlanmış düzenlere kaymadan üretilen referanslarla sadakatle eşleştiğini kontrol edin

OpenDesign içinde image-to-code'u SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: Leonxlnx
Repository: github.com/Leonxlnx/taste-skill Branch main
Skill dosyası: skills/image-to-code-skill/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit ccbc156
License: MIT LICENSE dosyasından.
Repository yıldızları: 86.946 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm Leonxlnx/taste-skill deposu için alındı; bu depoda katalogda bulunan 11 beceri var. image-to-code için bir derecelendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

ANA DİREKTİF: GÖRSEL ÖNCELİKLİ WEB SİTESİ TASARIMINDAN KODASkill'in görevini, uygulamaya elverişli premium web sitesi referansları üretmek ve bunları gerçek frontend'e dönüştürmek olarak tanımlar
AKTİF TEMEL YAPILANDIRMATasarım varyansı, görsel yoğunluk, sanat yönetimi, uygulama netliği ve diğer kontrol parametreleri için sayısal varsayılanları belirler
ZORUNLU GÖRSEL ÖNCELİK KURALIGörsel web sitesi görevleri için önce görsel üretimini gerektirir; kod, görsel analizden sonraki çeviri katmanıdır
YETERLİ GÖRSEL ÜRETME KURALIOkunabilirlik ve çıkarım için gereken kadar görsel üretmeyi talimatlandırır; kolaylık için görsel sayısını asla azaltmaz
CODEX'E ÖZEL BÖLÜM GÖRSELİ KURALICodex'te, birçok bölümü okunamaz tek bir panoya sıkıştırmak yerine bölüm başına bir büyük görsel tercih edin
ESKİ GÖRSELLERİ KIRPMAMA KURALIÖnceden üretilmiş daha büyük görsellerden kırpma veya dilimleme yapmak yerine bölüme özel yeni görseller üretin
YENİDEN ÜRETİM KURALIBir bölüm belirsizse, aynı görsel dili koruyarak yeni bağımsız bir görsel olarak yeniden üretin
İSTEĞE BAĞLI DETAY / ÇIKARIM GÖRSELİ KURALIÇıkarım kalitesi daha büyük metin veya daha net boşluk gerektirdiğinde bölümler için ek yakın detay görselleri oluşturun
DERİN GÖRSEL ANALİZ GEREKSİNİMİÜretilen görselleri tasarım şartnameleri olarak ele alın; uygulamadan önce metni, tipografiyi, boşlukları, düğmeleri, renkleri ve düzeni çıkarın
GÖRSEL ÖNCELİKLİ CODEX WEB SİTESİ İŞ AKIŞIYürütme sırasını tanımlar: bölüm görsellerini oluştur, derinlemesine analiz et, tasarım sistemini çıkar, frontend'i buna uyacak şekilde uygula
KOMBİNATORYAL VARYASYON MOTORUTema, arka plan, tipografi, hero mimarisi, bölüm sistemi ve imza bileşenler için görsel yön seçenekleri sunar
HERO SADELİK KURALLARIEn fazla 1-3 satırlık başlıklarla, karmaşadan uzak, küçük laptoplarda okunabilir, sinematik hero'ları zorunlu kılar

Skill'in Kendi Açıklaması

"Codex için elit web sitesi görsel-kodlama skill'i. Görsel olarak önemli web görevlerinde, önce tasarım görselini/görsellerini kendisi oluşturmalı, onları derinlemesine analiz etmeli, sonra web sitesini onlara mümkün olduğunca yakın şekilde uygulamalıdır. Codex'te küçük sıkıştırılmış panolar yerine büyük, okunabilir, bölüme özgü görseller tercih etmeli, eski görselleri kırpmak yerine bölümler veya detay görünümleri için yeni bağımsız görseller oluşturmalı, tembel yetersiz üretimden kaçınmalı, içiçe kartlar UI'dan kaçınmalı ve hero bölümünü temiz, ferah, okunabilir ve küçük bir dizüstü bilgisayarda görünür tutmalıdır."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 36.361 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

image-to-code Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bu skill'i hangi kodlama ajanıyla kullanmalıyım?

Bu skill Codex için tasarlanmıştır ve Codex'e özgü davranışlara açıkça atıfta bulunur. Codex içinde, sıkıştırılmış panolar yerine büyük, okunabilir, bölüme özgü görselleri tercih etmesi gerektiğini belirtir ve varsayılan olarak bölüm başına bir görsel üretir. Codex dışında daha kompakt, çok bölümlü kompozisyona izin verebilir.

Oluşturulan tasarım görseli belirsizse veya metin çok küçükse ne olur?

Skill, o bölüm için ek detay veya çıkarım görselleri oluşturmalı ya da bölümü yeni, bağımsız bir görsel olarak yeniden oluşturmalıdır.

Daha önce oluşturulmuş büyük bir görselden kesinlikle kırpma yapmamalıdır. Daha fazla görsel okunabilirliği veya çıkarım kalitesini artıracaksa, görsel sayısı konusunda tembellik etmek yerine daha fazla görsel üretir.

Image to Code

image-to-code becerisini gerçek bir UI tasarım görevinde çalıştırın.

OpenDesign'ı indirin, image-to-code'u SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın