Tips & Tricks

Negative constraints are as important as positive ones. “Never use Inter, Roboto, or Arial fonts. Never use purple gradients. Never use centered card grids as the primary layout.” This dramatically reduces generic output.

Instead of “make it look professional,” say “use the daisyUI hero component with bg-base-200, a stats bar with 3 stats, and staggered scroll reveals.” Concrete component names and class names produce far more accurate output.

Always use OpenCode Desktop’s Plan Mode (toggle in the UI) for multi-page or structural changes. The agent proposes what it will do — you review and adjust before any code is written. This prevents wasted tokens on wrong-direction implementations.

Provide links to documentation (daisyUI llms.txt, PageWeave docs, Tailwind docs) in your initial prompt. Agents with web fetch capability will read them. This ensures the agent uses current APIs, not hallucinated or outdated ones.

Generic fonts (Inter, Roboto, system-ui) are the clearest signal of AI-generated design. Spend 2 minutes picking distinctive fonts on Google Fonts. Crimson Pro + JetBrains Mono, Playfair Display + Source Sans, or DM Serif Display + IBM Plex Mono. The pairing matters more than any single font choice.

daisyUI’s design philosophy: use primary for the single most important element on the page. Everything else uses base-*, secondary, accent, or neutral colors. Overusing primary dilutes its impact and looks amateurish.

AI defaults to symmetrical, centered layouts. Explicitly request asymmetry: “use an asymmetric two-column layout with the text column narrower than the visual column” or “overlap the hero image with the next section by -4rem.”

A simple Intersection Observer with staggered animation-delay values transforms a static page into a polished experience. It’s ~20 lines of JS that the AI can generate reliably. The perceived quality jump is massive.

OpenCode Desktop reads your project files automatically when you open a folder. Let the AI explore the codebase before asking for changes. This helps it understand conventions, folder structure, and existing patterns — leading to more consistent output.

If the agent’s output isn’t right, use the Undo button in OpenCode Desktop instead of describing what to fix. It reverts the change and shows your original prompt. Tweak the prompt and try again. Multiple undos go back through history. Redo brings changes back.

For multi-page sites, build one complete page first — get the design right. Then use that page as a template: “Create /about with the same design patterns as the homepage. Same fonts, same card style, same reveal animations.”

PageWeave’s update_page works with old_html / new_html replacements. Always let the AI read the current page first to get the exact HTML. The agent needs the literal text to create accurate replacements. Skipping this step causes edit mismatches.

If a daisyUI component isn’t rendering correctly, check for typos in class names. Unlike JavaScript errors, CSS class name typos fail silently. Common mistakes: btn-primary instead of btn btn-primary, or using Tailwind color names (bg-blue-500) instead of daisyUI semantic colors (bg-primary).

AI can miss responsive behavior. Always specify breakpoints: “Use a 3-column grid on desktop (lg:grid-cols-3), 2 columns on tablet (md:grid-cols-2), and single column on mobile.” Test by resizing the browser.

When the agent generates large HTML blocks, occasional unclosed tags slip through. If layout breaks unexpectedly, check for missing </div>, </section>, or </ul> tags. Most agents can self-correct if you point this out.