Prijzen: AI Studio voorbeelden

AI Studio kan alles bouwen, van één landingspagina tot complete webervaringen met meerdere pagina's, formulieren, boekingsflows en gekoppelde domeinen. Omdat elk verzoek een andere omvang heeft, varieert het werk dat AI Studio uitvoert — het aantal prompts, redeneerstappen, gegenereerde assets en verbindingsacties — per project.

In dit artikel leggen we uit hoe AI Studio-projecten zijn opgebouwd, wat er tijdens een bouwsessie gebeurt en welke factoren de hoeveelheid werk beïnvloeden, aan de hand van voorbeelden uit de praktijk.

INHOUDSOPGAVE

• Understanding AI Studio Build Sessions
• AI Studio Pricing Overview
• Yoga Lead-Capture Landing Page
• Image-Forward Editorial Fashion Landing Page
• 7-Page Travel Website with a CMS
• What Affects AI Studio Usage?
• Frequently Asked Questions

Bouwsessies in AI Studio begrijpen

Een AI Studio-project bestaat uit een of meer conversatierondes waarin de AI plant, redeneert, content en visuals genereert, een live preview weergeeft en ondersteunde acties uitvoert, zoals het koppelen van een formulier of kalender. Elke sessie wordt gemeten op basis van het uitgevoerde werk en niet alleen op basis van het aantal ingediende prompts.

Een typische bouwsessie kan het volgende bevatten:

• Je verzoek begrijpen
• Vervolgvragen stellen wanneer het verzoek breed is
• Een referentie-URL, screenshot of geüploade afbeeldingen gebruiken als richting
• Een structuur voor één of meerdere pagina's plannen
• Layout, copy en visuals genereren
• Een live, bewerkbare preview weergeven
• Bij elke wijziging een nieuwe versie maken
• Ondersteunde componenten, zoals formulieren en kalenders, koppelen
• Publiceren naar een preview- of aangepast domein

Complexere projecten — meer pagina's, meer verfijningen en gekoppelde componenten — omvatten over het algemeen meer verwerking dan een concept voor één pagina.

Overzicht van de prijzen van AI Studio

AI Studio werkt met een gebruiksgebaseerd model. De kosten van een sessie variëren daarom op basis van de complexiteit van het verzoek, het aantal uitgevoerde AI-bewerkingen en eventuele gegenereerde assets of verbindingsacties.

De kosten zijn niet simpelweg gebaseerd op het aantal pagina's. Door AI gegenereerde afbeeldingen en andere media kunnen een grotere invloed hebben op het gebruik. Zo kan één landingspagina met veel afbeeldingen meer kosten dan een gestructureerde site van 7 pagina's met minder gegenereerde afbeeldingen.

 om te zien hoe je inbegrepen AI Studio-gebruik eruitziet.Use the AI Plan Calculator om te zien hoe je inbegrepen AI Studio-gebruik eruitziet.

Omdat de kosten zijn gebaseerd op het werk dat tijdens een sessie wordt uitgevoerd, schalen de totale kosten over het algemeen mee met:

• Het aantal redeneer- en planningsstappen
• Het aantal gegenereerde pagina's
• Het genereren van content en copy
• Door AI gegenereerde afbeeldingen en andere media
• Analyse van een referentie-URL of afbeelding
• Formulier- en kalenderkoppelingen
• Iteratieve verfijningen en versiegeschiedenis
• Publiceren en instellen van een aangepast domein

Yogalandingspagina voor leadcapture

Dit voorbeeld laat zien hoe AI Studio op basis van een korte prompt een verzorgde leadcapture-site met één pagina bouwt — inclusief het genereren van afbeeldingen, een thematisch designsysteem en een gevalideerd leadformulier, waarna wordt aangeboden om het formulier met de CRM te koppelen.

Overzicht

AI Studio bouwde een landingspagina met één pagina voor yogaleads, “Sahaja”, met een hero, voordelenraster, lesstijlen, weekschema, biografie van de instructeur, testimonials en een gevalideerd leadformulier. De pagina kreeg een saliegroen kleurenpalet en Fraunces/Inter-typografie. Daarna werd de gebruiker gevraagd om het formulier met de CRM te koppelen.

Gebruikersverzoek

Maak een landingspagina om leads voor mijn yogalessen te verzamelen

De gegenereerde Sahaja-yogalandingspagina met een hero met “Find your balance” en een call-to-action voor een gratis proefles.

