Prompt. Build. Ship.:: AI for Web Devs Build x3 Times Faster - страница 6

Hello and welcome to Lesson Three!

In this lesson, we’re going to discuss four ways to interact with AI. By "interaction," I simply mean how you can provide information or prompts to the AI. Let’s dive right in.

The first and most obvious way to interact with AI is through text. This is probably the most popular and widely used method. We’ve already seen how this works: you type a prompt, and the AI responds. Let’s take a quick look at an example.

We’re in ChatGPT, and we’ll make a simple prompt: "Explain what CSS animation is, with examples."

As you can see, ChatGPT starts responding. It provides the definition of CSS animation, followed by a basic animation example with code.

Then, it gives another example with a moving element, and at the end, it shows a table with CSS animation properties and descriptions for each one.

The second way you can interact with AI is through audio. To do this, you’ll need a microphone on your phone or computer.

In ChatGPT, you can enable voice mode by clicking the microphone icon.

Once activated, you can speak directly to the AI. For example, I can ask, "Could you please explain the difference between React JS and Next JS in simple words?"

ChatGPT responds with a clear explanation, saying React JS is a library for building user interfaces, mainly for single-page applications, and Next JS is a framework built on top of React that adds features like server-side rendering and static site generation.

It's a great option for production-ready web applications.

While voice interaction works well for general conversation, it’s not the best for coding tasks. That’s why we move to the next method: image. This method allows you to upload an image to an AI and ask it to do something based on the content of that image. We’ll use Claude for this example.

Let’s upload an image of a simple contact form.

Once uploaded, we can prompt Claude to "Code the form on the image I have uploaded."

As you can see, Claude generates an HTML structure and applies Tailwind CSS classes.

It even provides a preview of the code. Sometimes, depending on the prompt, Claude will also display a preview of the form in action, especially when working with React components.

For example, when we tried uploading just an HTML and CSS form, the preview didn’t work, but for a React component, Claude could generate a preview automatically.