1 of 40

David + Dylan

Lunch + Learn

beg llm to �do a frontend
???
profit

1. Intro

i. Welcome

ii. Overview

a. Visualization as methodology

* How can visualization help understand the systems you're exploring?

* How can viz of complexity help wrap mind?

* Viz argument can be a strong component of a paper, research, or particularly interactive or poster, how can considerations of viz early on drive process

b. What we'll be doing

* Walking through a recent (and my first) paper publication and how we used a specific tool, Kepler.gl to explore results

* Talking about key uses and advantages of kepler, what it can do, and what the best use cases might be

* How to transition from Kepler to its big brother Deck, for more options and powerful bits

c. Who am I?

iii. What is kepler and where does it fall in the spatial stack?

a. FOSS

b. Shan He

c. Integration with Carto

iv. What can you use Kepler for?

a. Now that we've seen the underlying capacities of Kepler, how do we apply it?

b. Basic workflow

c. Bike.wrong.website

d. Affordances and limitations

e. Trees

* What does the data look like

* MAUP

* Sensitivity analysis

* It has taken me many moons to get here, but it is not a sin to choose based on looks, all else equal

v. Why make interactive maps?

vi. Taking it to the next level: Deck.gl

2 of 40

Three workflows to consider…

Workflow #1	Mockup-driven: Make mockups either by-hand or using image generation, and then pass the mockups to an AI agent to build the application.
Workflow #2	Full-service AI system: Use a FE-specific AI tool like v0 or Lovable to design, develop, and preview your app.
Workflow #3	AI-assisted development: Use AI agents like Cursor or Claude Code to design and develop your app, with your assistance.

3 of 40

Workflow #1 was a bust, unless you’re already a Figma expert

4 of 40

Image generators can do an okay job with mockups…

5 of 40

…and are arguably a bit more creative than LLM coding agents…

6 of 40

Workflow #1 was a bust, unless you’re already a Figma expert

But the image generators are very bad at tweaking a design in response to feedback…

…and the LLM coding agents are very bad at turning an image into an application.

7 of 40

Mockup vs Cursor’s version

8 of 40

Mockup vs Figma AI’s version

https://www.figma.com/make/JQVWfmLfSFJgqf1GA1IUK3/Website-Creation?node-id=0-1&p=f

9 of 40

What are the pros and cons of Workflow #2 (using FE-specific AI tools) vs Workflow #3 (standard AI coding flow)?

To explore this, we tested the same prompts using different approaches.

10 of 40

What is v0?

v0 is an full-service AI app-building tool. There are MANY of these, but v0 is owned by Vercel, so we could get a paid account without bugging Nick for a credit card.

STRUCTURE

Everything is in a PROJECT

A v0 Project can be linked to exactly 1 Vercel Project and exactly 1 GitHub repo

Within a Project, you have Chats

A single Chat can be linked to exactly 1 GitHub branch
If you fork to a new branch, it forks the Chat as well

After every message you send in a Chat, v0 writes code and creates a new Version

If you have “Auto-Commit” on, each Version will be committed and pushed to the branch

PRICING

$30/mo per user
30 credits/mo per user
~1 credit for initial prompt and a few follow-ups for a mid-sized app

11 of 40

The v0 workflow

(if needed) Add rules, sources, and integrations (e.g. databases) to your project.�
Enter your prompt.�
View the preview, and iterate as needed.�
Sync to GitHub + Vercel to deploy.

12 of 40

The Cursor workflow

Stand up a repo using your preferred template:

npm vite create@latest my-app && cd my-app�

pnpm i @radix-ui/themes @tailwindcss/vite tailwindcss @faker-js/faker react-router-dom recharts react-icons��// add tailwind config to vite�// add radix ui component css

Give your prompt to Cursor agent.�
Deploy locally or in Vercel.�
Iterate, as needed.

13 of 40

FTM2J Prompt

Please create a website for viewing data about public companies. This tool is intended to be similar to a Refinitiv or Bloomberg terminal, but lighter weight and focused on a small subset of features:�

Seeing a tree of subsidiaries of a company, and finding the public company at the root of a tree by searching a subsidiary.
Seeing a list of companies that own shares in a company, and the size of each of their stakes.
Seeing a list of companies that own commercial debt in a company, and the size and nature of their loans.�

This website should be very simple. It does not need to have a user profile or login or any fancy customization features.�

Please build the website with five pages:�

Landing Page, where you can search for a public company by name, ticker, or by searching for a subsidiary.
Company Overview Page, where you can see summary info about a specific company, as well as previews of subsidiaries, shareholders, and debt-holders.
Company Tree Page, where you can see the tree of subsidiaries beneath a company, using a tab-based approach to showing the trees with the ability to click to expand and collapse sub-trees.
Shareholders Page, where you can see a list of shareholders and the size of their stakes.
Debt Page, where you can see a list of debt-holders and the size and nature of the debt.�

Please use ultra-modern, sleek, and clean design principles. Follow all best practices for modern web design. Use accessibility best practices in laying out text and selecting colors.

14 of 40

Cursor - claude

https://lunch-and-learn-fe-ai.vercel.app/

15 of 40

Cursor - chatgpt

https://lunch-and-learn-fe-ai-git-climatecast-curso-572d37-uchicago-dsi.vercel.app/

16 of 40

Cursor - ChatGPT Codex

https://lunch-and-learn-fe-ai-git-ftm2j-cursor-codex-uchicago-dsi.vercel.app

18 of 40