Nitro Kit landing page — four directions
First screen plus first proof section, drawn in the site's brand. Each variant answers a different question first: what does it do, why does it exist, what's in it, or what do I pay for. All copy is real or adapted from the codebase and product docs.
Prompt in.
Rails interface out.
Coding agents changed everything. What made you productive before works against your agent. Nitro Kit is the interface system that keeps your coding agent on track.
application-shellada@racecamp.test
What works
The strongest possible evidence for "agent-native" is a verbatim prompt and its result, and this puts both on screen before any argument. The demo tabs reuse the seven real demos, so the hero grows as the showcase grows.
What risks
The claim is only as honest as the demos. Until the "generate demos with an agent for real" ticket lands, this hero is making a promise the current previews don't fully back. It also drops the theme presets that show range.
Pick this if
You believe the demos are the product's best marketing and want the landing page to become the demos page's front door.
What made humans productive works against your agent.
Nitro Kit is a Rails interface system built for coding agents: strict Ruby components, plain versioned CSS, native HTML, and a gem-owned core your agent can't drift from.
A human can check and adjust every utility class. An agent can write classes that look right but do not exist in your design system.
Ruby components state the rules in code. If your agent uses them wrong, the code fails loudly instead of rendering broken HTML.
A short list to choose from. If it guesses wrong, it knows right away.
Browsers keep improving. Humans miss things. Agents reinvent them.
Two stacks mean more glue, slower shipping, and more places for bugs to hide.
Humans notice when copied components drift. Agents create another variation.
What works
The human/agent voice marks, strike-throughs, and diffs already exist in the codebase and are the most distinctive thing about the site. Promoting them to the hero makes the page unmistakable and gives the headline a real point of view.
What risks
No product screenshot above the fold, so a visitor who wants to see quality before reading may bounce. The 72px headline with three fonts in it is one step from gimmicky and needs careful kerning.
Pick this if
Your audience is Rails developers who already trust their agent and need to be talked out of Tailwind-plus-partials habits.
54 components.
One gem. Zero class= guesses.
A gem-owned Phlex interface system for Rails. Every component, its CSS, its Stimulus behavior, and its contract ship in the gem and upgrade with bundle update. Nothing is copied into your app unless you ask.
gem "nitro_kit", "2.0.0.alpha.5"
$ bundle install
$ bin/rails generate nitro_kit:install
$ bin/rails nitro_kit:doctor
Everything in the box core/app/components/nitro_kit
| variant | :default · :primary · :destructive · :ghost |
| size | :xs · :sm · :md · :lg · :xl |
| icon | Lucide name, or icon_end: |
| href | renders <a> with the same states |
| slots | label · icon-start · icon-end |
What works
Developers evaluating a gem want the install line, the count, and one honest contract. Putting the failure mode on the first screen says "strict" better than any adjective. The inventory doubles as navigation into the gallery.
What risks
Nothing here says why agents specifically. The numbers are real today but "54" becomes a maintenance chore and the page dates itself with every release. It competes with the gallery site rather than sending people there.
Pick this if
You want the landing page to feel like a serious, complete piece of infrastructure and let the demos and Pro pages carry the story.
The kit is free. The playbook is Pro.
Free is the complete interface system. Pro is verified compositional knowledge, delivered with source exemplars so your agent builds real Rails interfaces correctly.
- All 54 components, CSS, and behavior
- Contracts and executable gallery
- Public coding-agent guidance
- Upgrades through Bundler
- 10 patterns: auth, onboarding, CRUD, billing, uploads, webhooks…
- Application-owned source exemplars
- Evals against the pinned core
- Website + MCP retrieval, continued updates
ada@northstar.test
Connect your agent in one line
Pro patterns are retrieved over MCP with OAuth. The exemplar becomes ordinary code in your app and keeps working if you stop paying.
What works
It says what Pro is and isn't in one glance, which the current page buries below the fold and the Pro page only hints at. The gem/MCP pipe diagram is the product architecture, drawn honestly.
What risks
Leading with a two-column boundary before anyone is convinced can feel like being sold to. Pro is still private alpha, so the right column can't close; it ends in a mailto. The pricing slot is empty until Stripe billing ships.
Pick this if
Launch is close, Pro delivery is the thing you most need people to understand, and the landing page should double as the Pro page.
How to pick a direction
Each direction answers a different first question. Pick on which question your visitor is asking.