Getting Started

This guide will walk you through creating your first prompt in vibecode.sh.

Opening the Editor

Press E anywhere on the site to open the prompt editor, or click the "Open Editor" button on the homepage.

Creating Your First Prompt

1. Add a Role Block

Every good prompt starts with defining who the AI should be.

1. Click Add Block or type /role
2. Enter a role description:

   You are an expert TypeScript developer with deep knowledge
   of React and modern web development practices.

2. Add a Goal Block

Define what you want to achieve.

1. Type /goal or select "Goal" from the block palette
2. Describe the objective:

   Help users write clean, type-safe React components
   following best practices.

3. Add Instructions

Break down the process into clear steps.

1. Add an Instructions block
2. List the steps:

   1. Analyze the user's requirements
   2. Design the component structure
   3. Write TypeScript interfaces for props
   4. Implement the component
   5. Add error handling and edge cases

4. Add Constraints

Set boundaries for the AI's responses.

1. Add a Constraint block
2. Define the rules:

   - Always use TypeScript strict mode
   - Prefer functional components with hooks
   - Include JSDoc comments for public APIs
   - Keep components under 200 lines

Using Slash Commands

Type / in the editor to open the slash command menu. This gives you quick access to all block types:

Previewing Your Prompt

As you build, the prompt preview updates in real-time. You can see the final output that will be sent to the AI.

Exporting

Click Export to copy your prompt. Choose from:

• Plain Text - Simple text format
• XML Structured - With semantic tags for better parsing

Next Steps

• Learn about each Block Type
• Follow the First Prompt Guide
• See Example Prompts