Why this matters
Goal: learn to use generative AI to help make images, video, and websites — ethically and responsibly. AI is now part of every working designer's toolkit.
Junior designers who refuse to learn it get out-shipped. Junior designers who use it without thinking get burned by copyright, factual errors, and ethical violations. The job is to use AI like a power tool.
Learning objectives
- Name the major AI tools for image, video, and website generation.
- Write a clear prompt that produces usable output.
- Apply five ethical guardrails to every project: disclose, verify, attribute, respect copyright, respect privacy.
- Spot the common failure modes: hallucination, bias, deepfakes, copyright entanglement.
- Use AI as a collaborator, not a replacement — the designer is still responsible for what ships.
What “generative AI” means in 2026
Generative AI is software that creates new content — text, images, audio, video, code — from a written prompt. It learns patterns from massive amounts of data, then produces new outputs that match those patterns.
What AI is good at
- Drafting starter content (copy, layouts, code scaffolding) you then edit
- Generating placeholder imagery that fits a description
- Brainstorming variations quickly
- Explaining unfamiliar code, errors, or concepts
- Summarizing and rephrasing text
What AI is bad at
- Facts — it confidently makes things up (hallucination)
- Real people — usually a copyright / consent violation
- Original vision — it averages what already exists
- Math, precise counting, fine layout, hand anatomy
- Anything where lives or money depend on exact correctness
The tools (a 2026 snapshot)
The landscape shifts constantly — but these are the ones to know. Almost all have a free tier for class work.
Image generation
| Tool | Strength | Notes |
|---|---|---|
| DALL·E 3 (in ChatGPT) | General-purpose, follows complex prompts. | Best for beginners. Free tier inside ChatGPT. |
| Midjourney | Most artistic / cinematic style. | Discord-based; paid only (~$10/mo). |
| Adobe Firefly | Trained on licensed content; safe for commercial use. | Free with Creative Cloud. Important for production work. |
| Stable Diffusion | Free & open-source, highly customizable. | Via Leonardo / Civitai. Steeper learning curve. |
| Canva AI | Integrated with design templates. | Easiest path from prompt to a finished post. |
Video generation
| Tool | Strength | Notes |
|---|---|---|
| Runway | Industry-leading short-clip generation. | Free tier; great UI; 4–10 second clips. |
| Pika Labs | Quick stylized clips from text or image. | Free tier; Discord-based. |
| OpenAI Sora | Photorealistic up to 60-second clips. | Paid; access limited. |
| Descript | Edit video by editing the transcript. | AI-assisted editing, not generation. |
| HeyGen | Spokesperson avatars from a script. | Deepfake risk — only use with clear consent. |
Website / code generation
| Tool | Strength | Notes |
|---|---|---|
| v0.dev (Vercel) | Production-grade HTML + Tailwind from a prompt. | Best output quality. Free tier. |
| ChatGPT / Claude | Pair-programming, debugging, explaining code. | Great for “why isn't this working?” |
| GitHub Copilot | Autocomplete inside VS Code. | Free with the Student Developer Pack. |
| Cursor | AI-first code editor (a VS Code fork). | Free tier; fast for refactoring. |
| Lovable / Bolt / Replit Agent | Full-stack “build me an app” agents. | Great for prototypes; treat output as a draft. |
| Wix ADI / Hostinger AI | Drag-and-drop builders with AI prompts. | For non-coders. Learn HTML/CSS anyway. |
How to write a good prompt
The same tool gives different output depending on how you ask. Three habits make every prompt better:
- Be specific. “A hero photo” gives garbage. “A close-up of fresh pink peonies in a clear glass vase on a sunlit kitchen counter, shallow depth of field, warm morning light, editorial style” gives something usable.
- Describe the style. “Editorial,” “flat illustration,” “cinematic with film grain,” “mid-century poster.” Only reference real artists when their work is public-domain or you're licensed.
- Say what NOT to include. “No people, no text, no logos.” Negative prompts cut 80% of bad outputs.
Example — image prompt
A flat illustration of a coffee cup on a saucer, top-down view, warm orange and cream palette, simple shapes, no text, no people, soft drop shadow, mid-century editorial style. Aspect ratio 4:3.
Example — website-section prompt (v0 or Claude)
Generate an HTML + Tailwind hero section for a coffee shop called "Wren & Pine." Include: brand name, 6-word tagline, one CTA button, warm cream + dark green palette, mobile-first responsive, accessible (semantic header, single h1, focus-visible ring). No JavaScript. Output one HTML file only.
The five ethical guardrails
Every project, every time.
If AI helped make something you publish, say so — a line in your README, footer, or project notes (“Hero image generated with Adobe Firefly”). Hiding AI use is the fastest way to lose trust.
AI hallucinates. Every factual claim — a statistic, quote, library, citation — must be checked against a real source before you ship it.
Use Adobe Firefly for commercial images (licensed training + indemnity). Don't prompt “in the style of [living artist].” Don't generate real, identifiable people.
Never feed an AI tool data that isn't yours to share — client contracts, medical info, private chats, photos of people who haven't consented. Most free tools keep your prompts.
You're the designer. “The AI made that” is not a defense for a broken page, a biased image, a misquoted fact, or a copyright violation. Review everything.
The failure modes to watch for
| Failure | What it looks like | How to defend |
|---|---|---|
| Hallucination | Confident false facts, fake citations, made-up libraries. | Verify everything against an authoritative source. |
| Bias | Doctor = man, nurse = woman, “person” = white, stereotyped emotions. | Read output critically; re-prompt for diversity. |
| Copyright entanglement | Output resembling a specific work or artist. | Use Firefly for commercial work; never prompt by living artist. |
| Deepfakes | Realistic video/audio of someone who didn't say it. | Never depict real people without consent; watermark synthetic media. |
| Energy / water cost | Large models have a real environmental footprint. | Use the smallest model that works; don't regenerate 50 times. |
| Accessibility regressions | AI HTML often skips alt text, uses div soup, drops focus rings. | Run AI code through your own accessibility checklist before shipping. |
A responsible workflow
Same for AI-assisted images, video, and code:
AI use in this class
AI is allowed, with one rule:
You may NOT use AI to
- Generate the whole HTML/CSS for an assignment and submit it as your own
- Write your reflection paragraphs
- Generate images of real people without consent
You MAY use AI to
- Generate placeholder images for your project
- Help debug code you wrote yourself
- Brainstorm palettes, copy, or layout ideas
- Explain a concept you don't understand
- Generate short illustrative clips (with disclosure)
Resources
- Adobe Firefly: firefly.adobe.com
- DALL·E (via ChatGPT): chat.openai.com
- Runway: runwayml.com
- v0 by Vercel: v0.dev
- Claude: claude.ai
- GitHub Copilot — free in the Student Developer Pack
- Partnership on AI — Synthetic Media Framework: partnershiponai.org
- AIGA on AI ethics: aiga.org
AI output is not automatically accessible
AI-generated images need your own alt text — the AI doesn't write it (and when it does, it's usually wrong). AI video needs captions and a transcript you verify by hand. AI-generated code routinely skips semantic HTML, paired form labels, and visible focus rings — you must add them. The Accessibility checklist applies to AI output just like anything else you ship.
Created by Dr. G · Web Page Design I.
AI Disclosure: portions developed with assistance from Claude, then reviewed and edited for accuracy.