← Kütüphane

website-builder-setup

Claude Code'a UI/UX Pro Max, Framer Motion ve 21st.dev Magic'i kuran web tasarım kurulumu.

  • #claude-code
  • #web
  • #design
↓ İndir Kaynak ↗
README.md 63 satır · 1.9 KB
# Website Builder Setup for Claude Code

Build professional, animated websites with Claude Code — no coding experience needed. This skill installs three tools that turn Claude into a full web design studio.

Built by [@tenfoldmarc](https://instagram.com/tenfoldmarc)

## Install

**Easiest way:** Open Claude Code and say:

> Install this skill for me: https://github.com/tenfoldmarc/website-builder-setup

Claude will handle the rest.

**Or do it yourself:**

Mac/Linux in the terminal:
```bash
git clone https://github.com/tenfoldmarc/website-builder-setup.git ~/.claude/commands/website-builder-setup
```

Windows Terminal:
```bash
git clone https://github.com/tenfoldmarc/website-builder-setup.git %USERPROFILE%\.claude\commands\website-builder-setup
```

Then type `/website-builder-setup` in Claude Code to get started.

---

## OLD INSTALL (REMOVED)

Run this in your terminal:

```bash
claude install-skill https://github.com/tenfoldmarc/website-builder-setup
```

Then type `/website-builder-setup` and Claude walks you through everything.

## What Gets Installed

| Tool | What it does |
|------|-------------|
| **UI/UX Pro Max** | 50+ design styles, 161 color palettes, 57 font pairings. Your sites look designed, not AI-generated. |
| **Framer Motion** | Smooth animations — page transitions, hover effects, scroll reveals. The difference between a $500 site and a $10,000 site. |
| **21st.dev Magic** | 100+ production-ready React components. Buttons, navbars, hero sections, cards, footers — all pre-designed. |

## Requirements

- [Claude Code](https://docs.anthropic.com/en/docs/claude-code) installed
- [Node.js](https://nodejs.org) (LTS version)

## After Setup

Just tell Claude what you want:

```
Build me a landing page for my consulting business targeting small business owners.
Dark theme, modern, with animations.
```

Claude handles the rest — design, layout, animations, responsive, everything.
Türkçe anlatım

Ne işe yarar

website-builder-setup, Claude Code’a web tasarımı için üç araç kuran bir kurulum skill’idir:

  • UI/UX Pro Max: 50’den fazla tasarım stili, 161 renk paleti, 57 font eşleşmesi.
  • Framer Motion: sayfa geçişleri, hover efektleri, kaydırmayla beliren animasyonlar.
  • 21st.dev Magic: 100’den fazla hazır React bileşeni (navbar, hero, kart, footer…).

Nasıl kullanılır

Kurduktan sonra Claude Code’a doğal dille yazarsın: “Küçük işletmelere yönelik bir danışmanlık sitesi için koyu temalı, animasyonlu modern bir landing sayfası yap.” Claude tasarımı, yerleşimi ve animasyonları bu araçlarla üretir.

Nasıl kurulur

README’ye göre iki yol var:

  1. Claude Code’a şunu yaz: “Install this skill for me: https://github.com/tenfoldmarc/website-builder-setup”.
  2. Elle: repo’yu ~/.claude/commands/website-builder-setup klasörüne git clone et, sonra Claude Code’da /website-builder-setup komutunu çalıştır.

Gereksinimler: Claude Code ve Node.js (LTS).

Dikkat

  • Kurulum, üçüncü taraf araçları indirip kurar; çalıştırmadan önce ne yüklediğine bak.
  • Araçlar React tabanlı. Bu site Astro ile yazıldığı için bunları burada kullanmadık; yine de kütüphanede referans olarak duruyor.
  • Repo’da lisans belirtilmemiş; yalnızca README’si burada saklanıyor.

İçerik özgün sahibine aittir; burada kişisel arşiv olarak saklanıyor. Kaynak bağlantısı korunur.