Use AI to make lectures more visual

A great many law students learn best when they can see an idea, not just hear it — yet law professors are rarely trained to produce good visuals, and most law schools, foolishly, have not built the instructional-design teams that would help us.

The one place we do reach for visuals is PowerPoint — and there the visual is usually just a glorified outline. The tool is good at presenting sales projections, quarterly metrics, and a consultant’s theory of market segmentation. It is less obviously good at teaching students why West Virginia v. EPA turns on the phrase “clear congressional authorization,” why Blaisdell changed the force of the Contracts Clause, or why a statute that says “waive or modify” may not authorize $430 billion in student-loan cancellation. Alternatively, and perhaps with the help of earlier versions of AI, we make visually attractive "mood slides" that do not teach much. A picture of the Capitol with “Article I” written over it may be attractive but it does not teach much. A slide with yet another cliché gavel or courthouse icon might have been cute the first five times. Now it is like a TV channel watermark or the visual equivalent of the airline reminder how to fasten your seatbelt. It is ignored. And yet we follow our habits because the classroom needs something on the screen and because a blank screen wastes a channel of cognition.

Until very recently, AI has been able to relieve this limitation in only a limited way. Yes, it can make perfectly serviceable nested-bullet-point traditional slides. Or for at least a year it has been able to create illustrations and images with very simple text rendered faithfully. But it hasn't been able to radically transform visualization. We now have two developments worth noting, and I'll take each into a worked example from my own classroom — a constitutional-law lecture for the first, a recent Voting Rights Act opinion for the second.

First, there's now an image model that changes everything. The second generation of image generation model from OpenAI and available from ChatGPT or Codex (or via API calls) is incredibly flexible and powerful. It can create beautiful infographics with lots of text rendered faithfully. It can also create intelligent more traditional slides with sensible layout, appropriate iconography and illustrations, and more limited text. These are the capabilities I seek to exploit in the new skill announced here: text-to-visuals. It takes textual input – a lecture, a transcript, an essay, a web article, or just a set of notes – chunks it intelligently and then produces a portfolio of images for presentations, websites, videos, podcasts, and other media. Note, unlike other skills I have discussed in the past, this one works in the Codex app from OpenAI. The app itself is free and runs in Mac and Windows (sorry, Linux users) but you will need a paid account from OpenAI to do anything useful. For the bold readers who use the terminal, there is also a Codex command line interface that will work on Linux. There is also some ability to use Codex features on the ChatGPT mobile app.

Second, we have a very useful skill called "legal diagram" authored by Sam Zhai and vetted by our friends at lawve that constructs high quality diagrams from text. Those diagrams can be used on their own or further enhanced via a good large language model or using the same OpenAI image model described above. The diagrams can be used on a stand-alone basis or incorporated as elements of other visualizations such as slides. With a little help, it can construct web pages. Here's a prompt I gave Claude Opus. I selected an area of law I believe to be notoriously complex.

use the lawve connector and the legal diagram skill to help exposit this: § 101(a)(43) (8 U.S.C. § 1101(a)(43)) — The aggravated-felony definition cross-references criminal statutes and feeds into multiple removability and relief provisions; a dependency map helps. If it takes multiple diagrams, that is fine

Here is one of the diagrams it created after some enhancement using the OpenAI image model.

Here's another dealing in greater detail with the consequences of being found to have committed an aggravated felony. Again, I started with the lawve diagram skill and piped the output through the intelligent OpenAI image model to perfect the result. Possibly one could attempt to create this diagram in other ways, but probably the time cost and skills required would dissuade the average professor from the attempt.

Invoking the text-to-visuals skill

Let's now take a deeper dive into the text-to-visuals skill. I've attached a .zip file here that you can import.

A constitutional law example

Here's a sequence of prompts (slightly edited) I gave Codex. I started with a "vtt" file that was the Zoom transcript of a class I gave this spring constitutional prohibitions that predate the Bill of Rights. First, I needed to clean up the text.

