Your First Project

Let's build a complete landing page component using FlowCraft. This tutorial will guide you through the entire process from design to deployment.

Project Overview

We'll create a modern landing page hero section with:

Responsive design
Call-to-action buttons
Feature highlights
Mobile-optimized layout

Step 1: Project Setup

Create the Project

# Using CLI
flowcraft create landing-page-hero
cd landing-page-hero

# Initialize with our preferred stack
flowcraft init \
  --framework react \
  --styling tailwind \
  --typescript true \
  --responsive true

Project Structure

landing-page-hero/
├── src/
│   ├── components/
│   ├── assets/
│   └── styles/
├── designs/
├── package.json
└── flowcraft.config.js

Step 2: Design Phase

Design Requirements

Our landing page hero should include:

Header: Logo and navigation
Hero Section: Headline, subtext, and CTA
Features: 3-column feature showcase
Responsive: Works on desktop, tablet, and mobile

Upload Your Design

Option A: Use Figma

Share your Figma file URL
Paste it in FlowCraft: flowcraft import figma <your-figma-url>
Select the frames you want to convert

Option B: Upload Image Files

# Upload multiple design files
flowcraft upload designs/hero-desktop.png designs/hero-mobile.png

# Or drag and drop in the web interface

Option C: Create from Description

flowcraft generate-from-prompt \
  "Modern landing page hero with gradient background, 
   centered text, two buttons, and three feature cards below"

Step 3: AI Analysis and Generation

Analyze the Design

# Let FlowCraft analyze your design
flowcraft analyze designs/hero-desktop.png

# Review detected components
flowcraft review --interactive

The AI will identify:

Layout structure
Component hierarchy
Text content
Color scheme
Spacing and typography

Generate Components

# Generate the complete hero section
flowcraft generate \
  --input designs/hero-desktop.png \
  --output src/components/HeroSection.jsx \
  --include-props true \
  --responsive true

Step 4: Review Generated Code

Hero Section Component

// src/components/HeroSection.jsx
import React from 'react';

const HeroSection = ({ 
  title = "Transform Your Ideas Into Reality",
  subtitle = "FlowCraft helps you build amazing products faster than ever before",
  primaryButtonText = "Get Started",
  secondaryButtonText = "Learn More",
  onPrimaryClick,
  onSecondaryClick
}) => {
  return (
    <section className="bg-gradient-to-br from-blue-600 via-purple-600 to-cyan-500 min-h-screen">
      <div className="container mx-auto px-4 py-16 lg:py-24">
        {/* Header */}
        <header className="flex justify-between items-center mb-16">
          <div className="text-white text-2xl font-bold">FlowCraft</div>
          <nav className="hidden md:flex space-x-8">
            <a href="#features" className="text-white hover:text-cyan-200">Features</a>
            <a href="#pricing" className="text-white hover:text-cyan-200">Pricing</a>
            <a href="#about" className="text-white hover:text-cyan-200">About</a>
          </nav>
        </header>

        {/* Hero Content */}
        <div className="text-center text-white">
          <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight">
            {title}
          </h1>
          <p className="text-xl md:text-2xl mb-12 max-w-3xl mx-auto opacity-90">
            {subtitle}
          </p>
          
          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-20">
            <button
              onClick={onPrimaryClick}
              className="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold
                       hover:bg-gray-100 transition-colors duration-200 text-lg"
            >
              {primaryButtonText}
            </button>
            <button
              onClick={onSecondaryClick}
              className="border-2 border-white text-white px-8 py-4 rounded-lg font-semibold
                       hover:bg-white hover:text-blue-600 transition-colors duration-200 text-lg"
            >
              {secondaryButtonText}
            </button>
          </div>
        </div>

        {/* Feature Cards */}
        <div className="grid md:grid-cols-3 gap-8 mt-16">
          <FeatureCard 
            icon="🚀"
            title="Fast Development"
            description="Build components 10x faster with AI-powered generation"
          />
          <FeatureCard 
            icon="🎨"
            title="Design Perfect"
            description="Pixel-perfect conversion from any design file or wireframe"
          />
          <FeatureCard 
            icon="📱"
            title="Responsive Ready"
            description="Automatically optimized for all devices and screen sizes"
          />
        </div>
      </div>
    </section>
  );
};

