Vibe Skills

Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.

SaaS Zerga Orriaren Diseinurako AI Gaitasun Hoberenak: Zergatik da Zure Zerga Orria Jabetzen Zaren Orrialderik Eraginkorrena

2026an SaaS zerga orrien diseinurako AI gaitasun hoberenek zerga sistema osoa sortzen dute - 3 eta 4 plan txartel, konparazio taula, FAQ, froga sozialeko blokea eta faktura aldagailua - pase batean, Next.js, Webflow edo Framer-en txertatzeko prest. Zerga orria SaaS gune bateko orrialderik bihurtzaileena da, eta 3 txartel hutseko diseinu baten eta Linear mailako zerga sistema baten arteko aldea hileko diru sarrera errepikarian neurtzen da.

Linearrek, Stripe-k, Notion-ek, Vercel-ek, Framer-ek eta Webflow-ek beren zerga orriak berreraiki zituzten 2023 eta 2026 artean. Eredua orain koherentea da: plan txartel argiak ezaugarri bat nabarmenduta, konparazio taula sakona, urteko/hilabeteko aldagailua prezioak tokian bertan eguneratzen dituena, fold-aren gainetik froga soziala eta oztopo guztiak aurreikusten dituen FAQ bat. SaaS zerga orri gehienek oraindik ere 3 txartel gutxietsitako pentsamendu gisara merkaturatzen dira.

Gida honek 2026an Vibe Skills webgunean gomendatzen ditugun 7 SaaS zerga orrien gaitasunak lantzen ditu, bakoitzak zer bidaltzen duen eta nola jarri Stripe mailako zerga orri bat zure gunean aste honetan.

Vibe Skills

Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.

Arakatu Gaitasunak

Hasi Doan Orain

Zergatik Zerga Orriaren Diseinuak erabakitzen du SaaSaren Diru Sarrerak

Zerga orria da intentzioa frikzioarekin topatzen den lekua, eta diseinua da frikzio hori. Orrialde honetan dagoen bisitari oro dagoeneko erosi dezaketela erabakita dago. Orriaren lana da buelta emateko arrazoi oro kentzea eta "zein plan eta zenbat" galderari erantzun segurua ematea.

Zerga orriek SaaS gune bateko beste edozein marketin orri baino 3 - 8 aldiz tasa handiagoan bihurtzen dute. Sortzaileek hasierako orriaren kopiaren inguruan obsesionatzen dira eta akordioa ixten duen orria ahaztu egiten dute. Emaitza da hasierako orria baino motelago kargatzen den zerga orri bat, hierarkia bisual ahulagoa duena, konparazio datuak falta dituena, FAQrik gabe, eta 4 zutabeetan hausten den mugikorrerako diseinua.

Konpondu zuten taldeen eredua:

Linearrek 3 txartel dituen zerga orri bat bidaltzen du, konparazio taula garbi batekin, enpresa batentzako deialdi batekin eta FAQ batekin - ez da nahaspilerik
Stripe-k kalkulagailu bidez gidatutako zerga orri bat erabiltzen du, produktuaren arabera funtzioak aldatzen diren heinean eguneratzen dena
Notion-ek 4 txartel dituen zerga orri bat (Doako / Plus / Negozioa / Enpresa) exekutatzen du, inprimaki luzeko konparazio batekin eta aparteko AI gehigarri bat errenkadan
Vercel-ek faktura aldagailua, erabilera-muga gogorrak eta 60+ errenkada erakusten dituen "konparatu planak" hedagarria duen zerga orri bat eraiki zuen
Webflow-ek gune bakoitzeko eta lan-espazio bakoitzeko zerga zerbitzatzen du orrialde berean, diseinu osoa aldatzen duen fitxa sistema batekin
Framer-ek urteko zerga erakusten du lehenespenez eta "% X aurreztu" balio bat erabiltzen du deskontua ainguratzeko

