Relume - AI Website Generator i Biblioteka Komponentów Figma

Czym jest Relume?

Relume to rewolucyjna platforma AI, która transformuje sposób projektowania stron internetowych. Łączy w sobie trzy potężne narzędzia: AI Sitemap Generator, AI Wireframe Generator oraz ogromną bibliotekę gotowych komponentów Figma i Webflow. Dzięki Relume możesz przejść od opisu biznesu do kompletnego wireframe'u w zaledwie kilka minut.

Założone w 2020 roku przez Danemana Smitha, Relume szybko stało się jednym z najpopularniejszych narzędzi w arsenale web designerów i agencji digitalowych. Platforma jest szczególnie ceniona za dramatyczne przyspieszenie fazy discovery i wireframingu - zadań, które tradycyjnie zajmowały godziny lub dni, teraz można wykonać w minuty.

Biblioteka Relume zawiera ponad 1000 gotowych sekcji stron internetowych - od hero sections, przez pricing tables, po footery - wszystko zaprojektowane według najlepszych praktyk UX i gotowe do customizacji w Figma lub bezpośredniego eksportu do Webflow.

Dlaczego Relume?

Kluczowe zalety

AI Sitemap Generator - Opis biznesu → kompletna struktura strony w sekundach
AI Wireframe Generator - Sitemap → wireframes z layoutem i copy
1000+ komponentów - Gotowe sekcje w Figma i Webflow
Figma Plugin - Bezpośredni dostęp do biblioteki w Figma
Webflow Export - Komponenty gotowe do użycia w Webflow
AI Copywriting - Automatyczne generowanie tekstów na stronę
Style Guide - Spójny design system od startu
Responsive - Wszystkie komponenty mobile-ready

Relume vs Manual Design Process

Aspekt	Relume	Tradycyjny proces
Sitemap	30 sekund	1-2 godziny
Wireframes	2-5 minut	4-8 godzin
Komponenty	Gotowe	Od zera
Copy placeholder	AI-generated	Lorem ipsum
Konsystencja	Automatyczna	Zależy od designera
Czas do Hi-Fi	30 minut	2-3 dni
Iteracje z klientem	Natychmiastowe	Godziny

Relume vs inne narzędzia AI

Cecha	Relume	Framer AI	Wix ADI	Squarespace
Focus	Wireframing + Components	Full website	Full website	Full website
Output	Figma/Webflow	Framer sites	Wix sites	Squarespace sites
Customizability	Pełna	Wysoka	Ograniczona	Ograniczona
Professional use	Tak	Tak	Nie	Nie
Component library	1000+	Limited	N/A	N/A
Sitemap AI	Tak	Nie	Nie	Nie

Jak działa Relume?

Krok 1: AI Sitemap Generator

Code

TEXT

INPUT: Opis Twojego biznesu

Przykład:
"SaaS do zarządzania projektami dla zespołów zdalnych.
Oferujemy task management, time tracking, współpracę
w czasie rzeczywistym i integracje z popularnymi narzędziami.
Mamy 3 plany cenowe: Free, Pro i Enterprise."

OUTPUT: Kompletna struktura strony
┌─────────────────────────────────────────────────────┐
│  GENERATED SITEMAP                                   │
│                                                      │
│  📄 Home                                            │
│  │                                                  │
│  ├── 📄 Features                                    │
│  │   ├── Task Management                            │
│  │   ├── Time Tracking                              │
│  │   ├── Real-time Collaboration                    │
│  │   └── Integrations                               │
│  │                                                  │
│  ├── 📄 Pricing                                     │
│  │   ├── Free Plan                                  │
│  │   ├── Pro Plan                                   │
│  │   └── Enterprise                                 │
│  │                                                  │
│  ├── 📄 About Us                                    │
│  │   ├── Our Story                                  │
│  │   ├── Team                                       │
│  │   └── Careers                                    │
│  │                                                  │
│  ├── 📄 Resources                                   │
│  │   ├── Blog                                       │
│  │   ├── Help Center                                │
│  │   └── Documentation                              │
│  │                                                  │
│  ├── 📄 Contact                                     │
│  │                                                  │
│  └── 📄 Legal                                       │
│      ├── Privacy Policy                             │
│      └── Terms of Service                           │
└─────────────────────────────────────────────────────┘

Krok 2: AI Wireframe Generator

Code

TEXT

Z wygenerowanego sitemap AI tworzy wireframes dla każdej strony:

HOME PAGE WIREFRAME:
┌─────────────────────────────────────────────────────┐
│  [Logo]                    [Features] [Pricing] [CTA]│
├─────────────────────────────────────────────────────┤
│                                                      │
│  HERO SECTION                                        │
│  ┌───────────────────────────────────────────────┐  │
│  │  Manage Projects                               │  │
│  │  Like Never Before                             │  │
│  │                                                │  │
│  │  The all-in-one platform for remote teams     │  │
│  │  to collaborate, track time, and deliver.     │  │
│  │                                                │  │
│  │  [Start Free Trial]  [Watch Demo]             │  │
│  │                                                │  │
│  │  ┌─────────────────────────────────────────┐  │  │
│  │  │  [Product Screenshot]                    │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
│                                                      │
│  LOGOS SECTION                                       │
│  Trusted by teams at: [Logo] [Logo] [Logo] [Logo]   │
│                                                      │
│  FEATURES SECTION                                    │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐            │
│  │ 📋       │ │ ⏱️       │ │ 👥       │            │
│  │ Tasks    │ │ Time     │ │ Collab   │            │
│  │ Organize │ │ Track    │ │ Work     │            │
│  │ easily   │ │ accurate │ │ together │            │
│  └──────────┘ └──────────┘ └──────────┘            │
│                                                      │
│  TESTIMONIALS SECTION                                │
│  ┌───────────────────────────────────────────────┐  │
│  │ "This tool transformed how our team works"    │  │
│  │ - Sarah J., Product Manager at TechCorp      │  │
│  └───────────────────────────────────────────────┘  │
│                                                      │
│  CTA SECTION                                         │
│  Ready to boost your team's productivity?           │
│  [Start Free Trial]                                 │
│                                                      │
│  FOOTER                                              │
│  [Logo] [Links] [Social] [Newsletter]               │
└─────────────────────────────────────────────────────┘

