Bir tasarım ekran görüntüsünü çalışan bileşene çevirtirken kullanılan prompt. Asıl fark: ölçüleri tahmin ettirmemek ve mevcut tasarım sistemine bağlamak.
Kaynak: Claude Code dokümantasyonu
curl -sL https://www.antrophiclove.com/api/kaynak/ekran-goruntusunden-bilesen-uretme/rawBu içerik mevcut dosyaya elle harmanlanmalı: ekran-goruntusunden-bilesen-uretme.md
Attached is a screenshot of a UI I want built as a component.
Before writing code:
1. List the distinct elements you see, top to bottom.
2. Tell me which of them already exist in this codebase — search for
similar components first and reuse them instead of creating new ones.
3. Ask me about anything the screenshot cannot show: hover and focus
states, empty state, loading state, error state, and what happens
on small screens.
Then build it with these rules:
- Use the project's existing design tokens (spacing, color, radius,
type scale). Do not introduce new raw values; if a value is missing
from the system, tell me instead of hardcoding it.
- Match spacing by relationship, not by pixel guess: equal gaps stay
equal, and the rhythm follows the existing scale.
- Every interactive element gets a visible focus state and a hit area
of at least 44x44 px.
- Text contrast at least 4.5:1 against its actual background.
- No fixed heights on text containers — content in another language
will be longer.
Deliver the component plus a short list of the decisions you had to
make where the screenshot was ambiguous.