Web Design Engineeryazan ConardLi

Web Design Engineer Skill.

Arayüzü genişletmeden önce görsel sözleşmeyi tanımlayın.

Ön Yüz Tasarımı
Prototipleme
Tasarım Sistemleri

OpenDesign İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Web Design EngineerSKILL.md

Görev Ön Yüz Tasarımı Çıktılar • Bir HTML/CSS/JavaScript veya React görsel çıktısı • Görsel yön ve design-token tercihlerine dair belgelenmiş bir değerlendirme • Görüntülenebilir bir erken taslak; ardından tamamlanmış durumlar ve etkileşimler Başlamadan Önce Kod yazabilen bir ajan ve tarayıcıda işlenebilen bir ön yüz ortamı gerekir. Seçilen kalıplar React, Babel, grafikler veya başka kütüphaneler kullanabilir; tarayıcı kabulü için uygun bir tarayıcı aracı gerekir.

Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Web Design Engineer

Varlık gereksinimleri, tasarım kalibrasyonu, erken taslaklar, koruma modları ile ayrı eleştiri ve tarayıcı kalite kontrol yolları içeren, bağlamı öne alan bir tasarım mühendisliği yöntemi.

Kaynağa dayalı iş akışıYürütme kıyaslaması değildir

Çalışma Yaklaşımı

Web Design Engineer; sayfalar, panolar, prototipler, slayt sunumları ve görselleştirmeler için bir tarayıcı çıktısı iş akışıdır. Her isteği yeni bir açılış sayfası gibi ele almak yerine önce çıktıyı, hedef kitleyi ve mevcut çalışma modunu belirler. Bir ürünü genişletmek, bir yeniden tasarımın sözleşmelerini korumak ve bir görsel yönü baştan kurmak, farklı izinlere sahip farklı işlerdir.

Tasarım değerlendirmesi beş ayarlanabilir boyut kullanır: çeşitlilik, hareket, bilgi yoğunluğu, varlık bağımlılığı ve marka sadakati. Bunlar, ayrıntılı uygulamadan önce bildirilmiş bir sisteme ve erken görüntülenebilir bir taslağa dayanır. Markalı işlerde yalnızca bir renk paleti değil, gerçek logolar, ürün fotoğrafları ve arayüz ekran görüntüleri daha önemlidir. Skill ayrıca hafif bir öz denetimi, kaynağında yalnızca açık bir kalite kontrol isteği için ayrılmış çalıştırılabilir tarayıcı kabulünden ayırır.

Beklenen Çıktılar

Bir HTML/CSS/JavaScript veya React görsel çıktısı
Görsel yön ve design-token tercihlerine dair belgelenmiş bir değerlendirme
Görüntülenebilir bir erken taslak; ardından tamamlanmış durumlar ve etkileşimler

Örnek Brifingi Gör

Brifingden İncelemeye

01
Mevcut Bağlamı Okuyun
Sağlanan kaynak kodunu, ekran görüntülerini, marka varlıklarını ve kısıtları inceleyin. İşin bir genişletme, koruyucu bir yeniden tasarım veya daha kapsamlı bir elden geçirme olup olmadığını sınıflandırın.
02
Tasarım Sözleşmesini Bildirin
Görsel yönü, hedef kitleyi, yoğunluğu, hareketi ve varlıkları açıklayın; ardından tipografiyi, boşlukları, paleti, yüzeyleri ve etkileşim yaklaşımını belirleyin. İlk kodu yazmadan önce kullanıcının bu tasarım sistemini onaylamasını bekleyin.
03
Görüntülenebilir Bir Taslak Gösterin
Yönü sınamak için temel yerleşimleri ve dürüst yer tutucuları kullanın. Her bileşeni veya etkileşim durumunu doldurmadan önce bu erken taslak için ayrı bir onay bekleyin.
04
Geliştirin ve İnceleyin
Onaylanan etkileşimleri ve durumları tamamlayın. Kaynağın öz denetimini yapın; tarayıcı kabulü istendiğinde gerçek görünüm alanı ve etkileşim kanıtlarını ayrı olarak toplayın.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Kod yazabilen bir ajan ve tarayıcıda işlenebilen bir ön yüz ortamı gerekir. Seçilen kalıplar React, Babel, grafikler veya başka kütüphaneler kullanabilir; tarayıcı kabulü için uygun bir tarayıcı aracı gerekir.

İyi Bir Uyum

Mevcut Ürün UzantılarıYeni bir ekranın ürüne ait görünmesi ve çevresindeki rotaları, formları ve etkileşim beklentilerini koruması gerektiğinde işe yarar.
Tasarım Yönü KeşfiEkip tek bir yerleşim düzenine karar vermeden önce gerçekten farklı yönlere veya ayarlanabilir varyantlara ihtiyaç duyan belirsiz bir görsel brifinge uygundur.

Kontrol Edilecek Sınırlar

