Prompting Best Practices

Crafting effective prompts helps Codinit.dev generate projects that match your exact vision.
This guide walks you through how to be specific about your stack and how to leverage the Prompt Enhancer for optimal results.

Be Specific About Your Stack

Codinit’s AI understands context, but it works best when you clearly define your tech stack.
If you specify which frameworks, libraries, or tools you prefer, Codinit will scaffold the project with the right configurations out of the box.

If you don’t specify your stack, Codinit defaults to modern web standards — usually a JavaScript framework like React with minimal styling.

Example

Build me a portfolio website using Astro, TailwindCSS, and ShadCN UI.  
Include a responsive navbar, project cards, and a contact form.

This ensures that:

Astro handles static site generation.
TailwindCSS manages styling.
ShadCN UI provides elegant, prebuilt UI components.

Supported Stacks

You can freely mix and match stacks. Here are some supported combinations:

Category	Examples
Frontend Frameworks	React, Next.js, Astro, Vue, Svelte
Styling / UI Libraries	TailwindCSS, ShadCN, Chakra UI, Material UI
Backend / API	Express, Supabase, Firebase
Animations / Effects	Framer Motion, GSAP

When specifying your stack, include versions or preferences if needed:

“Generate a Next.js 15 app using TailwindCSS v4 and ShadCN components.”

Using the Prompt Enhancer

The Prompt Enhancer is your built-in AI assistant for refining your instructions before submission. Click the Enhance icon next to the prompt input field to automatically improve your request.

How It Works

You start with an idea
“Make me a dashboard.”
Click “Enhance” The AI rewrites it into a clearer, more actionable version:
“Create a responsive analytics dashboard using Next.js, TailwindCSS, and Chart.js. Include user login, light/dark mode, and sample data charts.”
You review and edit You can adjust frameworks, add details, or remove anything unnecessary.
Submit the enhanced prompt Once it’s clear and complete, hit Generate to scaffold your project.

Why Use the Enhancer

Benefit	Description
Clarity	Ensures your idea is expressed in a way the AI fully understands
Specificity	Adds stack details, dependencies, and best practices automatically
Speed	Reduces back-and-forth revisions after generation
Control	You can edit before submission — the final say is always yours

The Prompt Enhancer won’t lock your stack — it suggests improvements but lets you retain control over every word.

Best Practices Checklist

Define your goal clearly

Describe what you want Codinit to build — e.g., a blog, dashboard, or landing page.

Specify frameworks and libraries

Mention frameworks like Astro, Next.js, or React, and tools like Tailwind or ShadCN.

Use the Enhance icon

Click enhance button to refine your prompt for clarity and specificity.

Edit before submitting

Review the enhanced prompt, customize as needed, and then submit.

Iterate if needed

If the initial result isn’t perfect, re-prompt with added context or adjustments.

Example Workflow

Initial Prompt:“Build a landing page for a startup.”Enhanced Prompt:“Create a responsive SaaS landing page using Next.js, TailwindCSS, and Framer Motion. Include a hero section, pricing table, and signup form integrated with Supabase.”

The enhanced version gives Codinit a precise blueprint — resulting in a cleaner, production-ready scaffold.

Summary

Best Practice	Why It Matters
Be specific about your stack	Codinit scaffolds the right dependencies and structure
Use the Prompt Enhancer	Produces refined, actionable prompts automatically
Edit before submitting	Keeps your creative intent intact
Iterate often	Small refinements lead to the best final output

Introduction

Getting Started

Features

Comparisons

Prompting

Model Configuration

Providers

Running Models Locally

Prompting Best Practices