Working with AI

Skappa's AI is the core of your development workflow. It reads your entire project, understands the relationships between files, and generates or modifies code based on your natural-language instructions. The better your prompts, the better the results. This guide covers how to communicate effectively with the AI across all three chat modes.

Writing Effective Prompts

Be specific about what you want. Instead of vague requests, describe the component, its placement, styling, and behavior:

Good: "Add a blue header with the logo on the left, navigation
links in the center, and a Sign In button on the right."

Too vague: "Add a header."

Reference existing elements by name when asking for changes. The AI knows your project structure, so you can say things like "Make the card grid on the homepage 3 columns instead of 2" or "Change the sidebar background to match the header."

Build Mode

Build mode is for creating and modifying code. Describe a feature, a layout change, or an entirely new page and the AI generates it. You can chain multiple requests to build incrementally:

• "Add a sidebar with navigation links"
• "Highlight the active link in the sidebar"
• "Add a collapse button to toggle the sidebar"

Each request builds on the previous state of your project, so the AI maintains context across your entire conversation.

Discuss Mode

Switch to Discuss mode when you want to talk about your code without modifying it. This is useful for understanding how a component works, planning an architecture before building, or brainstorming feature ideas. Ask questions like "What does this useEffect do?" or "How should I structure the database for a multi-tenant SaaS?"

Fix Mode

When something breaks, switch to Fix mode. Paste the error message or describe the unexpected behavior. The AI reads your project files, identifies the root cause, and applies the fix automatically. Fix mode is context-aware — it knows your dependencies, file structure, and recent changes, so it can diagnose issues that span multiple files.

Iteration Tips

• Start broad, then refine. Generate the full page first, then tweak individual components.
• Test in the preview after each change. Avoid batching too many requests at once.
• If the AI goes in the wrong direction, describe what you actually wanted instead of trying to fix the AI's output manually.