Take this vtt file and turn it into a coherent lecture. use my words. do not invent your own. I just want you to cut out the fluff and classroom logistics, time stamps and other inessentials. Again, your job is basically conversion; you are not a constitutional law scholar.

Now use text-to-visuals to generate 25 images from this lecture. You are going to need to decide whether the images should be infographic-ish or more textual or contain quotations from the opinions. They can certainly also be a mixture, depending on the character of the chunk of the lecture you are referencing. If you use quotations, you must verify them. Start me off with the first 5 so I see what you have in mind

After seeing an image slide like this, I decided to proceed:

OK. Those look sensible. Build the remaining images but remember that some of them can have different styles if the text suggests a different type.

An hour later, I had the visuals and a "contact sheet" for a set of visuals on constitutional prohibitions that predate the bill of rights. They are understudied in my opinion in many contemporary constitutional law classes, perhaps on the dubious assumption that they are slack constraints seldom challenged by governments.

And here are three additional sample images produced by using the skill.

Alternate visual systems

Notice that the output from the skill reflects a number of default preferences contained in a file called "visual-system.md." The images have a 16:9 aspect ratio; they have a University of Houston color scheme (Go Coogs!); they have a medium amount of text.

Beautiful Evidence

All of the preferences contained in the skill can be changed. Here, for example, I show a "visual system" created to reflect the style of Edward Tufte in his book "Beautiful Evidence." OpenAI created the system from a prompt I provided.

Try to write a visual system that would capture the ideas of Edward Tufte in his beautiful evidence book

# Visual System: Tufte-Inspired Legal Evidence

Use this when slides should feel like analytical exhibits rather than presentation graphics. The goal is not decoration, but evidence arranged so the viewer can reason.

## Core Principle

Maximize substantive information per inch. Every mark should help explain doctrine, sequence, relationship, authority, uncertainty, or consequence.

Prefer:
- small multiples
- annotated primary text
- timelines with events placed precisely
- case comparisons on shared axes
- layered diagrams with readable labels
- evidence tables that reveal patterns

Avoid:
- slide-as-poster
- decorative icons
- empty drama
- oversized titles
- generic legal imagery
- visual metaphors that replace analysis

## Layout

Use dense but calm compositions. Let the page behave like a well-designed legal handout or scholarly figure.

- Place related facts close together.
- Use alignment to show hierarchy.
- Use thin rules, spacing, and position before boxes and color.
- Let comparisons share the same scale or structure.
- Put labels directly on the thing labeled.
- Avoid legends when direct labeling works.

## Text

Use text as evidence, not as filler.

- Quote constitutional, statutory, or opinion text when wording matters.
- Use short annotations in the margin.
- Prefer sentence fragments that state relationships: “state law only,” “retrospective impairment,” “no judicial trial.”
- Avoid bullet lists unless the list itself is evidence.

## Color

Use restrained color. Most of the slide should be black, white, gray, and paper tones.

Use UH red only to identify:
- the operative clause
- the doctrinal turn
- the legal consequence
- the disputed move
- the failing branch of a test

Color should clarify, not decorate.

## Image Types

Choose forms that allow comparison and inference:

- **Annotated text block:** exact legal language with arrows to doctrinal consequences.
- **Case matrix:** facts, issue, holding, reasoning, result across multiple cases.
- **Doctrinal timeline:** law before, case intervention, law after.
- **Causal diagram:** political pressure, legal intervention, economic consequence.
- **Small multiples:** repeat the same structure across cases so differences become visible.
- **Evidence map:** actors, institutions, legal instruments, and consequences on one page.

## Style

Quiet, precise, elegant. More like a museum wall label, judicial appendix, or scholarly chart than a PowerPoint.

No mood slides. No clip art. No decorative gavels. No fake texture unless it helps separate evidence layers. The beauty should come from clarity.