Görsel Ön Yüz KapsamıArka uç API'leri, komut satırı araçları ve veri işleme işleri skill'in hedeflediği çıktının dışındadır. Makale odaklı ve anlatım odaklı sunum iş akışları da ayrıdır.
Kalite Bir Test Sonucu DeğildirBir tasarım eleştirisi veya kaynak incelemesi, çalışan bir tarayıcıda duyarlı davranışı kanıtlamaz. Bu kanıt gerekiyorsa çalıştırılabilir kabul isteyin.

Bu Girdileri Getirin

Çıktı ve Hedef KitleÜretilecek ekranı veya deneyimi, kimin kullanacağını ve önemli görüntüleme boyutlarını ya da sunum koşullarını belirtin.
Mevcut SözleşmelerKodu, tasarım sistemi referanslarını ve korunan davranışları sağlayın. Hangi bölümlerin değişebileceğini, hangilerinin tanınabilir kalması gerektiğini belirtin.
Gerçek İçerik ve VarlıklarOnaylı metni, gerçek ürün görsellerini, logoları ve verileri sağlayın. Müşteri yorumu veya metrik uydurmak yerine eksik olan her şeyi işaretleyin.

03 Önemli Kararlar

Önemli Kararlar

Tasarım Tercihi Olarak Koruma
Açık çalışma modu, çekici bir yeniden tasarımın faydalı ürün kurallarını sessizce değiştirmesini veya geçerli mevcut marka kararlarını ortadan kaldırmasını önlemeye yardımcı olur.
Yeniden Renklendirmenin Ötesinde Varyantlar
Kalibrasyon çerçevesi, aynı yerleşimin birkaç kozmetik sürümünü göstermek yerine yoğunluğu, organizasyonu ve etkileşimi birbirinden bağımsız olarak değiştirmeyi mümkün kılar.

04 Örnek Görev Tanımı

Odaklı Bir Brifing Deneyin

Aşağıdaki örnek brifing test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

Tasarım tariflerinin, koruma protokolünün ve isteğe bağlı kabul referanslarının erişilebilir olması için Garden skill klasörünün tamamını kullanın.

Üst Kaynak Dosyası

https://github.com/ConardLi/garden-skills/blob/aaf9a82f5efd73e87cc0998edc398e75bfc35901/skills/web-design-engineer/SKILL.md

Tek Bir Çıktıyla Başlayın

Skill'i çalıştırmadan önce bu brifingdeki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brifing

Mevcut analitik arayüzümüzü kayıtlı raporlar ekranıyla genişletmek için Web Design Engineer kullan. Gezinmesini, boşluk belirteçlerini ve tablo kurallarını koru. Sağlanan bileşenleri ve ekran görüntülerini oku, tasarım sistemini öner ve kodlamadan önce onayımı bekle. Ardından yükleme ve boş durum planlarını içeren görüntülenebilir bir taslak göster. Bu taslağı onayladıktan sonra uygulamayı tamamla ve sağlanan masaüstü ve mobil boyutlarında tarayıcı kabulünü çalıştır. Rapor kullanım istatistikleri uydurma.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

Belgelenen çalışma modu, mevcut arayüzde gerçekten yapılan değişikliklerle uyuşuyor.
Tamamlanan görünüm, brifingle ilgili etkileşim durumlarını içeriyor.
Tarayıcı kabulüne dair her iddiaya gerçekte test edilen görünüm alanları ve sonuçlar eşlik ediyor.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarını, kimlik bilgilerini ve yazılım bağımlılıklarını içerdiği anlamına gelmez.

OpenDesign İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Üst kaynaktaki davranışlar ve gereksinimler değişebilir.

Kaynak Sahibi: ConardLi
Depo: ConardLi/garden-skills
Skill Dosyası: skills/web-design-engineer/SKILL.md
Lisans: MIT
İncelenen Anlık Görüntü: 2026-10-07 · aaf9a82f5efd

Editoryal Kaynak Özeti

Varlık gereksinimleri, tasarım kalibrasyonu, erken taslaklar, koruma modları ile ayrı eleştiri ve tarayıcı kalite kontrol yolları içeren, bağlamı öne alan bir tasarım mühendisliği yöntemi.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Her zaman bir React projesi mi üretir?

Hayır. HTML çıktı ortamıdır, ancak kaynak React odaklı prototiplerin ve görsel çıktıların yanı sıra düz HTML/CSS/JavaScript de kapsar.

Mevcut bir tasarım sisteminin yerini alır mı?

Otomatik olarak almaz. İş akışı genişletme, koruyucu yeniden tasarım ve elden geçirmeyi birbirinden ayırır; bu seçim düzenlemeden önce netleştirilmelidir.

Her geliştirme otomatik tarayıcı testlerini içerir mi?

Kaynak, tüm işler için hafif bir öz denetim gerektirir; ancak çalıştırılabilir kabul altyapısı yalnızca açık bir tarayıcı, duyarlılık veya kalite kontrol isteğiyle devreye girer.

OpenDesign

Sonraki Tasarım Yinelemesine Yer Açın.

Brifinginizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndir Tasarım Skill'lerine Göz Atın