ConextRouter: An AI Gateway Website Built Without Figma

Yes, you read that right. I built this website without opening Figma once.

ConextRouter is an AI API gateway by Ralali: one API key to reach models from OpenAI, Gemini, Claude, Qwen and more, with automatic routing and local payments. It needed a landing page and developer docs.

I have been leaning hard into AI in my workflow lately, partly because the job asks for it and partly because timelines keep getting shorter. This project went from zero to deployed in two days. Fast, but never one prompt and done. Here is how it actually went.

Product

ConextRouter, an AI API gateway by Ralali

Role

Product, UX, business model, copy, build and deploy. Solo.

Timeline

Two days

Deliverables

Landing page and API docs, in 3 languages

Tools

Claude, GitHub, Vercel

Status

Internal preview

0

Figma frames

0

days to deploy

0

pages shipped

0

languages

01Product

Understand the product first

Before thinking about visuals, I needed to understand the product well enough to explain it simply. ConextRouter is a gateway: one API key, many AI models.

Its core feature is automatic routing. You send a request with the model set to conext-auto, it scores the complexity and hands the request to the right tier. If I could not explain that in one sentence, the website would not either.

ConextRouter at a glance

One API key

Reach OpenAI, Gemini, Claude, Qwen, DeepSeek and more without signing up to each provider.

Automatic routing

conext-auto scores every request and sends it to the flash, plus or max tier.

Local payments

Top up from US$3 with QRIS, virtual accounts or local e-wallets. No credit card needed.

Drop-in compatible

Works with OpenAI and Anthropic request formats. Often you only change the base URL.

How the routing works

From the ConextRouter docs

Your app

POST /v1/chat/completions
model: "conext-auto"
content: ""

ConextRouter

Scoring complexity

tier: conext-plus

Response header

x-conext-model:

qwen-plus

Balanced for everyday tasks

One API key, every provider

OpenAIGoogle GeminiAnthropic ClaudeAlibaba QwenDeepSeekMeta LlamaMistral AI

One request in, the right model out. The routing logic is exactly what the site had to explain.

02Research

Talk to the stakeholders

Next came interviews with stakeholders, from internal teams to the partners involved. The goal was to understand what users actually need, not what I thought would look cool.

Each need that came up ended up as a section or a feature on the site.

What came up in interviews

What it became on the site

“Paying without an international credit card”

Top up with QRIS, virtual accounts or local e-wallets

“Not wanting to pick a model for every request”

Automatic routing based on complexity

“Companies needing clean, predictable billing”

Enterprise postpaid with one monthly invoice

“Seeing clearly how it differs from global routers”

A comparison table right on the homepage

Every need from the conversations ended up as a visible section or feature.

03PRD & Brief

Write the PRD, then the brief

I turned the findings into a PRD written with a marketing lens. Beyond features and flows, it spelled out who the product is for, the one message to remember and the objections the page had to answer.

From the PRD came a creative and marketing brief: voice, key message, color and type. The brief works as a fence. Without one, AI will happily fill every gap with the most generic choice available.

Docs / Product

ConextRouter PRD

Owner

Fajar Pursigit

Lens

Product + Marketing

Pages

Landing, Docs

1. Problem

Developers in Indonesia juggle several AI providers, international cards and USD billing just to get started.

2. Who it is for

Individual developers, small teams and companies that need AI in their product without the setup overhead.

3. Core features

One API key for many models
Automatic routing by task complexity
Local top up and multiple API keys
Usage dashboard

4. Key message

One API. Every AI model.

5. Objections to answer

“How is this different from global routers?” and “Is paying a hassle?”

Docs / Product

Creative & Marketing Brief

Based on

ConextRouter PRD

Audience

Developers, teams

Feel

Practical, local

1. Key message

One API.
Every AI model.

2. Voice

Do

“Top up, create an API key, start building.”

Don’t

“Leverage synergistic AI orchestration.”

3. Color

Ink #1A1615

Accent #5B5FEA

Alibaba #FF6A2B

Surface #F9F8F8

4. Type

Aa

Plus Jakarta Sans

{ }

JetBrains Mono

The PRD and the brief, side by side. The highlighted parts became the raw material for the copy.

04Assets

Put everything in one folder

The PRD, the brief and every asset went into a single folder. That included the AI provider logos, which I deliberately hunted down as SVG.

SVGs stay sharp at any size, weigh almost nothing and can be recolored straight from CSS, so a hover state never needs a second file.

conextrouter Search

NameSizeKind

PRD.md6 KBMarkdown

brief-creative-marketing.md4 KBMarkdown

