具体的に伝える
曖昧なプロンプトは曖昧なコードを生みます。具体的に指示しましょう。
「具体的に伝える」はCoddyKit上の無料Vibe Codingレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVibe Coding学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vibe Codingコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
Vague In, Vague Out
AI builders like Cursor, Bolt and v0 are powerful, but they can't read your mind. When your prompt is fuzzy, the AI guesses — and its guess is rarely the app you pictured.
The fix is the single most valuable prompting skill: being specific. This lesson shows you how to turn a wish into a precise instruction.
Specific About What, Exactly?
You can add precision in four directions:
- What — the exact feature or element
- How it looks — colors, layout, size
- How it behaves — what happens on click, on error
- How much — counts, limits, ranges
Every detail you pin down is one fewer thing the AI gets wrong.
Specify the 'What'
Name the exact thing you want. 'A button' could be anything. 'A submit button labeled Save that appears under the form' leaves no doubt.
Vague: "Add a button."
Specific: "Add a green 'Save Note' button below the textarea.
When clicked, it adds the note to the list above."Specify the Look
Design words like 'nice' or 'modern' mean different things to everyone. Give the AI concrete visual targets: colors, spacing, fonts, sizes.
You can even reference a known style — 'like Notion' or 'Apple-clean' — to anchor the vibe.
Vague: "Make it look good."
Specific: "Use a clean white card on a light-gray background,
rounded corners, soft shadow, and a single accent
color of #7c3aed for buttons and links."Specify the Behavior
Apps do things. Spell out what happens on each action — including the edge cases like empty input or errors. This is where vague prompts fail hardest.
Specific behavior:
"When the user clicks 'Add', take the text from the input,
add it as a new list item, then clear the input.
If the input is empty, do nothing and shake the input box."Specify the Numbers
Numbers remove ambiguity instantly. How many items? What max length? What range? Give the AI real values instead of 'some' or 'a few'.
Here's a tiny function the AI might build from a numeric constraint — you can run it.
const MAX_LENGTH = 280;
function checkPost(text) {
if (text.length > MAX_LENGTH) {
return 'Too long by ' + (text.length - MAX_LENGTH) + ' chars';
}
return 'OK (' + text.length + '/' + MAX_LENGTH + ')';
}
console.log(checkPost('Hello world!'));
console.log(checkPost('x'.repeat(300)));Replace Adjectives with Details
Watch out for slippery adjectives: fast, simple, clean, modern, professional, responsive, secure. Each one hides a decision you should make.
Whenever you write one, ask: 'what would that actually mean here?' — and write that instead.
Instead of: "Make it responsive."
Write: "Stack the columns vertically on screens under 600px."
Instead of: "Keep it simple."
Write: "One screen, no menu, three buttons max."Specificity Beats Length
Being specific doesn't mean writing an essay. A short, precise prompt beats a long, fuzzy one. Pack meaning, not words.
Both prompts below are short — but only one will give you the app you imagined.
Fuzzy & short: "Build a timer app."
Sharp & short: "Build a 25-minute countdown timer with Start,
Pause and Reset buttons. Show MM:SS. Beep at zero."Show, Don't Just Tell
When words get clumsy, switch to a concrete example. Paste a sample of the data, a row of a table, or a mini mock of the layout. Examples are the most specific thing you can give.
"Format each contact like this exactly:
Ada Lovelace — ada@math.org — VIP
Name, then em-dash, email, em-dash, and a tag.
If there's no tag, leave off the last dash."The Specificity Checklist
Before you hit enter, scan your prompt against this list:
- Did I name the exact element/feature?
- Did I give concrete colors/sizes if looks matter?
- Did I describe what happens on each action and on errors?
- Did I replace vague adjectives with real details?
- Did I include numbers where they apply?
One pass over this list saves you three rounds of back-and-forth.
Don't Over-Specify Either
There's a balance. Pin down what you care about, and let the AI choose the rest. If you dictate every pixel, you slow yourself down and lose the AI's good instincts.
Rule of thumb: be specific about outcomes, flexible about implementation — unless implementation is the point.
Good balance:
"Make a contact form with name, email and message fields,
and a Send button. Validate that email contains an '@'.
You choose a tidy, accessible layout."Quick Check
Which rewrite makes the prompt 'Make the app look modern' more specific and useful?
Recap: Get Concrete
Vague prompts give vague code. To get exactly what you pictured:
- Name the exact what
- Give concrete looks and numbers
- Describe behavior and error cases
- Trade vague adjectives for real details
- Show an example when words fall short
Next: how to give the AI context about your files and goals so its code fits your project perfectly.
よくある質問
「具体的に伝える」レッスンは無料ですか？
はい。「具体的に伝える」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vibe Codingコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vibe Codingコースには全4レッスンが含まれています。
「具体的に伝える」で何を学びますか？
曖昧なプロンプトは曖昧なコードを生みます。具体的に指示しましょう。 ブラウザで直接実行するハンズオンコードでVibe Codingを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vibe Codingを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVibe Codingは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「具体的に伝える」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVibe Codingレッスンでコードを書いて実行できますか？
はい。すべてのVibe Codingレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。