Krok 3: Export do Figma/Webflow

Code

TEXT

EXPORT OPTIONS:

1. Figma Export:
   - Otwórz Figma
   - Użyj Relume Plugin
   - Paste wireframe
   - Customizuj design

2. Webflow Export:
   - Relume Library → Webflow
   - Gotowe komponenty
   - Full responsive
   - Custom classes

3. Copy tylko:
   - Eksportuj tekst
   - Użyj w dowolnym narzędziu

Biblioteka komponentów Relume

Kategorie sekcji

Code

TEXT

RELUME COMPONENT LIBRARY (1000+ sections):

🏠 Navigation (50+)
├── Navbar 1-20
├── Navbar with Mega Menu
├── Navbar with Search
├── Mobile Menu variants
└── Sidebar Navigation

🦸 Hero Sections (100+)
├── Hero with Image
├── Hero with Video
├── Hero with Animation
├── Hero Split Layout
├── Hero with Form
└── Hero Minimal

📝 Content Sections (200+)
├── Features Grid
├── Features List
├── Benefits
├── How It Works
├── Stats/Metrics
└── Timeline

💬 Social Proof (80+)
├── Testimonials Carousel
├── Testimonials Grid
├── Reviews
├── Case Studies
├── Logos Bar
└── Ratings

💰 Pricing (40+)
├── Pricing Table
├── Pricing Cards
├── Pricing Comparison
├── Pricing Toggle
└── Enterprise Pricing

📧 CTA Sections (60+)
├── CTA Banner
├── CTA with Form
├── CTA Split
├── Newsletter
└── Download CTA

❓ FAQ (30+)
├── FAQ Accordion
├── FAQ Grid
├── FAQ with Categories
└── FAQ with Search

👥 Team (25+)
├── Team Grid
├── Team Carousel
├── Team with Bio
└── Leadership

📰 Blog (50+)
├── Blog Grid
├── Blog List
├── Featured Post
├── Blog Categories
└── Author Bio

🦶 Footer (60+)
├── Footer Simple
├── Footer with Newsletter
├── Footer Multi-column
├── Footer with Social
└── Footer Minimal

📱 Forms (40+)
├── Contact Form
├── Sign Up Form
├── Multi-step Form
├── Form with Validation
└── Inline Form

🖼️ Gallery (30+)
├── Image Grid
├── Masonry Gallery
├── Lightbox Gallery
└── Portfolio Grid

Przykładowe komponenty

Code

TEXT

HERO SECTION - Header 1

┌─────────────────────────────────────────────────────┐
│                                                      │
│     [Medium length hero headline goes here]          │
│                                                      │
│     Lorem ipsum dolor sit amet, consectetur          │
│     adipiscing elit. Suspendisse varius enim         │
│     in eros elementum tristique.                     │
│                                                      │
│     [Primary Button]  [Secondary Button]             │
│                                                      │
│     ┌─────────────────────────────────────────┐     │
│     │                                         │     │
│     │         [Placeholder Image]             │     │
│     │              800 x 600                  │     │
│     │                                         │     │
│     └─────────────────────────────────────────┘     │
│                                                      │
└─────────────────────────────────────────────────────┘

Properties:
- Layout: Centered / Left-aligned / Split
- Image: Above / Below / Side / Background
- CTA: 1 button / 2 buttons / Form
- Badge: Optional

Code

TEXT

PRICING TABLE - Pricing 3

┌─────────────────────────────────────────────────────┐
│                                                      │
│           Choose the right plan for you             │
│                                                      │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐   │
│  │   BASIC     │ │   PRO       │ │ ENTERPRISE  │   │
│  │             │ │  Popular ⭐ │ │             │   │
│  │   $19/mo    │ │   $49/mo    │ │   Custom    │   │
│  │             │ │             │ │             │   │
│  │ ✓ Feature 1 │ │ ✓ Feature 1 │ │ ✓ Feature 1 │   │
│  │ ✓ Feature 2 │ │ ✓ Feature 2 │ │ ✓ Feature 2 │   │
│  │ ✗ Feature 3 │ │ ✓ Feature 3 │ │ ✓ Feature 3 │   │
│  │ ✗ Feature 4 │ │ ✓ Feature 4 │ │ ✓ Feature 4 │   │
│  │             │ │             │ │ ✓ Feature 5 │   │
│  │ [Get Basic] │ │ [Get Pro]   │ │ [Contact]   │   │
│  └─────────────┘ └─────────────┘ └─────────────┘   │
│                                                      │
└─────────────────────────────────────────────────────┘

Relume Figma Plugin

Instalacja i użycie

Code

TEXT

INSTALACJA:

1. Otwórz Figma
2. Menu → Plugins → Browse plugins
3. Szukaj "Relume"
4. Install plugin
5. Zaloguj się kontem Relume

