83.3K+İndir
Kullanım kılavuzuna geç
frontend-designyazan Anthropic

Frontend Design Skill.

Claude Code ve Codex için ayırt edici kullanıcı arayüzü tasarımı skill'i: bilinçli seçilmiş tipografi, renk ve düzen.

  • Web & UI
  • Websites
  • UI yeniden tasarım
  • Typography
OpenDesign İndirKullanım kılavuzunu görüntüle
DESIGN DIRECTION / 01BRIEF → INTERFACE
AaTYPE WITH INTENT
A quieter palette.
A clearer hierarchy.
● ● ●homepage.html ↗
scope®Made for independent designers
LESS ADMIN. MORE MAKING.Good work.
Clear scope.

A considered space for your next project, from the first quote to the final yes.

Create your quote ↗
YOUR NEXT PROJECTBrand &
website design
01 Define the work
02 Agree on the scope
03 Get the go-ahead
Ready when you are. ↗
THE STARTING POINT

“A quoting tool for freelance designers.
Make the next step feel clear.”

Illustrative composition · not a recorded skill output

01 Brief'ten arayüze

Bir Frontend Tasarım Görevi, Brief'ten Arayüze.

Claude Code veya Codex'e ürünü, hedef kitleyi ve içeriği verin; frontend-design skill görsel kararları verir.

Örnek briefÖrnek iş akışı · gerçek bir çalıştırma değil

Bir Teklif Aracı için Ana Sayfa

Serbest tasarımcıların teklif oluşturmayı, kapsam değişikliklerini kabul etmeyi ve müşteri onayı almayı anlamalarına yardımcı olur.

Marka varlıklarıFiyatlandırmaSSS metni
Tam prompt'u görün ↗

Skill Neye Rehberlik Eder

  1. 01
    Görsel yönü bulun

    Ürüne bağlı bir palet, yazı hiyerarşisi ve düzen.

  2. 02
    Planı gözden geçirin

    İnşa etmeden önce yönü brief'e göre kontrol edin.

  3. 03
    İnşa edin ve geliştirin

    Net eylemlere ve erişilebilir durumlara sahip duyarlı bir arayüz.

02 Uyumunuzu bulun

frontend-design Skill Ne Zaman Kullanılır

Görsel kararlar işin bir parçası olduğunda frontend-design skill'ini kullanın — Claude Code veya Codex'te oluşturulan yeni bir sayfa veya şablon gibi görünen bir arayüzün yeniden tasarımı.

İyi Uyum

  • Bir brief'ten yeni bir sayfa veya siteAçılış sayfaları, ürün siteleri, portföyler, küçük uygulamalar — ilk sorunun "bu nasıl görünmeli?" olduğu her şey.
  • Mevcut bir arayüzün görsel yeniden tasarımıŞablon gibi görünen çalışan bir UI'niz var ve ürünün konusuna dayalı bir yön istiyorsunuz.
  • Tipografi ve hiyerarşiyi düzeltmeFramework varsayılanları yerine amaçlı olarak belirlenmiş yazı ölçeği, satır uzunluğu, ağırlık ve aralık.
  • Gerçek içerikle gelen brieflerSkill, briefin gerçek metni ve konusuyla çalışır; ne kadar gerçek malzeme verirseniz sonuç o kadar spesifik olur.

Sınırları Bilin

  • Zaten bir tasarım sisteminiz varKurallarını ve bileşenlerini sağlayın. Skill brief'inizi takip etmeli ve açık kalan görsel seçimler dahilinde çalışmalıdır.
  • İş mantık, veri veya backendOdağı görsel tasarımdır. Uygulama mantığı, API'ler ve fonksiyonel test kendi uygulama çalışmalarına ihtiyaç duyar.
  • Bir bileşen kütüphanesi veya şablon istiyorsunuzHazır bir bileşen kütüphanesi veya sayfa şablonu yerine tasarım talimatları sağlar.
  • Tamamlanmış bir kullanıcı arayüzünün incelemesine ihtiyacınız varÖz eleştirisi kendi planına yöneliktir. Başka birinin arayüzünü denetlemek için aşağıdaki ilgili skilllere bakın.

