Quick Start

Get up and running with FlowCraft in just 5 minutes! This guide will walk you through creating your first AI-generated component.

Step 1: Create Your First Project

Web Application

  1. Log into FlowCraft

  2. Click "New Project"

  3. Name your project (e.g., "My First Component")

  4. Select your preferred framework (React recommended)

  5. Click "Create Project"

CLI

# Create a new project
flowcraft create my-first-component

# Navigate to project directory
cd my-first-component

# Initialize with React and Tailwind
flowcraft init --framework react --styling tailwind

Step 2: Prepare Your Design

FlowCraft works with various design inputs:

Option A: Use a Sample Design

We've included sample designs to get you started:

  1. In your project, click "Use Sample Design"

  2. Select "Landing Page Hero Section"

  3. Click "Import Sample"

Option B: Upload Your Own Design

  1. Click "Upload Design"

  2. Drag and drop your design file (PNG, JPG, SVG, or Figma URL)

  3. Wait for the upload to complete

Option C: Design from Scratch

  1. Click "Sketch Mode"

  2. Use our built-in drawing tools

  3. Create a simple wireframe or mockup

Step 3: Generate Your Component

Using the Web Interface

  1. With your design uploaded, click "Analyze Design"

  2. Review the AI's component detection

  3. Adjust component boundaries if needed

  4. Click "Generate Code"

  5. Wait 30-60 seconds for generation to complete

Using CLI

# Generate from uploaded design
flowcraft generate design.png --output components/

# Generate with specific options
flowcraft generate design.png \
  --framework react \
  --styling tailwind \
  --responsive true \
  --typescript true

Step 4: Review and Customize

Code Review

  1. Examine the generated React component

  2. Check the component structure and styling

  3. Review responsive design breakpoints

  4. Verify accessibility features

Customization Options

# Regenerate with different styling
flowcraft regenerate --styling "styled-components"

# Add specific features
flowcraft enhance --features "dark-mode,animations"

# Optimize for performance
flowcraft optimize --target "performance"

Step 5: Test and Deploy

Local Testing

# Start development server
npm start

# Run in preview mode
flowcraft preview

# Test responsiveness
flowcraft test --responsive

Quick Deployment

# Deploy to Vercel
flowcraft deploy vercel

# Deploy to Netlify
flowcraft deploy netlify

# Export static files
flowcraft export --output dist/

Example: Creating a Button Component

Let's create a simple button component to demonstrate the workflow:

1. Create the Design

# Use our built-in button template
flowcraft template button --variant primary

# Or describe what you want
flowcraft create-from-description "A blue rounded button with white text and hover effects"

2. Generate the Component

flowcraft generate button-design.png --component-name "PrimaryButton"

3. Review Generated Code

// Generated PrimaryButton.jsx
import React from 'react';

const PrimaryButton = ({ 
  children, 
  onClick, 
  disabled = false,
  size = 'md' 
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`
        px-6 py-3 bg-blue-600 text-white font-medium rounded-lg
        hover:bg-blue-700 focus:outline-none focus:ring-2 
        focus:ring-blue-500 focus:ring-offset-2
        disabled:opacity-50 disabled:cursor-not-allowed
        transition-colors duration-200
        ${size === 'sm' ? 'px-4 py-2 text-sm' : ''}
        ${size === 'lg' ? 'px-8 py-4 text-lg' : ''}
      `}
    >
      {children}
    </button>
  );
};

export default PrimaryButton;

4. Use Your Component

import PrimaryButton from './components/PrimaryButton';

function App() {
  return (
    <div className="p-8">
      <PrimaryButton onClick={() => alert('Hello!')}>
        Click Me!
      </PrimaryButton>
    </div>
  );
}

What's Next?

Congratulations! You've created your first FlowCraft component. Here's what to explore next:

Immediate Next Steps

  1. Create your first project - Build something more complex

  2. Learn basic concepts - Understand FlowCraft fundamentals

  3. Explore features - Discover all of FlowCraft's capabilities

Advanced Topics

Community Resources

Tips for Success

  1. Start Simple: Begin with basic layouts before attempting complex designs

  2. Iterate Quickly: Use FlowCraft's regeneration features to refine your components

  3. Learn from Examples: Study the generated code to understand best practices

  4. Join the Community: Share your work and learn from other FlowCraft users

Happy coding! 🚀

PreviousInstallationNextYour First Project

Last updated