Join Aydin as he chats with Filip Skrzesinski, co-founder of Subframe—a trailblazer in code-native design tools. Filip shares how AI is transforming the design process by enabling designers to create production-ready UIs directly in code. He discusses the evolution of web building, the pitfalls of traditional design-to-code handoffs, and the collaborative potential of shared code. Discover how organizations can train AI models to reflect their product style, and hear about the future of decentralized app development.
50:09
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
question_answer ANECDOTE
From Audio Engineering To Product Design
Filip described starting in audio engineering, moving through CS and art, and arriving at product design.
He uses that cross-disciplinary background to build Subframe and think of design as a technical craft.
insights INSIGHT
Designers As Architects, Not Printers
Designers act more like architects than printers when creating product UIs and handoffs create fidelity loss.
Subframe embeds design changes directly into the underlying code so designers shape the same material engineers use.
volunteer_activism ADVICE
Teach Models Your Design Language
Train and shape AI models with your organization's design language and examples to get useful outputs.
Treat models like junior teammates you mentor with system prompts, snippets, and feedback to reflect product taste and constraints.
Get the Snipd Podcast app to discover more snips from this episode
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.
This New Way