Design atlas: AI image generation, icons, animation and UI systems

# Claude Code CLI (once)
claude mcp add --transport http fal-ai \
  https://mcp.fal.ai/mcp \
  --header "Authorization: Bearer $FAL_KEY"

{
  "mcpServers": {
    "fal-ai": {
      "url": "https://mcp.fal.ai/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_FAL_KEY"
      }
    }
  }
}

import fal_client

# Flux Schnell is a fast, cheap model. Model names in the fal.ai catalog change
# (newer FLUX families keep coming out): find the current ones with search_models
result = fal_client.subscribe(
    "fal-ai/flux/schnell",
    arguments={
        "prompt": "Modern dashboard UI, dark theme, data visualization, clean design",
        "image_size": "landscape_16_9",
        "num_images": 1
    }
)

image_url = result["images"][0]["url"]
# Save it
import requests
img_data = requests.get(image_url).content
with open("hero.png", "wb") as f:
    f.write(img_data)

from openai import OpenAI
import base64, requests

client = OpenAI()  # the key is read from the OPENAI_API_KEY environment variable; don't put it in the code

# Generation
result = client.images.generate(
    model="gpt-image-2",
    prompt="Minimalist SaaS landing page hero illustration, blue gradient, no text",
    size="1024x1024",
    quality="medium"  # low/medium/high
)

# Editing an existing image
with open("screenshot.png", "rb") as img:
    edited = client.images.edit(
        model="gpt-image-2",
        image=img,
        prompt="Add a dark mode toggle button to the top right corner",
        size="1024x1024"
    )

# GPT Image models return the image as base64: save it to a file
with open("edited.png", "wb") as f:
    f.write(base64.b64decode(edited.data[0].b64_json))

# Install with Code mode (runs TypeScript code in a Deno sandbox). Flags and the package version change; check the Replicate docs
export REPLICATE_API_TOKEN=r8_...
claude mcp add "replicate" --scope user --transport stdio -- \
  npx -y replicate-mcp@alpha --tools=code

User: "Find the best upscaler model and upscale this image 4x"
Claude: searches for models → writes TypeScript → runs it in a Deno sandbox → returns the result

# Install from GitHub (see the repository and recraft.ai for current instructions)
git clone https://github.com/recraft-ai/mcp-recraft-server
cd mcp-recraft-server && npm install

{
  "mcpServers": {
    "recraft": {
      "command": "node",
      "args": ["/path/to/mcp-recraft-server/index.js"],
      "env": { "RECRAFT_API_KEY": "your-key" }
    }
  }
}

#!/usr/bin/env python3
# generate-assets.py: generates all the assets for a landing page

import fal_client
import requests
import os

ASSETS = [
    {
        "name": "hero",
        "prompt": "Modern SaaS dashboard hero image, purple gradient, floating UI cards, no text",
        "size": "landscape_16_9",
        "model": "fal-ai/flux/dev"
    },
    {
        "name": "persona-bot",
        "prompt": "Friendly AI assistant persona, minimalist, blue, circular",
        "size": "square_hd",
        "model": "fal-ai/flux/schnell"
    },
    {
        "name": "og-image",
        "prompt": "Clean tech product Open Graph image, 1200x630, bold typography space",
        "size": "landscape_16_9",
        "model": "fal-ai/flux/schnell"
    }
]

os.makedirs("public/assets", exist_ok=True)

for asset in ASSETS:
    print(f"Generating {asset['name']}...")
    result = fal_client.subscribe(
        asset["model"],
        arguments={
            "prompt": asset["prompt"],
            "image_size": asset["size"],
            "num_images": 1,
            "num_inference_steps": 4 if "schnell" in asset["model"] else 28
        }
    )
    
    url = result["images"][0]["url"]
    img = requests.get(url).content
    
    filename = f"public/assets/{asset['name']}.png"
    with open(filename, "wb") as f:
        f.write(img)
    print(f"  ✅ Saved: {filename}")

print("✅ All assets are ready!")

# Once
claude plugin install figma@claude-plugins-official
# Restart Claude Code → /plugin → Installed → Figma → Auth

# Initialize (once per project)
npx shadcn@latest init

# Add components
npx shadcn@latest add button card dialog table chart

npm install @tremor/react

import { Card, Metric, Text, AreaChart } from "@tremor/react";

const data = [
  { date: "Jan 23", Revenue: 2890 },
  { date: "Feb 23", Revenue: 4890 },
  { date: "Mar 23", Revenue: 3890 },
];

export default function Dashboard() {
  return (
    <Card>
      <Text>Revenue</Text>
      <Metric>$45,231</Metric>
      <AreaChart
        data={data}
        index="date"
        categories={["Revenue"]}
        colors={["blue"]}
      />
    </Card>
  );
}

# Installs like shadcn/ui: copies the components.
# MagicUI's install command has changed over time: see magicui.design docs for the current one
npx magicui-cli add animated-gradient-text
npx magicui-cli add sparkles-text
npx magicui-cli add bento-grid
npx magicui-cli add particles

