{"slug":"landing-page","title":"How to vibe code a landing page with Xpersona","shortTitle":"Landing page","goal":"build a landing page","description":"Use Xpersona to create a focused landing page with a clear offer, proof, pricing or CTA, FAQ, metadata, and mobile layout.","audience":"Founders and creators validating an offer, waitlist, launch, tool, course, or small product.","searchIntents":["how to vibe code a landing page","AI landing page builder prompt","vibe coding product landing page","OpenCode landing page guide"],"firstPrompt":"Help me build a landing page with Xpersona. Define the offer, target visitor, CTA, sections, proof, FAQ, mobile layout, metadata, and first OpenCode prompt.","buildPlan":["Write the offer, audience, and primary CTA before choosing sections.","Ask Xpersona for a first-viewport message, proof section, pricing or signup block, FAQ, and footer.","Build the page with real text and a working CTA rather than placeholder cards.","Check mobile line breaks, metadata, and conversion links before publishing."],"pitfalls":["Using a clever headline that does not name the offer.","Hiding the primary CTA below too much explanation.","Shipping placeholder proof instead of concrete screenshots, examples, or status."],"faq":[{"question":"What should the H1 say?","answer":"Use the literal offer, product, or category. Put the supporting value proposition in the paragraph below it."},{"question":"How many CTAs should the page have?","answer":"Keep one primary action and repeat it where helpful. Avoid making visitors choose between too many next steps."}],"canonicalUrl":"https://www.xpersona.co/vibe-coding/landing-page","machineUrl":"https://www.xpersona.co/api/v1/guides/vibe-coding/landing-page","provider":{"name":"Xpersona","baseUrl":"https://www.xpersona.co/v1","defaultOpenCodeModel":"xpersona/xpersona-frieren-coder","displayModelName":"Xpersona Frieren 1"},"setupSteps":[{"name":"Describe the end goal","ui":"Guide input","description":"Write the thing you want to create in plain language. Keep it concrete: app, website, chatbot, dashboard, bug fix, or feature."},{"name":"Try the chat plan","ui":"Xpersona chat","description":"Open chat and ask Xpersona for the first build plan, files to edit, risks, and a tiny first milestone."},{"name":"Start usage based billing","ui":"Pricing","description":"When the plan is useful, start usage based billing so one subscription can cover chat, setup keys, OpenCode, and /v1 clients."},{"name":"Create the setup key","ui":"Dashboard key page","description":"Create one private setup key. Treat it like a password and paste it only into tools you control."},{"name":"Choose Xpersona in OpenCode","ui":"OpenCode provider picker","description":"Open the provider screen, choose Xpersona, paste the setup key, and pick xpersona/xpersona-frieren-coder."},{"name":"Run the first repo prompt","ui":"OpenCode prompt","description":"Ask OpenCode for the smallest useful implementation step. Review the diff, run checks, and continue from the result."},{"name":"Check usage and keep iterating","ui":"Usage dashboard","description":"Use the dashboard to inspect requests, tokens, spend, and status after each real run."}],"recommendedLinks":{"guide":"https://www.xpersona.co/vibe-coding/landing-page","hub":"https://www.xpersona.co/vibe-coding","chat":"https://www.xpersona.co/chat","pricing":"https://www.xpersona.co/pricing?checkoutTier=payg","opencode":"https://www.xpersona.co/opencode","dashboardOnboarding":"https://www.xpersona.co/dashboard/onboarding","usageDashboard":"https://www.xpersona.co/dashboard/usage","llms":"https://www.xpersona.co/llms.txt","llmsFull":"https://www.xpersona.co/llms-full.txt"}}