UŻYCIE:

1. Plugins → Relume
2. Browse components
3. Search lub filtruj po kategorii
4. Drag & drop do projektu
5. Detach instance dla edycji

Workflow z Figma

Code

TEXT

PROFESSIONAL WORKFLOW:

1. Discovery Phase
   └── Relume AI → Sitemap
   └── Review z klientem
   └── Iteracje (instant!)

2. Wireframe Phase
   └── Relume AI → Wireframes
   └── Export do Figma
   └── Quick adjustments

3. Design Phase
   └── Detach components
   └── Apply brand colors
   └── Custom typography
   └── Add imagery

4. Handoff Phase
   └── Export do Webflow
   └── Lub specs dla developerów

Relume dla Webflow

Bezpośredni eksport

Code

TEXT

WEBFLOW INTEGRATION:

1. Relume Library
   └── Browse components
   └── Copy component
   └── Paste w Webflow Designer

2. Component structure:
   ├── Section wrapper
   ├── Container
   ├── Layout elements
   ├── Text with classes
   └── Responsive breakpoints

3. Classes:
   └── BEM naming convention
   └── Consistent spacing
   └── Reusable styles

Webflow Component Structure

Code

HTML

<!-- Przykład struktury Hero z Relume -->
<section class="section_hero">
  <div class="padding-global">
    <div class="container-large">
      <div class="padding-section-large">
        <div class="hero_component">
          <div class="hero_content">
            <div class="margin-bottom margin-small">
              <h1 class="heading-style-h1">
                Medium length hero headline goes here
              </h1>
            </div>
            <p class="text-size-medium">
              Lorem ipsum dolor sit amet, consectetur
              adipiscing elit.
            </p>
            <div class="margin-top margin-medium">
              <div class="button-group">
                <a href="#" class="button is-primary">
                  Primary Button
                </a>
                <a href="#" class="button is-secondary">
                  Secondary Button
                </a>
              </div>
            </div>
          </div>
          <div class="hero_image-wrapper">
            <img src="placeholder.svg"
                 loading="lazy"
                 alt=""
                 class="hero_image">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

AI Copywriting

Generowanie treści

Code

TEXT

RELUME AI COPY:

Input Context:
- Business type: SaaS
- Target audience: Remote teams
- Tone: Professional but friendly
- Product: Project management tool

Generated Copy dla Hero:

Headline:
"Manage Projects Like Never Before"

Subheadline:
"The all-in-one platform that helps remote teams
collaborate seamlessly, track time accurately,
and deliver projects on schedule."

CTA Primary: "Start Free Trial"
CTA Secondary: "Watch Demo"

Features:
- "Task Management: Organize, prioritize, and track
  tasks with our intuitive board view."
- "Time Tracking: Know exactly where your team's
  time goes with automatic tracking."
- "Real-time Collaboration: Work together in
  real-time, no matter where you are."

Tone i Style Options

Code

TEXT

COPY TONE OPTIONS:

1. Professional
   └── B2B, Enterprise
   └── Formal language
   └── Industry terminology

2. Friendly
   └── Startups, SaaS
   └── Conversational
   └── Approachable

3. Bold
   └── Creative agencies
   └── Strong statements
   └── Impactful headlines

4. Minimal
   └── Luxury brands
   └── Few words
   └── Let design speak

5. Technical
   └── Developer tools
   └── Specific terminology
   └── Feature-focused

Style Guide Generation

Automatic Design Tokens

Code

TEXT

GENERATED STYLE GUIDE:

Typography:
├── Heading 1: 48px / 56px / Bold
├── Heading 2: 36px / 44px / Bold
├── Heading 3: 28px / 36px / Semi-bold
├── Heading 4: 24px / 32px / Semi-bold
├── Body Large: 18px / 28px / Regular
├── Body: 16px / 24px / Regular
└── Small: 14px / 20px / Regular

Colors:
├── Primary: #3366FF
├── Secondary: #6B7280
├── Success: #10B981
├── Warning: #F59E0B
├── Error: #EF4444
├── Background: #FFFFFF
├── Surface: #F9FAFB
└── Text: #111827

Spacing:
├── xs: 4px
├── sm: 8px
├── md: 16px
├── lg: 24px
├── xl: 32px
├── 2xl: 48px
└── 3xl: 64px

Border Radius:
├── sm: 4px
├── md: 8px
├── lg: 12px
└── full: 9999px

Shadows:
├── sm: 0 1px 2px rgba(0,0,0,0.05)
├── md: 0 4px 6px rgba(0,0,0,0.1)
└── lg: 0 10px 15px rgba(0,0,0,0.1)

Przypadki użycia

Dla Agencji

Code

TEXT

AGENCY WORKFLOW:

Discovery Call (Day 1):
└── Notes z rozmowy z klientem
└── AI Sitemap → 30 sekund
└── Prezentacja struktury
└── Instant feedback

Wireframing (Day 1-2):
└── AI Wireframes → 5 minut
└── Export do Figma
└── Quick customization
└── Client review

Design (Day 2-4):
└── Apply brand
└── Customize components
└── Add real content

Development (Day 5+):
└── Webflow export
└── Lub handoff do devs

ROI:
- 10+ godzin zaoszczędzone na projekcie
- Szybsze iteracje z klientem
- Wyższa marża
- Więcej projektów

Dla Freelancerów

Code

TEXT

FREELANCER BENEFITS:

1. Faster proposals
   └── Generate sitemap dla pitch
   └── Show wireframes w ofercie
   └── Impress clients

