Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.vibeflow.ai/llms.txt

Use this file to discover all available pages before exploring further.

The Components tab is your visual library of reusable UI components.

​
Adding Components

Click “Add Component” to see import options:

​
1. From Screenshot

Convert UI screenshots into JSX components using AI. How it works:
  1. Click “From Screenshot”
  2. Upload an image (PNG, JPG, JPEG, WebP)
  3. The AI analyzes the visual design
  4. Review and edit the generated JSX code
  5. Add component name, description, and props
  6. Save to your design system
Best practices:
  • Use high-quality, clear screenshots
  • Crop to show only the component (not full pages)
  • Ensure good contrast and visibility
  • Include both light and dark mode if applicable

​
2. From Figma

Import components directly from Figma designs using VibeFigma integration. Requirements:
  • Figma integration must be configured in Settings
  • Access to the Figma file
  • Valid Figma node URL
How it works:
  1. Click “From Figma”
  2. Paste the Figma node URL
  3. VibeFigma converts the design to React code
  4. Review and customize the component
  5. Save to your library

​
3. Vibe Designer

Generate components from natural language prompts using AI. How it works:
  1. Click “Vibe Designer”
  2. Describe the component you want (e.g., “A pricing card with three tiers and a popular badge”)
  3. The AI generates JSX code based on your design guidelines
  4. Review and refine the output
  5. Save to your design system
Tips:
  • Be specific about layout, colors, and interactions
  • Reference your design guidelines for consistency
  • Iterate by regenerating with more details

​
4. From Website (Clipper)

Clip components directly from any live website using the VibeFlow Clipper browser extension. Requirements: How it works:
  1. Click “From Website”
  2. The modal checks that the Clipper extension is connected
  3. Click “Start Clipping Session”, which opens a new tab
  4. Navigate to any website, click the Clipper extension icon, and select an element
  5. The clipped component is converted to JSX and sent back for review
  6. Save to your design system

​
5. Manual Input

Paste or write JSX code directly. When to use:
  • You have existing component code
  • Migrating from another system
  • Custom, hand-crafted components
How it works:
  1. Click “Manual Input”
  2. Paste your JSX code
  3. Add component metadata (name, description, props)
  4. Optionally add prop definitions for documentation
  5. Save to your library