AI Landing Pages from Census Data

Design a fitness studio landing page using real US Census demographic data.

Introduction

30 Second Summary

Think about the last time you saw an ad that clearly was not made for you. That disconnect happens when designers guess at their audience instead of looking at real data.

In this project, you will use real US Census data to write your own design reasoning for a fictional fitness studio's landing page. Then you will hand that reasoning to Figma Make, an AI design tool, and evaluate whether the AI followed your logic or substituted stereotypes.

What You'll Build

Picture holding your finished landing page next to the design brief you wrote by hand, pointing at each visual choice to explain whether the AI reasoned from your data or reached for a cliche.

By the end of this project, you'll have:

A side-by-side reading of two real US city demographic profiles (Austin, TX vs. The Villages, FL) that reveals how different two American communities actually are across age, income, housing, and education.
A written design brief where you translate each raw Census data point into a specific design decision with your reasoning, before the AI touches anything.
A data-driven landing page generated in Figma Make, evaluated against your own predictions to find where the AI matched your reasoning and where it took shortcuts.
Secret Mission: Iterate on the AI's weakest assumption with a corrective follow-up prompt, then evaluate whether it genuinely improved or just swapped one stereotype for another.

Are there any prerequisites?

No prior design experience is needed. You will set up a free Figma account in Step 1. All you need to start is a web browser.

Before We Start

Before we dive in, let's lock in what you're about to build and why the order of operations matters.

Set Up Figma

Soon you will write a design brief grounded in real Census data. That brief needs somewhere to go. Without a design tool, your reasoning stays on paper.

To turn your brief into a real design, you will use Figma Make. It is an AI design tool that generates full landing pages from text prompts. In this step, you will create a free Figma account and open your first Figma Make file.

In this step, get ready to:

Create a free Figma Starter account.
Open your first Figma Make file.

Sign up for a free Figma account

Figma's Starter plan is free and includes access to Figma Make. You get 500 AI credits per month, which is more than enough for this project.

Open your web browser and go to figma.com.
Click Sign up in the top right corner.
Choose Continue with Google or enter your email address to create an account.
If prompted to upgrade to a paid plan, skip it. The free Starter plan is all you need.

Already have a Figma account?

After signing in, you land on the Figma file browser. You should see your Drafts folder in the left sidebar.

Don't see the file browser?

If you landed inside a file or on a different page, look for a home icon or the Figma logo in the top-left area to navigate back to the file browser.

Help me get to the Figma file browser

Create your first Figma Make file

A Figma Make file is where you type prompts and the AI generates designs. This is where your landing page will come to life.

In the file browser, confirm you can see your Drafts folder in the left sidebar.
In the upper-right corner, click the Make button.

A new Figma Make file opens. You should see an AI chat panel on the left side and a preview area on the right.

What is Figma Make?

Figma Make is an AI-powered design tool inside Figma. You describe what you want in plain text, and the AI generates a full, interactive design.

Each generation costs AI credits. On the free Starter plan, you get 500 credits per month and up to 150 per day. A full page generation from scratch costs 75 or more credits, so you have room for several attempts.

🙋‍♀️ Don't see the Make button?

Make sure you are in the file browser (the page that shows your Drafts folder), not inside an existing design file. The Make button only appears in the file browser's upper-right corner.

Help me find the Make button in Figma

Your design workspace is ready. Next up, you will read real US Census data for two very different cities and write your own design reasoning before the AI touches anything.

Read Real Demographics and Write Your Design Brief

Your Figma account is set up and your Make file is ready. Before you write a single prompt, you need to see the data you are designing for.

Reading real demographic numbers first means every design decision you make will be grounded in evidence, not vibes. You will compare two very different American cities, then write your own reasoning before the AI touches anything.

In this step, get ready to:

Read demographic profiles for Austin, TX and The Villages, FL on Population Review.
Compare the two cities across age, income, housing, and education.
Write a design brief with at least four data-backed design decisions for The Villages.

Read Austin's demographic profile

Austin, TX is your contrast city, not your design target. Reading its profile first gives you a baseline so you can see how starkly different The Villages really is.

Open populationreview.org/city/austin-city-tx in a new browser tab.
Scan the profile page and find these four stats: age, income, housing, and education.
Keep this tab open. You will refer back to these numbers in a moment.

What is Population Review?

Population Review displays demographic profiles for 4,200+ US cities. All of the data comes from the US Census Bureau's American Community Survey (ACS) 5-Year 2023 estimates.

The profiles are free, public, and require no account. You are reading the same official Census data that urban planners and market researchers use, just in a friendlier format.

Read The Villages' demographic profile