npm install framer-motion clsx tailwind-merge
# Components are copied manually from the site

npm install lucide-react

import { Search, Settings, ChevronRight, ArrowUpRight } from "lucide-react";

<Search className="w-5 h-5 text-gray-500" />
<Settings size={24} strokeWidth={1.5} />

npm install @heroicons/react

import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { StarIcon } from "@heroicons/react/24/solid";

npm install @phosphor-icons/react

import { Horse, Heart, Cube } from "@phosphor-icons/react";

<Horse size={32} weight="duotone" color="#FF69B4" />

npm install @tabler/icons-react

import { IconBrandGithub, IconDashboard } from "@tabler/icons-react";

// Unsplash: millions of photos via API
const response = await fetch(
  `https://api.unsplash.com/photos/random?query=technology&client_id=${UNSPLASH_KEY}`
);
const photo = await response.json();
// photo.urls.regular, photo.urls.full

// Pexels: a similar service, also free
const pexels = await fetch(`https://api.pexels.com/v1/search?query=dashboard`, {
  headers: { Authorization: PEXELS_KEY }
});

// Google Fonts API: programmatic access to 1500+ fonts
const fonts = await fetch(
  `https://www.googleapis.com/webfonts/v1/webfonts?key=${GOOGLE_FONTS_KEY}&sort=popularity`
);

npm install motion

import { motion, AnimatePresence } from "motion/react";

// 1. Appear on load
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Hello!
</motion.div>

// 2. Hover effect
<motion.button
  whileHover={{ scale: 1.05, boxShadow: "0 10px 30px rgba(0,0,0,0.2)" }}
  whileTap={{ scale: 0.95 }}
>
  Click me
</motion.button>

// 3. Appear on scroll
<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true, margin: "-100px" }}
>
  Visible on scroll
</motion.div>

// 4. Stagger: items appear one after another
const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
};
const item = { hidden: { opacity: 0, x: -20 }, show: { opacity: 1, x: 0 } };

<motion.ul variants={container} initial="hidden" animate="show">
  {items.map(i => <motion.li key={i} variants={item}>{i}</motion.li>)}
</motion.ul>

// 5. AnimatePresence: animation on unmount
<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: "auto" }}
      exit={{ opacity: 0, height: 0 }}
    >
      Modal window
    </motion.div>
  )}
</AnimatePresence>

npm install lottie-react

import Lottie from "lottie-react";
import loadingAnimation from "./loading.json"; // downloaded from LottieFiles

<Lottie
  animationData={loadingAnimation}
  style={{ width: 200, height: 200 }}
  loop={true}
/>

npm install three @react-three/fiber @react-three/drei

import { Canvas } from "@react-three/fiber";
import { OrbitControls, Sphere, MeshDistortMaterial } from "@react-three/drei";

export default function AnimatedSphere() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} />
      <Sphere args={[1, 100, 200]} scale={2.4}>
        <MeshDistortMaterial
          color="#8352FD"
          attach="material"
          distort={0.5}
          speed={2}
        />
      </Sphere>
      <OrbitControls enableZoom={false} />
    </Canvas>
  );
}

npm install gsap

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

// Animation on scroll
gsap.from(".hero-text", {
  scrollTrigger: ".hero-text",
  y: 100,
  opacity: 0,
  duration: 1,
  stagger: 0.2
});

// Timeline: sequential animation
const tl = gsap.timeline({ defaults: { duration: 1 } });
tl.from(".logo", { opacity: 0, y: -50 })
  .from(".nav", { opacity: 0, y: -30 }, "-=0.5")
  .from(".hero", { opacity: 0, scale: 0.8 }, "-=0.3");

import requests

response = requests.post(
    "https://api.runwayml.com/v1/image_to_video",
    headers={"Authorization": f"Bearer {RUNWAY_API_KEY}"},
    json={
        "promptImage": "https://example.com/product.jpg",
        "promptText": "Product rotating slowly on white background, studio lighting",
        "model": "model_name_from_the_docs",  # model names change; older versions (for example Gen-3 Alpha Turbo) get retired
        "duration": 5,
        "ratio": "1280:768"
    }
)
task_id = response.json()["id"]

Task                    → Tool
─────────────────────────────────────────────────────
Hero image, illustrations → fal.ai MCP (Flux Dev/Pro)
Cheap placeholders      → fal.ai MCP (fast Flux models)
Photo editing           → OpenAI gpt-image-2 API
Vector icons            → Recraft MCP
Design → code           → Figma MCP (official plugin)
UI components (React)   → shadcn/ui (standard)
Data dashboards         → Tremor
Landing wow effects     → MagicUI + Aceternity UI
Icon sets               → Lucide (small) / Phosphor (large)
React animation         → Motion (formerly Framer Motion)
JSON animations         → Lottie + LottieFiles.com
3D effects              → React Three Fiber
Stock photos            → Unsplash API / Pexels API
Fonts                   → Google Fonts API