← Tüm kaynaklar
Rehber

4 ücretsiz araçla web sitesi kurulumu

Profesyonel ve animasyonlu bir web sitesini artık dört araçla kurabiliyorsun.

1. Claude Code

Yapay zeka asistanımız ve projenin beyni. Tüm kodlama ve birleştirme sürecini o yönetecek.

👉 Claude Code Kurulum ve Dokümantasyon docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview ↗

2. Framer Motion

Sitendeki o profesyonel ve akıcı animasyonları sağlayan kütüphane. Claude, bu aracı kullanarak siteni canlandıracak.

👉 Framer Motion Resmi Sitesi framer.com/motion ↗

3. UI UX Max Pro Skill (Özel Komut)

Claude'un "robotik" değil, gerçek ve yetenekli bir tasarımcı gibi düşünmesini sağlayan sihirli dokunuş. Siteni kurarken Claude'a aşağıdaki komutu kopyalayıp yapıştır:

Claude İçin Talimat:

"Sen Senior (Kıdemli) seviyesinde bir UI/UX Tasarımcısı ve Frontend Geliştiricisin. Amacın sadece çalışan bir kod yazmak değil; estetik, modern, minimalist ve kullanıcı dostu arayüzler (UI) inşa etmek. Tasarımlarında geniş boşluklar (whitespace) bırak, tipografik hiyerarşiye dikkat et ve modern renk paletleri kullan. Framer Motion'ı kullanarak sayfa geçişlerini ve hover efektlerini son derece akıcı (spring animation) hale getir. 21st.dev'den aldığım bileşenleri birleştirirken, hepsinin tek bir profesyonel tasarım diline aitmiş gibi uyumlu görünmesini sağla."

4. 21st.dev

Topluluk tarafından hazırlanmış, harika tasarımlarla dolu dev kütüphane. Buradan beğendiğin tasarımı seçip Claude'a yapıştırman yeterli.

👉 21st.dev'i İncele 21st.dev ↗

İsa NurdoğduBu kaynağı hazırlayan

Yapay zeka ile işleri büyütüyorum; kuruyorum ve nasıl kurulduğunu öğretiyorum.