Prompt in Vibe Coding
Prompt in Vibe Coding
2
00:00:03,001 --> 00:00:05,006
Now let's move on to the next layer,
3
00:00:05,006 --> 00:00:09,002
crafting task-level prompts that actually work.
4
00:00:09,002 --> 00:00:11,005
We'll cover some real-world strategies,
5
00:00:11,005 --> 00:00:13,009
common traps and practical habits
6
00:00:13,009 --> 00:00:15,009
that can lead to cleaner results.
7
00:00:15,009 --> 00:00:18,007
Try doing a single goal per request,
8
00:00:18,007 --> 00:00:22,001
especially in the early stages of a feature.
9
00:00:22,001 --> 00:00:24,005
The best results are often going to come
10
00:00:24,005 --> 00:00:26,004
from narrowing your focus
11
00:00:26,004 --> 00:00:28,009
and letting the AI build from there.
12
00:00:28,009 --> 00:00:31,004
Think of it as setting the vibe.
13
00:00:31,004 --> 00:00:33,001
You give it a direction,
14
00:00:33,001 --> 00:00:35,004
not a rigid footprint.
15
00:00:35,004 --> 00:00:38,002
Stay open to what it suggests.
16
00:00:38,002 --> 00:00:39,009
That's why it's called vibe coding.
17
00:00:39,009 --> 00:00:43,006
Sometimes the output is actually going to surprise you
18
00:00:43,006 --> 00:00:44,004
in a good way.
19
00:00:44,004 --> 00:00:45,005
You can say something like,
20
00:00:45,005 --> 00:00:47,004
"Create a simple dashboard layout
21
00:00:47,004 --> 00:00:49,005
with space for a few visual elements.
22
00:00:49,005 --> 00:00:51,008
Choose whatever types of charts of summaries
23
00:00:51,008 --> 00:00:54,008
you think work best for this data."
24
00:00:54,008 --> 00:00:57,000
That gives the AI a little bit of room
25
00:00:57,000 --> 00:00:58,007
to make decisions.
26
00:00:58,007 --> 00:00:59,006
You can say something like,
27
00:00:59,006 --> 00:01:03,001
"Here's a CSV with my recent YouTube shorts performance.
28
00:01:03,001 --> 00:01:06,009
Analyze the trends and suggest what kind of data widgets
29
00:01:06,009 --> 00:01:08,007
would go on a dashboard."
30
00:01:08,007 --> 00:01:10,009
That gives the AI full creative space
31
00:01:10,009 --> 00:01:13,002
to propose what matters most.
32
00:01:13,002 --> 00:01:15,006
It might suggest things you hadn't considered,
33
00:01:15,006 --> 00:01:18,004
like identifying top-performing formats
34
00:01:18,004 --> 00:01:20,004
or viewer retention patterns.
35
00:01:20,004 --> 00:01:21,006
Here's another example.
36
00:01:21,006 --> 00:01:23,007
"Refactor this charge component
37
00:01:23,007 --> 00:01:26,007
to be reusable with some additional metrics
38
00:01:26,007 --> 00:01:28,009
like clicks or watch time."
39
00:01:28,009 --> 00:01:30,003
This is a great follow-up prompt
40
00:01:30,003 --> 00:01:32,007
once you've got an initial design.
41
00:01:32,007 --> 00:01:34,004
Keep the tone exploratory.
42
00:01:34,004 --> 00:01:35,005
When something looks off
43
00:01:35,005 --> 00:01:37,003
or you need more detail,
44
00:01:37,003 --> 00:01:38,006
ask something like,
45
00:01:38,006 --> 00:01:40,004
"Can you simplify this?
46
00:01:40,004 --> 00:01:43,002
Make this chart a little more mobile friendly.
47
00:01:43,002 --> 00:01:45,004
Add a tooltip that shows the percentage change
48
00:01:45,004 --> 00:01:46,009
from the previous day.
49
00:01:46,009 --> 00:01:48,005
Is there anything you'd flag
50
00:01:48,005 --> 00:01:51,000
as unusual or worth tracking?"`
51
00:01:51,000 --> 00:01:54,007
Remember that although these are coding assistants,
52
00:01:54,007 --> 00:01:56,007
they're still full chatbots,
53
00:01:56,007 --> 00:01:58,009
so you can have a conversation with them
54
00:01:58,009 --> 00:02:00,006
and ask questions.
55
00:02:00,006 --> 00:02:02,006
Now, one of the common missteps
56
00:02:02,006 --> 00:02:05,006
is writing prompts that are either too vague
57
00:02:05,006 --> 00:02:07,002
or too dense.
58
00:02:07,002 --> 00:02:09,003
Try to hit the middle, clear intent,
59
00:02:09,003 --> 00:02:13,005
light structure and a focus on outcome over process.
60
00:02:13,005 --> 00:02:15,001
Sometimes the best work
61
00:02:15,001 --> 00:02:19,002
comes from your creative second or third iteration
62
00:02:19,002 --> 00:02:20,003
of the problem.
63
00:02:20,003 --> 00:02:22,008
Here's a few general do's and don'ts.
64
00:02:22,008 --> 00:02:26,003
Number one, ask for one thing at a time.
65
00:02:26,003 --> 00:02:28,002
Don't mix feature request,
66
00:02:28,002 --> 00:02:30,006
bug fixes and style updates
67
00:02:30,006 --> 00:02:32,002
in the same prompt.
68
00:02:32,002 --> 00:02:33,005
If you're not sure what you want,
69
00:02:33,005 --> 00:02:34,008
start with a goal,
70
00:02:34,008 --> 00:02:37,004
something like, "Give me a few different layout directions
71
00:02:37,004 --> 00:02:39,000
for this component."
72
00:02:39,000 --> 00:02:42,004
Do tell the AI how you want the response structured,
73
00:02:42,004 --> 00:02:44,000
as a React component,
74
00:02:44,000 --> 00:02:46,002
as a JavaScript component.
75
00:02:46,002 --> 00:02:47,007
Don't leave it open-ended
76
00:02:47,007 --> 00:02:49,008
and expect it to guess your format.
77
00:02:49,008 --> 00:02:50,009
You can also say things like,
78
00:02:50,009 --> 00:02:52,008
"Make sure that you're using modules
79
00:02:52,008 --> 00:02:54,008
for these different components."
80
00:02:54,008 --> 00:02:56,004
In terms of security and safety,
81
00:02:56,004 --> 00:02:57,008
you can ask the AI
82
00:02:57,008 --> 00:02:59,008
to check that the data coming in
83
00:02:59,008 --> 00:03:01,009
is valid and handled safely.
84
00:03:01,009 --> 00:03:03,001
Now, don't assume that the AI
85
00:03:03,001 --> 00:03:05,005
will automatically write secure code,
86
00:03:05,005 --> 00:03:07,004
unless you tell it to.
87
00:03:07,004 --> 00:03:08,002
You can say things like,
88
00:03:08,002 --> 00:03:11,004
"What should I double-check for safety here?
89
00:03:11,004 --> 00:03:14,004
Can you add a check in case something goes wrong
90
00:03:14,004 --> 00:03:15,006
with the input?"
91
00:03:15,006 --> 00:03:19,000
Do leave room for improvisation and surprise.
92
00:03:19,000 --> 00:03:20,004
Prompts like, "Give me your take
93
00:03:20,004 --> 00:03:22,007
on the most insightful chart to show here,"
94
00:03:22,007 --> 00:03:26,000
often will lead to better, more creative ideas,
95
00:03:26,000 --> 00:03:28,004
especially when working with data.
96
00:03:28,004 --> 00:03:31,006
Now, prompting is where vibe coding really takes shape.
97
00:03:31,006 --> 00:03:33,002
It's not about being perfect,
98
00:03:33,002 --> 00:03:35,007
it's about being clear enough to get started
99
00:03:35,007 --> 00:03:38,000
and flexible enough to adjust along the way.