How JET Works
Understanding how JET transforms your words into working websites will help you get the most out of the platform. This page breaks down the core concepts, data flow, and design philosophy that power JET's "vibe coding" experience.
The Core Concept
JET operates on a simple but powerful principle: natural language should be enough to build production-ready websites. Here's the high-level flow:
Your Prompt → AI Composer → Component Integration → Backend Generation → Live Preview
When you describe what you want, JET's AI Composer:
Parses your intent — Understands layout, style, functionality, and content needs
Selects components — Chooses or generates the right building blocks
Generates custom code — Creates unique elements tailored to your requirements
Builds the backend — Sets up databases, APIs, and server logic automatically
Renders live preview — Shows you a working, testable version instantly
What is "Vibe Coding"?
Traditional web development requires switching between code editors, design tools, databases, and hosting platforms. JET collapses all of this into a conversation.
Vibe coding means you refine your website through iterative chat-based edits:
"Make the hero section more modern"
"Add a pricing table with three tiers"
"Connect this form to save user emails"
"Change the color scheme to match my brand"
Each message updates your site in real-time. No context switching, no technical syntax—just natural conversation.
Key System Components
1. AI Composer (The Brain) The chat interface where you describe, request, and refine. It understands design terminology, web conventions, and functional requirements. It handles everything from "make it pop" to "add OAuth authentication."
2. Component Library (The Building Blocks) Hundreds of pre-built, customizable components: headers, heroes, forms, product cards, footers, navigation menus, testimonial sections, and more. Each component is responsive, accessible, and optimized for performance.
3. Live Preview (The Canvas) Real-time rendering of your website as you build. Test forms, click buttons, navigate pages—everything works just like it will in production. Toggle between desktop, tablet, and mobile views instantly.
4. Backend Generator (The Infrastructure) JET doesn't just build frontends. It automatically creates:
Database schemas for your data
API endpoints for forms and interactions
Authentication systems when needed
Content management interfaces
Server-side logic for dynamic features
5. Marketplace (The Economy) Buy and sell components and complete websites using $JET tokens. Revenue from marketplace transactions flows back into token buybacks and burns, creating value for the community.
Data Flow Diagram
Example User Journey: Maya the Product Founder
Meet Maya: She's launching a new productivity app and needs a landing page fast.
Step 1 - Initial Prompt:
"Create a landing page for TaskFlow, a productivity app for busy professionals. Include a hero, benefits section, and waitlist signup."
JET Response: Generates a complete landing page with hero image placeholder, three benefit cards, and a working email capture form connected to a database.
Step 2 - Refinement:
"Make the hero background a gradient from blue to purple. Add testimonials below the benefits."
JET Response: Updates the styling and inserts a testimonial carousel component with placeholder content.
Step 3 - Content:
"Change the hero headline to 'Stop juggling tasks. Start flowing.' and add three testimonials from beta users."
JET Response: Updates copy and testimonials. Maya can now paste in real customer quotes.
Total Time: 8 minutes from blank screen to publishable website.
Design Philosophy & Constraints
Responsive by Default Every component and layout JET creates is mobile-optimized. You don't need to ask for responsive design—it's built in.
Accessible & Semantic JET generates semantic HTML with proper ARIA labels, keyboard navigation, and screen reader support.
Performance Optimized Images are lazy-loaded, code is minified, and components load progressively to ensure fast page speeds.
What JET Won't Change Without Permission:
Licensed assets or copyrighted content
Live production databases (requires explicit staging/production split)
Domain settings and DNS configuration
Payment processor credentials
Tips for Better Results
Be Specific When It Matters
❌ "Add a button"
✅ "Add a green 'Get Started' button that opens the signup form"
Include Sample Content
❌ "Add testimonials"
✅ "Add three testimonials with customer names, companies, and quotes about ease of use"
Describe the Feeling
❌ "Make it look nice"
✅ "Make it feel modern and trustworthy, like Stripe or Linear"
Try These Prompt Patterns:
"Create a [component type] for [purpose] that [specific feature]"
"Make the [element] more [adjective] by [specific change]"
"Add a [section] below [existing section] that shows [content]"
Quick Help Prompts
Not sure what to say? Try these in the chat:
"What can you help me build?"
"Show me hero section options"
"Add a feature comparison table"
"Make this mobile-friendly"
"Connect this form to save responses"
Last updated