Complete guide to understanding how the AI thinks, codes, and builds websites. Learn the best practices for effective prompting.
"Add a contact form to the home page"
Clear action + location
"Make the hero section more modern with animations"
Specific section + clear goal
"Change the blue buttons to purple"
Specific element + specific change
"Add a testimonials section after the features"
Clear content + specific placement
"Make it better"
Too vague - better how?
"Fix the CSS"
No technical details needed
"Add <div class='...'>"
Don't provide code - describe the goal
"Can you maybe possibly..."
Be direct - I'll act immediately
I automatically retry up to 3 times if there are linter errors. I'll fix formatting issues, malformed HTML, and styling problems without you needing to intervene.
Detailed answers to advanced questions about my reasoning, design decisions, technical execution, and limitations.
"Make it elegant + add testimonials"
I break this into: 1) Analyze current style 2) Apply elegant
refinements (subtle animations, better spacing) 3) Design
testimonials section that matches the new elegant style
I need minimal context - just seeing 1-2 existing sections lets me extract: color palette, typography choices, button styles, spacing patterns, and animation preferences. I automatically apply this across all new sections.
Yes, automatically. I use semantic search to find similar sections across your site and maintain consistent styling patterns. I don't require you to re-specify colors or styles for each page.
Buttons: Scale + color change
Cards: Lift + shadow increase
Images: Subtle zoom or overlay
Icons: Bounce or rotate
Text links: Underline or color shift
Automatic. Every design uses Tailwind breakpoints: mobile (default), sm: (tablet), lg: (desktop). I automatically stack grids, resize text, adjust padding, and reorder elements for mobile without you specifying it.
I follow the 60/40 rule - 60% content, 40% whitespace for readability. Premium sections get more whitespace. Dense sections (like feature grids) get tighter spacing but maintain breathing room between groups.
Yes, from screenshots. I can analyze layout patterns, color schemes, typography, and spacing. I recreate the design principles using Tailwind, not exact pixel-perfect copies. Best to say "like Apple's clean hero section" rather than "exactly like apple.com"
Automatic. When I replace sections, I completely overwrite the HTML. No leftover classes or unused styles remain. Each edit is clean and self-contained.
Best approach: "Add a Calendly booking widget" or "Embed Typeform for lead capture"
I'll create: Proper iframe containers with responsive styling
You provide: The embed code or widget URL
Native only. I use Tailwind's built-in animations (bounce, pulse, spin) and custom CSS keyframes. I cannot add external libraries like Lottie, but I can create impressive effects with transforms, gradients, and transitions.
"Make this cooler" becomes:
Preferred order:
Rare. I handle complex requests well, but if you ask for 5+ changes at once, I might miss nuances. Better to group related changes: "Update hero section with new headline, subtitle, and button text" works great.
Yes! "Make it match the last section" works perfectly. I remember recent changes and can apply consistent styling. I can also reference "the hero section style" or "like the testimonials we just added."
Absolutely! I can create product grids, shopping cart layouts, checkout flows, pricing tables - everything visually perfect. I'll add "Cart (3 items)" and "$299.99" text, but actual purchasing requires external integration.
Can't build it? I'll suggest:
Best practice: Let me finish each request before the next. If you rapid-fire 3 requests, I might apply them to the original version instead of building on each change. Wait for my "✅ Complete!" before continuing.
I'll be upfront about limitations and offer the best alternative. Example: "I can't add a functional shopping cart, but I can create a beautiful product showcase with 'Add to Cart' buttons that link to your Shopify store."
Demonstrating the power of modern web design with beautiful gradients and smooth animations
A clean, modern hero section built instantly with beautiful green gradients and professional styling.
Sabores auténticos de México • Fresh ingredients • Family recipes passed down through generations