<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Hey SI team</title>
    <description>The latest articles on DEV Community by Hey SI team (@heysi).</description>
    <link>https://dev.to/heysi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4189009%2F625a878d-91d9-4c5b-82b9-3566de61799c.png</url>
      <title>DEV Community: Hey SI team</title>
      <link>https://dev.to/heysi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/heysi"/>
    <language>en</language>
    <item>
      <title>Vibe coding for beginners: 5 free prompts to build your first app</title>
      <dc:creator>Hey SI team</dc:creator>
      <pubDate>Fri, 16 Oct 2026 13:46:15 +0000</pubDate>
      <link>https://dev.to/heysi/vibe-coding-for-beginners-5-free-prompts-to-build-your-first-app-20op</link>
      <guid>https://dev.to/heysi/vibe-coding-for-beginners-5-free-prompts-to-build-your-first-app-20op</guid>
      <description>&lt;p&gt;"Vibe coding" just means building software by describing what you want to an AI coding tool (Cursor, Claude Code, Replit, Lovable, Bolt, or a plain AI chat) and steering it in plain English. You don't need to know the jargon to start. You do need to ask clearly, though, and that's the part most beginners get stuck on.&lt;/p&gt;

&lt;p&gt;This guide gives you five prompts that cover the moments where first-time builders usually stall: a fuzzy idea, a scary red error, a fix that keeps failing, a safety check before you share, and actually getting a link online. Copy them, fill in the &lt;code&gt;[PLACEHOLDERS]&lt;/code&gt;, and paste.&lt;/p&gt;

&lt;h2&gt;
  
  
  How to use these prompts
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Copy a prompt into your AI coding tool.&lt;/li&gt;
&lt;li&gt;Replace every &lt;code&gt;[PLACEHOLDER]&lt;/code&gt; with your own details. Messy is fine.&lt;/li&gt;
&lt;li&gt;Send it, then read the answer. Ask "what does that mean?" as often as you like. There are no silly questions.&lt;/li&gt;
&lt;li&gt;One small step at a time. Ask for one thing, check it works, then move on.&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Five habits that make everything easier
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Small steps.&lt;/strong&gt; Never ask for "the whole app" at once.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Save often.&lt;/strong&gt; When something works, make a save point (a git commit, which is a snapshot you can go back to) before changing anything else.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Read the error.&lt;/strong&gt; Paste the whole message and say what you were doing.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Two strikes, then reset.&lt;/strong&gt; If a fix fails twice, pause and change approach.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Never paste secrets into chat.&lt;/strong&gt; API keys and passwords go in a &lt;code&gt;.env&lt;/code&gt; file (a private settings file that stays off GitHub) or your tool's secrets settings. A placeholder works great.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;A quick, honest heads-up: AI tools make mistakes and change often. Always look over what they change, test it, and keep save points. These prompts help you ask clearly. They can't promise a result.&lt;/p&gt;




&lt;h2&gt;
  
  
  Prompt 1: Brain Dump to Clear Idea
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;When:&lt;/strong&gt; You've got an idea but it's all jumbled. Start here, before any code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I want to build my first app, but my idea is still messy. I'm a complete beginner at coding.