I then gave it this prompt:

Use the Tufte visual system instead of the default one to replace the image dealing with The Dartmouth College case. Again, use the cleaned up lecture as your guide.

Here's the result. Notice that it is less glitzy. (Also notice that it neglected my admonition not to use gavels!)

The point is not really about the virtues of a particular style, it is to point out the modularity of the skill and the ability to use a large language model to find alternative visualizations.

Deriving a visual system from an existing web site

You can also create a visual system from an image. Here, I gave it the following prompt:

Write up the "visual system" of the website law.uh.edu. The idea is that we will ultimately use it to create alternative images from our lecture. But for now just give me instructions similar to those you wrote for Tufte

And here's the output.

# Visual System: law.uh.edu-Inspired Legal Slides

Use this when slides should feel like University of Houston Law Center web materials translated into lecture visuals: institutional, direct, practical, and Houston-facing.

## Core Feel

Crisp, red-forward, public-facing academic design. The slide should feel like a Law Center page, admissions feature, news item, or program explainer: polished but not precious.

The visual voice is:
- confident
- practical
- urban
- institutional
- readable
- slightly promotional, but still academic

## Layout

Use strong rectangular structure.

Prefer:
- red header bars
- white content fields
- black or slate section titles
- modular cards
- news/explainer blocks
- ranking-style number callouts
- program-page layouts
- practical “why this matters” panels

Avoid:
- ornate parchment
- faux historical documents
- delicate Tufte minimalism
- moody legal symbolism
- dense professor-only handout style

## Color

Use UH red as a major structural color, not merely an accent.

Primary:
- UH Red `#C8102E`
- White
- Black
- Slate `#54585A`

Support:
- light gray fields
- pale red tints
- occasional dark red for emphasis

Red can carry headings, dividers, number blocks, issue labels, and “result” panels.

## Typography

Use bold, clean institutional typography.

- Headlines should be large, direct, and confident.
- Subheads should read like website section titles.
- Body labels should be short and functional.
- Avoid tiny scholarly annotations unless the slide is specifically about text.

## Image Types

Use website-like legal communication formats:

- **Feature block:** title, short explanation, visual/legal takeaway.
- **Program card:** doctrine, example, why it matters.
- **News explainer:** event/facts/result/consequence.
- **Ranking callout:** large number or doctrinal threshold with supporting labels.
- **Pathway diagram:** rule → application → result.
- **Two-column issue page:** legal problem on left, doctrine on right.
- **Houston/context panel:** connect doctrine to institutions, markets, public consequences.

## Legal Content

Keep slides useful to students, but more accessible than a casebook chart.

Use:
- short doctrinal labels
- clear case names
- clean “Issue / Rule / Result” structures
- practical consequences
- prominent takeaways

Use quotations sparingly. If quoted text matters, place it in a clean white card with a red label, not in parchment or archival styling.

## Avoid

No generic gavels. No decorative courthouse glamour. No sepia nostalgia. No law-review-density tables. No mood slides. The design should feel like a serious university law website explaining something clearly to an educated public.

I then asked the text-to-visuals Codex skill to go back through my lecture and use the new visual system.

Now use that system and the text-to-visuals skill to go back through the lecture and create five web pages that cover the material. No particular aspect ratio is needed as you are designing web pages, not slides.

Here's the home page of the resulting website. (As I mentioned, the output from this skill does not have to be images suitable for PowerPoint). I think there are problems with it that would need to be cleaned up on subsequent prompts, but OpenAI's image generation model did a terrific job capturing the look and feel of the University of Houston design language.

And here's the first substantive page:

So we are using the same text-to-visuals skill to get very different products out of the same raw material: the transcript of a lecture I actually gave in class.

The legal diagram skill