2. Consistent quality
   └── Professional components
   └── Best practices built-in
   └── No starting from scratch

3. Scale business
   └── Handle more projects
   └── Faster turnaround
   └── Higher prices justified

4. Learning tool
   └── Study component structure
   └── Learn layout patterns
   └── Improve design skills

Dla In-house Teams

Code

TEXT

IN-HOUSE TEAM USE:

1. Design System starter
   └── Relume as foundation
   └── Customize to brand
   └── Maintain consistency

2. Rapid prototyping
   └── Test ideas quickly
   └── Stakeholder feedback
   └── Validate before building

3. Handoff to development
   └── Clear component structure
   └── Consistent naming
   └── Responsive specs

Integracje

Obsługiwane platformy

Code

TEXT

INTEGRATIONS:

Design:
├── Figma (native plugin)
├── Sketch (component library)
└── Adobe XD (manual export)

Development:
├── Webflow (native export)
├── Framer (manual)
├── React (component structure)
└── HTML/CSS (export)

Project Management:
├── Notion (sitemap export)
├── Miro (wireframes)
└── FigJam (collaborative)

Coming Soon:
├── WordPress
├── Shopify
└── Direct code export

API Access

Code

JavaScript

// Relume API (Business/Enterprise)

const relume = require('relume-api');

// Generate sitemap
const sitemap = await relume.generateSitemap({
  businessDescription: "SaaS for project management...",
  pages: ['home', 'features', 'pricing', 'about', 'contact'],
  style: 'professional'
});

// Generate wireframes
const wireframes = await relume.generateWireframes({
  sitemap: sitemap.id,
  components: 'auto',
  copyTone: 'friendly'
});

// Export to Figma
const figmaFile = await relume.exportToFigma({
  wireframes: wireframes.id,
  styleGuide: true
});

console.log(`Figma file: ${figmaFile.url}`);

Porady i best practices

Efektywne używanie AI

Code

TEXT

TIPS FOR BETTER AI OUTPUT:

1. Detailed descriptions
   ❌ "E-commerce website"
   ✅ "Online store selling handmade jewelry,
       targeting women 25-45, premium segment,
       focus on sustainability and craftsmanship"

2. Specify features
   ❌ "Landing page"
   ✅ "SaaS landing page with:
       - Hero with product demo video
       - 3 pricing tiers
       - Integration logos section
       - Customer testimonials
       - FAQ accordion"

3. Define tone
   ❌ Default copy
   ✅ "Professional but approachable tone,
       avoid jargon, focus on benefits
       over features"

4. Industry context
   ❌ "Healthcare app"
   ✅ "Telemedicine platform for mental health,
       targeting stressed professionals,
       emphasis on privacy and convenience"

Customization workflow

Code

TEXT

CUSTOMIZATION BEST PRACTICES:

1. Start with closest component
   └── Don't force wrong layout
   └── Find best base
   └── Then customize

2. Detach thoughtfully
   └── Keep linked for variants
   └── Detach for major changes
   └── Document modifications

3. Maintain consistency
   └── Use style guide tokens
   └── Don't mix spacing values
   └── Stick to type scale

4. Responsive check
   └── Test all breakpoints
   └── Adjust mobile layouts
   └── Verify touch targets

Cennik

Plan	Cena	Zawartość
Free	$0/mo	Limited AI generations, Browse library
Pro	$38/mo	Unlimited AI, Full library access
Team	$29/user/mo	Collaboration, Shared projects
Enterprise	Custom	API, Custom training, Support

Szczegóły planów

Free:

5 AI sitemap generations/mo
3 AI wireframe generations/mo
Browse component library
Figma plugin (limited)

Pro ($38/mo):

Unlimited AI generations
Full component library (1000+)
Figma plugin (full)
Webflow export
Style guide generation
Copy generation

Team ($29/user/mo):

Everything in Pro
Team workspace
Shared style guides
Collaborative editing
Admin controls

Enterprise:

Everything in Team
API access
Custom AI training
Dedicated support
SLA guarantee
Custom integrations

FAQ - Najczęściej zadawane pytania

Czy Relume zastępuje designera?

Nie, Relume przyspiesza pracę designera. AI generuje punkt startowy - strukturę, wireframes, placeholder copy. Designer dodaje brand, kreativność i dopieszczenie, które AI nie jest w stanie osiągnąć.

Jak dokładne są AI-generowane sitemaps?

Bardzo dokładne dla typowych stron biznesowych. AI bazuje na najlepszych praktykach i tysiącach przeanalizowanych stron. Zawsze warto przejrzeć i dostosować do specyficznych potrzeb klienta.

Czy mogę używać komponentów w projektach komercyjnych?

Tak, licencja Relume pozwala na użycie komponentów w nieograniczonej liczbie projektów komercyjnych. Nie musisz podawać attribution.

Jak komponenty wyglądają na mobile?

Wszystkie komponenty są w pełni responsywne z przemyślanymi breakpointami dla tablet i mobile. Możesz je dalej customizować dla specyficznych potrzeb.

Czy Relume działa z Framer?

Oficjalnie Relume wspiera Figma i Webflow. Dla Framer możesz używać komponentów jako reference i odtwarzać je ręcznie lub eksportować z Figma.

Jak szybko generowany jest sitemap i wireframe?

Sitemap generuje się w około 10-30 sekund. Wireframe dla jednej strony zajmuje 30-60 sekund. Pełny zestaw wireframes (5-10 stron) to 2-5 minut.