Bihurtze datuek eredua babesten dute. 2025 - 2026ko SaaS taldeetan egindako zerga orrien berreraikuntzek %15 - 40ko igoerak jakinarazi dituzte proba-ordainpeko bihurtzean eta %8 - 22ko igoerak erregistratutako batez besteko diru sarreretan izena emateko orduan, konparazio taula, fold-aren gainetik froga soziala eta urteroko aldagailu bat urteko lehenespenez gehitzen zenean.

Harrapaketa kostua zen. Freelance diseinatzaile + frontend bikote baten zerga orri pertsonalizatu bat Stripe mailakoa 8.000 - 25.000 $ artean kostatzen da eta 4 - 8 aste behar ditu diseinu eta ingeniaritza iteraziorako. AI gaitasunek hori arratsalde bakar batera murrizten dute.

Vibe Skills

Arakatu ehunka gaitasun prestatuak Claude, Cursor eta gehiagorako.

Arakatu Gaitasunak

Hasi Doan Orain

Diru Sarrerak Bihurtzen Dituen Zerga Orriaren Anatomia

Diru sarrerak bidaltzen dituen zerga orri batek sei geruza ditu. SaaS zerga orri gehienek bi edo hiru bidaltzen dituzte eta bihurketak zergatik lautu diren galdetzen dute. Benetako AI zerga orriaren gaitasunak seiak bidaltzen ditu.

Geruza	Zer egiten du	Zergatik da garrantzitsua	Akats ohikoa
Plan txartelak	3 - 4 txartel izenarekin, prezioarekin, funtzio nagusiekin, deialdiarekin	Lehen eskaneatzea. Bisitariek 8 segundotan erabakitzen dute beren plana.	Txartel guztiak berdinak dira - ez dago aukeratutako gomendiorik
Faktura aldagailua	Hilabeteko / Urteko etengailua, prezioak tokian bertan eguneratzen dituena	Lehenespenez ezartzen dute aingura. Urteko lehenespenez = ARPU handiagoa.	Aldagailua fold-aren azpian ezkutatu edo orria birkargatu egiten da
Konparazio taula	Plan guztiak zeharkatzen dituen funtzio matrize luzea	"Niretzat egokia den plana" oztopoa ixten du	Erabat falta da, edo klik baten atzean ezkutatu egiten da
Froga soziala	Logotipoak, testigantzak, bezero kopurua fold-aren gainetik	Eroslearentzako arriskua murrizten du lehen 2 segundotan	Logotipoak behean, inork korritzen ez duen lekuan
FAQ	6 - 12 aurreikusitako oztopoak	Laguntza txartelak murrizten ditu eta salmenta gordetzen du	Ohiko FAQek ez dituzte benetako eroslearen galderak erantzuten
Enpresa / Salmenta CTA	Txartel edo pankarta bereizia "Jarri harremanetan salmentarekin"	Kontu handiak plan okerrean auto-hautatzea saihesten du	Falta da, edo hain nabarmena da non auto-zerbitzua suntsitzen duen

Plan txartelak ez dira berdinak. Diru sarrerak bihurtzen dituen zerga orri batek beti du plan bat bisualki goratua "Herrikoiena" edo "Gomendatua" gisa. Hau ez da apaindura. Zure plan xedean erosle gehienak sartzen dituen aingura da. Linearrek Standard goratzen du. Notion-ek Plus goratzen du. Vercel-ek Pro goratzen du. Aukeratu ARPU eta bizi osoko balioa maximizatzen duen plana, gero egin ezazu heroi bisuala.

Faktura aldagailuak aingura ezartzen du. Zure aldagailuak hilabeteko lehenespenez ezartzen badu, erosleak zenbaki txikiagoan ainguratzen ari zara. Urtekaria ezarri eta aurrezkiak adierazi ("%25 aurreztu") eta berehala ARPU igotzen duzu. Framer, Linear eta Vercel-ek urteko lehenespenez ezartzen dute.