You can also create a variety of diagrams in a web page using the legal diagram skill and some post processing. Recall the aggravated-felony maps near the top of this post — those were the legal diagram skill, the second development I promised to return to; used on its own, with no image model at all, it can build a whole web page of diagrams. The concept of that skill is to piggyback on a well-established graphics language called Mermaid, a powerful, open-source diagramming and charting language that lets you create complex visuals using simple, text-based syntax. It supports a wide range of diagram types including flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, user journeys, mind maps, timelines, and more. That architecture is smart. Mermaid syntax is intuitive and easy to learn, fully programmable (dynamic diagrams can be generated via code). Mermaid code and the resulting diagram can thus be readily and swiftly modified either by expert humans or, as here, by large language models.

My use case comes from the Supreme Court's recent decision in Callais v. Louisiana, a case about gerrymandering and the Voting Rights Act. A student reading just the Callais syllabus already meets twenty-one statutory subparagraphs, two district courts, two sets of plaintiffs pulling opposite ways, and a holding that concedes one point to win on the next. It's an opinion screaming for several diagrams.

Here's the entirety of the prompt I gave Claude.

use the legal-diagram skill to explain the majority opinion in this case. You can create up to 5 diagrams. use diagrams of different sorts and be creative.

What came back was a respectable first draft: a single web page with five diagrams, each a different Mermaid type doing a different job. A timeline traced the procedural whipsaw. An entity-relationship map untangled the two suits, two district courts, and two sets of plaintiffs. A flowchart walked the strict-scrutiny test to the holding. A requirement diagram laid out the rebuilt Gingles framework. The skill picked the types; I picked nothing.

But the raw output from the legal diagram had real flaws. The fifth diagram was a Mermaid mindmap, and mindmaps ignore most theme variables, so it rendered on a black slab with text spilling its nodes. Worse, every diagram looked like it had a black background, because the SVG canvas is transparent and my viewer was in dark mode, so the dark bled through. And the citations kept breaking the parser — "§ 237(a)(2)(A)(iii)" has parentheses Mermaid reads as syntax.

This time, I decided to see if Claude itself could fix the problem because diagrams derived from Mermaid are, at bottom, just code, and Claude is, after all, pretty good at that. So I never ported the visuals to OpenAI's image model, or any image model. The diagrams stayed as Mermaid text plus some CSS code for the HTML wrapper. Here's the entire repair prompt:

those black backgrounds are awful. can we do something different. also the placement of text in the last diagram is off.

The HTML file is set forth below.

And here are some screenshots of our work.

It's not perfect. The font for the edge labels in diagram 2 is too small. I've spared you the wrestling match in which I've engaged to coax Claude Opus to make them bigger while still retaining diagram structure. I failed. (Maybe the now-pulled-down Fable would have succeeded?) When I enlisted the OpenAI image model, I got some improvement, but, as shown below, still not as much as would have been ideal.

Conclusion

Where does this leave us? Perhaps sadly, none of this is quite-yet push-button. Every image here took prompting, inspection, and at least one round of repair — the diagram fonts still aren't the size I wanted, and the image model once drew a gavel I had expressly told it to avoid. But the honest comparison isn't to perfection. It is to what a law professor could make before: a bullet list, or a stock photo of a courthouse. Against that baseline, a single transcript of a class I actually taught became a portfolio of teaching slides, a Tufte-styled exhibit, a small website, and a set of Mermaid diagrams of one of the term's hardest opinions. That is the real shift, and it is less about any one tool than about who gets to make a good visual. The instructional-design teams most law schools never built are now, in a limited but real way, within reach of any professor willing to learn a few skills and tolerate some iteration. Text-to-visuals and legal diagram are two early entries; they will get better, and others will join them. Indeed, what I am describing is still too conservative. The diagrams are passive. What we really want, I think, are more interactive artifacts of which diagrams are just one component. This is a subject I plan to return to soon in another blog entry. Either way, however, we need to commit to a modest investment of our time in helping students see the law in many ways. In short, we still have a job to do.