Now you will read the profile for the city you are actually designing for. The Villages, FL is a retirement community. Its numbers look nothing like Austin's.

Open populationreview.org/city/the-villages-cdp-fl in another new browser tab.
Find the same four stats you looked up for Austin: age, income, housing, and education.
Also note two additional stats on the page:

What do these numbers tell you?

Look at the gap between the two cities. Austin's median age is 34.5. The Villages' is 73.6. That is a 39-year difference between two American cities.

The Villages' median household income of $76,523 is near the US median of $78,538. The median resident is retired, owns their home outright, and earns a middle-class income. That is a very specific person to design for.

🙋‍♀️ Can't find a stat on the page?

Population Review organizes data into labeled sections. Scroll down the page and look for section headings related to the stat you need. Income stats appear in a different section than housing stats.

If a page is not loading, check that you copied the full URL including the city slug at the end.

Still stuck? Help me find demographic stats on the Population Review profile page.

Write your design brief

This is the most important part of the project. You are going to write your own design reasoning before you write a single AI prompt.

Your design brief is a set of predictions. In the next step, you will check whether the AI matches your reasoning or takes shortcuts you would not have taken.

Open a text document, notes app, or any place you can write. This is your design brief.
For each of The Villages' four core data points (median age, income, home value, education), write one entry in this exact format:

"Given [data point], I think [specific design element] should [specific choice], because [your reasoning]."

What does a good entry look like?

Here is an example: "Given median age 73.6, I think the hero image should show active adults in their 60s-70s rather than twenty-somethings in a CrossFit box, because the audience needs to see themselves in the page."

Notice how the entry starts with a specific number, names a specific design element (hero image), makes a specific choice (active older adults), and gives a reason. Vague entries like "make it look older" do not count.

Write at least four entries, one for each core data point.
You can also write entries for the homeownership rate or racial composition if you see a design implication.

Design elements to consider

Think about hero imagery, typography size and readability, color palette, copy tone and vocabulary, call-to-action language, and class offerings. Each data point connects to at least one of these.

✔️ I'll give it a go!

Write at least four entries using The Villages' data. Use the format above and reference the profile page you have open in your browser tab.

ⓧ Maybe a little help...

Here are some prompts to get you started. Pick one data point and ask yourself: if I were designing a fitness studio page for someone described by this number, what would I change?

Median age 73.6: What should the hero image show? What about font size and readability?
Median income $76,523: Should the pricing section emphasize budget deals or quality and value?
Education 42.9% bachelor's+: How complex should the copy be? Should it use industry jargon or plain language?
Homeownership 94.2%: What does near-universal homeownership tell you about how settled and community-oriented this audience is?

Before you move on, count your entries. Do you have at least four, each grounded in a specific data point from The Villages' profile?

Your brief should have entries covering at least median age, income, home value, and education. Each one should name a specific design element and give a reason for the choice.

Why write this before prompting?

If you write your prompt first and then evaluate the result, you have nothing to compare against except your gut feeling. Your design brief gives you a written record of your reasoning.

In the next step, you will check each of the AI's design choices against your predictions. That comparison is the whole point of the project.

Your design brief is ready and your predictions are on paper. Next up, you will turn these data-driven decisions into a prompt and see what Figma Make does with them.

Generate a Data-Driven Landing Page

You now have something most people skip entirely: a written record of your own reasoning about what this landing page should look like, grounded in real data.

In this step, you will turn that design brief into a prompt and hand it to Figma Make. The question is not "does the page look nice?" The question is: did the AI make the same choices you reasoned through, or did it take shortcuts?

In this step, get ready to:

Write a data-driven prompt that injects real Census numbers and your design reasoning into Figma Make.
Generate a landing page for FitLocal and name the version.
Compare the AI's output against your design brief to find matches and misses.

Write your data-driven prompt

A generic prompt like "make a fitness landing page" would give you a generic result. Your design brief exists precisely so you can inject specific data and reasoning into the prompt instead.

Switch back to your Figma Make file. You should see the AI chat panel on the left and the preview area on the right.
In the AI chat panel, type a prompt that translates your design brief into instructions for the AI. The key is to inject the real demographic data and your reasoning directly into the prompt.

Here is an example prompt you can use as a starting point. Feel free to adjust the wording based on the specific decisions in your design brief:

Create a landing page for FitLocal, a fitness studio in The Villages, FL.

The local median age is 73.6 years, median household income is $76,523,
homeownership rate is 94.2%, and 42.9% of residents have a bachelor's
degree.

Design the page for active retirees: use a hero image showing adults in
their 60s-70s engaged in low-impact fitness like swimming or yoga, not
high-intensity CrossFit. Use clear, readable typography (16px+ body text).
Emphasize community and social connection in the copy, not competition or
body transformation.

