← The Library

website-builder-setup

A Claude Code setup that installs UI/UX Pro Max, Framer Motion and 21st.dev Magic for web design.

  • #claude-code
  • #web
  • #design
↓ Download Source ↗
README.md 63 lines · 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.
Explanation

What it does

website-builder-setup is a setup skill that installs three web-design tools into Claude Code:

  • UI/UX Pro Max: 50+ design styles, 161 color palettes, 57 font pairings.
  • Framer Motion: page transitions, hover effects, scroll reveals.
  • 21st.dev Magic: 100+ ready-made React components (navbars, heroes, cards, footers…).

How to use it

After installing, talk to Claude Code in plain language: “Build a dark, animated, modern landing page for a consulting business aimed at small business owners.” Claude produces the design, layout and animations with these tools.

How to install

According to the README there are two ways:

  1. Tell Claude Code: “Install this skill for me: https://github.com/tenfoldmarc/website-builder-setup”.
  2. By hand: git clone the repo into ~/.claude/commands/website-builder-setup, then run /website-builder-setup in Claude Code.

Requirements: Claude Code and Node.js (LTS).

Heads-up

  • The setup downloads and installs third-party tools; check what it installs before running it.
  • The tools are React-based. This site is built with Astro, so we did not use them here; the entry stays in the library as a reference.
  • The repo states no license; only its README is stored here.

Content belongs to its original author and is kept here as a personal archive. The source link is preserved.