Office Hours session #38 · 23 June 2026
Office Hours #38Designing Base44 Apps
A design-fundamentals refresher (the third design-themed session to date), aimed at beginners but useful for all. Sam — explicitly not a design specialist — walked through how to think about an app BEFORE building it, why AI-built apps all look the same, how to fix prompts to escape the "AI look," a practical pre-ship design checklist, and the component-library "secret weapon" (21st.dev, UI verse). Heavy chat participation from the design-strong community members. The Q&A drifted wide into translation (i18n), PDF generation, dark mode, app-store publishing, pricing strategy, and a teaser for upcoming community in-person events (Manchester floated).
Pinned to the board
Before the teardown began
6 announcements read out at the top of the session.
Shark Tank "Sharkening 3.0" — Friday
Teased for later in the week (covered fully in #40). Moderators act as sharks handing out credits + merch coupons.
Vibe's Reddit AMA — Saturday 3PM BST
Community creator Vibe is running an AMA on the Base44 subreddit. Sam pushed everyone to warm up the thread with questions in advance.
Possible Manchester / UK Community Event
Sam is actively exploring an in-person UK event — most likely Manchester (closest city to him besides Carlisle). Floated pizza, beer, and a possible "underground warehouse rave." Not organised yet.
Ambassador Programme — Next Cohort ~July/August
Applications for the next ambassador cohort expected to reopen around July/August (Sam guessing). Monica is in charge; watch Discord.
Launchpad World Cup Winners
Vibe took 1st and AJ took 2nd in the community Launchpad for the World Cup apps — a very close battle. Sam offered to manually hand out the credits if winners hadn't received them.
Session Recordings Going Public (recapped)
All sessions are recorded and available on YouTube + the unofficial archive.
The diagnosis
Why Everything AI-Built Looks The Same
Base44 builds with React, which gives functional components with generic defaults. A bare prompt → rigid, identical output (same layout, fonts, spacing, colours). In 2026 it's trivial to spot a vibe-coded/AI app — especially a no-skills, no-library Claude app — within seconds. The fix isn't skill, it's intentional design decisions and giving the AI a framework.
Before the first prompt
Think Before You Prompt (the 4-pillar framework)
Before typing a single prompt, answer these as questions:
Identify your user
What are you building and who's it for? Often the user is yourself — and that's fine: "if you want it to exist, someone else does." Still define that person: their tech background, location, why it solves something for them.
Scope the competition / find the gaps
Not to scare you (don't compare yourself to Facebook) — to identify gaps. Look at what similar apps do well (usually ease of access + landing page) and where their holes are. Use Claude/GPT agents to deep-dive a competitor.
Where will users visit from?
Desktop, laptop, mobile Safari, or the app stores? The design changes drastically per platform. Decide responsivity FIRST.
Nail the landing page
The "initial gasp moment." Set the scene with the first thing users see — cinematic vs mundane, products-in-your-face vs an onboarding flow — based on what your captured audience expects.
The rewrite
Fixing Your Prompts (the two-line wrapper)
Wrap build requests with context + design direction. Example:
"Build me a dashboard page with a sidebar, charts, and a table of recent orders."
"You are going to implement a React component into our codebase. Build me a dashboard page with a sidebar, charts, and a table of recent orders. Adjust the design and colours to fit our current app theme [or: apply a cyberpunk aesthetic / glassmorphism]."
The opening line tells the AI it's working inside an existing system (not from scratch); the closing line sprinkles your chosen vibe. You can also attach a screenshot or link of another site: "refer to the attached screenshot for the design direction."
The pre-ship gate
The Pre-Ship Design Checklist
Straight from the session — work the list before you publish. Ticks hold while you stay on the page.
0 of 6 reviewed
Before you ship: spend 30 seconds scanning spacing, fonts, colours, polish, mobile visuals. Make it a habit.
The shortcut shelf
The Secret Weapon — Component Libraries
21st.dev
a catalogue of beautiful ready-to-use components. Find an effect you like (e.g. a glassmorphic translucent window), tell the builder to reference and use it — no coding needed.
UI verse
similar; grab a cool modern button effect's code and paste it straight into Base44.
feed 21st.dev into ChatGPT and have it deep-research competitors for an effectively infinite supply of UI component sources.
The open floor
Questions taken at the desk
25 questions raised after the walkthrough and answered live, in the order they came in.
Showing 25 of 25 answers
The playback
Watch the whole teardown
The full session as it streamed — pinned to the critique board, marks and all.
Office Hours #38 — Designing Base44 AppsYouTube · opens in a new tabThe verdict
What survived the teardown
8 takeaways signed off before the board was cleared.
Do the four-pillar thinking BEFORE your first prompt: who's the user, where are the gaps, what platform, and nail the landing page.
Escape the "AI look" by wrapping prompts — open with "you are implementing a React component into our codebase," close with your chosen aesthetic (or attach a screenshot for direction).
Put design intent and mobile-first directives in AI Controls (cog → AI Controls) so they fire on every prompt.
Run the pre-ship checklist every publish: spacing, font hierarchy (2–3 sizes, one font), one primary + one accent colour, component polish, responsive on phone AND desktop.
21st.dev and UI verse let other people do your design work — find a component you like and tell the builder to reference it; no coding needed.
Translation is one prompt:
npm install i18n→ yes → "translate my entire app into [languages] using i18n."PDF generation is one prompt:
npm install react-pdf(or pdf-lib).Claude Design is now integrated with Base44 — design in Claude, import directly (alongside Figma import).
The reading list
Every library, link and tool handed around during the crit.
- 21st.devcomponent library
- UI versecomponent/effect library
- Claude Designnew Base44 integration
- Figma import
- Unofficial Office Hours archive
- Tom's dark-mode Chrome plugin
- npm libraries: i18n (translation), react-pdf / pdf-lib (PDF), dark-mode libraries
- Vibe's Reddit AMA (Saturday 3PM BST)