Here's my brain dump:
[WRITE EVERYTHING YOU'RE THINKING: WHAT IT DOES, WHO IT'S FOR, WHY YOU WANT IT, APPS IT'S LIKE]

Please help me get clear:
1. Rewrite my idea as ONE simple sentence: "[App] helps [who] do [what] so they can [why]."
2. Tell me who the main user is.
3. List the 3 most important things the app must do.
4. Point out anything in my brain dump that sounds big, complicated, or expensive for a beginner.
5. Ask me up to 5 questions whose answers would make the idea clearer.

Use plain, non-technical language. Don't write any code yet.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why it works:&lt;/strong&gt; "Don't write any code yet" stops the AI from rushing into a big, half-right app. The one-sentence format forces a clear goal, and asking it to flag the expensive or complicated parts helps you find a first version small enough to finish.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; Write messy. Then answer its questions and say: "Now rewrite the one-sentence idea using my answers."&lt;/p&gt;

&lt;h2&gt;
  
  
  Prompt 2: Here's the Error, Fix It
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;When:&lt;/strong&gt; A red error popped up. That's a clue, not a disaster. Paste the whole thing.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I got an error. I'm a beginner, so please be careful and explain simply.

What I was doing: [WHAT YOU CLICKED / TYPED / RAN - e.g. "I clicked Save on the add-plant form"]
What I expected: [WHAT SHOULD HAVE HAPPENED]
What happened instead: [WHAT YOU SAW]

The full error message:
[PASTE THE ENTIRE ERROR - ALL OF IT, EVEN IF IT'S LONG]

Where I saw it: [TERMINAL / BROWSER PAGE / BROWSER CONSOLE / TOOL PREVIEW]
Last thing that changed before it broke: [e.g. "we just built step 4" / "I don't know"]

Please:
1. Explain in 1â€“2 plain sentences what the error means.
2. Tell me the most likely cause.
3. Fix it with the smallest change possible. Don't rewrite unrelated code.
4. Tell me how to check that it's fixed.
If you're not sure of the cause, add a temporary check (like a log message) to find out first, instead of guessing.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why it works:&lt;/strong&gt; "Expected vs. what happened" plus the full error and the last change gives the AI the context it needs to find the real cause. "Smallest change possible" stops it from rewriting working code, and "check first instead of guessing" cuts down on random fixes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; Never paste API keys or passwords. Swap them for &lt;code&gt;[REDACTED]&lt;/code&gt;. Fixed? Make a save point.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prompt 3: Break the Loop
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;When:&lt;/strong&gt; The same fix has failed 2â€“3 times. Time to pause and reset.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Stop. We've tried to fix this [NUMBER] times and it's still not working. Don't write any code in this reply.

The problem: [ONE SENTENCE - e.g. "plants don't stay marked as watered after refresh"]
What we've tried so far (as far as I know): [LIST, OR "please list everything we've tried from this conversation"]

Please:
1. Summarize what we tried and why each attempt didn't work.
2. Tell me honestly: do you think the cause is something we haven't looked at yet? What assumptions might be wrong?
3. Suggest ONE completely different approach, simpler if possible.
4. Tell me which files we should look at first.
5. Write a short "handoff note" (5â€“10 lines) that I can paste into a fresh chat, describing the problem, what's been ruled out, and the new approach.

If you think the best move is to roll back to my last save point and redo this step more simply, say so.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why it works:&lt;/strong&gt; Long chats get cluttered, and the AI can keep repeating the same wrong assumption. Banning code for one reply makes it step back and reason. The handoff note lets you start a fresh chat without losing what you learned.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; Start a fresh chat and paste the handoff note. Rolling back to a save point is not failure.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prompt 4: Safety Check Before Going Live
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;When:&lt;/strong&gt; Before you share your app, and again after adding login, a database or payments.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Before I put my app online, do a beginner-level safety check. Don't change anything yet, just report.

My app uses: [e.g. "Next.js, Supabase database + auth, deployed on Vercel"]
It handles: [e.g. "users' email addresses and their plant lists" / "no personal data"]

Check and report on each of these, as âœ… OK / âš&amp;nbsp;ï¸ Needs fixing / â“ Not sure:
1. Secret keys: are any API keys, passwords, or tokens written directly in the code, or committed to Git history? Is .env in .gitignore?
2. Browser-visible keys: which keys are sent to the browser? Are any of them secret keys that shouldn't be?
3. Data access: can a logged-out person, or a different user, read or change data they shouldn't? (Check database rules like row-level security, not just the screens.)
4. Forms and inputs: does the app check what people type in before saving it?
5. Error messages: do any errors show private details to users?
6. Packages: are there known vulnerable packages (run npm audit and summarize in plain words)?
7. Anything else that worries you for an app like this.

Then list the fixes in order of importance, and we'll do them one at a time.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why it works:&lt;/strong&gt; "Just report" keeps the AI from making a pile of changes at once. The checklist covers the mistakes beginners make most, especially leaked keys and data anyone can read, and the âœ…/âš&amp;nbsp;ï¸/â“ format turns it into a to-do list you can work through one item at a time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; If a key was ever committed or pasted publicly, assume it leaked: make a new one and delete the old. This is a beginner check, not a professional security audit.&lt;/p&gt;

&lt;h2&gt;
  
  
  Prompt 5: Put It Online (Vercel / Netlify)
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;When:&lt;/strong&gt; Your app works on your computer and builds without errors. Time to share it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;I want to put my app online using [VERCEL / NETLIFY]. I'm a beginner. Walk me through it step by step.

Stack: [YOUR STACK]
Is my code on GitHub? [YES - repo name: ___ / NO]
Does my app use environment variables (.env)? [YES / NO / NOT SURE]
Does it use a database or login? [e.g. "Supabase database + auth"]

Please:
1. Check the project is ready: it builds with npm run build, .env is NOT in Git, and .env.example lists every variable needed.
2. If my code isn't on GitHub yet, help me push it there first.
3. Give me click-by-click steps to import the GitHub repo into [VERCEL / NETLIFY], including which build settings to use (or confirm the defaults are right).
4. List every environment variable I need to add in the [VERCEL / NETLIFY] dashboard, by NAME only. I'll paste the values myself.
5. List anything I need to update in other services now that I have a live address (e.g. Supabase auth redirect URLs).
6. Give me a short checklist to test the live site.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Why it works:&lt;/strong&gt; It checks that the project is ready before you deploy, which catches most "works on my machine" problems early. Asking for variable &lt;em&gt;names only&lt;/em&gt; keeps real secrets out of the chat, and step 5 catches the redirect-URL problem that breaks login on a lot of first deploys.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tip:&lt;/strong&gt; Your &lt;code&gt;.env&lt;/code&gt; file doesn't upload by itself. Add the variables in the Vercel/Netlify dashboard, then redeploy. On Lovable, Bolt or Replit, their Publish button is usually easiest.&lt;/p&gt;




&lt;h2&gt;
  
  
  Putting it together
&lt;/h2&gt;

&lt;p&gt;A good first loop goes like this: use Prompt 1 to shrink the idea, build one small feature at a time, and make a save point each time something works. Reach for Prompt 2 when something breaks and Prompt 3 when the same fix fails twice. Before you share the link, run Prompt 4, then Prompt 5. Getting stuck along the way is normal for everyone, not just beginners. Each error tells you something new.&lt;/p&gt;

&lt;p&gt;What was the first thing you built (or want to build)? Drop it in the comments. Small ideas are welcome.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Disclosure: we make the Hey SI Starter Pack ($12), which has 20 more prompts like these. It's at &lt;a href="https://heysi.dev" rel="noopener noreferrer"&gt;heysi.dev&lt;/a&gt;. These 5 are also available free as a PDF through our email list: &lt;a href="https://si-from-hey-si.kit.com/190809ef45" rel="noopener noreferrer"&gt;https://si-from-hey-si.kit.com/190809ef45&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>ai</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
