Vibe Coding Playbook for GTM App Building

• Define all features and workflows
• Specify user roles and permissions
• Define UI behavior and data flow
• Define validations and edge cases
• Specify theme, layout preferences, and UX expectations

‍

Provide clear visual and functional context.

• Add Figma designs, if available
• Add screenshots of similar tools or workflows
• Add documents, notes, or written explanations

‍

Use Claude to prepare a detailed build prompt.

• Share all app requirements and reference material with Claude
• Ask Claude to generate one complete, structured prompt
• Make sure the prompt defines:
  • Pages and components
  • Data models
  • Logic rules
  • Integrations
  • UI and layout instructions

‍

Review the prompt before submitting it.

• Confirm every feature is clearly described
• Check for missing flows or logic
• Ensure there are no instructions asking the tool to “decide” or “assume”

‍

Build the initial app using Lovable.dev.

• Paste the validated prompt into Lovable
• Upload all reference files and images
• Attach Figma designs, if available
• Use credits carefully:
  • Each request consumes credits
  • Avoid unnecessary iterations

‍

Prepare the project for iteration and maintenance.

• Connect the Lovable project to GitHub
• Generate a repository
• Copy the Git repository URL
• Clone the repository using Git
• Open the project folder locally in VS Code or Cursor

‍

Use Cursor or Claude Code for changes and improvements.

• In Cursor, use the built-in chat to request changes
• In Claude Code, use the terminal inside VS Code and run claude
• Request updates such as:
  • Logic changes
  • Feature additions
  • UI improvements
  • Refactoring or cleanup

‍

Complete and validate the application.

• Test core workflows
• Confirm data accuracy and outputs
• Ensure the app is usable by the intended internal teams

‍