Hoe AI Studio de taak verwerkte

AI Studio:

• Genereerde afbeeldingen van yoga bij zonsopkomst en stelde het designsysteem parallel in
• Stelde de saliegroene designtokens en de Fraunces/Inter-lettertypen in
• Bouwde een gedeelde siteheader en de landingspagina (hero, voordelen, lesstijlen, schema, biografie, testimonials)
• Bouwde een gevalideerd leadcapture-formulier (naam, e-mail, telefoon, interesse in lessen, notities) met een successtatus
• Controleerde of de build correct was
• Vroeg de gebruiker om het formulier met de CRM te koppelen

De stappen van de bouwsessie — afbeeldingen genereren, het designsysteem instellen en de pagina en het leadformulier bouwen (14 tools gebruikt).

Wat er is gebouwd

• Hero met afbeeldingen van yoga bij zonsopkomst en een call-to-action voor een gratis proefles
• Voordelenraster en vier kenmerkende lesstijlen
• Weekschema en biografie van de instructeur
• Testimonials van studenten
• Gevalideerd leadcapture-formulier (naam, e-mail, telefoon, interesse in lessen, notities) met een successtatus
• Saliegroen kleurenpalet met Fraunces/Inter-typografie

Sessiedetails

Redactionele fashionlandingspagina gericht op afbeeldingen

Dit voorbeeld laat zien hoe AI Studio op basis van een gedetailleerde prompt een landingspagina met een sterk design en veel animaties bouwt — inclusief het installeren van een dependency, het genereren van een volledige set afbeeldingen en het toepassen van aangepaste typografie en motion.

Overzicht

AI Studio bouwde een luxe, redactionele fashionlandingspagina, “Maison Noir”, met een parallaxhero over de volledige breedte, afwisselende collectie-secties met afbeeldingen en tekst, een masonry-galerij over de volledige breedte en vloeiende hoveranimaties — allemaal op basis van één gedetailleerde prompt.

Gebruikersverzoek

Maak een visueel opvallende, op afbeeldingen gerichte landingspagina voor een fashionmerk. Een hero-afbeelding over de volledige breedte, opvallende typografie, parallaxscrolling, afwisselende secties met afbeeldingen en tekst, een galerijraster over de volledige breedte en vloeiende hoveranimaties. Een premium, redactionele uitstraling met veel witruimte en een samenhangend kleurenpalet.

De gegenereerde redactionele hero “The Art of Undressing the Dark” met parallax en Cormorant Garamond als display-lettertype.

Hoe AI Studio de taak verwerkte

AI Studio:

• Kies voor een luxe Noir & Gold-richting met Cormorant display en Karla als bodytypografie

• Installeerde

  framer-motion

  voor scroll- en hoveranimaties

• Genereerde de volledige set hero- en collectieafbeeldingen parallel
• Stelde designtokens in met het Noir & Gold-palet en redactionele typografie
• Bouwde de pagina — hero met parallax, afwisselende collectiesecties, galerijraster en footer
• Maakte de paginabestanden en verfijnde deze iteratief

Wat er is gebouwd

• Parallaxhero over de volledige breedte met door scrolling aangestuurde afbeeldingsschaal en een vervagende headline
• Opvallende Cormorant Garamond-displaytypografie gecombineerd met Karla-bodytekst

• Noir & Gold-palet via semantische designtokens in

  src/index.css

• Drie afwisselende collectie- secties met afbeeldingen en tekst, met parallaxverschuiving van afbeeldingen en hoverzoom
• Masonry-galerijraster over de volledige breedte met captions die bij hover verschijnen en trapsgewijze entreeanimaties

Sessiedetails

Reiswebsite van 7 pagina's met een CMS

Dit voorbeeld laat zien hoe AI Studio een grotere site met meerdere pagina's bouwt, met bewerkbare contentcollecties, een contactformulier en gedeelde navigatie — het soort gestructureerd project waarvoor de meeste planning en paginageneratie nodig is.

Overzicht

AI Studio bouwde een complete website van 7 pagina's, “Bharat Voyages”, voor een reisbedrijf in India — met gedeelde navigatie en footer, een CMS voor blogposts en tours, responsive design, SEO-metadata en een contactformulier dat klaar is om met de CRM te worden gekoppeld.

Gebruikersverzoek