Include a section for class offerings (water aerobics, chair yoga, walking
groups), pricing, and a call-to-action for a free trial class.

Why inject data directly into the prompt?

The AI does not know anything about The Villages unless you tell it. Without real numbers, it would fall back on generic assumptions about "a fitness studio" or "older adults."

By embedding specific data points like median age 73.6 and homeownership rate 94.2%, you give the AI concrete constraints to reason from. The more specific your prompt, the easier it is to evaluate whether the AI actually used your data or ignored it.

Before you hit send, pause for a moment. Based on everything you wrote in your design brief, what do you predict this landing page will look like? Which of your design decisions do you think the AI will follow closely, and which ones do you think it might ignore?

Click Send in the AI chat panel.

Generation takes up to a few minutes. When it finishes, an interactive preview of your landing page appears in the preview area on the right.

How many credits does this use?

Generating a page from scratch uses 75+ credits. Your free Figma Starter plan gives you 500 credits per month and up to 150 per day. This single generation fits comfortably within both limits.

🙋‍♀️ Preview not appearing?

Complex pages can take a couple of minutes. If the chat panel shows a loading indicator, wait for it to finish before scrolling or clicking away.

If generation fails entirely, try shortening your prompt slightly and clicking Send again. Very long prompts can occasionally time out.

Help me troubleshoot why my Figma Make generation is not completing.

Name this version and compare it to your predictions

Figma automatically creates a new version every time the AI edits the file. Naming your version now makes it easy to find later, especially when the Secret Mission adds a second version.

Click the current version number at the top of the screen to open the version history.
Click More options (the three-dot icon) next to the latest version.
Select Name this version.
Type The Villages - Data-Driven and press Enter.

You should see your version listed in the version history with the name The Villages - Data-Driven.

Don't see the version number at the top?

Make sure you are inside the Figma Make file, not the file browser. The version number appears near the top of the screen only when a file is open.

Help me find the version history in my Figma Make file.

Now comes the most important part of this step. Pull up the design brief you wrote earlier and go through each prediction one by one.

For each "Given [data point], I think [design element] should [change]" entry in your brief, look at the generated page and check: did the AI make the same choice you reasoned through?
Write down at least one match: a place where the AI followed your reasoning.
Write down at least one miss: a place where the AI took a shortcut you would not have taken, or ignored a nuance you specified.

What counts as a match vs. a miss?

A match means the AI made a design choice you can trace directly to a data point in your prompt. For example, if you asked for "adults in their 60s-70s" in the hero image and the AI used imagery of active older adults, that is a match.

A miss means the AI added something you did not ask for, or substituted a visual cliche for the nuanced choice you specified. For example, if the AI defaulted to muted pastel colors even though no data point in your prompt implies a color preference, that is the AI layering its own assumption on top of your instructions.

You now have a landing page and a clear picture of where the AI followed your lead and where it went its own way. Next up, you will put that picture under a structured microscope and evaluate every major design element as either data-justified or stereotypical shorthand.

Critique: Justified vs. Stereotypical

Your landing page is live in Figma Make, and you have already spotted where the AI followed your reasoning and where it took shortcuts. Now it is time to turn those gut reactions into a structured critique.

Some of the AI's design choices follow logically from the data you provided. Others are pattern-matching on shallow associations, like "older audience equals muted earth tones." Telling the difference is what makes this critique the real deliverable of the project.

In this step, get ready to:

Evaluate five specific design elements on your generated landing page.
Classify each element as data-justified or stereotypical shorthand with a one-sentence explanation.
Write a summary sentence identifying the AI's strongest and weakest choices.

Identify what the AI chose for each design element

You will evaluate five design elements that are visible at a glance on the page. These are the elements where AI tools most commonly substitute stereotypes for evidence.

Return to your Figma Make file with the The Villages - Data-Driven version visible.
For each of the five design elements below, write down what specific choice the AI made:

Color palette. What colors did the AI use for backgrounds, buttons, and accents?
Hero imagery. Who appears in the hero section, and what are they doing?
Copy tone and reading level. Is the language casual, professional, or clinical? Are sentences short or complex?
CTA (call-to-action) language. What does the main call-to-action button say? What feeling does it try to evoke?
Layout density and typography size. How much content is visible at once, and how large is the body text?

For each element, write down whether you can trace the AI's choice directly to a data point you included in your prompt. If you cannot find a connection, note that too.

Pull up your design brief side by side

Your design brief from Step 2 is your answer key. Open it alongside the Figma preview so you can compare each element against your original predictions.

Classify each element as data-justified or stereotypical shorthand

