Skip to main content

Prompt Engineering & Planner Guide

The heart of Radian AI is the AI Planner & Architect Engine. It translates natural language descriptions into clean, high-performance web components. Understanding how to structure your prompts is the key to unlocking premium, custom-tailored layouts.

⚡ Effective Prompt Structuring​

To get the absolute best visual aesthetics (like glassmorphism, modern bento grids, or sleek tech portfolios), structure your prompt with three essential details: The Domain, The Vibe, and The Structure.

❌ The "Too Simple" Prompt (Avoid)​

"Build a landing page for my analytics company."

  • Result: The AI will build a basic layout, relying on standard template averages because the visual details were omitted.

"Build a high-end, dark-mode analytics landing page for a Web3 startup. I want a cyber-brutalist tech aesthetic with cyan and purple glows. Start with a massive typography Hero section, followed by a 3-column bento-grid feature section detailing security and speed, a client logo slider, and a clean neon border-b footer."

  • Result: The AI planner identifies key design tokens, picks specialized grid components, binds decorative blur spheres, and coordinates perfect layout-slots, delivering a premium visual structure on the first try.

🧩 Designing Common Sections​

You can specifically direct the AI Planner to build structural elements by using explicit keywords:

🍱 Bento-Grid Sections​

Bento boxes are excellent for product highlights, pricing tiers, and dashboards.

  • Keywords to include: bento grid, asymmetric grid, multi-column card box with varying heights, tech readout.
  • Example: "Show my core services inside a modern bento box with subtle border highlight lines."

🛸 Interactive Showcases​

Excellent for dashboards, product previews, and SaaS features.

  • Keywords to include: dashboard preview, active card toggles, perspective rotation screen, live-feed indicator.
  • Example: "Add a section showing our platform's dashboard in a 3D perspective tilt frame with an active pulse indicator in the top corner."

💬 Minimalist Testimonials​

High-converting social proof blocks.

  • Keywords to include: asymmetric quotes, verified signal indicator, minimalist columns, avatar grid.
  • Example: "Showcase three encrypted tech testimonials in a masonry layout with cyan glow accents."

🔄 Iterative Surgical Edits​

Once your page is generated, you don't need to rewrite the entire site to make adjustments. Use Radian Studio's Surgical Chat Interface to refine individual sections:

  1. Click on Inspect Mode (the Surgery icon) in the top-right header.
  2. Hover over any generated section in the canvas.
  3. Click the section to isolate it.
  4. Prompt the AI surgically: "Make this hero button wider and add a gradient background," or "Change the service grid icons to Lucide Database, Cloud, and Code."
  5. The Radian AI compiler will re-generate only that specific component, preserving the rest of your page intact!