Vibe Coding · Урок

Конкретика

Расплывчатые запросы дают расплывчатый код — формулируйте конкретно

Урок 2 из 413 шагов

«Конкретика» — бесплатный урок Vibe Coding на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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.

Можно начать бесплатно

Изучай JavaScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 25
Уроки: 100

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Конкретика» бесплатный?

Да — полный текст урока «Конкретика» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vibe Coding, подпишись на CoddyKit PRO. Курс Vibe Coding содержит 4 уроков всего.

Чему я научусь в уроке «Конкретика»?

Расплывчатые запросы дают расплывчатый код — формулируйте конкретно Ты практикуешь Vibe Coding с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vibe Coding?

Предыдущий опыт не требуется. Vibe Coding на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Конкретика»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vibe Coding?

Да. Каждый урок Vibe Coding включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vibe Coding