Skip to main content

​
Prompt Engineering

​
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:
  • Page section positioning and component placement
  • Expected functionality and business logic
  • Detailed layout and design requirements
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. Poor example: 
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.
Good example: 
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.

​
Visual Style

​
Style Prompts

During page generation, the AI applies familiar layouts and design patterns by default. You can provide style-specific prompts to guide the AI toward more distinctive design implementations. Below are examples of stylistic prompt patterns and their visual outcomes.
Minimalism

Minimalism

Neobrutalism

Neobrutalism

Retro

Retro

Vaporwave

Vaporwave

Brutalist

Brutalist

Pixel Art

Pixel Art

Example: 
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...

​
Troubleshooting

​
Code Error Resolution

When code generation errors occur, Readdy automatically performs one Try Fix iteration, effectively resolving most bugs. If errors persist, manually trigger additional Try Fix attempts. If issues remain unresolved after 2-3 attempts, focus on error analysis before implementing fixes: Copy the error message to the conversation with guiding instructions: 
[paste error message]
Please analyze the root cause of this error. Don't modify the code yet.
After receiving detailed error analysis, proceed with the fix: 
Now please implement the fix for this issue
⌘I