The Prompt Engineering Guides

From pixels to code, learn to command AI with expert precision. Explore our guides to unlock your creative potential.

Deep Dive: Image Prompts

Go beyond basic descriptions. Learn the secrets of composition, lighting, style blending, and advanced keywords to create breathtaking AI art.

From Words to Music

Discover how to prompt an AI to compose music. We'll cover genre, mood, instrumentation, and structure to help you create your first AI-generated song.

Building with AI

Learn how to use prompts to generate HTML, CSS, and JavaScript for functional website components, turning your ideas into interactive prototypes.

Deep Dive: Crafting the Perfect Image Prompt

Creating stunning AI art is a dialogue with the machine. Your prompt is your half of the conversation. A great prompt is a recipe with four main ingredients: **Subject**, **Style**, **Composition**, and **Mood/Lighting**.

1. The Subject: Be Hyper-Specific

This is the 'what' of your image. Don't just say "a dog." Specify the breed, the action, the expression, and the environment. The more detail, the better.

Weak: a dragon
Strong: A colossal, ancient red dragon with shimmering golden scales, sleeping curled on a massive hoard of gold coins inside a dark, cavernous lair

2. The Style: Define the Medium

This tells the AI *how* to render the image. Is it a photo? A painting? A 3D model? Mixing styles can produce unique results.

Style Keywords: photorealistic, 35mm film photo, oil painting, watercolor sketch, anime screenshot, 3D render, artstation, trending on deviantart, impressionism, cinematic

3. Composition & Framing: Direct the Camera

You are the director. Tell the AI where to place the camera and how to frame the shot. This has a massive impact on the image's narrative and focus.

Composition Keywords: wide angle shot, extreme close-up, portrait, landscape, low angle shot, symmetrical, leading lines, rule of thirds

4. Mood & Lighting: Paint with Light

Lighting is the soul of an image. It dictates the mood, time of day, and emotional tone. Be descriptive about the light source and its quality.

Lighting Keywords: cinematic lighting, volumetric rays, soft diffused light, neon glow, dramatic shadows, golden hour, blue hour, moody, ethereal glow

Putting It All Together: The Master Prompt

Combine these elements, often separated by commas, to create a master prompt. Use parentheses `()` to add emphasis to a critical element.

[Subject: A formidable female knight in (shining, ornate silver armor)] [Composition: full body portrait, standing on a misty mountain peak] [Mood/Lighting: at sunrise, epic cinematic lighting, volumetric mist] [Style: fantasy painting, hyperrealistic, artstation]

From Words to Music: How to Create a Song with AI

Prompting for music is similar to prompting for images, but your keywords describe sound, not visuals. The key components are **Genre/Style**, **Mood/Emotion**, **Instrumentation**, and **Structure/Tempo**.

1. Genre and Style: The Foundation

Start with a clear genre. Be specific. Instead of "rock," try "90s alternative rock" or "instrumental synthwave." You can even blend genres.

Genre Examples: lo-fi hip hop, epic orchestral score, acoustic folk ballad, futuristic synthwave, upbeat funk track

2. Mood and Emotion: The Feeling

What emotion should the music evoke? This is crucial for setting the tone. Use descriptive adjectives.

Mood Keywords: melancholic, hopeful, intense, suspenseful, relaxing, nostalgic, energetic, mysterious, dreamy

3. Instrumentation: The Orchestra

List the instruments you want to hear. The AI will prioritize these sounds in the composition. This is how you control the song's texture.

Instrumentation Examples: driven by a heavy electric guitar riff, features a solo cello, simple piano and violin, 808 drums, analog synthesizers, female vocal pads

4. Structure and Tempo: The Blueprint

Give the AI a sense of the song's energy and progression. Mention the tempo and any structural elements you want.

Structure/Tempo Examples: slow tempo, 120 BPM, builds to a powerful crescendo, has a clear verse and chorus structure, ambient and repetitive, includes a catchy hook

The Full Music Prompt

Combine these elements to create a detailed request for your AI composer.

[Genre: Futuristic synthwave] [Mood: with a nostalgic and slightly melancholic mood] [Instrumentation: led by analog synthesizers, a driving electronic drum beat, and ethereal vocal pads] [Structure: medium tempo, around 110 BPM, perfect for a late-night drive]

Building with AI: How to Prompt a Website into Existence

AI can be a powerful co-pilot for web development, but you need to act as a clear project manager. The key is to break down your request into **Goal**, **Technology Stack**, **Component Breakdown**, and **Styling Instructions**.

1. The Goal: Define the Component's Purpose

Be explicit about what you want to build. Don't just ask for a "card." Ask for a "responsive user profile card with an image, name, and social media links."

2. The Technology Stack: Specify the Language

Tell the AI what code to write. For web development, this is usually HTML, CSS, and JavaScript. Specify frameworks if needed.

Tech Examples: "Using HTML and Tailwind CSS...", "Write the JavaScript function for...", "Create a React component that..."

3. Component Breakdown: List the Elements

Enumerate every single element you want inside your component. This is like giving the AI a checklist.

Example: "The card should have: an `img` tag for the avatar, an `h3` tag for the user's name, a `p` tag for the bio, and a `div` containing three social media icon links."

4. Styling and Functionality: Describe the Look and Feel

This is where you provide the design brief and user interaction instructions.

Styling: "The card should have a dark background, rounded corners, and a subtle box-shadow. The social media icons should turn teal on hover."
Functionality: "When the user clicks the 'Follow' button, its text should change to 'Following' and its color should change from blue to gray."

The Full Component Prompt

A complete prompt for a web component is a detailed set of instructions, like a ticket in a project management system.

"Using HTML and Tailwind CSS, create a responsive hero section for a website. It needs a dark gray background. It must contain:
1. A main heading (`h1`) with the text 'Unlock Your Creativity'.
2. A subheading paragraph (`p`) with some lorem ipsum text.
3. A call-to-action button (`button`) with a teal background, white text, and rounded corners. The button should say 'Get Started'.
The entire section should be centered, both horizontally and vertically, and take up the full height of the viewport."