images--Folder

dashboard-preview.jpg252 KBJPEG image

AlibabaCloudLogo.svg12 KBSVG image

ralalgroup.svg14 KBSVG image

logos--Folder

openai.svg10 KBSVG image

google-gemini.svg8 KBSVG image

anthropic-claude.svg8 KBSVG image

alibaba-qwen.svg9 KBSVG image

deepseek.svg10 KBSVG image

meta-llama.svg9 KBSVG image

mistral-ai.svg8 KBSVG image

0 itemsFajar Drive

Everything lands in one folder. Logos were hunted down as SVG on purpose.

05Build

Build it with Claude

This is where it gets interesting. I opened that folder with Claude and asked it to read everything and build the site directly in HTML.

And no, you will not love the first draft. My advice: never ship it as is. A first AI draft usually looks exactly like AI made it.

ConextRouter landing page

conextrouter, 14 files

index.html

Code · HTML

Reply to Claude...

index.html

CodePreview

1<!DOCTYPE html>
2<html lang="id">
3<head>
4  <title>ConextRouter</title>
5  <style>
6    :root { --accent: #5B5FEA; }
7  </style>
8</head>
9<body>
10  <section class="hero">
11    <h1>Satu API. Semua model AI.</h1>
12    <a class="btn">Buat Akun Gratis</a>
13  </section>
14  <section class="marquee-band">…</section>
15  <section class="why">…</section>
16  <section class="how">…</section>
17  <section class="pricing">…</section>

The folder goes in, a first draft comes out. A starting point, not the final result.

06Iterate

Iterate section by section, with references

The most exhausting part, and the most fun. I collected references, then dropped them into Claude one section at a time, never a whole site. A hero from one place, a comparison table from another, pricing from somewhere else. I borrowed structure, not content.

It took real time, energy and, yes, tokens. Round after round until every section felt right.

Reference: landing-hero.jpg — Pick a reference, drop it into Claude, say what to borrow. Repeat for every section.

Reference: data-layout.jpg — Pick a reference, drop it into Claude, say what to borrow. Repeat for every section.

07Ship

Save to GitHub, ship with Vercel

Once it felt right, the project went to GitHub so every change is tracked. Then I connected that repository to Vercel.

From then on, every push to GitHub builds and deploys on its own. No manual uploads.

conextrouter · zsh

$ cd conextrouter

$ git init

$ git add .

$ git commit -m "ConextRouter landing page"

[main (root-commit) 3f9a2c1] ConextRouter landing page

$ git remote add origin github.com/fajarpursigitworks-collab/conextrouter-website

$ git push -u origin main

To github.com:fajarpursigitworks-collab/conextrouter-website.git

* [new branch] main -> main

fajarpursigitworks-collab / conextrouter-websitePublic

main1 commitCode

FPfajarpursigitConextRouter landing pagePushing

imagesConextRouter landing pagenow

docs.htmlConextRouter landing pagenow

index.htmlConextRouter landing pagenow

vercel.jsonConextRouter landing pagenow

/conextrouterBuilding

Deployment

Production

Domain

conextrouter.vercel.app

Source

main · 3f9a2c1

Trigger

Push to GitHub

12:00Cloning github.com/fajarpursigitworks-collab/conextrouter-website (Branch: main)

12:01No build step, serving static files

12:02Uploading build outputs...

12:03Deployment completed

12:04Assigning domain conextrouter.vercel.app

conextrouter.vercel.app

From a local folder to a live URL. After the first setup, every push deploys on its own.

Note. ConextRouter has not officially launched yet. The site currently runs on a Vercel preview domain for internal review.

Result

What shipped

A landing page and API documentation, in three languages and fully responsive. Built and deployed in two days, without a single Figma frame.

Visit the live site

Landing page, desktop and mobile

conextrouter.vercel.app

9:41

Takeaways

AI makes it faster, not easier.

AI speeds up production. Good results still need three things you cannot delegate.

01

Taste

To tell when something looks too AI and when it finally feels right.

02

Business understanding

So every section answers a real user need instead of just looking tidy.

03

Time and tokens

Iteration is real. Budget the hours, the patience and the quota.

Designing an AI Gateway Website Without Opening Figma

Understand the product first

Talk to the stakeholders

Write the PRD, then the brief

ConextRouter PRD

Creative & Marketing Brief

Put everything in one folder

Build it with Claude

Iterate section by section, with references

Save to GitHub, ship with Vercel

What shipped

Want a website without the hassle?

More from Insights

Why I Write the Words Before I Design Anything

The Screens Nobody Designs