Czy AI copy jest gotowe do użycia?

Copy jest dobrym placeholder'em i punktem startowym. Dla produkcji zazwyczaj wymaga edycji - szczególnie dopasowania do brand voice i sprawdzenia pod kątem faktów.

Podsumowanie

Relume to narzędzie, które rewolucjonizuje workflow web designerów:

AI Sitemap Generator - od opisu do struktury w sekundach
AI Wireframe Generator - kompletne wireframes w minuty
1000+ komponentów - profesjonalna biblioteka Figma/Webflow
Copy generation - placeholder tekst lepszy niż lorem ipsum
Style guide - spójny design system od startu
Figma & Webflow - natywne integracje

Idealne rozwiązanie dla agencji, freelancerów i zespołów in-house, którzy chcą przyspieszyć fazę discovery i wireframingu bez poświęcania jakości.

Relume - AI website generator and Figma component library

What is Relume?

Relume is a revolutionary AI platform that transforms the way websites are designed. It combines three powerful tools: an AI Sitemap Generator, an AI Wireframe Generator, and a massive library of ready-made Figma and Webflow components. With Relume, you can go from a business description to a complete wireframe in just a few minutes.

Founded in 2020 by Daneman Smith, Relume quickly became one of the most popular tools in the arsenal of web designers and digital agencies. The platform is especially valued for dramatically accelerating the discovery and wireframing phases - tasks that traditionally took hours or days can now be completed in minutes.

The Relume library contains over 1000 ready-made website sections - from hero sections, through pricing tables, to footers - all designed following UX best practices and ready for customization in Figma or direct export to Webflow.

Why Relume?

Key advantages

AI Sitemap Generator - Business description to complete site structure in seconds
AI Wireframe Generator - Sitemap to wireframes with layout and copy
1000+ components - Ready-made sections for Figma and Webflow
Figma Plugin - Direct library access within Figma
Webflow Export - Components ready to use in Webflow
AI Copywriting - Automatic website copy generation
Style Guide - Consistent design system from the start
Responsive - All components are mobile-ready

Relume vs manual design process

Aspect	Relume	Traditional process
Sitemap	30 seconds	1-2 hours
Wireframes	2-5 minutes	4-8 hours
Components	Ready-made	From scratch
Copy placeholder	AI-generated	Lorem ipsum
Consistency	Automatic	Depends on designer
Time to Hi-Fi	30 minutes	2-3 days
Client iterations	Instant	Hours

Relume vs other AI tools

Feature	Relume	Framer AI	Wix ADI	Squarespace
Focus	Wireframing + Components	Full website	Full website	Full website
Output	Figma/Webflow	Framer sites	Wix sites	Squarespace sites
Customizability	Full	High	Limited	Limited
Professional use	Yes	Yes	No	No
Component library	1000+	Limited	N/A	N/A
Sitemap AI	Yes	No	No	No

How does Relume work?

Step 1: AI Sitemap Generator

Code

TEXT

INPUT: Your business description

Example:
"SaaS for project management for remote teams.
We offer task management, time tracking, real-time
collaboration and integrations with popular tools.
We have 3 pricing plans: Free, Pro and Enterprise."

OUTPUT: Complete site structure
┌─────────────────────────────────────────────────────┐
│  GENERATED SITEMAP                                   │
│                                                      │
│  📄 Home                                            │
│  │                                                  │
│  ├── 📄 Features                                    │
│  │   ├── Task Management                            │
│  │   ├── Time Tracking                              │
│  │   ├── Real-time Collaboration                    │
│  │   └── Integrations                               │
│  │                                                  │
│  ├── 📄 Pricing                                     │
│  │   ├── Free Plan                                  │
│  │   ├── Pro Plan                                   │
│  │   └── Enterprise                                 │
│  │                                                  │
│  ├── 📄 About Us                                    │
│  │   ├── Our Story                                  │
│  │   ├── Team                                       │
│  │   └── Careers                                    │
│  │                                                  │
│  ├── 📄 Resources                                   │
│  │   ├── Blog                                       │
│  │   ├── Help Center                                │
│  │   └── Documentation                              │
│  │                                                  │
│  ├── 📄 Contact                                     │
│  │                                                  │
│  └── 📄 Legal                                       │
│      ├── Privacy Policy                             │
│      └── Terms of Service                           │
└─────────────────────────────────────────────────────┘

Step 2: AI Wireframe Generator

Code

TEXT

From the generated sitemap, AI creates wireframes for each page:

HOME PAGE WIREFRAME:
┌─────────────────────────────────────────────────────┐
│  [Logo]                    [Features] [Pricing] [CTA]│
├─────────────────────────────────────────────────────┤
│                                                      │
│  HERO SECTION                                        │
│  ┌───────────────────────────────────────────────┐  │
│  │  Manage Projects                               │  │
│  │  Like Never Before                             │  │
│  │                                                │  │
│  │  The all-in-one platform for remote teams     │  │
│  │  to collaborate, track time, and deliver.     │  │
│  │                                                │  │
│  │  [Start Free Trial]  [Watch Demo]             │  │
│  │                                                │  │
│  │  ┌─────────────────────────────────────────┐  │  │
│  │  │  [Product Screenshot]                    │  │  │
│  │  └─────────────────────────────────────────┘  │  │
│  └───────────────────────────────────────────────┘  │
│                                                      │
│  LOGOS SECTION                                       │
│  Trusted by teams at: [Logo] [Logo] [Logo] [Logo]   │
│                                                      │
│  FEATURES SECTION                                    │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐            │
│  │ 📋       │ │ ⏱️       │ │ 👥       │            │
│  │ Tasks    │ │ Time     │ │ Collab   │            │
│  │ Organize │ │ Track    │ │ Work     │            │
│  │ easily   │ │ accurate │ │ together │            │
│  └──────────┘ └──────────┘ └──────────┘            │
│                                                      │
│  TESTIMONIALS SECTION                                │
│  ┌───────────────────────────────────────────────┐  │
│  │ "This tool transformed how our team works"    │  │
│  │ - Sarah J., Product Manager at TechCorp      │  │
│  └───────────────────────────────────────────────┘  │
│                                                      │
│  CTA SECTION                                         │
│  Ready to boost your team's productivity?           │
│  [Start Free Trial]                                 │
│                                                      │
│  FOOTER                                              │
│  [Logo] [Links] [Social] [Newsletter]               │
└─────────────────────────────────────────────────────┘