Konparazio taula da akordioa benetan ixten den lekua. Txarteletatik korritzen duten erosleak "konbentzitu nazazu" fasean daude. Konparazio taula da zure akabera. Luzea izan behar du, kategoriaren arabera egituratua (Mugak / Ezaugarriak / Laguntza / Betearazpena), eta adierazle bitar argiak erabili (kontrol markak, marrak, "Pertsonalizatua" pilulak). Hau saltatzea da indie SaaS zerga orrietako akats handiena.

Vibe Skills-eko SaaS Zerga Orrien Diseinurako 7 AI Gaitasunak

Hauek dira 2026an gomendatzen ditugun 7 SaaS zerga orrien gaitasunak. Guztiak Web eta UI Diseinuaren kategorian bizi dira Vibe Skills-en eta React, Next.js edo Webflow / Framer prest dauden osagai gisa bidaltzen dira, konparazio taulak, FAQ eta faktura aldagailuak barne hartuta.

1. 3 Txarteleko Zerga Orriaren Sortzailea (Linear Estiloa)

3 txartel garbi dituen diseinua, plan bat "Herrikoienerako" goratuta. Zure planak, prezioak eta funtzioen zerrendak pasatu, eta gaitasunak txartelak, faktura aldagailua, konparazio taula, FAQ eta froga sozialeko barra sortuko ditu. Next.js orrialde bakarra edo Framer txantiloi gisa bidaltzen da.

Onena: SaaS, garapen tresnak, indie produktuak, zerga 3 planetan garbi sartzen den edonorentzat. Irteera: <PricingPage /> Next.js orrialdea edo .framer txantiloia, konparazio taula, FAQ atala. Bidaltzeko denbora: 60 - 90 minutu sarreratik zabaldura arte.

2. 4 Txarteleko Zerga Orria (Notion / Vercel Estiloa)

4 txarteleko diseinua Doako, Estándar, Pro eta Enpresa behar duten produktuentzat. 3 txarteleko gaitasunaren berdina den sortzailea, baina diseinuaren hierarkia bisuala 4 zutabeetarako mahaigainean eta 2x2 sareta batean tabletetan.

Onena: Freemium SaaS, doako maila argia duten produktuak, orrialde berean enpresa igotzea behar duen edozertarako. Irteera: <PricingPage4 /> osagai bat 4 zutabe arduratsu dituen sareta batekin, konparazio taula osoa, enpresa batentzako deialdi txartela.

3. Zerga Konparazio Taularen Gaitasuna

Dauden plan txartelen azpian sar dezakezun aparteko konparazio taula sakona. 40 - 80 errenkada sortzen ditu kategoriaren arabera antolatuta (Mugak, Ezaugarriak, Integrazioak, Segurtasuna, Laguntza), zutabe-buru finkoak eta mugikorretarako erraz erabilgarri dagoen korritze horizontala dituena.

Onena: Funtzio zerrenda luzea duten SaaS helduak, "ez dakit zer lortzen dudan" esaten duten produktuak. Irteera: <ComparisonTable /> osagai bat JSON bidez gidatutako errenkadak, buru finkoak arduratsuak, planaren koloreen nabarmendua.

4. Urteko / Hilabeteko Faktura Aldagailua

Prezioak tokian bertan aldatzen dituen etengailu interaktiboa "% X aurreztu" balioarekin. Edozein zerga orri daudenera sartzen da. Aukera URL kontsulta parametroan mantentzen du erabiltzaileak bere hautapena partekatu dezan, eta mezu elektronikoen kanpainetako sakoneko estekak errespetatzen ditu ("?billing=annual").

Onena: Aldagailurik ez duten zerga orri daudenak, edo fold-aren azpian dagoen aldagailua dutenak. Irteera: <BillingToggle /> bezeroaren osagai URL egoerarekin, prezioen animaziozko trantsizioak eta deskontu balioaren logika.

5. Zerga Orriaren FAQ Sortzailea

