Loving Tina? us on GitHub0.0k

Docs

Learn

v.Latest
Documentation

Vibe Coding with TinaCMS

Loading last updated info...
On This Page

AI coding assistants work best with TinaCMS when you stay in control. This guide shows how to collaborate with AI as a partner, not a pilot.

1. Set the Stage

Set up an environment where your AI assistant can shine:

1.1 Use an IDE with AI integration

Use a modern IDE that supports inline AI assistance.
We recommend Visual Studio Code paired with GitHub Copilot or another inline AI tool such as Cursor.

1.2 Setup your folder structure

Before generating any code, create a clean folder where your project will live. This helps AI understand where new files should go and keeps your workspace organized.

1.3 Use a TinaCMS starter kit

AI works best when it has context. Having the template gives it some code to model itself on. Follow along with our official guide or ask your assistant to do it for you:

Please set up a TinaCMS starter template using the command: npx create-tina-app@latest

Once installed, explore the generated files so you understand how TinaCMS is wired together. Your AI assistant will reference this structure automatically in later prompts, so the more you know your starting point, the more precise your direction will be.


2. Build in Bite-Sized Pieces

AI works best when given small, focused tasks. Instead of asking for “the whole project”, break your work into manageable, self-contained steps that can be tested and refined one at a time.

This approach helps your assistant maintain context, reduces the chance of errors, and makes debugging much easier.

2.1 Start Small

Rather than prompting your assistant to “build a blog site”, start with a single feature or component. If you know what you want, use something like:

Please create a component that allows commenting on a blog post. It should use Giscus, and config settings should be stored in a global config file so they can be reused across all comment blocks.

This defines scope and structure, helping AI produce accurate, context-aware code.

2.2 Iterate Feature by Feature

Once one component or schema works, move on to the next logical piece. By building one feature at a time, your AI assistant learns your project’s structure progressively and builds on a solid foundation.

2.3 Use AI for Brainstorming

If you’re not sure what you need yet, ask your assistant to help brainstorm possible content structures or reusable blocks.

For example:

Suggest five useful blocks for a long-form article layout in TinaCMS.

2.4 Validate Early

After each feature, run your development server and verify that components render and work correctly.

The earlier you validate, the less time you’ll spend debugging larger combined changes later.


3. Commit Early, Before Letting AI Go Wild

AI is fast and confident, sometimes a bit too much. It may:

  • Rename things that shouldn’t be touched
  • “Clean up” code that was actually doing something important
  • Reformat entire files

To stay safe:

  • Commit before big AI edits, create a "save point".
  • If you’re exploring new ideas, create a new branch first
  • Treat AI outputs like prototypes; easy to try, easy to revert

This protects your momentum. If the AI derails, you can reset instead of untangling chaos.


4. Test & Iterate

Your job isn’t to accept suggestions blindly, it’s to steer.

AI will often get you close, but rarely perfect on the first try. Treat every output as a draft.

  • If a suggestion is close: Accept, tweak and refine
  • If it’s off: Add more detail and regenerate
  • If it forgets Tina: Remind it explicitly: This is using TinaCMS, follow its component patterns.

Even debugging can be a collaboration. Instead of staring at an error alone, share it with your AI assistant:

After those changes to the comment system, the block no longer renders. Here's the error: {{error}} What's likely causing this, and how can I fix it?

AI won’t always nail the fix, but it will usually point you in the right direction. Use that feedback to keep momentum instead of getting stuck.


5. When It Gets Stuck

If AI starts repeating or drifting off-track, reset the prompt.

To reset:

  1. Delete the noise. Clear out any broken or confusing suggestions.
  2. Write one clean sentence about the outcome you want next.

That single line of clarity is often all it needs to snap back into alignment.


Final Thought

AI won’t build your site for you but it will build with you.
Your job is to keep it aimed in the right direction by understanding Tina’s patterns, give clear prompts, and stay hands-on.\

Build small. Commit often. Iterate confidently.

Last Edited: November 11, 2025