Ne Sağlamalısınız

  • Ürün konusuÜrünün ne olduğu ve içinde bulunduğu sektör. Bunu atlarsanız skill bir öneri sunar ve onaylamanızı ister.
  • Hedef kullanıcılarSayfanın kimin için olduğu. Bu, görsel üslubu her şeyden daha fazla belirler.
  • Sayfa hedefiSayfanın yapması gereken tek iş ve birincil eylem.
  • Gerçek içerikBaşlıklar, metin, fiyatlar, SSS yanıtları. Yer tutucu metin, yer tutucu görünümlü tasarım üretir.
  • Marka varlıkları ve kısıtlamalarLogo, palet, fontlar ve halihazırda kararlaştırılmış her şey. Briefin kendi sözleri her zaman kazanır.

03 Bilinçli tasarlayın

Skillin Kullanıcı Arayüzü Tasarımına Getirdikleri

frontend-design skillinin Claude Code veya Codex'e yapması için talimat verdiği dört şey ve her birinin girdinizi neye dönüştürdüğü.

  1. Konuya Dayalı Görsel Yön

    Ajan, bir şey seçmeden önce ürünün ne olduğunu, kime hizmet ettiğini ve dünyasının neye benzediğini çözer. Sekiz yaşındaki çocuklar için bir oyuncak ile analistler için bir dashboard aynı görünümü paylaşmamalıdır.

    Siz verirsiniz
    ürün konusu, hedef kitle
    Siz alırsınız
    kod yazılmadan önce kabul edebileceğiniz veya yönlendirebileceğiniz bir yön

  2. Amaçlı Seçilmiş Yazı Tipi, Renk ve Düzen

    Gerçek bir ölçeğe sahip bir veya iki yazı tipi, hex ile adlandırılmış 4–6 renkli bir palet ve hizalama kurallarına sahip bir düzen konsepti. Yapısal araçlar — çizgiler, numaralandırma, etiketler — yalnızca bilgi taşıdıkları yerde kullanılır.

    Siz verirsiniz
    marka varlıkları, kısıtlamalar
    Siz alırsınız
    sayfanın üzerine kurulduğu kompakt bir token sistemi

  3. Brief'e Göre Gözden Geçirilmiş Bir Plan, Koddan Önce

    Skill iki geçişte çalışır. Önce planı taslak halinde hazırlar, sonra her bölümü "bunu benzer herhangi bir sayfa için üretir miydim?" sorusuna karşı kontrol eder ve varsayılan gibi okunan kısımları revize eder — neyin değiştiğini ve neden değiştiğini belirtir. Kod bundan sonra gelir.

    Siz verirsiniz
    brief
    Siz alırsınız
    transkriptte okuyabileceğiniz yazılı bir plan ve kısa bir öz-değerlendirme

  4. İstenmeden Temel Kalite

    Mobil cihazlara kadar duyarlı, görünür klavye odağı, azaltılmış harekete saygı, erişilebilir renk ve kullanıcının bakış açısından sade, aktif dilde yazılmış metin.

    Siz verirsiniz
    erişilebilirlik gereksinimleriniz
    Siz alırsınız
    mobil ve klavye kullanımı için rehberlik

04 İşe koyun

frontend-design'ı Claude Code veya Codex'e yükleyin

Bir npx skills add komutu, sonra ajanınızda bir brief ve ilk sonuç için bir kontrol listesi.

frontend-design'ı Claude Code, Codex veya Ajanınıza Ekleyin

Komutu projenizde çalıştırın, yükleyicinin ajan seçimini takip edin, ardından ajanınızın frontend-design'ı keşfedebildiğini kontrol edin.

Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design

