Website agents
Gemini
spec · copy · build · QA
Component showcase · 2026-08-15
Everything we took from the reference sites.
Higgsfield · Kivio · Google Flow · Grok — rebuilt on the locked design system. Each block says where it lands. Nothing on this page is wired into the home yet: pick, and it moves.
00 · Studio composer + agent run
Studio composer + agent run
The reel composer, on our tokens: star-dust behind the prompt, + attach, Mode and Engine chips (families only — no versions until PLANMAP §4), a mic that dictates, the Creatlydev Send pill breathing. Typing @ or / lights the glow border. Then one whole run: Quoting… → the timeline ticks → Completed breathes → three Nour Dental renders develop. Watch it, or press Replay.
Lands in: Portal (app.) · Home pageFrom: Karim’s five reels (2026-08-17) · Creatlydev Uiverse button · aurora shot
Option B · E
Home hero — Kivio patterns
The primary CTA gets a violet halo on hover (interaction, not another ambient loop) and the hero prop rotates through real registry templates with chips naming what the agent changed. Stats stay off until numbers exist.
Lands in: Home pageFrom: Kivio hero recording · Figma frame E
Your website, images and video
One studio, every asset, written in your language.
Option B · A
Dark job card + blur-develop reveal
The Image Studio’s job card: real step count, an elapsed timer instead of a fake percentage, the last output blurred under a dot-grid, actions dimmed until the result lands — then one 0.4s blur → sharp reveal. Live in Image Studio.
Lands in: Portal (app.)From: Grok Imagine generating grid · Figma frame A / M4
Queued → generating → ready
Campaign images · nour-dental
0/3- Reading the brand kit
- Writing 3 campaign prompts
- Rendering
0:00 · queued
Quoted 3 coins · refunded if it fails · no fake progress — the timer is real
Failed → refund
Campaign images · nour-dental
2/3- Reading the brand kit
- Writing 3 campaign prompts
- Rendering
The provider timed out. 3 coins returned to your balance
Quoted 3 coins · refunded if it fails · no fake progress — the timer is real
Option B · C
Coin meter popover
Hover, focus or tap the coins chip: balance of the pack you’re on, a segmented bar that fills on open, “coins never expire”, one Buy button. No page, no “resets in”. Live in every studio top bar.
Lands in: Portal (app.)From: Wrangle credit chip · Gemini usage limits · Figma frame C
AI Studio Today
Hover, focus or tap the chip32of 50 coins64%Coins never expire. Failed jobs return theirs.Buy a pack50 · 200 · 500+ New projectM3
Agent mark — our logo is the motion
One animated icon for agent state — idle, thinking, writing, publishing, done, failed — and it is now OUR logo mark turning on a CSS 3D stage (mirrored back face, specular sweep, violet glow; no WebGL). Every step row, job card and the composer’s busy Send use it. The hero-size WebGL mark spins in section 00. The violet sphere is retired and kept below for reference.
Lands in: Every pageFrom: Karim, 2026-08-17 · Grok orb / starry idle (retired)
orb · logo (default — the agent presence)
idle
thinking
writing
publishing
done
failed
orb · sphere (legacy)
idle
thinking
writing
publishing
done
failed
M1
Live scripted run
Replaces the static “How it works 01–04” list with a run you can watch: the brief types, four agents tick, a mini site slides in. No signup, no video — DOM.
Lands in: Home pageFrom: Kivio photo-dump widget
Live run · demo
Your brief
- Reading the briefmarket · audience · goals → written spec
- Rewriting every sectionheadlines, offers, proof — yours, not the template's
- Writing the Arabic editionwritten as Arabic, RTL, its own type
- Checking, then publishingtested · fixed if it fails · live on your subdomain
25 coins · quoted before startRefunded if it fails
M2
Template default ↔ rewritten for you
The hardest claim on the page — “the template is a starting point, not the result” — made draggable. Two DOM mock sites, one handle. Keyboard and touch work.
Lands in: Home pageFrom: Kivio Fix-Skin slider
Your ClinicServicesAboutContact
Professional healthcare services
We provide quality care for you and your family.
Learn moreService one
Service two
Service three
Nour DentalTreatmentsDoctorsBook
A calmer visit, a brighter smile.
Three specialists · same-week appointments · Riyadh, Olaya
زيارة أهدأ، وابتسامة أشرق.
Book onlineWhitening
Implants
Kids’ dentistry
M5
The engines behind your studio
Model names carry trust now. Cards name only the provider families that exist as adapters in the repo — versions land when PLANMAP §4 does.
Lands in: Home pageFrom: Google Flow model carousel · Kivio card labels
Arabic + English copy
Gemini
written, not translated
Images
fal · Flux
campaign visuals, one brand style
Video
Kling · Seedance
short vertical, scenes + captions
Voice
ElevenLabs
narration for video
M6 · M8
Promo strip + “New” badges
An always-visible offer above the header, dismiss remembered per offer id. Badges mark freshly shipped surfaces in nav and galleries.
Lands in: Every pageFrom: Higgsfield banner + nav tags
5 free coins to try — no card needed. Start →
<PromoStrip id="offer-id">…</PromoStrip>
Templates Brand kit NewVideo Studio MCP New
M4
Dialect Arabic microcopy
When locale = ar, the prompt bar can greet in the user’s dialect instead of MSA only. Grok serves “وش بغيت تعرف؟” in production; the Brand kit lets each brand choose.
Lands in: Home page · Portal (app.)From: Grok live Arabic serving
Prompt-bar placeholder by dialect
MSA
صِف مشروعك أو هدفك…
Gulf
وش تبي تسوي اليوم؟
Egyptian
عايز تعمل إيه النهارده؟
Levantine
شو بدك تعمل اليوم؟
M7
Stats + testimonial marquee
Built and gated: renders only from real numbers. What you see here is marked sample data and must never reach the home until billing_orders says otherwise.
Lands in: Home page — laterFrom: Kivio counters + marquee
Sample data — not live numbers
- sites published
- 1,240
- median build
- 9 min
- coins refunded on failure
- 98%
- languages, written natively
- 2
“The Arabic reads like we wrote it ourselves.”
“Quoted 25 coins, charged 25 coins. That is the whole review.”
“The agents ticking through the build is oddly reassuring.”
A3 · A5
Portal run UX
Coin quote before start, live agent timeline with elapsed timer, refund line on failure reading the same number as the quote, followup chips that cross-sell the other studios.
Lands in: Portal (app.)From: Grok load timer + toasts + followups · AIST’s own three pillars
Happy path
25 coins · quoted before startElapsed 0:00
Queued · a worker will claim this within seconds
- Reading the briefmarket · audience · goals → spec
- Writing every sectionheadlines · offers · proof
- Arabic editionwritten as Arabic, RTL
- Checking, then publishingtypecheck · build · deploy
What next?
Failure → refund
25 coins · quoted before startElapsed 0:00
Queued · a worker will claim this within seconds
- Reading the briefmarket · audience · goals → spec
- Writing every sectionheadlines · offers · proof
- Arabic editionwritten as Arabic, RTL
- Checking, then publishingtypecheck · build · deploy
A1 · A2
Brand kit — train once, reuse everywhere
Logo, colour, tone and dialect captured once and enforced by every studio. The retention pattern behind Higgsfield Character and Kivio consistency.
Lands in: Portal (app.)From: Higgsfield Character
Logo, colour, tone and dialect captured once and enforced by every studio. The retention pattern behind Higgsfield Character and Kivio consistency.
Open the Brand kit pagePercentage rollout flags
rolloutFlag(name, userId): “true” for everyone, “25%” for a stable cohort, anything else off. Env-only, fails closed, tested.
import { rolloutFlag } from "@/lib/flags";
// .env: LIVE_DEMO_WIDGET=25%
if (rolloutFlag("LIVE_DEMO_WIDGET", user.id)) { /* render it */ }Deliberately not built in this pass
- A4 — anonymous instant run before signup: an auth-architecture change, not a component. /start already lets a visitor compose without an account; the coin-spend-before-account step needs Karim’s call.
- A7 — scheduled / recurring jobs: needs the worker queue to grow a schedule table first.
- M7 stats on the home: the component exists; the numbers do not yet.