Documentation Index
Fetch the complete documentation index at: https://mayson.mintlify.app/llms.txt
Use this file to discover all available pages before exploring further.
1. Describe behavior, not implementation
Mayson generates the backend automatically. You never need to specify database schemas, API structures, or framework choices. Describe what the app does for the user, not how it should be built.
| Instead of this | Say this |
|---|
| ”Use a REST API with a users table" | "Users can sign up and log in" |
| "Create a PostgreSQL table with id, name, price columns" | "Each product has a name, price, and image" |
| "Add a GET /items endpoint that returns paginated results" | "Show a list of all items on the homepage with pagination" |
| "Implement JWT auth with refresh tokens" | "Users should stay logged in between sessions" |
| "Add a foreign key between orders and users" | "Each order should be linked to the user who placed it” |
The right column describes the same thing. The Agent understands both, but the left column risks overriding correct architectural decisions with unnecessary constraints.
Tell Mayson what users can do. It handles everything else.
For developers: If you have genuine technical requirements (a specific external API, a non-standard data structure, a specific auth flow), state them as constraints at the end of your prompt, not as the main instruction. Example: “Use Razorpay for payments” or “Auth must use OTP, not password.” If you need a specific external service wired in (Stripe, Twilio, SendGrid), name it directly. The Agent will integrate it.
2. Set the visual direction early
Design language is a foundation, not a finish coat. State your visual direction in the first prompt. Changing it later means regenerating significant portions of the frontend.
The Agent responds to design vocabulary. Terms like “minimal,” “bold and expressive,” “premium,” “card-based,” “dark background,” and “editorial” all meaningfully influence typography, spacing, color choices, and component style.
Useful design terms:
- Layout:
card grid, sidebar layout, two-column, full-width sections, centered content, bento grid, asymmetric layout
- Style:
minimal, bold, editorial, glassmorphism, brutalist, neubrutalist, flat, material, claymorphism, aurora UI
- Tone:
professional, playful, approachable, premium, technical, warm, high-contrast
- Color: specify background color, primary accent, and whether it’s light or dark mode
- Typography:
modern and clean, serif headings, monospace labels, generous whitespace, tight and dense
Prompt example:
Clean and minimal design. Light background with neutral grays. Rounded corners, generous padding, subtle card shadows. Typography should feel modern and readable, not corporate. Overall tone: professional but approachable.
If you have a specific color or reference brand, include it:
Primary accent: #6366F1 (indigo). Dark mode. Dense information layout with clear hierarchy.
3. Push past generic: prompting for distinctive design
The Agent defaults to safe, predictable design. Without specific guidance, you’ll get what every other AI-built app looks like: a purple-gradient hero, rounded white cards, generic sans-serif body text, and a layout that looks like a Tailwind starter kit.
That’s a baseline, not a ceiling. Pushing past it takes a few extra lines in your prompt, and the difference is significant.
Three ways to get distinctive output:
1. Name a specific style, not just a vibe.
“Modern and clean” is not a design direction. “Neubrutalism” is. “Editorial” is. “Dense, data-forward like Linear” is. The more specific and unusual the style name, the more the Agent departs from its defaults.
Design style: neubrutalism. Hard black borders, flat blocks of saturated color, no box shadows, no border radius. Typography should be heavy and expressive, not refined.
2. Say what you don’t want.
Explicitly ruling out defaults forces the Agent to make real choices. This is the fastest way to avoid the generic AI aesthetic.
Avoid: rounded corners, gradient backgrounds, purple as a primary color, any card that looks like a pricing block from a SaaS landing page. No hero illustrations.
3. Reference a visual world, not another product.
Referencing Stripe or Linear tells the Agent about information architecture, not aesthetics. For visual identity, reference editorial design, architecture, fashion, or specific aesthetics instead.
Visually inspired by Japanese minimalism: high negative space, precise grid alignment, monochrome with a single restrained accent color, no decorative elements.
Editorial feel: think architecture magazine meets developer tool. Serif headings, tight body text, structured columns, muted palette with black as the dominant color.
Prompt that combines all three:
Design direction: editorial and dense. Inspired by Monzo's dark UI meets a high-end editorial magazine. Off-black background (#0D0D0D), warm cream text (#F5F0E8), single accent in terracotta (#C1440E). No gradients, no rounded cards, no purple. Typography: sharp geometric sans for headings, readable mono for data, generous leading throughout.
For developers: The Agent generates a real frontend with a component library. Style overrides live in the generated CSS and component files, both of which you can access directly in the Manual Builder after generation. If the first build doesn’t land the visual direction exactly, you can also make design-only refinements via the Agent chat without touching any logic.
4. Use real content, not placeholders
Mayson responds to intent, and the fastest way to show intent is to use real words. Placeholder content like “Feature 1”, “Lorem ipsum”, or “Button text” hides layout problems and almost always produces generic output.
Write the copy you’d actually use. It doesn’t have to be final, it just has to be real.
Generic:
Add a hero section with a headline and a button.
Specific:
Hero headline: "Ship your backend in minutes." Subheading: "From idea to deployed API without writing a line of code." CTA button: "Start building free."
The second prompt produces a hero that looks like a product. The first produces a template.
5. Reference real apps when helpful
If what you’re building resembles an existing product, say so. References help establish information architecture and interaction patterns without requiring you to describe every flow from scratch.
Good references:
Build something like a lightweight Trello: kanban boards with cards, drag-to-move between columns, a simple card detail view. No teams, no notifications. Just boards and cards.
Similar to Typeform: one question at a time, smooth transitions between steps, a progress bar at the top, summary screen at the end.
When references mislead:
Avoid referencing a product if your app differs from it significantly in structure. “Like Notion but for X” often sends the Agent in the wrong direction if your information architecture is fundamentally different. In those cases, describe the actual behavior instead.
6. Describe what users can do, not just what exists
A common mistake is describing an app in terms of screens and elements rather than actions and outcomes. The Agent builds better when it understands user intent.
Screen-centric (weaker):
The app has a dashboard, a profile page, and a settings screen.
Action-centric (stronger):
Users land on a dashboard that shows their active projects and any tasks assigned to them this week. From there they can create a new project, open an existing one, or go to their profile to update their display name and avatar.
Both describe the same app. The second gives the Agent enough context to make good decisions about what each screen contains, what’s clickable, and what the primary user journey looks like.
7. Name your app and define its job in one sentence
Starting a prompt with a name and a clear one-sentence purpose helps the Agent maintain consistency across the whole build. Naming conventions in the UI, API structure, error messages, and empty states all benefit from this anchoring.
Good opening:
App name: Trackr. A lightweight project tracker for solo freelancers to manage client work, deadlines, and invoices in one place.
This takes five seconds to write and meaningfully improves coherence across the generated application.