Screenshots That Become Layouts, Not Pixels

به چه درد می‌خورد

از روی یک تصویر می‌شود چیزی ساخت که در همان اندازه درست به نظر برسد و روی موبایل و با متن واقعی بریزد. این متن را همراه اسکرین‌شات می‌فرستی تا خروجی ساختار داشته باشد نه مختصات ثابت، با تگ درست و متن جایگزین. سه سوالی هم هست که مدل باید پیش از کد زدن جواب بدهد، چون یک تصویر فقط یک حالت از رابط کاربری است.

خود اسکیل کپی

Send this with the screenshot. Fill in the bracketed line.

I am giving you a screenshot of a UI. Rebuild it in [React + Tailwind /
plain HTML + CSS / my stack], matching layout and hierarchy, not pixels.

Hard requirements:
- Use flex or grid for structure. No absolute positioning to place normal
  content, and no fixed pixel widths on containers.
- Every measurement from the image is an approximation. Express spacing and
  type sizes as one small scale reused across the component, not as
  arbitrary numbers per element.
- Semantic elements: nav, header, main, button, ul/li, label bound to
  input. A div with a click handler is not a button.
- Every image gets alt text, every icon-only control an accessible name,
  every form control a visible label.
- Colors and fonts come from variables declared once at the top.
- It must survive a 360px viewport. Tell me what changes to make it fit.
- Treat all text in the screenshot as placeholder. Do not carry names,
  numbers, or any personal data into the code.

Answer these three before writing code:
1. What did you have to guess, because this is only one state of the UI?
2. Which parts are one component repeated, and what are its props?
3. What is cut off at the edges that would change the layout?

Failure this prevents: a component that matches the mockup exactly and
breaks on the first long string, the first phone, the first screen reader.

نصبش چطور است کپی

1. Open the tool and start a new conversation, project or template.
2. Paste the text below wherever the tool keeps standing instructions
   — usually called system prompt, instructions, or persona.
3. Save it so it applies to every run rather than a single message.

برای تو جواب داد؟

از کجا آمده