From personal-assistant
UI ekranlarının/akışının görüntülerini + yapısal dökümünü toplayıp Claude Design brief'i üretir.
How this skill is triggered — by the user, by Claude, or both
Slash command
/personal-assistant:design-briefWhen to use
Trigger — "design brief oluştur", "ekranların brief'ini çıkar", "Claude Design için hazırla", "UI dökümü çıkar", "şu akışı belgele", "/design-brief". Bir uygulamanın bir veya birkaç ekranını/akışını görsel + tarafsız yapısal döküm olarak belgeleyip bir tasarım aracına (Claude Design vb.) girdi vermek istendiğinde. Stack/dil/framework bağımsızdır.
This skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Bir uygulamanın **bir veya birkaç ekranını/akışını** görsel olarak yakalar ve her ekranın
Bir uygulamanın bir veya birkaç ekranını/akışını görsel olarak yakalar ve her ekranın
hangi bileşen/veri/etkileşime sahip olduğunu tarafsız belgeler. Çıktı: ekran görüntüleri +
BRIEF.md — bir tasarım aracına (Claude Design vb.) girdi olarak verilip iyileştirilmiş tasarım
ürettirmek için. Dil/framework/ortam bağımsızdır (web, mobil-web, PWA, masaüstü, herhangi stack).
Bu skill tasarım ÖNERMEZ — mevcut durumu belgeler. "Şu kötü / şöyle olmalı" yorumu yalnızca kullanıcı açıkça "bilinen sorunları da ekle" derse girer; varsayılan tarafsızdır.
Kullanıcının verdiği bağlamdan çıkaramadığın her boşluğu tek AskUserQuestion bloğunda sor
(max 4 soru). Netleştirilecekler:
Bağlamdan netse sorma; eksik olanı sor. "Stack ne?" diye sorma — skill stack-agnostik, gerek yok.
SLUG="<kebab-case-kısa-konu>" # örn. "tour-search-flow", "checkout"
EVID="/tmp/design-brief-$SLUG"
mkdir -p "$EVID"
Tüm görseller ve BRIEF.md buraya yazılır (repo dışı, /tmp).
Hedefin tipine göre otomatik seç — hiçbir stack'e bağlanma:
| Hedef tipi | Yöntem |
|---|---|
| URL (web / local dev server) | playwright-cli skill. Gerekirse viewport ayarla (resize <w> <h>), akışı adım adım sür (open → snapshot → click/fill → screenshot). Her ekran için screenshot --filename "$EVID/NN-<ekran>.png". |
| Local uygulama (önce başlatılmalı) | Kullanıcının verdiği başlatma komutunu arka planda (run_in_background: true) çalıştır, port'u bekle, sonra playwright-cli ile bağlan. Bitince uygulamayı durdur (orphan bırakma). |
| Çalışan ama otomatikleştirilemeyen / native / masaüstü app | Kullanıcıdan her ekranın görüntüsünü iste (paste/dosya), $EVID/'ye kopyala. Capture yapma. |
| Kullanıcı görselleri sağladı | Doğrudan $EVID/'ye al, Read ile her birini incele. |
Akış yakalama prensibi (çok ekranlı): kullanıcının saydığı her ekrana gerçek kullanıcı
akışıyla ulaş (ana ekran → etkileşim → hedef ekran). Her anlamlı durumu ayrı dosyaya çek
(örn. bir panelin kapalı + açık hali ayrı). Dosyaları NN-<ekran>.png sıralı adlandır.
Her ekran görüntüsünü
Readile incele — sadece çekmek yetmez; brief'teki yapısal döküm için içeriği (bileşenler, metin, veri alanları, ikonlar, butonlar) gözlemlemen gerekir.playwright-cli snapshotçıktısı (a11y ağacı) ref/etiket/metin verir — döküm için birincil kaynak.
Capture sonrası temizlik (ZORUNLU): Local app başlattıysan durdur (
kill $(lsof -ti tcp:$PORT)vb.),playwright-cli closeile tarayıcıyı kapat. İptal/hata durumunda da yapılır — orphan process/port bırakma.
BRIEF.md yaz (tarafsız yapısal döküm)$EVID/BRIEF.md oluştur. Yapı (uyarlanır — ekran sayısına göre):
# Design Brief — <Uygulama/Akış Adı> (Mevcut Durum)
> Amaç: Aşağıdaki ekranların MEVCUT yapısını ve içerdiği veri/özellikleri tarafsız belgeler.
> <Tasarım aracı> bu dökümü + görselleri girdi alarak iyileştirilmiş tasarım üretecek.
> Mevcut durumu anlatır; tasarım önerisi içermez.
**Platform/viewport**: <mobil 390×844 / masaüstü / ...>
**Dil / yerelleştirme**: <TR / çok dilli / ...>
**Görseller**: bu klasörde NN-*.png
## Akış Şeması
(çok ekranlıysa ASCII akış: ekran → etkileşim → ekran)
## ① <Ekran adı> — `NN-<ekran>.png`
- Bölüm bölüm: navbar/header, ana içerik, kartlar/listeler, alt bar
- Her bileşen için: gösterdiği VERİ ALANLARI + etkileşimler (buton/link/input/sheet)
- İkonografi (kullanılan ikon adları, varsa)
- NOT: gözlemlenen tarafsız olgular (örn. "kartta X gösterilmiyor, detayda var")
## ② <Ekran adı> — ...
(her ekran için tekrarla)
## Renk & Bileşen Dili
(gözlemlenen: primary renk, kart/zemin, tipografi vurgu, sheet tipleri)
## İkonografi
(tüm ekranlarda görülen ikon envanteri)
## Tasarımcı için Bağlam Notları (tarafsız)
(ekranlar arası tutarsızlık, veri farkı, i18n/uzunluk kısıtı gibi NESNEL notlar)
Tarafsızlık kuralı: "ne var, hangi veri, nasıl etkileşim" yaz. Estetik/UX yargısı ("kötü", "kalabalık", "iyileştirilmeli") yazma — kullanıcı Adım 0'da "bilinen sorunları da ekle" dediyse ayrı bir "## Bilinen Sorunlar" bölümü aç, ana dökümü tarafsız tut.
zed "$EVID" 2>/dev/null # (varsa) klasörü aç
SendUserFile ile BRIEF.md + tüm ekran görüntülerini kullanıcıya gönder (status: normal),
caption'da kısa özet (kaç ekran, hangi akış). Kullanıcıya brief'i bir tasarım aracına girdi
verebileceğini hatırlat.
0. Kapsamı netleştir (AskUserQuestion): hedef/erişim, ekranlar, platform/viewport, amaç
1. /tmp/design-brief-<slug>/ hazırla
2. Yakala (otomatik): URL→playwright-cli | local→başlat+bağlan+durdur | native/sağlanan→kullanıcı görseli
— her ekranı Read ile incele, snapshot ile yapı çıkar
3. BRIEF.md yaz — tarafsız yapısal döküm (akış + ekran ekran veri/bileşen/etkileşim)
4. zed ile aç + SendUserFile ile brief + görselleri gönder
Grep/Read ile doğrulanabilir ama brief
gözlemlenen UI'ya dayanır, koda değil.playwright-cli skill (viewport resize, akış click/fill,
snapshot ile a11y ağacı). Detaylı kullanım o skill'de./tmp/design-brief-<slug>/ — görseller canlı veri içerebilir,
repo dışı kalır. Kullanıcı kalıcı isterse taşır.Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub omert11/personal-assistant --plugin personal-assistant