Bouw een website van 7 pagina's met een CMS voor een reisbedrijf in India. Home, About, Services, Blog (CMS-collectie), Portfolio/Projects (CMS-collectie), Pricing en Contact (met formulier). Gedeelde navigatie en footer, responsive design, bewerkbare contentcollecties voor blogposts en projecten en een SEO-vriendelijke structuur.

De gegenereerde homepagina van Bharat Voyages met gedeelde navigatie, hero en statistiekenbalk — plus de prompt “Connect to CRM” voor het contactformulier.

Hoe AI Studio de taak verwerkte

AI Studio:

• Plande een structuur van 7 pagina's met gedeelde navigatie en footer
• Genereerde content en afbeeldingen voor de pagina's
• Bouwde bewerkbare CMS-contentcollecties voor blogposts en tours
• Paste responsive design en SEO-metadata toe
• Bouwde een contactformulier en stelde voor om dit met de CRM te koppelen

Gemaakte pagina's

Sessiedetails

Wat beïnvloedt het gebruik van AI Studio?

Het gebruik van AI Studio is gebaseerd op het werk dat tijdens een sessie wordt uitgevoerd en niet alleen op het aantal prompts. Sessies worden intensiever voor resources wanneer meer redeneer-, generatie- of verbindingsacties nodig zijn. Factoren die het totale werk verhogen zijn onder andere:

• Structuren met meerdere pagina's en grotere projecten
• Vervolgvragen en meerdere verfijningen
• Door AI gegenereerde afbeeldingen en andere media
• Analyse van een referentie-URL en afbeelding
• Formulier- en kalenderkoppelingen
• Instellen en publiceren van een aangepast domein
• Versiegeschiedenis door herhaalde wijzigingen

Op basis van de bovenstaande voorbeelden:

• Door AI gegenereerde afbeeldingen zijn vaak de grootste afzonderlijke kostenfactor — pagina's met veel afbeeldingen kunnen meer kosten dan sites met meer pagina's maar minder gegenereerde media.
• Alleen het aantal pagina's is geen betrouwbare voorspeller van de kosten; een gestructureerde site van 7 pagina's kan minder kosten dan één landingspagina die sterk op afbeeldingen is gericht.
• Tekst, layout en CMS-structuur vereisen over het algemeen minder verwerking dan het genereren van visuals.

Meldingen over gebruik en uitgaven van AI Studio

AI Studio toont meldingsbanners voor het gebruik om gebruikers te helpen hun verbruik en uitgaven te controleren voordat ze hun limieten bereiken. Deze banners worden automatisch ingeschakeld voor gebruikers die toegang hebben tot AI Studio. Er is dus geen extra configuratie nodig.

Meldingen over gebruik van abonnement

Gebruikers met een abonnement ontvangen meldingen wanneer hun AI Studio-gebruik toeneemt:

• 70% gebruik: Gebruiksmelding

• 85% gebruik: Waarschuwing

• Bij het naderen of bereiken van 100%: Kritieke meldingen en meldingen over uitgeput gebruik

Bestedingsmeldingen voor pay-per-use

Gebruikers met pay-per-use ontvangen voor elke $50 die aan AI Studio is besteed een bestedingsmelding. Deze meldingen helpen gebruikers het lopende gebruik en de kosten te controleren wanneer de uitgaven toenemen.

Veelgestelde vragen

V: Hoeveel kost AI Studio?

AI Studio gebruikt gebruiksgebaseerde prijzen. De kosten zijn daarom afhankelijk van het werk dat in elke sessie wordt uitgevoerd.

V: Voert elke prompt dezelfde hoeveelheid werk uit?

Nee. Het werk varieert afhankelijk van de complexiteit van het verzoek — het aantal pagina's, verfijningen, gegenereerde assets en verbindingsacties.

V: Vereist het genereren van afbeeldingen meer werk dan tekst?

Over het algemeen wel. Het genereren van afbeeldingen of andere visuele assets vereist doorgaans meer verwerking dan het genereren van alleen tekst.

V: Worden formulieren en kalenders automatisch gekoppeld?

Nee. AI Studio bouwt eerst de formulier- of boekingslayout en koppelt deze daarna wanneer je daarom vraagt of op Connect klikt. Inzendingen en boekingen komen pas na die stap in je account terecht.

V: Kan AI Studio een site exact namaken op basis van een URL?

Een referentie-URL of afbeelding moet worden gezien als inspiratie voor structuur, layout en stijl en niet als een exacte één-op-éénkopie.