‹
›
GenAI After Hours cover
Co-working session  ·  90 min

Just
Site It.

Your tools. Your topic. Build something live.

-

What's a microsite?

A Microsite is a small standalone website. Usually 1-5 pages. Built for one specific thing
- a project, portfolio piece, event, or idea.


Different from a full website because it's focused. You can build one in an afternoon.

Scroll inside
HP
Hey Parker
AI landing page
Scroll inside
PP
Pelata Pieces
Editorial commerce
Scroll inside
AL
Allta
Restaurant website
Scroll inside
ES
E Stewart & Associates
Professional services
-

Use whatever gets you moving.

No right answer. Pick one you've heard of and start.

Claude ChatGPT Figma Make Lovable Stitch Framer Webflow Carrd Cursor
Activity 01  ·  15 min

Pick your thing.

For example I want to build a microsite for my sister who's a ceramic artist. Give me 3 different directions I could take this.

Paste that into any AI tool. Pick one direction. That's your brief.

Don't overthink it. The prompt can change. The idea can't stay vague.

Activity 02  ·  30 min

Build the first version.

For example Build me a one-page site for a freelance photographer. Include a fullscreen image grid, a short bio, and a contact form. Dark theme, minimal text.

Get something working. Doesn't need to be perfect. Just needs to exist.

Most tools let you iterate. First draft is for seeing if the idea works.

Stuck?  ·  anytime

Unstick yourself.

Hate the output? Say what you hate. "Less corporate" beats "try again".
Stuck on the idea? Find a site you like. Describe its layout.
Tool fighting you? Switch. Don't debug — just paste your prompt somewhere else.

Still lost - tap someone next to you..

Activity 03  ·  30 min

Make it yours.

You've got first version. Let's push it:

"Add a soft hover glow to buttons."
"Make the headline fade in and rise up on load."
"Add a smooth scroll reveal for each section."
"Create a parallax effect between background and foreground layers."
"Add a click ripple effect when users tap buttons."
"Make cards tilt slightly with mouse movement."
"Add a floating gradient blob in the background."
"Create a slow looping shimmer across the page background."
"Add a custom cursor that grows on hover."
"Make images scale in softly as they enter view."
"Add a sticky section title that stays while you scroll."
"Animate numbers counting up when they appear on screen."
"Add a text highlight sweep under key words."
"Build a layered hero scene with depth on mouse move."
"Add a marquee line with looping words or short messages."
"Create a soft pulse behind the main CTA."
"Add a trail of light particles that follows the cursor."
"Make sections snap neatly into place while scrolling."
"Add a rotating 3D object in the hero section."
"Create a glass-style panel that reacts to hover."
"Add a morphing background shape that slowly changes over time."
"Make the navigation underline slide smoothly between links."
"Add a reveal mask that uncovers images as you scroll."
"Create a spotlight effect that follows the cursor."
"Add one small surprise interaction to the final CTA."

One intentional change makes it less AI-generic.

Check in  ·  5 min

Where are you?

Got something on screen

Getting there

Completely lost

Activity 04  ·  15 min

Publish it. For free.

Pick one. All are free.

Netlify Vercel GitHub Pages Replit

You need a link before the next slide.

Show & tell

Share your site.
Drop it into the Miro.

01

What you built

02

The prompt that worked

03

One thing that surprised you

No judgment. Half-finished counts.

Keep going  ·  always

What's next.

Iterate on what you built today
Try a different tool on the same brief
Teach someone - fastest way to learn

The best microsite is the next one.

1 / 12 ← →  to navigate
⚙ Dev Panel
Cover PNG
Drop a PNG here or browse
cover.png
X Offset 0px
Y Offset 0px
Scale 1.00x
Cover 3D Scene
X Offset 0px
Y Offset 0px
Scale 1.15x
3D Scene Position
X Offset 180px
Y Offset -15px
Scale 1.50x
Slide 11 3D Scene
X Offset 24px
Y Offset -5px
Scale 1.15x
Slide 8 3D Scene
Right 238px
Y Nudge 140px
Width 546px
Height 397px
Scale 1.00x
Y Crop 0px
Cursor
Base Size 18px
Hover Size 32px
Dot Size 3px
Lag (lerp) 0.10
Idle Move Delay 10s
Idle Move Amount 0.004
Idle Move Speed 0.00035
Typography
Text Width 40vw
H1 Max 130px
H2 Max 60px
Body Size 17px
Carousel
Interval 3.6s
Prompt Size 20px
Particles
Speed 0.90s
Density 75
Size 2px
Motion Blur 0px
Fluid
Color 1 #662AF4
Color 2 #C4527A
Color 3 #2D0BD5
Opacity 1
Saturation 1.25
Exposure 0.5
Noise 0.010
Decay 0.995
Idle Decay 0.990
Force 2.0
Idle Force 3.0
Opacity Vel 1.14
Color Shift 0.0003
Idle Cursor Force 6.0
Idle Cursor Opacity 0.03
Idle Cursor Radius 0.60x
Press D to toggle · Values update live