Komut kaynağı: skills.sh üzerinde frontend-design girişi. Yükleyiciyi takip edin ve skill'in ajanınızda göründüğünü onaylayın.

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

Bu briefi ürün detaylarınızla uyarlayın, referans verdiği marka varlıklarını ekleyin ve Claude Code veya Codex'te çalıştırın.

Example prompt
Use the frontend-design skill to design the homepage for a project-quoting tool for freelance designers. Goal: visitors should understand three things — how quotes are built, how scope changes are confirmed, and how clients approve — and then start creating a quote. Content: use the attached brand colors and logo. Include a hero, how it works, features, pricing, and FAQ. Use the real pricing tiers and FAQ answers I have provided; do not invent numbers or testimonials. Process: propose a visual direction that fits freelance designers and this product first, then build the desktop and mobile pages. Keep clear calls to action, visible keyboard focus, and a reduced-motion experience.

İlk Sonucu Kontrol Edin

İyi bir ilk çalıştırma tanımak kolaydır. Sayfayı kabul etmeden önce transkriptte ve çıktıda bunları arayın:

  • Plan, adlandırılmış palet değerleri ve yazı tipi rolleriyle birlikte koddan önce geldi.
  • Öz-değerlendirme en az bir varsayılanı neyle değiştirdiğini ve neden değiştirdiğini belirtiyor.
  • Gerçek metniniz, fiyatlarınız ve marka varlıklarınız değişmeden görünür.
  • Bir öğe akılda kalıcı; sayfanın geri kalanı sakin kalıyor.
  • Sayfa 390px'te çalışıyor, sekme tuşu görünür bir odak halkası gösteriyor ve hareket işletim sistemi ayarına saygı gösteriyor.
  • Bir şey jenerik geliyorsa hangi kısmın öyle olduğunu belirtin — skill bu eleştiriyi alıp revize etmek için yazılmıştır.

OpenDesign kullanıyor musunuz? frontend-design OpenDesign içinde gelir: Plugins → Skills menüsünü açın, üst çubuktan seçin ve SKILL.md dosyası DESIGN.md ile birlikte prompt'a eklenir. Claude Code, Codex, Cursor veya OpenCode işi yapar.

OpenDesign İndirHı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
Anthropic
Repository
github.com/anthropics/skills Branch main
Skill dosyası
skills/frontend-design/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 34040c9
License
Apache-2.0 skills/frontend-design/LICENSE.txt dosyasından; SKILL.md "Tam koşullar LICENSE.txt'de" diyor. Repository kökü ayrı bir lisans bildirmiyor.
Repository yıldızları
176.183 GitHub anlık görüntüsü 2026-09-14 tarihinde, birçok skill içeren anthropics/skills repository'sinin tamamı için alınmıştır. frontend-design 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 main içinde paketlendi (2026-08-28'de kontrol edildi); OpenDesign'da canlı bir çalıştırma henüz bu sayfada kaydedilmedi.
Skill'in Kendi Açıklaması
Yeni arayüz oluştururken veya mevcut bir arayüzü yeniden şekillendirirken ayırt edici, bilinçli görsel tasarım için rehberlik. Estetik yönlendirme, tipografi ve şablon varsayılan görünümünden kaçan seçimler konusunda yardımcı olur.

Front-matter description from SKILL.md. The full instructions are about 9,400 characters and cover subject grounding, design principles, a plan → review → build → critique process, restraint, and writing in design. Dosyanın tamamını GitHub'da okuyun.

Frontend Design

Ajanınıza Tasarlamaya Değer Bir Brief Verin.

frontend-design skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'te skill'i seçin, örnek istemi yapıştırın ve koda geçmeden önce planı okuyun.

OpenDesign İndirTüm skill'lere göz atın
Terminal
npx skills add https://github.com/anthropics/skills --skill frontend-design