Not every design choice that looks reasonable is actually supported by data. Some choices are pattern-matching on cultural associations that sound plausible but have no basis in the numbers you provided.

Each element falls into one of two categories.

Data-Justified. You can trace the design choice directly to a specific data point you provided. The connection is logical and evidence-based.
Stereotypical Shorthand. The AI made an assumption that sounds plausible but is not actually supported by any data point in your prompt.

Go through your five elements and mark each one as either Data-Justified or Stereotypical Shorthand.
Write one sentence for each element explaining your classification. Name the data point that justifies it, or name the assumption the AI made without evidence.

How to tell the difference

If the AI increased font size, that connects directly to designing for a median age of 73.6. Readability needs change with age. That is data-justified.

If the AI used muted earth tones, ask whether any data point you provided implies a color preference. Median age does not dictate color taste. That is stereotypical shorthand.

Watch for borderline cases too. If the AI used budget-focused language, note that the median household income of $76,523 is near the US median of $78,538. Framing The Villages as "budget" would actually be inaccurate.

Write your summary sentence

You have classified all five elements. Now distill your full critique into one takeaway.

Write one summary sentence using this format: "The AI's strongest data-driven choice was [X], and its laziest assumption was [Y]."
Replace [X] with the element that best followed your data. Replace [Y] with the element where the AI reached for a cliche instead of reasoning from the numbers.

Why one sentence?

Forcing your evaluation into a single sentence makes you commit to a judgment. It is easy to hedge across paragraphs. One sentence requires you to decide what actually matters most.

Review your completed critique. You should have all five design elements evaluated, each with a classification and a one-sentence explanation, plus your summary sentence.

Not sure if an element is data-justified or stereotypical?

Try this test: can you name the exact data point from your prompt that leads to this choice? If you can point to a specific number (like median age 73.6 justifying larger fonts), it is data-justified. If you find yourself saying "well, older people probably prefer..." without a number behind it, that is stereotypical shorthand.

If you are genuinely stuck, help me decide whether this design choice is data-justified or stereotypical shorthand.

Secret mission

Correct the AI's Weakest Assumption

You found where the AI substituted a stereotype for real data. Now write a corrective prompt that names the specific assumption, explains why it fails, and provides a data-backed alternative. The sharpest question in the whole project: did the AI genuinely improve, or just swap one cliche for another?

Clean Up Your Resources

This project runs entirely on a free Figma Starter plan and public web data, so there are no ongoing costs. Decide whether to keep your resources for future reference, or delete them entirely.

Resources you used:

Figma Make file in your Drafts (with versions The Villages - Data-Driven and The Villages - Corrected).
Figma Starter account.
Written design documents (design brief, critique, and evaluation notes).

Keep everything running

No action needed. Choose this if you plan to revisit your designs, refine your prompts, or use your critique as a reference for future AI-assisted design projects.

Your Figma Make file stays in your Drafts with both named versions intact.
Your Figma Starter account remains active and free.
Your written design documents stay wherever you saved them.

Pause - I'll come back to this later

Since this project uses a free Figma Starter plan, there is nothing to pause. Your Figma Make file and account stay available at no cost whenever you return.

Your Figma Make file remains in your Drafts with all versions preserved.
Your AI credit allotment resets monthly (500 credits per month), so you can experiment further when you come back.

Delete - I don't want to use this again

Remove all project resources if you do not plan to return to this project.

Delete your Figma Make file: in the Figma file browser, go to Drafts in the left sidebar. Right-click on your FitLocal Make file and select Move to trash. Confirm by clicking Move file to trash. To permanently delete it, click Trash in the sidebar, right-click the file, and select Permanently delete.
Delete your written design documents (design brief, critique, and evaluation notes) from wherever you saved them.
Delete your Figma account (optional): click your name at the top-left of the file browser to open the account menu. Select Settings. In the Account tab, scroll down to the Account section and click Delete account. Follow the on-screen prompts to confirm. This is permanent and cannot be undone.

Nice Work!

Nice work! You just designed an AI-generated landing page grounded in real Census data, and more importantly, you built the skill to tell the difference between a design choice backed by evidence and one dressed up in stereotypes.

You've learned how to:

Read real US Census demographic data from Population Review and translate it into a written design brief with data-backed predictions, before the AI touched anything.
Generate a data-driven landing page in Figma Make and compare the AI's output against your own reasoning, catching where it matched your predictions and where it took shortcuts.
Complete a structured critique evaluating design elements as data-justified or stereotypical shorthand, proving you can think critically about AI output.
Secret Mission: You wrote a corrective follow-up prompt targeting the AI's weakest assumption and evaluated whether the revision genuinely improved or just swapped one stereotype for another.

Ready to quiz yourself?