Skip to content
nuggetof joy

Post · October 10, 2026

Week 11 — AI-Assisted Web Design: Prompt, Evaluate, Revise

90-minute class plan

  • 0–10 min — Opening and visual warm-up: Introduce the learning goals, review the previous class, and discuss a relevant website example.
  • 10–25 min — Mini-lesson: Explain the key concepts and show examples. Keep the presentation focused on what students will apply.
  • 25–45 min — Instructor demonstration: Walk through the interactive CodePen or a live example. Pause for predictions and questions.
  • 45–70 min — Guided and independent practice: Students complete the lesson exercise, first following a short demonstration and then making their own decisions.
  • 70–83 min — Apply and critique: Students connect the skill to their website project, compare results with a partner, and make one improvement.
  • 83–90 min — Share-out and exit ticket: Review key takeaways and ask students to identify one thing they learned and one next step.

Course: Introduction to Web Design
Week: 11

Learning objectives

By the end of this lesson, you should be able to:

  • Write a design brief with a clear audience, goal, visual direction, and constraints.
  • Evaluate a generated concept against explicit criteria.
  • Identify assumptions and decisions that require human verification.

Key concepts

AI tools can help generate ideas, organize a brief, or suggest possible approaches. The quality of output depends partly on the clarity of the request, but even a detailed prompt can produce inaccurate, generic, inaccessible, or impractical suggestions.

A useful workflow defines the audience and goal, sets constraints, requests alternatives, evaluates the results, and tests promising ideas. Never assume generated code is secure, accessible, accurate, or production-ready without reviewing it.

The responsibility for the final design and its consequences remains with the designer.

Interactive demonstration

Demo file: 11-ai-design-brief-lab.html

Use the AI-Assisted Design Brief Lab to define an audience, goal, tone, and constraints. Build a brief, then rate a hypothetical concept against audience fit, hierarchy, accessibility, feasibility, and evidence.

See the Pen 11-ai-design-brief-lab by Nicholas D’Angelo (@ndangelo) on CodePen.

Write a brief for one feature of your website. Compare two possible design approaches, including one you develop yourself. Explain which you would pursue and why; identify assumptions that need testing.

Connection to your website project

Document how you evaluated any AI-assisted work used in your final project, following the instructor’s course policy.

Sublime Text coding lab

Complete this coding task in Sublime Text, save the files using the names below, and open the HTML page in a browser to test it.

Today’s coding focus

AI-assisted coding, code reading, verification, and responsible revision

Project files and folder structure

Create week-11/ai-code-review/ with index.html, css/styles.css, and AI-USE-NOTES.txt.

Syntax to practice

Review HTML tags, CSS selectors/declarations, media queries, and code comments; identify unfamiliar syntax.

Build it

Ask an AI tool for a small component. Paste it into Sublime Text for inspection, test in a browser, make at least two purposeful corrections or improvements, and document the changes.

Code along: Review a small component before accepting AI-assisted changes.

Open in Sublime Text: week-11/index.html

Type the example below, save the file, and read the comments and selectors carefully. Use this as a starting point, then modify it for your own project.

<article class="project-card">
  <h2>Community Garden</h2>
  <p>Learn about volunteer days and seasonal planting.</p>
  <a href="events.html">View upcoming events</a>
</article>

Complete HTML and CSS example

These are matching files. Create the folders shown below, save each code sample using the exact filename, and keep the stylesheet link consistent with your folder structure.

HTML file: week-11/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AI-Assisted Component Review</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <main><article class="project-card"><h1>Community Garden</h1><p>Learn about volunteer days and seasonal planting.</p><a href="events.html">View upcoming events</a></article></main>
</body>
</html>

CSS file: week-11/css/styles.css

body { margin: 0; padding: 24px; font-family: Arial, sans-serif; line-height: 1.6; background: #f1f5f9; color: #172033; }
main { max-width: 720px; margin: 40px auto; }
.project-card { padding: 24px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; }
.project-card a { color: #1d4ed8; }
.project-card a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }

Important: The HTML links to css/styles.css. Keep that path correct relative to the HTML file.

Modify it

Ask for one accessibility or styling improvement, inspect the suggestion, test it, and document your prompt and decisions in AI-USE-NOTES.txt.

Save and test

  1. Save the file in the exact folder shown above.
  2. Open the HTML file in a browser, or refresh it after saving if it is already open.
  3. Check that linked CSS, images, and navigation work. If something fails, inspect filenames, capitalization, nesting, and relative paths.

Assignment and required deliverables

Submit every item below. Use the specified filenames and folder structure. A screenshot does not replace a required source file.

Required files

  • index.html and css/styles.css — tested component on a simple page.
  • AI-USE-NOTES.txt — prompt, generated-code summary, two changes, and how each was tested.
  • code-review.png — screenshot of code or working component.
  • README.txt — one new understanding and one remaining question to verify.

Submission checklist

  • Generated code reviewed, not blindly accepted; two improvements documented; page tested; AI use disclosed.
  • Keep all HTML, CSS, image, text, and PDF files inside the named weekly or project folder.
  • Open the HTML file in a browser before submitting and confirm linked CSS and images load.

Before you leave (3-minute exit check)

Write down one thing you changed, one thing you learned from the result, and one question you still have.

References

These references support the key concepts and practices covered in this lesson. They are provided for verification and further study.