Command Center - System Role: You are a World-Class Senior UI/UX Designer and Frontend Engineer specializing in high-end B2B SaaS aesthetics.
Generated Prompt
```markdown ## APPLICATION OVERVIEW Develop a high-conversion, dark-mode-first waitlist landing page for an AI-first research orchestration platform. This application will serve as a "Command Center" for academic professionals, designed to facilitate complex research tasks through a sophisticated interface while ensuring a seamless user experience. ## CORE FEATURES 1. **Header Navigation**: A minimalist header featuring the logo on the left, a ghost button for "Sign In," and a contrasting solid button for "Join Waitlist" on the right. 2. **Hero Section**: An engaging hero area with a prominent headline, sub-headline, and an interactive dark-themed mockup showcasing a "Task Orchestration" view for real-time project management. 3. **Anti-Chatbot Bento Grid**: A 3-column grid layout that differentiates the platform's unique features with three distinct cards: - **Visibility**: "Glassbox Execution" – Displays real-time agent logs. - **Structure**: "Artifact-First" – Visual representation of stored research papers versus disposable chat messages. - **Control**: "Human-in-the-loop Planning" – A drag-and-drop interface for research workflows. 4. **Workflow Scroll**: A vertical timeline that visualizes the transition from messy work to organized outputs, featuring scroll-triggered animations for enhanced engagement. 5. **Waitlist Conversion Section**: A focused footer area encouraging users to join the waitlist with an email input field and a visual hint for a "Command-K" keyboard shortcut. ## DESIGN SPECIFICATIONS - **Visual Style**: Emphasizes a minimalist aesthetic with ample whitespace, a restrained color palette, and a strong focus on typography to enhance readability and engagement. - **Color Mode**: Dark theme with deep obsidian backgrounds and electric blue accents for high-contrast elements. - **Layout**: A single continuous scrollable page structured to guide users through the content fluidly, maximizing scannability and engagement. - **Typography**: - **Headlines**: Inter Tight with tight tracking for clarity and emphasis. - **Body**: Geist Mono to create a technical feel suitable for academic content. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for a robust and type-safe application. - **Styling**: Tailwind CSS to facilitate rapid UI development with utility-first classes. - **UI Components**: Leveraging shadcn/ui components, modified for sharper design (lower border-radius of approximately 4px). - **State Management**: Utilize React Context API or Zustand for managing application state. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Build Header Component**: Create a responsive header with logo, "Sign In," and "Join Waitlist" buttons, ensuring proper alignment and spacing. 3. **Develop Hero Section**: Implement the hero section with the specified copy and interactive mockup, using Tailwind for styling and Framer Motion for animation. 4. **Create Bento Grid**: Design the 3-column grid layout for the differentiation cards, ensuring each card is styled to convey its unique functionality. 5. **Implement Workflow Scroll**: Add the vertical timeline section with scroll-triggered animations, ensuring smooth transitions. 6. **Final Touches on Footer**: Construct the footer with an email input and clarity on the call-to-action, ensuring it stands out for conversion. ## USER EXPERIENCE Key user interactions include smooth navigation throughout the landing page, intuitive engagement with interactive components, and a clear pathway to join the waitlist. The design should encourage users to explore the platform while ensuring that essential information is easily accessible and visually appealing. ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
