redesign-existing-projectsyazan Leonxlnx

Redesign Existing Projects Skill.

Claude Code ve Codex için bir tasarım inceleme skill'i: mevcut bir web sitesini veya uygulamayı denetler ve premium görsel kaliteye yükseltir.

Tasarım İncelemesi & Erişilebilirlik
İnceleme raporu

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

Leonxlnx/taste-skill · skills/redesign-skill/SKILL.mdSKILL.md

--- name: redesign-existing-projects description: Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS. --- ## How This Works ## Design Audit ## Upgrade Techniques ## Fix Priority ## Rules

Ön bilgi ve bölüm başlıkları kaynak dosyadan 2026-09-14 tarihinde okundu · toplam 15.032 karakter

01 Ne yapar

redesign-existing-projects Skill'inin Claude Code ve Codex'te Yaptığı İşler

Ö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

Mevcut tasarımı denetleyerek, jenerik AI kalıplarını belirleyerek ve fonksiyonaliteyi bozmadan üst düzey tasarım standartları uygulayarak mevcut web sitelerini ve uygulamaları premium görsel kaliteye yükseltir. Herhangi bir CSS framework'ü veya vanilla CSS ile çalışır.

Skill, framework'ü ve stil yöntemini belirlemek için kod tabanını tarar, kapsamlı bir tasarım denetimiyle her jenerik kalıbı ve zayıf noktayı teşhis eder, ardından mevcut yığınla çalışarak hedefli yükseltmeler uygular. Değişiklikler; font değişimlerinden ve renk temizliğinden bileşen değişimine ve tipografi cilasına kadar görsel etki ve riske göre önceliklendirilir.

İnceleme raporu

Örnek istemi görün ↗

Nasıl Çalışır

01
Kod Tabanını Tara
Framework'ü, stil yöntemini (Tailwind, vanilla CSS, styled-components vb.) ve mevcut tasarım kalıplarını belirlemek için kod tabanını okuyun.
02
Jenerik Kalıpları Teşhis Et
Projede bulunan her jenerik kalıbı, zayıf noktayı ve eksik durumu listelemek için tasarım denetimini çalıştırın.
03
Hedefli Yükseltmelerle Düzelt
Sıfırdan yeniden yazmadan, mevcut yığınla çalışarak hedefli yükseltmeler uygulayın ve zaten var olanı geliştirin.

02 Uyumunuzu bulun

redesign-existing-projects Skill'i Ne Zaman Kullanmalı

Claude Code veya Codex'te iş bu tür bir tasarım incelemesi olduğunda redesign-existing-projects skill'ini kullanın. Uygunluk ve sınırlar aşağıda skill'in kendi dosyasından alınmıştır.

İyi Uyum

Premium kaliteye yükseltilmesi gereken mevcut web siteleri ve uygulamalar
Belirlenip değiştirilmesi gereken genel AI tasarım kalıplarına sahip projeler
Herhangi bir CSS çerçevesi (Tailwind, styled-components) veya sade CSS kullanan projeler

03 Skill'in içinde

redesign-existing-projects Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

Mevcut Teknoloji Yığınıyla Çalışın
Çerçeveleri veya stil kitaplıklarını taşımayın. Değişiklikleri mevcut kurulumla uyumlu tutun.
Her Değişiklikten Sonra Test Edin
Mevcut işlevselliği bozmayın. Projenin hâlâ çalıştığından emin olmak için her değişiklikten sonra test edin.
İçe Aktarmadan Önce Bağımlılıkları Kontrol Edin
Yeni bir kitaplığı içe aktarmadan önce, mevcutta ne olduğunu görmek için önce projenin bağımlılık dosyasını kontrol edin.
Tailwind Sürümünü Kontrol Edin
Proje Tailwind kullanıyorsa, yapılandırma dosyasını değiştirmeden önce v3 mü yoksa v4 mü olduğunu kontrol edin.
Çerçeve Yoksa Sade CSS Kullanın
Projede bir çerçeve yoksa, yeni bir stil sistemi getirmek yerine sade CSS kullanın.
Asla Lorem Ipsum Kullanmayın
Asla yer tutucu Latince metin kullanmayın. Genel yer tutucu içerik yerine gerçek taslak metin yazın.
Düzeltme Öncelik Sırasını Takip Edin
Değişiklikleri öncelik sırasına göre uygulayın: önce yazı tipi değişimi (en büyük anlık iyileştirme, en düşük risk), ardından renk temizliği, hover durumları, düzen, bileşen değişimi, durumlar ve en son tipografi cilası.
Değişiklikleri İncelenebilir Tutun
Değişiklikleri incelenebilir ve odaklı tutun. Büyük yeniden yazımlar yerine küçük, hedefli iyileştirmeler yapın.

04 İşe koyun

Claude Code veya Codex'te redesign-existing-projects yükleyin

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 redesign-existing-projects 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 redesign-existing-projects

skills/redesign-skill/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Beceriye İlk Tasarım İnceleme Görevi Verin

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

