VibeDesign Skill

Generate beautiful, animated React components using AI via the VibeDesign web app.

Overview

VibeDesign transforms text descriptions into production-ready React + Framer Motion + Tailwind components. This skill allows OpenClaw agents to generate UI components programmatically.

Prerequisites

•Gemini API Key: Required. Set as GEMINI_API_KEY environment variable.

Usage

Generate Component from Description

bash

# Basic usage
./skills/vibedesign/scripts/generate.sh "Create a glassmorphic card with hover effects"

# With specific animation level
./skills/vibedesign/scripts/generate.sh "Create a neon button" --level extreme

# Save to file
./skills/vibedesign/scripts/generate.sh "Create a dashboard widget" --output Widget.tsx

Animation Levels

Level	Description
`subtle`	Gentle, elegant animations (breathing, soft hover)
`moderate`	Polished, noticeable animations (staggered entrance, hover effects)
`extreme`	Awwwards-style spectacular animations (particles, parallax)
`3d`	Immersive 3D experiences (perspective, mouse-reactive tilt)

Component Output Format

Generated components follow this structure:

tsx

"use client";

import { useState, useEffect, useRef } from "react";
import { motion, AnimatePresence } from "framer-motion";

export default function GeneratedComponent() {
  return (
    <div className="...">
      {/* Animated content */}
    </div>
  );
}

Web App

For a visual builder experience, visit https://vibedesign.vip/builder