Дизайн-атлас — AI-генерация изображений, иконки, анимации, UI-системы

# Claude Code CLI (один раз)
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 — быстрая и дешёвая модель. Названия моделей в каталоге fal.ai меняются
# (выходят новые семейства FLUX): актуальные найди через 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"]
# Сохраняем
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()  # ключ берётся из переменной окружения OPENAI_API_KEY, в код его не вписывай

# Генерация
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
)

# Редактирование существующего
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 отдают картинку в base64: сохраняем в файл
with open("edited.png", "wb") as f:
    f.write(base64.b64decode(edited.data[0].b64_json))

# Установка с Code mode (запускает TypeScript код в Deno sandbox). Флаги и версия пакета меняются, сверяйся с документацией Replicate
export REPLICATE_API_TOKEN=r8_...
claude mcp add "replicate" --scope user --transport stdio -- \
  npx -y replicate-mcp@alpha --tools=code

Пользователь: "Найди лучший upscaler модель и увеличь это изображение в 4x"
Claude: ищет модели → пишет TypeScript → запускает в Deno sandbox → возвращает результат

# Установить через GitHub (актуальную инструкцию смотри в репозитории и на recraft.ai)
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 — генерирует все ассеты для лендинга

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"Генерирую {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"  ✅ Сохранено: {filename}")

print("✅ Все ассеты готовы!")

# Один раз
claude plugin install figma@claude-plugins-official
# Рестарт Claude Code → /plugin → Installed → Figma → Auth

# Инициализация (один раз в проекте)
npx shadcn@latest init

# Добавить компонент
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>Выручка</Text>
      <Metric>$45,231</Metric>
      <AreaChart
        data={data}
        index="date"
        categories={["Revenue"]}
        colors={["blue"]}
      />
    </Card>
  );
}

# Устанавливается как shadcn/ui — копирует компоненты.
# Команда установки у MagicUI менялась: актуальную смотри в документации magicui.design
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
# Компоненты копируются вручную с сайта

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 — миллионы фото через 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 — аналог, тоже бесплатный
const pexels = await fetch(`https://api.pexels.com/v1/search?query=dashboard`, {
  headers: { Authorization: PEXELS_KEY }
});

// Google Fonts API — программный доступ к 1500+ шрифтам
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. Появление при загрузке
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Привет!
</motion.div>

// 2. Hover-эффект
<motion.button
  whileHover={{ scale: 1.05, boxShadow: "0 10px 30px rgba(0,0,0,0.2)" }}
  whileTap={{ scale: 0.95 }}
>
  Нажми меня
</motion.button>

// 3. Появление при скролле
<motion.div
  initial={{ opacity: 0 }}
  whileInView={{ opacity: 1 }}
  viewport={{ once: true, margin: "-100px" }}
>
  Виден при скролле
</motion.div>

// 4. Stagger — элементы появляются по очереди
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 — анимация при размонтировании
<AnimatePresence>
  {isOpen && (
    <motion.div
      initial={{ opacity: 0, height: 0 }}
      animate={{ opacity: 1, height: "auto" }}
      exit={{ opacity: 0, height: 0 }}
    >
      Модальное окно
    </motion.div>
  )}
</AnimatePresence>

npm install lottie-react

import Lottie from "lottie-react";
import loadingAnimation from "./loading.json"; // скачал с 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);

// Анимация при скролле
gsap.from(".hero-text", {
  scrollTrigger: ".hero-text",
  y: 100,
  opacity: 0,
  duration: 1,
  stagger: 0.2
});

// Timeline — последовательная анимация
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": "имя_модели_из_документации",  # имена моделей меняются, прежние версии (например Gen-3 Alpha Turbo) устаревают
        "duration": 5,
        "ratio": "1280:768"
    }
)
task_id = response.json()["id"]

Задача                  → Инструмент
─────────────────────────────────────────────────────
Hero image, иллюстрации → fal.ai MCP (Flux Dev/Pro)
Дешёвые placeholders    → fal.ai MCP (быстрые модели Flux)
Редактирование фото     → OpenAI gpt-image-2 API
Векторные иконки        → Recraft MCP
Дизайн → код            → Figma MCP (официальный плагин)
UI компоненты (React)   → shadcn/ui (стандарт)
Дашборды с данными      → Tremor
Wow-эффекты лендинг    → MagicUI + Aceternity UI
Иконки набор           → Lucide (small) / Phosphor (large)
Анимации React          → Motion (бывший Framer Motion)
JSON-анимации           → Lottie + LottieFiles.com
3D эффекты              → React Three Fiber
Stock фото              → Unsplash API / Pexels API
Шрифты                  → Google Fonts API