Recreating Fellow's UI from screenshot

Aydin sits down with Filip Skrzesinski, co-founder of Subframe, to unpack how AI and code-native design tools are collapsing the classic PM → design → engineering handoffs. Filip explains why “pictures to code” is an unfair ask of engineers, shows how Subframe lets teams design directly in the same material as production code, and demos building a Fellow feature—from screenshot → design system match → working prototype—without access to Fellow’s codebase. They close on what’s next: organizations training their own “house models” to reflect product taste, patterns, and constraints so more people across the company can truly build.Key takeawaysDesign in the same material as code: Subframe treats UI work as editable code, eliminating fidelity loss from design handoffs.Fewer stages, faster loops: PMs, designers, and engineers collaborate in one artifact; prototypes look and behave like the real app.AI as a trained teammate, not a slot machine: Teams will shape models with system prompts, snippets, and feedback—like mentoring a junior designer.Front-end ownership shifts: Designers can own front-end structure and components; engineers wire up backends and complex logic.Prototype to PRD: High-fidelity prototypes beat docs for alignment, user testing, and speed.Timestamps00:00 - Introduction 01:00 Fil's path: audio engineering → CS → design → startup co-founder03:48 Builders everywhere: from Dreamweaver → Webflow → Shopify → now “apps”04:01 What Subframe is: a design tool rooted in code05:48 Bridging LLMs (great at code) with visual design context08:09 The architect vs. printer analogy for product design12:23 Back to the show: “The new way” is collapsing steps and handoffs14:07 “Five-year” vision (sooner than you think): design → code with agents in the loop16:31 Training models on your org’s taste: like raising a puppy—examples & theory19:15 Today’s demo plan: build a Fellow feature in Subframe without codebase access21:04 Recreating Fellow’s UI: import colors/typography; screenshot → layout23:07 Don’t fight the AI: let it rough-in, then designers perfect in visual mode24:11 Why prototypes should look native (not “off-brand” sandboxes)26:07 Syncing components to codebases; where Subframe stops (front-end) and engineers continue (backend)28:33 Programmatic (deterministic) UI code & generative for visuals30:00 PMs in the tool: prompt to add a Share dialog with transcript and video context35:08 Exploring multiple design variations; mix-and-match patterns (“snippets”)37:57 From design to interactive prototype via annotations (“do this on click…”)45:22 First build runs: working Share flow; alert updates after sending47:02 Export code → Cursor/GitHub; hand off real components48:08 The next 12 months: more ideas shipped, more makers, less gatekeepingTools & technologies MentionedSubframe — Code-native design tool for building UI/UX; designs directly edit the underlying code; syncs components to your repo.Fellow.ai — AI meeting assistant with privacy controls; accurate summaries, actions, decisions; broad SaaS integrations.Cursor — AI-assisted code editor; good for continuing from exported Subframe code to production.GitHub — Repo hosting and collaboration for shipping the generated/edited UI code.AI code agents — Used by engineers to wire front-end to backend services and data.Squarespace / Webflow / Dreamweaver — Prior waves that democratized web creation; backdrop for today’s “apps layer.”Shopify — Example of no-code/low-code e-commerce; analogy for app building’s democratization.Lovable / Bolts / V0 — AI code/prototyping tools referenced as peers for generating working app scaffolds.Slack / Asana / HubSpot / Salesforce / Linear / Jira / Confluence — Systems Fellow integrates with to push notes, actions, and records.Subscribe at⁠ thisnewway.com⁠ to get the step-by-step playbooks, tools, and workflows.