Herhangi bir sitenin tasarımı v0, Lovable veya Bolt ile nasıl kullanılır
Stylepack, herkese açık herhangi bir web sitesini bir tasarım paketine çevirir: DESIGN.md, BEHAVIOR.md, tasarım token’ları, bir Tailwind teması ve ekran görüntüleri. İşte v0, Lovable veya Bolt aracının, seçtiğiniz siteye benzeyen ve onun gibi davranan bir arayüz kurması için ona paketi nasıl vereceğiniz.
Adımlar
Aşağıdaki yollar example.com kullanır. Bir paket sayfasında, seçtiğiniz sitenin adını taşırlar.
- Sitenin adresini Stylepack içine yapıştırın ve paketini indirin. Galeri içindeki paketler hemen hazır.
- Zip dosyasını açın.
- Yeni bir projede ilk mesajınıza DESIGN.md dosyasını ve masaüstü ile telefon ilk ekran görüntülerini ekleyin.
- Aşağıdaki prompt’u yapıştırın ve ne yapılmasını istediğinizi yazın. Araç bir tema isterse tokens.css içeriğini yapıştırın.
Prompt
Prompt İngilizce kalır: paketteki dosyaları adlarıyla anar ve yapay zekanız onu her dilde okuyabilir.
Use the attached design pack files as the source of truth for how the UI looks and behaves. It was measured from https://example.com/.
1. Read DESIGN.md (colours, type, spacing, radii, shadows, components) and BEHAVIOR.md (hover, focus, tooltips, menus, motion, scrolling, forms, responsive rules, dark mode) before writing any code.
2. Look at every attached screenshot and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with the variables in tokens.css (or the Tailwind v4 theme in tailwind.css). Do not invent colours, radii, shadows or font sizes that are not in the pack.
4. Load the fonts named in DESIGN.md. Where a font is not freely available, use the stand-in it names at the same sizes and weights.
5. Match the breakpoints and hover, focus and motion rules in BEHAVIOR.md. Build both themes.
Now build: [describe the page or app you want]
When you are done, compare the result with the screenshots at desktop and phone widths, fix the biggest visual difference first, and repeat.