I’m building the lab I wish my students had. 🧪✨

For years, I taught brilliant minds in empty labs. We described reactions instead of seeing them. This "STEM Interaction Gap" drove my submission for the #ConfigMakeathon.

🚀 Introducing: LabCraft AI Turn static lesson plans into interactive web simulations in seconds. No code—just curriculum.

⚡ The Workflow (via @Figma Make):

AI Design: Generated responsive "Teacher Dashboard" & "Simulation Canvas" layouts instantly.

Logic Mapping: Used Figma Variables to link sliders to real-time flask visual states.

It’s personal. It’s EdTech. It’s the future of STEM.

👇 Explore the Lab: 🚀 Live Prototype: thus-clad-63683861.figma.site

Community Link: https://www.figma.com/community/file/1646503878043229359/labcraft-ai

X Post Link: https://x.com/i/status/2064876112128127280

📂 Remix the Prompt: (See the section below!)

📂 The "Secret Sauce" (Remix Prompt)

SYSTEM ROLE: Principal Product Architect. GOAL: Generate a 3-screen STEM web app "LabCraft AI" (1440px) using Clean Neobrutalism (2px borders, 8px corners, 4px hard shadows). SCREENS: 1. Prompt Input Dashboard: Sidebar navigation + center AI input bar (48px height) with hover/focus states. 2. Interactive Lab Canvas: Split view. Left: 2 Sliders (8px track, 24px thumb) in Chemical Green (#01C38D). Right: Simulation viewport with an Erlenmeyer Flask showing dynamic fluid levels. 3. Performance Analytics: Grid of 3 metric cards + line chart with interactive nodes in Science Blue (#2A697). CONSTRAINTS: Use Auto Layout for everything. Semantic layer naming. Accessible palette (#2A6F97, #01C38D, #FF6B6B).

🛠️ Quick Setup for Remixers 😊

If you're trying this prompt in Figma Make, follow these two steps for the best results:

StepAction1. Variable BindBind the generated colors to Local Variables to keep the Neobrutalist palette consistent.2. Prototype SyncLink the "Generate" button to the Lab Canvas using Smart Animate to show off the STEM interaction.

Amazing!