Starter prompt

Audit the design of my [React dashboard app] and upgrade it to premium quality. The project uses Tailwind CSS v3. Identify generic AI patterns like the purple gradient background, centered three-column feature cards, and browser default fonts. Replace them with high-end design standards while keeping all existing functionality working. Focus on typography, color palette cleanup, and adding proper hover states first.

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:

Proje genelinde tüm ikonların tutarlı kontur genişliklerine sahip olduğunu doğrulayın
Tüm görsellerin ekran okuyucular için açıklayıcı alt metni olduğunu kontrol edin

OpenDesign'da redesign-existing-projects'i 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/redesign-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 bu katalogda 11 skill içeren Leonxlnx/taste-skill deposunun tamamı için alındı. redesign-existing-projects için bir değerlendirme veya kullanım sayısı değil.
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

Bu Nasıl ÇalışırÜç adımlı süreç: kod tabanını tarama, kalıpları teşhis etme, hedefli yükseltmelerle düzeltme
Tasarım DenetimiTipografi, renk, düzen, etkileşim, içerik, bileşenler, ikonlar, kod kalitesi ve stratejik eksiklikleri kapsayan ayrıntılı bir kontrol listesi
TipografiTarayıcı varsayılanlarını, başlık varlığını, gövde genişliğini, ağırlık çeşitliliğini, sayı biçimlendirmesini, harf aralığını ve yalnız kalan sözcükleri düzeltin
Renk ve YüzeylerSaf siyahı, aşırı doygun vurgu renklerini, karışık grileri, AI gradyanlarını, genel gölgeleri, düz tasarımı ve tutarsız ışıklandırmayı değiştirin
DüzenSimetriyi bozun, üç sütunlu kartları değiştirin, CSS Grid kullanın, konteynerler ekleyin, köşe yarıçapını çeşitlendirin, derinlik oluşturun, hizalamayı düzeltin
Etkileşim ve DurumlarYumuşak geçişler ve GPU hızlandırmalı animasyonlarla hover, active, focus, yükleme, boş ve hata durumları ekleyin
İçerikGerçekçi isimler ve veriler kullanın, AI kliselerini kaldırın, etken çatıyla yazın, tarihleri çeşitlendirin, Lorem Ipsum'dan kaçının
Bileşen KalıplarıGenel kartları, buton çiftlerini, rozetleri, akordeonları, karuselleri, modalları, avatarları, geçiş düğmelerini ve alt bilgi bağlantı çiftliklerini değiştirin
İkonografiLucide/Feather varsayılanlarının ötesine geçin, klişe metaforlardan kaçının, çizgi genişliklerini standartlaştırın, favicon ekleyin, gerçek fotoğraflar kullanın
Kod KalitesiSemantik HTML kullanın, tutarlı stil uygulayın, bağıl birimler kullanın, alt metin ekleyin, temiz z-index kullanın, ölü kodu kaldırın, meta etiketleri ekleyin
Stratejik EksikliklerGerektiğinde yasal bağlantılar, geri gitme navigasyonu, özel 404 sayfası, form doğrulama, atlama bağlantıları ve çerez onayı ekleyin
Yükseltme TeknikleriGenel kalıpları değiştirmek için tipografi, düzen, hareket ve yüzey yükseltmelerine yönelik yüksek etkili teknikler

Skill'in Kendi Açıklaması

"Mevcut web sitelerini ve uygulamaları premium kaliteye yükseltir. Mevcut tasarımı denetler, jenerik yapay zeka kalıplarını tanımlar ve işlevselliği bozmadan üst düzey tasarım standartlarını uygular. Herhangi bir CSS framework'ü veya vanilla CSS ile çalışır."

SKILL.md'den ön madde açıklaması. Tam dosya yaklaşık 15.032 karakter. GitHub'da tam dosyayı okuyun.

Redesign Existing Projects

redesign-existing-projects'i gerçek bir tasarım inceleme görevi üzerinde çalıştırın.

OpenDesign'ı indirin, redesign-existing-projects'i SKILL.md bağlantısından import edin, yukarıdaki promptu yapıştırın ve sonuçtan önce planı okuyun.

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

Terminal

npx skills add https://github.com/Leonxlnx/taste-skill --skill redesign-existing-projects

redesign-existing-projects Skill'inin Claude Code ve Codex'te Yaptığı İşler

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

redesign-existing-projects Skill'i Ne Zaman Kullanmalı

İyi Uyum

redesign-existing-projects Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Mevcut Teknoloji Yığınıyla Çalışın

Her Değişiklikten Sonra Test Edin

İçe Aktarmadan Önce Bağımlılıkları Kontrol Edin

Tailwind Sürümünü Kontrol Edin

Çerçeve Yoksa Sade CSS Kullanın

Asla Lorem Ipsum Kullanmayın

Düzeltme Öncelik Sırasını Takip Edin

Değişiklikleri İncelenebilir Tutun