AI tutorials
Home/Guides/AI tutorials

START WITH SOMETHING YOU WANT TO MAKE

How to use AI for creative projects.

Make an image. Animate an idea. Build a small game. These tutorials turn a specific creative task into a brief, a first version, and something you can check.

By Updated

How do I start making things with AI?

Choose one small result, gather the reference images or files it needs, and give your AI tool a clear brief. Ask for a first version you can open and test. Check the result against your brief, then request one specific change at a time. Start with a project below to get the prompts and examples.

1. Choose your first AI tutorial

For a quick visual experiment, start with an image prompt. For an interactive result, choose an animation or game. Website components are a better fit when you already have a React project.

Make an animation with AI

Use
Claude or Codex
Bring
Your message, colors, and a reference for the motion.
Make
A browser animation based on one of ten editable prompt templates.

Write an AI image prompt

Use
An image generation tool
Bring
A subject, a composition, and a visual direction.
Make
An image in an Emboss, Receipt, Dither, Data, Tracking, Ghost, or Flash style.

Build a game from a drawing

Use
Replit Agent
Bring
A photo of a hand-drawn map and the downloadable game brief.
Make
A playable browser game prototype, with controls you can test.

Animate a logo with Claude

Use
The Liquid Metal playground and Claude
Bring
A bold transparent logo and an existing React project.
Make
A moving metal logo component with your selected settings.

Add an effect to a React website

Use
The component playground and an AI coding assistant
Bring
Your project, images, and the downloaded component files.
Make
A rotating carousel, a glass effect, or a dither reveal.

Add an animated orb to an AI interface

Use
React and the Thinking Orbs playground
Bring
A place for the status indicator and a useful text label.
Make
A loading, listening, or thinking animation connected to your interface.

The guides and downloadable prompt templates are available on this site. External tools may require an account or paid plan. Check their current limits before starting; the Replit walkthrough records a particular model and interface.

2. Write a prompt with a checkable result

A useful prompt describes the output, the material to use, the constraints, and what a successful result looks like. “Make something cool” leaves all four to chance. Replace the brackets in this brief before using it:

A creative project brief
I want to make [one specific result] for [audience or use].

Use these inputs: [attached images, files, text, or a description].
Visual direction: [composition, colors, type, and motion, if relevant].
Output: [image dimensions, aspect ratio, file format, or app framework].
Keep: [content and behavior that must stay unchanged].
Avoid: [unwanted details, effects, or dependencies].

Start with the smallest useful version. If an essential input is missing, identify it before building. Use the files I provided and explain any assumptions.

I will consider it ready when: [three things I can see or test].
Tell me how to open or export the result and what still needs checking.
Make it yours: replace anything in [brackets].

For an image, your checks might be “the subject is fully in frame, there is clear space for a heading, and the background is one color.” For a game, try “the player moves, obstacles block movement, and restart resets the game.”

3. Build, inspect, and improve one thing at a time

  1. Prepare your references

    Use files you can share and reuse. Give each reference a purpose: one for layout, one for color, or one for movement. Include the actual file when the tool needs to inspect it.

  2. Make a small first version

    Start with one scene, one animation, or one working interaction. In a coding project, ask the assistant to read the existing files and use its framework before adding dependencies.

  3. Check the result yourself

    Open the exported image at full size. Run the animation. Play the game. Compare what you see with the three checks in your brief. For a website, also check a narrow screen, keyboard controls, text contrast, and reduced motion.

  4. Give precise feedback

    Describe what happened and the change you want. “The title overlaps the image at phone width; put it below the image and keep the desktop layout” gives a coding assistant more to work with than “fix the design.”

  5. Export and reopen

    Save the source files as well as the final export. Open the downloaded file or published link outside the editor. Check dimensions, playback, links, and any credit or license requirements before sharing.

When the AI result is not quite right

The design looks generic
Name the material, composition, and lighting you want. Use one of the seven visual styles and image prompts as a starting point, then replace its subject and details.
The animation is too busy
Choose one focal point, reduce the number of moving parts, and specify a slower pace and a pause between actions. Compare against the motion previews.
The generated code does not run
Copy the exact error and the action that caused it. Supply the relevant file and package information. Ask the assistant to reproduce the error, make the smallest fix, and rerun the same check.
The output format is wrong
Specify the actual file you need. A browser animation is not automatically an MP4, and a downloaded logo mask is not an animated GIF. Ask for an export workflow and test the resulting file.
The image lettering is inaccurate
Generate the artwork with room for text, then add exact wording in a design editor. Check spelling and legibility at the final display size.

Common questions

Do I need to know how to code to follow these AI tutorials?

The image prompts and visual playgrounds can be explored without coding. Adding React components to a website requires a project you can run; an AI coding assistant can help edit it, but you still need to check the output and errors.

What is the difference between an AI image prompt and a coding prompt?

An image prompt describes the subject, composition, materials, lighting, and image format. A coding prompt also needs the project framework, relevant files, behavior, constraints, and steps for checking the result.

Can I use the same prompt in every AI tool?

Treat these prompts as briefs you can adapt. Tools differ in supported attachments, code execution, output formats, and available models. Give the tool only the parts it can use and inspect the result before continuing.

Which tutorial should I try first?

Try the seven graphic design prompts for a still image, the ten animation templates for motion, or the Replit game guide for an interactive prototype. Each has a different output, so choose the result you want to make.

About this learning path

This path connects toolandtea’s existing prompt collections, playgrounds, and recorded tutorials. The briefs and checklists are editorial guidance; they are not a guarantee that any model will produce the same result. Each linked tutorial includes its own examples and source notes.

Read about toolandtea and how the guides are put together.