How to Use Readdy Efficiently

✅ Recommended AI Interactions

Readdy’s Agent excels at web editing and building tasks. You can ask the AI to help you with:

Implementing specific web features (e.g., adding login/registration functionality, setting up payment features)
Adjusting page layouts (e.g., modifying component order, adjusting element layout)
Adding page content (e.g., adding new sections, inserting videos or images)
Updating page styles (e.g., changing fonts, colors, button styles)

🚫 Not Recommended Usage Patterns

The current version of Readdy Agent focuses primarily on website editing tasks. To help you make the most of your credits:

Don’t specify the technology stack for Readdy, as it currently only supports React by default
Don’t present multiple complex tasks at once, as this may lead to suboptimal generation results

Prompt Engineering Best Practices

Clear and Specific Prompts

The clarity and specificity of your prompts directly correlate with the accuracy of generated results. When crafting prompts, consider including the following elements as needed:

Expected functionality and business logic
Page section positioning and component placement
Detailed layout and design requirements (optional)

Poor example:

Create a login page

Good example:

Create a login page with a split-screen layout. The left section displays a hero image, and the right section contains a togglable login/registration form with Google OAuth integration.

Focus on Single Tasks and Pages

Large Language Models have limited attention mechanisms. When presenting multiple tasks simultaneously, the generated results may not meet expectations. We recommend decomposing complex requirements into focused, sequential executions. For optimal code quality, we highly recommend generating one page component at a time rather than requesting multiple pages in a single prompt.

🟡 Not Recommended:

Build an e-commerce website where users can click on product listings to go to detail pages, then purchase or add items to cart. The cart page should have a checkout button with Stripe payment support, preferably with coupon functionality, and redirect to an order page after successful payment.

🟢 Recommended:

Create a product detail page component accessible via product listing navigation. The detail page should display product images, title, pricing, and specifications, with "Buy Now" and "Add to Cart" action buttons.

Target Specific UI Components

When modifying specific elements that are difficult to describe verbally, use the Selector tool to precisely target them. After selecting an element, describe your modification intent directly in the input field:

Modify the selected component to increase border radius and add more padding for improved visual hierarchy.

Chat Mode

For complex business logic, feature planning, or AI consultation, establish consensus through dialogue before implementing modifications. This prevents significant divergence between AI-generated code and expected functionality. Request interactive dialogue mode with:

Please don't modify the code yet.

Once consensus is reached, proceed with implementation requests.

Minimize Context Dependencies

LLMs operate within limited context windows, and Readdy follows the same constraints. Each execution cannot retain communications and modifications from distant interactions. Provide specific requirements for each modification to avoid over-reliance on previous context. Poor example:

Revert the login/registration page to the previous style

Good example:

Implement a split-screen layout where the left section displays a hero image and the right section contains a togglable login/registration form with Google OAuth integration.

Page Management

🗑️ Delete Pages

Simply tell AI which page you want to delete. For example:

Please delete the "About Us" page.

📄 Duplicate Pages

Similarly, just specify which page to copy. For example:

Please duplicate the homepage and name it "Homepage Copy".

📦 Duplicate Entire Projects

Currently, Readdy doesn’t support one-click project duplication, but you can achieve project replication through the following method:

Create a new project
Send the following instruction to the AI:

Rebuild this website URL: [your reference website]
Make exactly the same website for me, using my content, layout, structure, images and keep all the features.

You can also use this instruction to reference websites you like for design inspiration.

Note: This feature only works for projects built with React or Next.js.

Visual Styling

Style Keywords for Different Website Styles

You can directly tell AI what visual style you want for your website. Here are some popular styles:

Available style keywords:

Minimalism - Clean, minimalist design
Neobrutalism - Neo-brutalist style
Vaporwave - Vaporwave aesthetic
Brutalist - Brutalist design
Pixel Art - Pixel art style
Retro - Retro/vintage style

Example prompt:

Style: Minimalism

Micro-interactions

When generating landing pages, strategic micro-interactions and subtle animations enhance user experience. Through conversational prompting, the AI can efficiently implement animation effects.

Effective prompting approach:

Implement subtle animations and micro-interactions to enhance user engagement

Design Reference

Providing visual references for style and layout significantly improves generation quality. Browse platforms like Dribbble and Mobbin to identify suitable design patterns, save them as images, and upload to Readdy for reference-based generation. Specify the reference focus in your prompts:

Reference the color palette from this image to generate a...

Adding Media Content

🎥 How to Add Background Videos

You can add video backgrounds to your website through the following methods: Option 1: Use Supabase Upload your video to Supabase and get the video link 👉 How to use shared files Option 2: Use YouTube or other platforms Use direct video links from YouTube or other platforms Implementation Steps:

Use the Selector tool to select where you want to insert the video (e.g., Hero section)
Send the following instruction to the AI:

Please play the video from this URL in the Hero section and set it to loop.

Quick Reference Summary

✅ Do’s

Be specific and clear in your prompts
Focus on one task at a time
Use the Selector tool for precise modifications
Provide visual references when possible
Break complex tasks into smaller steps

❌ Don’ts

Request multiple complex tasks simultaneously
Rely on context from distant conversations
Vague or ambiguous prompts

🎯 Best Practices

Single Task Focus: Generate one page or component at a time
Specific Requirements: Include layout, functionality, and design details
Visual References: Use images to guide style and design
Iterative Approach: Build and refine step by step
Context Management: Provide full requirements for each modification

Need More Help?

Ask AI: Available in your project
Check our troubleshooting guide
Readdy Support: Submit a support ticket

Getting Started

Features

Tips & Tricks

Integrations

Account

Troubleshooting

How to Use Readdy Efficiently