From Idea to Your First File

Practice the routine of turning an idea into the first working file.

Take a moment to think about it this way

The single biggest mistake in vibe coding is asking for an entire system, all at once, from a single idea. The first file needs to stay small: one piece of UI, one piece of data, one action. That way the AI stays on track and you can check its work easily. This is called a walking skeleton. Prioritize something that works over something that looks pretty.

Let's connect this to everyday life

For a Quick Notes app, the first file might be NoteList.tsx — a title, an add button, and an array of state. Save/delete can come later. In the prompt, constrain it: "create only this file, do not add routing or a CSS framework." Only split off the next file once the first one runs.

• Pick just one first slice
• One file, or one component
• Run it before moving to the next step

Let's try it hands-on, together

export function NoteList() {
  const [notes, setNotes] = useState<string[]>([]);
  const [title, setTitle] = useState("");

  function addNote() {
    const value = title.trim();
    if (!value) return;
    setNotes((current) => [value, ...current]);
    setTitle("");
  }

  return (
    <section>
      <input value={title} onChange={(event) => setTitle(event.target.value)} />
      <button type="button" onClick={addNote}>
        Add
      </button>
      <ul>
        {notes.map((note) => (
          <li key={note}>{note}</li>
        ))}
      </ul>
    </section>
  );
}

Be able to build a working first component together with the AI.