SaaS erosle bakoitzak galdetzen dituen 12 galderari erantzuten dion aurrez eraikitako FAQ atala ("Zer gertatzen da nire muga gainditzen badut?", "Planak alda ditzaket?", "Itzulketak eskaintzen al dituzu?", "Zein ordainketa metodo?", "Doako proba dago?", eta beste 7 galdera). Akordeoi UXrako doitu eta FAQ eskemaren markapenerako prestatuta.

Onena: FAQrik ez duten zerga orriak, edo marketineko iruzur gisa irakurtzen diren FAQak benetako erantzun beharrean. Irteera: <PricingFAQ /> akordeoia + FAQPage JSON-LD eskema Google-ko emaitza aberatsetarako.

6. Froga Sozialeko Zerga Zerrenda

Fold-aren gainetik dagoen bezeroen logotipo-barra, testigantza biratuz. 8 - 16 bezeroen logotipo eta 3 testigantza zerrenda estu batean sartzen ditu, zuzenean orriaren goiburuaren azpian, plan txartelen aurretik.

Onena: Bezeroen logotipo sendoak dituzten markak, prezioa agerian utzi aurretik eroslearen arriskua murriztu behar duten produktuak. Irteera: <PricingProofStrip /> osagai bat logotipoen karusela, animaziozko testigantzen biraketa eta "5.000+ talde baino gehiagok erabilia" kontagailua.

7. Enpresa / Salmenta CTA Blokea

Auto-zerbitzu mugak gainditzen dituzten kontuentzako "Salmentarekin hitz egin" panel espezializatua. 4. txartel gisa edo pankarta zabal oso gisa erakusten da konparazio taularen azpian. Zure demo erreserba sistemara (Cal.com, HubSpot, Calendly) aurrez konektatuta.

Onena: Benetako goranzko mugimendua duten SaaS, diru sarreren %30+ enpresatik datozen produktuak. Irteera: <EnterpriseCTA /> blokea egutegi txertatzearekin, konfiantza seinaleekin (SOC 2, GDPR balioak) eta "Jarri harremanetan salmentarekin" bide argi batekin.

Arakatu web eta UI gaitasun guztiak Vibe Skills-en

Zerga Orriaren Aldaerak Egunean Bidali

"Zerga orri hobea behar dugu"tik "orri berria martxan dago eta A/B test-a martxan da" arteko lan prozesu osoa. 1. urratsa beti da gaitasun egokia aukeratzea Vibe Skills-en - ez hasi txartel osagaiak hutsik idazten.

1. Urratsea: Aukeratu gaitasun egokia Vibe Skills-en

Joan Web eta UI Diseinuaren kategorira Vibe Skills-en eta lotu eredua zure negozio ereduarekin. Doako proba gabe 3 plan? Aukeratu 3 Txarteleko Sortzailea. Doakoa + Enpresa duten 4 plan? Aukeratu 4 Txartelekoa. Dagoeneko plan txartelak badituzu baina konparazio taularik ez? Gehitu Konparazio Taularen gaitasuna gainean.

Ez badakizu ziur, 3 Txarteleko Sortzaileak SaaS zerga orrien %70 kudeatzen ditu. Beti gehi ditzakezu Konparazio Taula, FAQ eta Froga Sozialaren gaitasunak geroago.

2. Urratsea: Eman sarrerak

Vibe Skills-eko zerga orriko gaitasun bakoitzak sarrera berdinak eskatzen ditu:

Planak (izena, hilabeteko prezioa, urteko prezioa, xede-eroslea)
Ezaugarriak (plan bakoitzeko ezaugarri zerrenda osoa, mugak barne)
Marka koloreak (lehenengoa + 1 osagarria, hex kodeak)
Bezeroen logotipoak (8 - 16 PNG/SVG fitxategi froga sozialeko zerrendarako)
Teknologia metaketa (Next.js, Remix, Astro, Webflow, Framer)
Goi goratutako plana (zein plan erakutsi behar den "Herrikoienerako")

