Prompt#bileşen #tasarım #screenshot #arayüz

Ekran görüntüsünden bileşen üretme

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.

yazan kuscubasiece·8 Eylül 2026

Kaynak: Claude Code dokümantasyonu

Kurulum

curl -sL https://www.antrophiclove.com/api/kaynak/ekran-goruntusunden-bilesen-uretme/raw

Bu içerik mevcut dosyaya elle harmanlanmalı: ekran-goruntusunden-bilesen-uretme.md

Önizleme Ham metin ⑂ Kendi sürümünü oluştur

Attached is a screenshot of a UI I want built as a component.

Before writing code:

List the distinct elements you see, top to bottom.
Tell me which of them already exist in this codebase — search for similar components first and reuse them instead of creating new ones.
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.