Step 3: export to Figma/Webflow

Code

TEXT

EXPORT OPTIONS:

1. Figma Export:
   - Open Figma
   - Use Relume Plugin
   - Paste wireframe
   - Customize design

2. Webflow Export:
   - Relume Library → Webflow
   - Ready-made components
   - Full responsive
   - Custom classes

3. Copy only:
   - Export text
   - Use in any tool

Relume component library

Section categories

Code

TEXT

RELUME COMPONENT LIBRARY (1000+ sections):

🏠 Navigation (50+)
├── Navbar 1-20
├── Navbar with Mega Menu
├── Navbar with Search
├── Mobile Menu variants
└── Sidebar Navigation

🦸 Hero Sections (100+)
├── Hero with Image
├── Hero with Video
├── Hero with Animation
├── Hero Split Layout
├── Hero with Form
└── Hero Minimal

📝 Content Sections (200+)
├── Features Grid
├── Features List
├── Benefits
├── How It Works
├── Stats/Metrics
└── Timeline

💬 Social Proof (80+)
├── Testimonials Carousel
├── Testimonials Grid
├── Reviews
├── Case Studies
├── Logos Bar
└── Ratings

💰 Pricing (40+)
├── Pricing Table
├── Pricing Cards
├── Pricing Comparison
├── Pricing Toggle
└── Enterprise Pricing

📧 CTA Sections (60+)
├── CTA Banner
├── CTA with Form
├── CTA Split
├── Newsletter
└── Download CTA

❓ FAQ (30+)
├── FAQ Accordion
├── FAQ Grid
├── FAQ with Categories
└── FAQ with Search

👥 Team (25+)
├── Team Grid
├── Team Carousel
├── Team with Bio
└── Leadership

📰 Blog (50+)
├── Blog Grid
├── Blog List
├── Featured Post
├── Blog Categories
└── Author Bio

🦶 Footer (60+)
├── Footer Simple
├── Footer with Newsletter
├── Footer Multi-column
├── Footer with Social
└── Footer Minimal

📱 Forms (40+)
├── Contact Form
├── Sign Up Form
├── Multi-step Form
├── Form with Validation
└── Inline Form

🖼️ Gallery (30+)
├── Image Grid
├── Masonry Gallery
├── Lightbox Gallery
└── Portfolio Grid

Example components

Code

TEXT

HERO SECTION - Header 1

┌─────────────────────────────────────────────────────┐
│                                                      │
│     [Medium length hero headline goes here]          │
│                                                      │
│     Lorem ipsum dolor sit amet, consectetur          │
│     adipiscing elit. Suspendisse varius enim         │
│     in eros elementum tristique.                     │
│                                                      │
│     [Primary Button]  [Secondary Button]             │
│                                                      │
│     ┌─────────────────────────────────────────┐     │
│     │                                         │     │
│     │         [Placeholder Image]             │     │
│     │              800 x 600                  │     │
│     │                                         │     │
│     └─────────────────────────────────────────┘     │
│                                                      │
└─────────────────────────────────────────────────────┘

Properties:
- Layout: Centered / Left-aligned / Split
- Image: Above / Below / Side / Background
- CTA: 1 button / 2 buttons / Form
- Badge: Optional

Code

TEXT

PRICING TABLE - Pricing 3

┌─────────────────────────────────────────────────────┐
│                                                      │
│           Choose the right plan for you             │
│                                                      │
│  ┌─────────────┐ ┌─────────────┐ ┌─────────────┐   │
│  │   BASIC     │ │   PRO       │ │ ENTERPRISE  │   │
│  │             │ │  Popular ⭐ │ │             │   │
│  │   $19/mo    │ │   $49/mo    │ │   Custom    │   │
│  │             │ │             │ │             │   │
│  │ ✓ Feature 1 │ │ ✓ Feature 1 │ │ ✓ Feature 1 │   │
│  │ ✓ Feature 2 │ │ ✓ Feature 2 │ │ ✓ Feature 2 │   │
│  │ ✗ Feature 3 │ │ ✓ Feature 3 │ │ ✓ Feature 3 │   │
│  │ ✗ Feature 4 │ │ ✓ Feature 4 │ │ ✓ Feature 4 │   │
│  │             │ │             │ │ ✓ Feature 5 │   │
│  │ [Get Basic] │ │ [Get Pro]   │ │ [Contact]   │   │
│  └─────────────┘ └─────────────┘ └─────────────┘   │
│                                                      │
└─────────────────────────────────────────────────────┘

Relume Figma Plugin

Installation and usage

Code

TEXT

INSTALLATION:

1. Open Figma
2. Menu → Plugins → Browse plugins
3. Search for "Relume"
4. Install plugin
5. Log in with your Relume account

USAGE:

1. Plugins → Relume
2. Browse components
3. Search or filter by category
4. Drag & drop into project
5. Detach instance for editing

Figma workflow

Code

TEXT

PROFESSIONAL WORKFLOW:

1. Discovery Phase
   └── Relume AI → Sitemap
   └── Review with client
   └── Iterations (instant!)

2. Wireframe Phase
   └── Relume AI → Wireframes
   └── Export to Figma
   └── Quick adjustments

3. Design Phase
   └── Detach components
   └── Apply brand colors
   └── Custom typography
   └── Add imagery

4. Handoff Phase
   └── Export to Webflow
   └── Or specs for developers

Relume for Webflow

Direct export

Code

TEXT

WEBFLOW INTEGRATION:

1. Relume Library
   └── Browse components
   └── Copy component
   └── Paste in Webflow Designer

2. Component structure:
   ├── Section wrapper
   ├── Container
   ├── Layout elements
   ├── Text with classes
   └── Responsive breakpoints

3. Classes:
   └── BEM naming convention
   └── Consistent spacing
   └── Reusable styles

Webflow component structure

Code

HTML

<!-- Example Hero structure from Relume -->
<section class="section_hero">
  <div class="padding-global">
    <div class="container-large">
      <div class="padding-section-large">
        <div class="hero_component">
          <div class="hero_content">
            <div class="margin-bottom margin-small">
              <h1 class="heading-style-h1">
                Medium length hero headline goes here
              </h1>
            </div>
            <p class="text-size-medium">
              Lorem ipsum dolor sit amet, consectetur
              adipiscing elit.
            </p>
            <div class="margin-top margin-medium">
              <div class="button-group">
                <a href="#" class="button is-primary">
                  Primary Button
                </a>
                <a href="#" class="button is-secondary">
                  Secondary Button
                </a>
              </div>
            </div>
          </div>
          <div class="hero_image-wrapper">
            <img src="placeholder.svg"
                 loading="lazy"
                 alt=""
                 class="hero_image">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

AI copywriting

Content generation

Code

TEXT

RELUME AI COPY:

Input Context:
- Business type: SaaS
- Target audience: Remote teams
- Tone: Professional but friendly
- Product: Project management tool

Generated Copy for Hero:

Headline:
"Manage Projects Like Never Before"

Subheadline:
"The all-in-one platform that helps remote teams
collaborate seamlessly, track time accurately,
and deliver projects on schedule."

CTA Primary: "Start Free Trial"
CTA Secondary: "Watch Demo"

Features:
- "Task Management: Organize, prioritize, and track
  tasks with our intuitive board view."
- "Time Tracking: Know exactly where your team's
  time goes with automatic tracking."
- "Real-time Collaboration: Work together in
  real-time, no matter where you are."

Tone and style options

Code

TEXT

COPY TONE OPTIONS:

1. Professional
   └── B2B, Enterprise
   └── Formal language
   └── Industry terminology

2. Friendly
   └── Startups, SaaS
   └── Conversational
   └── Approachable

3. Bold
   └── Creative agencies
   └── Strong statements
   └── Impactful headlines

4. Minimal
   └── Luxury brands
   └── Few words
   └── Let design speak

5. Technical
   └── Developer tools
   └── Specific terminology
   └── Feature-focused

Style guide generation

Automatic design tokens

Code

TEXT

GENERATED STYLE GUIDE:

Typography:
├── Heading 1: 48px / 56px / Bold
├── Heading 2: 36px / 44px / Bold
├── Heading 3: 28px / 36px / Semi-bold
├── Heading 4: 24px / 32px / Semi-bold
├── Body Large: 18px / 28px / Regular
├── Body: 16px / 24px / Regular
└── Small: 14px / 20px / Regular

Colors:
├── Primary: #3366FF
├── Secondary: #6B7280
├── Success: #10B981
├── Warning: #F59E0B
├── Error: #EF4444
├── Background: #FFFFFF
├── Surface: #F9FAFB
└── Text: #111827

Spacing:
├── xs: 4px
├── sm: 8px
├── md: 16px
├── lg: 24px
├── xl: 32px
├── 2xl: 48px
└── 3xl: 64px

Border Radius:
├── sm: 4px
├── md: 8px
├── lg: 12px
└── full: 9999px

Shadows:
├── sm: 0 1px 2px rgba(0,0,0,0.05)
├── md: 0 4px 6px rgba(0,0,0,0.1)
└── lg: 0 10px 15px rgba(0,0,0,0.1)

Use cases

For agencies

Code

TEXT

AGENCY WORKFLOW:

Discovery Call (Day 1):
└── Notes from client call
└── AI Sitemap → 30 seconds
└── Structure presentation
└── Instant feedback

Wireframing (Day 1-2):
└── AI Wireframes → 5 minutes
└── Export to Figma
└── Quick customization
└── Client review

Design (Day 2-4):
└── Apply brand
└── Customize components
└── Add real content

Development (Day 5+):
└── Webflow export
└── Or handoff to devs

ROI:
- 10+ hours saved per project
- Faster client iterations
- Higher margins
- More projects

For freelancers

Code

TEXT

FREELANCER BENEFITS:

1. Faster proposals
   └── Generate sitemap for pitch
   └── Show wireframes in proposal
   └── Impress clients

2. Consistent quality
   └── Professional components
   └── Best practices built-in
   └── No starting from scratch

