• LEROTON AI

  • LEROTON AI

EXECUTIVE SUMMARY

Designed the schema and structural logic behind Leroton an AI infrastructure tool that turns "vibe" into strict, machine-readable design tokens for tools like Cursor and Claude Code. Independent project, currently in development.

METADATA

My Role:

Team

Target Audience:

Founder & Lead Product Designer

Independent designed and built solo

Schema built and functional. UI in development, Figma system complete.

  • LEROTON AI

  • LEROTON AI

EXECUTIVE SUMMARY

Designed the schema and structural logic behind Leroton an AI infrastructure tool that turns "vibe" into strict, machine-readable design tokens for tools like Cursor and Claude Code. Independent project, currently in development.

METADATA

My Role:

Team

Target Audience:

Founder & Lead Product Designer

Independent designed and built solo

Schema built and functional. UI in development, Figma system complete.

  • LEROTON AI

  • LEROTON AI

EXECUTIVE SUMMARY

Designed the schema and structural logic behind Leroton an AI infrastructure tool that turns "vibe" into strict, machine-readable design tokens for tools like Cursor and Claude Code. Independent project, currently in development.

METADATA

My Role:

Team

Target Audience:

Founder & Lead Product Designer

Independent designed and built solo

Schema built and functional. UI in development, Figma system complete.

SCROLL

The problem: AI tools have taste, not memory: Every AI coding tool can generate a nice-looking screen. None of them persist why it looked that way. The result is a familiar failure mode for anyone building fast with AI: the login screen and the dashboard don't feel like the same product, because nothing forced them to.

The problem: AI tools have taste, not memory: Every AI coding tool can generate a nice-looking screen. None of them persist why it looked that way. The result is a familiar failure mode for anyone building fast with AI: the login screen and the dashboard don't feel like the same product, because nothing forced them to.

The problem: AI tools have taste, not memory: Every AI coding tool can generate a nice-looking screen. None of them persist why it looked that way. The result is a familiar failure mode for anyone building fast with AI: the login screen and the dashboard don't feel like the same product, because nothing forced them to.

Three things made this worth solving as its own layer rather than a feature bolted onto an existing tool:

Three things made this worth solving as its own layer rather than a feature bolted onto an existing tool:

Three things made this worth solving as its own layer rather than a feature bolted onto an existing tool:

Chat has no state.

Chat has no state.

Chat has no state.

A conversational interface treats every prompt as a fresh request, not an update to a persistent system so consistency degrades the longer a session runs.

A conversational interface treats every prompt as a fresh request, not an update to a persistent system so consistency degrades the longer a session runs.

"Vibe" isnt a spec.

"Vibe" isnt a spec.

"Vibe" isnt a spec.

Style direction like "modern" or "premium" means nothing to a code generator unless it's translated into concrete tokens specific values, not adjectives.

Style direction like "modern" or "premium" means nothing to a code generator unless it's translated into concrete tokens specific values, not adjectives.

Exporting is an afterthought everywhere else

Exporting is an afterthought everywhere else

Exporting is an afterthought everywhere else

Most AI design tools stop at "here's a pretty screen." None of them hand that system back to you in a format an agent like Cursor or Claude Code can actually load and obey.

Most AI design tools stop at "here's a pretty screen." None of them hand that system back to you in a format an agent like Cursor or Claude Code can actually load and obey.

Core Architecture & Strategic Layout Decisions

Core Architecture & Strategic Layout Decisions

Core Architecture & Strategic Layout Decisions

1. Breaking the Generative Chat Pattern

1. Breaking the Generative Chat Pattern

The Friction:

The Friction:

I started, like every AI-native tool on the market, with Chat → Generate → Done — an open-ended conversational interface where users could refine tokens freely. In practice it broke fast: design systems need strict state, and an unstructured chat meant the engine lost track of previously defined tokens after five or six prompts. Conflicting instructions had no guardrails, and generated UI code would randomly break.

I started, like every AI-native tool on the market, with Chat → Generate → Done — an open-ended conversational interface where users could refine tokens freely. In practice it broke fast: design systems need strict state, and an unstructured chat meant the engine lost track of previously defined tokens after five or six prompts. Conflicting instructions had no guardrails, and generated UI code would randomly break.

The Design Solution:

The Design Solution:

I discarded the chat-centric build entirely and rewrote the core UX around a different model System → Preview → Refine → Export → Sync → Evolve. Conversational input didn't disappear, but it got confined to an isolated Refinement Prompt panel, with every output forced to pipe into deterministic token fields rather than a free-floating chat log.

The Result:

The Result:

This correction shapes almost everything else in the product now why there's a persistent Tokens tab instead of a chat history, why every refinement updates a version checkpoint rather than just the current view, and why Export is a first-class tab (AI Prompt, JSON Tokens, Tailwind Config, CSS Variables, React Specs) instead of a final "download" button. The failed chat prototype is the reason the rest of the architecture exists.

This correction shapes almost everything else in the product now why there's a persistent Tokens tab instead of a chat history, why every refinement updates a version checkpoint rather than just the current view, and why Export is a first-class tab (AI Prompt, JSON Tokens, Tailwind Config, CSS Variables, React Specs) instead of a final "download" button. The failed chat prototype is the reason the rest of the architecture exists.

  1. Building the schema as the real product

  1. Building the schema as the real product

Here's a trimmed excerpt from the actual engine the spacing-tension vibe, which maps a design intent ("airy," "dense," "editorial") to an exponential scale of pixel values:


Every value in the schema works this way a named intent, a defined scale function, and a formula an AI agent can compute rather than guess. Ask Leroton for "more editorial spacing" and it doesn't interpret that loosely each time; it resolves to open, value 48, every session, forever. That's the difference between a vibe and a spec.

The Friction

The Friction

The UI is what people see, but the UI is downstream of a harder problem what does a "design system" actually need to contain so an AI agent can apply it consistently without hallucinating layout decisions?

The UI is what people see, but the UI is downstream of a harder problem what does a "design system" actually need to contain so an AI agent can apply it consistently without hallucinating layout decisions?

The Design Solution:

The Design Solution:

I built the core engine and token schema logic first, before any interface defining structured groups for color, typography, spacing, radius, shadows, and motion, each with explicit values rather than descriptive labels. Editing one token cascades predictably through dependent tokens, and every export format (JSON, .cursorrules, Tailwind, CSS variables) is generated from that same underlying schema, not written separately per format.

I built the core engine and token schema logic first, before any interface defining structured groups for color, typography, spacing, radius, shadows, and motion, each with explicit values rather than descriptive labels. Editing one token cascades predictably through dependent tokens, and every export format (JSON, .cursorrules, Tailwind, CSS variables) is generated from that same underlying schema, not written separately per format.

The Result:

The Result:

The schema is the part of Leroton that's actually finished and working right now. It's also the part that matters most: the UI can be redesigned, but the schema is the contract that makes every downstream export trustworthy.

The schema is the part of Leroton that's actually finished and working right now. It's also the part that matters most: the UI can be redesigned, but the schema is the contract that makes every downstream export trustworthy.

3. Designing restraint into the motion and tone

3. Designing restraint into the motion and tone

The Friction:

The Friction:

AI-native products often lean playful or chatty to feel approachable but a tool whose entire premise is "structure over vibes" undercuts its own pitch if it feels loose or improvisational.

AI-native products often lean playful or chatty to feel approachable but a tool whose entire premise is "structure over vibes" undercuts its own pitch if it feels loose or improvisational.

The Design Solution:

The Design Solution:

I set an explicit rule in the system's UX principles: motion should reinforce structure and communicate state changes, and should never feel playful. Panel transitions, token update animations, and loading states were all designed to feel calm and deliberate rather than delightful for its own sake.

I set an explicit rule in the system's UX principles: motion should reinforce structure and communicate state changes, and should never feel playful. Panel transitions, token update animations, and loading states were all designed to feel calm and deliberate rather than delightful for its own sake.

The Result:

The Result:

Small decision, but it's the kind of internal consistency check that keeps a product's interface honest about what it's actually for.

Small decision, but it's the kind of internal consistency check that keeps a product's interface honest about what it's actually for.

Complete System Showcase

Complete System Showcase

Complete System Showcase

A detailed architectural overview displaying the comprehensive layout rules designed for Leroton.

A detailed architectural overview displaying the comprehensive layout rules designed for Leroton.

What I Learned & What’s Next?

What we Learned & What's Next?

What I Learned & What’s Next?

What I'd take forward:

Designing the schema before the interface was the right call — it meant every screen had something real to be a view of, rather than the schema being retrofitted to match whatever the UI ended up looking like.

Vibe Coding Requires Systems Thinking:

As a designer building software with AI, my value wasn't in tuping syntax; it was in architecting the system architecture and data states. if you don't know how tokens, permissions, and layout structure map together, the AI will build a fragile, unmaintainable product.

Next Implementation Steps:

The full functional UI roadmap, structural logic frameworks, and interface component systems have been successfully compiled. The upcoming phase involves engineering the core code generation engine and setting up early testing pipelines for direct GitHub repo syncing.

Systemic Workspaces Trump Chat Tooling:

When it comes to complex configuration work, dedicated tool panels and clear visual summaries perform significantly better than standard conversational input fields.

Building the Tool to Fix the Tool:

Vibe-coding an infrastructure platform designed specifically for vibe-coders meant I was building my own solution in real-time. Every time my AI agent hallucinated a button component during the build, it became a feature requirement for Leroton.

Where it stands and whats next

The schema and core engine are built and functional the screenshot above is a live run of the real system, not a mockup. The Figma design system is complete, and frontend implementation is the current phase, self-built with AI-assisted tools a fitting stress test of the product's own premise.

What I'd take forward:

Designing the schema before the interface was the right call — it meant every screen had something real to be a view of, rather than the schema being retrofitted to match whatever the UI ended up looking like.

Vibe Coding Requires Systems Thinking:

As a designer building software with AI, my value wasn't in tuping syntax; it was in architecting the system architecture and data states. if you don't know how tokens, permissions, and layout structure map together, the AI will build a fragile, unmaintainable product.

Next Implementation Steps:

The full functional UI roadmap, structural logic frameworks, and interface component systems have been successfully compiled. The upcoming phase involves engineering the core code generation engine and setting up early testing pipelines for direct GitHub repo syncing.

Systemic Workspaces Trump Chat Tooling:

When it comes to complex configuration work, dedicated tool panels and clear visual summaries perform significantly better than standard conversational input fields.

Building the Tool to Fix the Tool:

Vibe-coding an infrastructure platform designed specifically for vibe-coders meant I was building my own solution in real-time. Every time my AI agent hallucinated a button component during the build, it became a feature requirement for Leroton.

Where it stands and whats next

The schema and core engine are built and functional the screenshot above is a live run of the real system, not a mockup. The Figma design system is complete, and frontend implementation is the current phase, self-built with AI-assisted tools a fitting stress test of the product's own premise.

What I'd take forward:

Designing the schema before the interface was the right call — it meant every screen had something real to be a view of, rather than the schema being retrofitted to match whatever the UI ended up looking like.

Systemic Workspaces Trump Chat Tooling:

When it comes to complex configuration work, dedicated tool panels and clear visual summaries perform significantly better than standard conversational input fields.

Vibe Coding Requires Systems Thinking:

As a designer building software with AI, my value wasn't in tuping syntax; it was in architecting the system architecture and data states. if you don't know how tokens, permissions, and layout structure map together, the AI will build a fragile, unmaintainable product.

Building the Tool to Fix the Tool:

Vibe-coding an infrastructure platform designed specifically for vibe-coders meant I was building my own solution in real-time. Every time my AI agent hallucinated a button component during the build, it became a feature requirement for Leroton.

Next Implementation Steps:

The full functional UI roadmap, structural logic frameworks, and interface component systems have been successfully compiled. The upcoming phase involves engineering the core code generation engine and setting up early testing pipelines for direct GitHub repo syncing.

Where it stands and whats next

The schema and core engine are built and functional the screenshot above is a live run of the real system, not a mockup. The Figma design system is complete, and frontend implementation is the current phase, self-built with AI-assisted tools a fitting stress test of the product's own premise.

Ready to ship? Let’s talk numbers and systems.

Ready to ship? Let’s talk numbers and systems.

Ready to ship? Let’s talk numbers and systems.

TO GET IN TOUCH

Contact Me

Contact Me

BOOK A CALL

SET UP A DAY TO TALK ABOUT YOUR DESIGN NEEDS

SET UP A DAY TO TALK ABOUT YOUR DESIGN NEEDS

CLICK TO COPY

jayfactor007@gmail.com

Email is in your clipboard!

CREATED BY

JAMES MARTINs

JAMES MARTINS

©

2026

ALL BUILT IN

FRAMER

10:32 PM

August 7

Abuja, Nigeria

Available for work

Check X

Linkedin

Instagram

Email

Behance

Dribbble

Create a free website with Framer, the website builder loved by startups, designers and agencies.