Create a React landing page with AI (1/3): archetype, tier and prompt

A business idea should not have to wait weeks for its first landing page. With KitekAI, the starting point is not a blank canvas or a rigid template: it is a guided wizard that takes you from archetype to deployment using clean React + Tailwind code.

This is part one of a three-part series. Here we cover the decisions that shape everything else: which archetype to pick, which generation tier to use, and how to write your first prompt. In the next parts we will look at how that prompt becomes components and how to preview and deploy.

The goal is concrete: a complete landing page in under 10 minutes and more than 20 modular components.

What it means to generate a React landing page with AI

KitekAI is an AI-assisted React frontend engineering platform. It is not a generic no-code builder and not a monthly subscription site tool. Generation runs inside a controlled environment: you choose from known building blocks, describe your business, and the platform assembles real React + Tailwind components instead of an image of an interface.

The wizard has three steps:

1. Archetype — define the kind of site you need.
2. Generation tier — choose the speed and quality profile.
3. Describe the site — write your first prompt with the context of your client or project.

What comes out are components you can preview, adjust and prepare for deploy. The whole flow leans on the Master Prompts, which inject context and architecture so the result is 100% clean code and 100% structured precision.

The 4 base archetypes

The archetype matters most because it determines which component set the platform proposes. KitekAI starts from 4+ base archetypes:

Archetype	Name	Typical use
corporate_services	Corporate & Professional Services	lawyers, clinics, consulting, agencies
digital_commerce	Digital & Retail E-Commerce	online stores, catalogs, product drops
online_services	SaaS & Digital Products	software, apps, subscription products
personal_pages	Personal Pages & Portfolios	developers, creatives, freelancers, consultants

Each archetype ships with its own component set. That is what makes the output feel designed for your business instead of recycled:

• Corporate & Professional Services: Features, ImageSlider, LogoCloud, Portfolio, PricingPackages, Services, Stats, Team, Testimonial, ValueProposition.
• Digital & Retail E-Commerce: ImageSlider, LogoCloud, NewArrivals, ProductGrid, Promotions, Testimonial.
• SaaS & Digital Products: Integrations, PlatformModules, Stats, SubscriptionPlans, Testimonial.
• Personal Pages & Portfolios: Biography, ImageSlider, LogoCloud, ProjectShowcase, SkillsMatrix, Stats, Testimonial.

Choosing the right archetype does not lock you in; it gives you a coherent starting point. You can add, remove or reorder components later.

How to choose the generation tier

Tiers are generation profiles, never monthly plans. KitekAI offers three:

Tier	Codename	Speed	Profile
Performance	Deep Architecture	45–60 s	Complex, maximum quality; includes GSAP / Framer Motion / Three.js by default
Standard	Balanced Logic	20–30 s	Balanced quality and speed for most landing pages
Ultrafast	Sub-second	< 10 s	Fast and economical for quick iterations

The practical rule is simple. If you are exploring the concept and expect to iterate on copy, Ultrafast lets you see results without overspending. When the structure is clear and you want to move fast, Standard. And if the landing page is the centerpiece of a campaign and you need maximum quality with premium interaction, Performance.

Whichever tier you pick, the environment keeps average latency below 180 ms, with a 40% latency reduction compared with sending a raw prompt.

Your first prompt in the guided wizard

The third step is describing the site. A good first prompt is not a long paragraph; it is an ordered brief. Include these elements:

• What the business does and who it speaks to.
• The main action you want the visitor to take.
• The tone (technical, warm, institutional).
• Required sections (for example, pricing, team, FAQ).
• Brand constraints you already know.

An example first prompt for a corporate_services archetype:

Dental clinic in Bogotá. Audience: adults 25-55 looking for
orthodontics and implants. Main action: book an assessment.
Tone: professional and warm. Sections: services, medical team,
testimonials, FAQ and a contact form.
Sober palette, plenty of white space.

You do not need to describe the technical implementation. You do not ask for "a div with a three-column grid"; you describe the business and the outcome you want. The platform translates that into React + Tailwind components.

What it costs to generate your landing page

KitekAI runs on pay-as-you-go (PAYG): 1 credit = 1 USD, no subscriptions, and credits that never expire. The cost of each component follows a public formula:

component_cost (credits) = tier_fixed + model_base_fee + design_surcharge

With the values enabled today, the price per component spans roughly $0.60 – $2.00 USD, with an observed average of $1.04. A 16-component landing page can range from $10.40 (Ultrafast) to $32.00 (Performance), depending on archetype and design adjustments. You can top up from $20 / $50 / $100 / $250 USD via MercadoPago and review everything in your admin dashboard.

Transparency is the point: you see the per-component cost before generating, backed by 100% traceable consumption auditing and multi-org support.

Frequently asked questions

Do I need to know React to start?

Not to generate. The guided wizard asks for business decisions, not code. The output is readable React + Tailwind, so if you are a developer you can read, extend and version it like any project of your own.

Can I change archetype after generating?

Yes. The archetype sets the initial component set, but the flow is built to iterate: you can add, remove or reorder sections and regenerate. Switching archetype helps when the business model changes, for example moving from services to a digital product.

What is the difference between the three tiers?

Only the generation profile: speed, cost and level of interactivity. Performance takes 45–60 s and includes premium interaction; Standard, 20–30 s; Ultrafast, under 10 s. The component types do not change; the depth of construction does.

Is the generated landing page really mine?

Yes. The generated code is yours: you can download the zip and host it anywhere. The platform bakes out a static export that does not depend on KitekAI to run.

Generate your first landing page

Choosing archetype, tier and prompt is all you need to begin. In part 2 of this series we look at how that prompt becomes clean React + Tailwind components.

When you are ready, create your landing page in KitekAI and check the pricing detail under plans. You can also read the privacy policy or email [email protected] with any questions.