3. Scale business
   └── Handle more projects
   └── Faster turnaround
   └── Higher prices justified

4. Learning tool
   └── Study component structure
   └── Learn layout patterns
   └── Improve design skills

For in-house teams

Code

TEXT

IN-HOUSE TEAM USE:

1. Design System starter
   └── Relume as foundation
   └── Customize to brand
   └── Maintain consistency

2. Rapid prototyping
   └── Test ideas quickly
   └── Stakeholder feedback
   └── Validate before building

3. Handoff to development
   └── Clear component structure
   └── Consistent naming
   └── Responsive specs

Integrations

Supported platforms

Code

TEXT

INTEGRATIONS:

Design:
├── Figma (native plugin)
├── Sketch (component library)
└── Adobe XD (manual export)

Development:
├── Webflow (native export)
├── Framer (manual)
├── React (component structure)
└── HTML/CSS (export)

Project Management:
├── Notion (sitemap export)
├── Miro (wireframes)
└── FigJam (collaborative)

Coming Soon:
├── WordPress
├── Shopify
└── Direct code export

API access

Code

JavaScript

// Relume API (Business/Enterprise)

const relume = require('relume-api');

// Generate sitemap
const sitemap = await relume.generateSitemap({
  businessDescription: "SaaS for project management...",
  pages: ['home', 'features', 'pricing', 'about', 'contact'],
  style: 'professional'
});

// Generate wireframes
const wireframes = await relume.generateWireframes({
  sitemap: sitemap.id,
  components: 'auto',
  copyTone: 'friendly'
});

// Export to Figma
const figmaFile = await relume.exportToFigma({
  wireframes: wireframes.id,
  styleGuide: true
});

console.log(`Figma file: ${figmaFile.url}`);

Tips and best practices

Using AI effectively

Code

TEXT

TIPS FOR BETTER AI OUTPUT:

1. Detailed descriptions
   ❌ "E-commerce website"
   ✅ "Online store selling handmade jewelry,
       targeting women 25-45, premium segment,
       focus on sustainability and craftsmanship"

2. Specify features
   ❌ "Landing page"
   ✅ "SaaS landing page with:
       - Hero with product demo video
       - 3 pricing tiers
       - Integration logos section
       - Customer testimonials
       - FAQ accordion"

3. Define tone
   ❌ Default copy
   ✅ "Professional but approachable tone,
       avoid jargon, focus on benefits
       over features"

4. Industry context
   ❌ "Healthcare app"
   ✅ "Telemedicine platform for mental health,
       targeting stressed professionals,
       emphasis on privacy and convenience"

Customization workflow

Code

TEXT

CUSTOMIZATION BEST PRACTICES:

1. Start with closest component
   └── Don't force wrong layout
   └── Find best base
   └── Then customize

2. Detach thoughtfully
   └── Keep linked for variants
   └── Detach for major changes
   └── Document modifications

3. Maintain consistency
   └── Use style guide tokens
   └── Don't mix spacing values
   └── Stick to type scale

4. Responsive check
   └── Test all breakpoints
   └── Adjust mobile layouts
   └── Verify touch targets

Pricing

Plan	Price	Includes
Free	$0/mo	Limited AI generations, Browse library
Pro	$38/mo	Unlimited AI, Full library access
Team	$29/user/mo	Collaboration, Shared projects
Enterprise	Custom	API, Custom training, Support

Plan details

Free:

5 AI sitemap generations/mo
3 AI wireframe generations/mo
Browse component library
Figma plugin (limited)

Pro ($38/mo):

Unlimited AI generations
Full component library (1000+)
Figma plugin (full)
Webflow export
Style guide generation
Copy generation

Team ($29/user/mo):

Everything in Pro
Team workspace
Shared style guides
Collaborative editing
Admin controls

Enterprise:

Everything in Team
API access
Custom AI training
Dedicated support
SLA guarantee
Custom integrations

FAQ - frequently asked questions

Does Relume replace a designer?

No, Relume accelerates a designer's work. AI generates a starting point - structure, wireframes, placeholder copy. The designer adds branding, creativity, and polish that AI is not able to achieve.

How accurate are AI-generated sitemaps?

Very accurate for typical business websites. The AI is based on best practices and thousands of analyzed websites. It is always worth reviewing and adjusting to the specific needs of the client.

Can I use components in commercial projects?

Yes, the Relume license allows using components in an unlimited number of commercial projects. You do not need to provide attribution.

How do components look on mobile?

All components are fully responsive with thoughtful breakpoints for tablet and mobile. You can further customize them for specific needs.

Does Relume work with Framer?

Officially, Relume supports Figma and Webflow. For Framer, you can use components as a reference and recreate them manually or export from Figma.

How fast are sitemaps and wireframes generated?

A sitemap is generated in about 10-30 seconds. A wireframe for a single page takes 30-60 seconds. A full set of wireframes (5-10 pages) takes 2-5 minutes.

Is AI copy ready to use?

The copy is a good placeholder and starting point. For production, it usually requires editing - especially matching it to the brand voice and fact-checking.

Summary

Relume is a tool that revolutionizes the workflow of web designers:

AI Sitemap Generator - from description to structure in seconds
AI Wireframe Generator - complete wireframes in minutes
1000+ components - professional Figma/Webflow library
Copy generation - placeholder text better than lorem ipsum
Style guide - consistent design system from the start
Figma & Webflow - native integrations

The ideal solution for agencies, freelancers, and in-house teams who want to accelerate the discovery and wireframing phases without sacrificing quality.