const FeatureCard = ({ icon, title, description }) => (
  <div className="bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-6 text-white text-center">
    <div className="text-4xl mb-4">{icon}</div>
    <h3 className="text-xl font-semibold mb-2">{title}</h3>
    <p className="opacity-80">{description}</p>
  </div>
);

export default HeroSection;

Step 5: Customization and Refinement

Add Interactive Features

# Add animations
flowcraft enhance --features animations

# Add dark mode support
flowcraft enhance --features dark-mode

# Optimize for performance
flowcraft optimize --target performance

Custom Styling

// Add custom styles to your component
const customStyles = {
  backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
  minHeight: '100vh'
};

Responsive Improvements

# Test different breakpoints
flowcraft test --breakpoints "sm,md,lg,xl"

# Generate mobile-specific variants
flowcraft generate-responsive --target mobile

Step 6: Integration and Testing

Add to Your App

// src/App.jsx
import React from 'react';
import HeroSection from './components/HeroSection';

function App() {
  const handleGetStarted = () => {
    window.location.href = '/signup';
  };

  const handleLearnMore = () => {
    document.getElementById('features').scrollIntoView({ 
      behavior: 'smooth' 
    });
  };

  return (
    <div className="App">
      <HeroSection 
        onPrimaryClick={handleGetStarted}
        onSecondaryClick={handleLearnMore}
      />
      {/* Rest of your app */}
    </div>
  );
}

export default App;

Testing

# Start development server
npm start

# Run FlowCraft's built-in tests
flowcraft test --component HeroSection

# Test accessibility
flowcraft test --accessibility

# Test performance
flowcraft test --lighthouse

Step 7: Deployment

Quick Deploy

# Deploy to Vercel
flowcraft deploy vercel

# Deploy to Netlify
flowcraft deploy netlify

# Generate static build
flowcraft build --static

Export Component

# Export for use in other projects
flowcraft export --component HeroSection --format npm

# Export as code snippet
flowcraft export --component HeroSection --format snippet

Step 8: Iteration and Improvement

Version Control

# Save current version
flowcraft version save "v1.0-initial"

# Create variations
flowcraft generate-variant --style "minimalist"
flowcraft generate-variant --style "dark-theme"

# Compare versions
flowcraft compare v1.0-initial v1.1-minimalist

Performance Optimization

# Analyze performance
flowcraft analyze --performance

# Optimize bundle size
flowcraft optimize --bundle-size

# Generate performance report
flowcraft report --performance

What You've Accomplished

Congratulations! You've successfully:

✅ Created a complete landing page hero section ✅ Used AI to generate production-ready code ✅ Implemented responsive design ✅ Added interactive features ✅ Tested and deployed your component

Next Steps

Expand Your Project

Add More Sections: Generate additional page sections
Create a Design System: Build a consistent component library
Add Animations: Enhance user experience with smooth transitions

Learn Advanced Techniques

Design-to-Code Workflow - Master the complete process
Advanced Techniques - Pro tips and best practices
Performance Optimization - Make your components lightning fast

Join the Community

Share Your Work - Show off your creation
Get Help - Ask questions and help others
Contribute - Help improve FlowCraft

Troubleshooting

Common Issues

Component not displaying correctly

# Check for missing dependencies
npm install

# Verify Tailwind CSS is configured
flowcraft verify --styling

Responsive design issues

# Regenerate with explicit breakpoints
flowcraft regenerate --responsive --breakpoints "sm:640px,md:768px,lg:1024px"

Performance problems

# Analyze and optimize
flowcraft analyze --performance
flowcraft optimize --images --code

Great work on completing your first project! 🎉

PreviousQuick Start NextBasic Concepts

Last updated 13 days ago