Bezeroen logotipoak ez badituzu, froga sozialeko zerrendak gehienezko batzarrera itzultzen da ("5.000+ talde baino gehiagok erabilia") eta testigantza bakarrera.

3. Urratsea: Sortu aldaerak

Gaitasunak lehenespenez 2 - 3 aldaera sortzen ditu:

Aldaera A: Urteko aldagailua lehenespenez, "Herrikoienerako" Standard-en goratuta
Aldaera B: Hilabeteko aldagailua lehenespenez, "Herrikoienerako" Pro-n goratuta
Aldaera C: Konparazio taula luzea aurrean (txartel goraketarik gabe)

Aurrebista horiek guztiak Vibe Skills-en zuzeneko sandbox-ean. Aukeratu bat kontrol gisa, bidali bat test gisa.

4. Urratsea: Sartu zure proiektuan

Next.js / React-erako:

pnpm add @heroui/react clsx framer-motion

Kopiatu orria app/pricing/page.tsx -ra, kopiatu konparazio taulako datuak data/pricing.ts -ra, eta eguneratu zure marka koloreak tailwind.config.js -ean. Gaitasunak TypeScript tipoak bidaltzen ditu eta guztiz zuhaitzez ezin da kendu.

Webflow edo Framer-erako, inportatu zuzenean .webflow edo .framer paketea.

5. Urratsea: Konektatu analitikak

Jarraitu 6 gertaera hauek hasieratik:

pricing_page_viewed
pricing_toggle_changed (hilabetekoa vs urtekariarekin)
pricing_card_cta_clicked (planaren izenarekin)
comparison_table_scrolled (intersekzio behatzailea)
pricing_faq_opened (galderarekin)
enterprise_cta_clicked

Hauek gabe, ezin duzu esan zein plan bihurtzen den eta zein FAQ egiten ari den lana.

6. Urratsea: Bidali eta A/B probatu

Urratsetatik 1 zabaldura arteko denbora guztira: lehen zerga orri baterako 4 - 6 ordu. 2 ordu iterazio baterako. Exekutatu A/B testa 2 - 4 astez irabazlea deklaratu aurretik - zerga orriek bolumena behar dute esanguratsura iristeko.

Galdera Arruntenak

Hiru txartel edo lau txartel erabili behar ditut nire zerga orrian?

Hiru txartel zure eroslearen bidaia "Doako proba → Ordaindua → Enpresa" bada, auto-zerbitzu maila batekin. Lau txartel doako maila iraunkorra (Notion, Vercel, Framer eredua) baduzu edo Standard eta Enpresaren artean erabiltzaile potentetsu baten argi maila baduzu. Gehienetan SaaS hobeto bihurtzen da 3rekin, baina freemium produktuak hobeto bihurtzen dira 4rekin. Arakatu Web eta UI Diseinuaren kategoria erabaki aurretik bi diseinuak aurreikusteko.

Enpresa plana erakutsi ala ezkutatu behar dut?

Erakutsi. 4. txartel gisa edo "Jarri harremanetan salmentarekin" pankarta zabal gisa konparazio taularen azpian. Enpresa prezioa ezkutatzeak balio handiko kontuak orria uztera behartzen ditu kontaktu inprimakira iristeko, eta gehienak ez dira itzultzen. Enpresa txartelak ez du zenbaki bat behar - "Pertsonalizatua" da erantzun zuzena.

Faktura aldagailuak hilabeteko edo urtekako lehenespenez egon behar al du?

Urtekaria. Urtekaria lehenespenez ezartzeak eroslea zenbaki txikiagoan ainguratzen du ("24 $/hil. urtekariro fakturatua" 29 $/hil. hilero fakturatua baino merkeagoa irakurtzen da), ARPU handitzen du eta uztea murrizten du. Erakutsi "%20 - 30 aurreztu" balioa urtekari aukeraren ondoan. Linear, Vercel, Framer eta Notion guztiek urtekari lehenespenez ezartzen dute.

Konparazio taula bat behar dut?

Bai - plan bakoitzeko 5 funtzio baino gehiago badituzu. Plan txartelek erosle errazak ixten dituzte. Konparazio taulak erosle deliberatuak ixten ditu. Hori saltatzea da indie SaaS zerga orrietako akats handiena eta gehitu ondoren konponketa azkarrena. Vibe Skills plataformako Zerga Konparazio Taularen gaitasunak 40 - 80 errenkada bidaltzen ditu kategoriaren arabera antolatuta, buru finkoak eta mugikorrerako korritze horizontala dituena.

Zenbat luze izan behar du FAQ atalak?

8 - 12 galdera. Estali: mugak, plan aldaketak, itzulketak, ordainketa metodoak, doako probaren baldintzak, faktura erritmoa, zergak / BEZ, segurtasuna / SOC 2, datuen esportazioa, deuseztatzea, talde eserlekuak eta produktu zehatz baten galdera bat. Ohiko FAQek ("Zer da zure produktua?") ahalegin gutxiko seinalea dute - zure zerga orriko FAQek benetako faktura eta plan oztopoak erantzun behar dituzte, ez marketin sarrerak.

Zer gertatzen da froga sozialarekin zerga orri batean?

Bezeroen logotipoak fold-aren gainetik, orriaren goiburuaren eta plan txartelen artean. 8 - 16 logotipo zerrenda horizontalean, animazioz biratuta. Gehitu 1 - 3 testigantza labur zerrendaren azpian zuzenean. Ereduak eroslearen arriskua murrizten du lehen 2 segundotan, prezioa agerian utzi aurretik. Stripe, Linear eta Webflow-ek erabiltzen dute.

Nola jarri prezioa urteko deskontuari?

%15 - 25 SaaS ohiko tartea da. %20 da ohikoena aingura (Linear: 20%, Vercel: ~%17, Framer: 23%, Notion: 20%). Gutxiago bada, aldagailuak ez ditu erosleak mugitzen. Gehiago bada, zure hilabeteko prezioan ahultasun seinalea ematen duzu. Zenbaki zehatza zure finantza taldeak ezarri beharko luke, kohorteen atxikipen kurbetan oinarrituta.

Instalatu ondoren editatu al dezaket sortutako zerga orria?

Bai. Irteera TypeScript hutsa + Tailwind (edo .framer / .webflow tresna horientzat) da. Osagai fitxategi guztiak dituzu. Editatu koloreak, aldatu planaren egitura, doitu konparazio errenkadak, aldatu FAQ. Gaitasunak kode garbia eta komentatua bidaltzen du - ez kaxa beltza.

CTA Azkarra: Utzi Zerga Orriak Hutsik Eraikitzeari

Zure zerga orria gunearen eraginkortasun handieneko orrialdea da. 3 txarteleko diseinu arrunt bat, konparazio taularik, urtekari lehenespenez ezartzen duen urtekari aldagailurik, fold-aren gainetik froga sozialik eta FAQ txikitu bat gabe, hilero diru sarreren %15 - 40 arte galtzen ari da.

Stripe mailako zerga orriak bidaltzen dituzten taldeek ez dituzte produktu diseinatzaile senior eta frontend ingeniariak kontratatzen. AI gaitasunak instalatzen dituzte, pila osoa (txartelak, aldagailua, konparazio taula, FAQ, froga soziala) egun batean baino gutxiagoan bidaltzen dutenak.

Zure zerga orria "Q3 berrerabiltze" atzerapen zerrendan egon bada Q1etik, bertsio berria aste honetan bidal dezakezu.

Arakatu SaaS zerga orrien gaitasunak Vibe Skills-en →

Saltatu 15.000 $ freelance aurrekontua eta 6 aste luzez. Instalatu zerga orriaren gaitasun bat Vibe Skills-en.