Reimagine Product Development: Matter in Action
In a Nutshell
Matter is a JetBrains AI tool that lets product managers and designers work directly with existing codebases through chat and live preview, turning ideas into GitHub pull requests in minutes. It creates safe mirrored environments, reuses existing components, and accelerates product development 3x by eliminating the traditional handoff between design tools and code. The core value is seamless team collaboration where non-developers can iterate on real UIs and validate with users before developers review and merge changes.
These notes were generated by AI and may contain inaccuracies.
Matter is a VIP coding tool designed for existing codebases. Everyone who joins the waitlist through the provided link receives fast-track access to the early access program. Questions can be asked in the chat and will be addressed during the Q&A session.
Elena serves as product manager at Matter with a research and marketing background. She focuses on early-stage product development where figuring things out and bringing something new to the world is essential.
Anton Sukhanoshinka is Matter's tech lead with over a decade of fullstack web development experience. He enjoys exploring complex problems, understanding technical details, and blending technical knowledge with design and UX skills to achieve optimal outcomes.
Vladimir Petachkov works as Matter's product designer. He finds it significant that Matter is among the first JetBrains products to treat designers and product managers as core users alongside developers.
Yan Nicholas Wman serves as developer advocate for AI at JetBrains, having previously done developer advocacy for web and consulting work for Fortune 500 companies.
JetBrains has been building tools for software developers for 25 years with millions of customers, providing a unique perspective on AI integration in development pipelines.
GitHub Copilot usage grew from 1.2 million users in 2022 to 37 million users by the end of 2024. Research indicates 70-97% of developers now use AI tools for coding-related tasks.
Anton began using AI in 2023 with ChatGPT 3.5, having previously used Copilot as an autocompletion tool in 2022. He initially used ChatGPT to generate code snippets for a Google Firebase pet project and later adopted Claude Code for daily work due to its powerful terminal-based UI.
Yan Nicholas started with Claude during its rise and moved to agentic usage, finding it valuable for spinning up demo projects quickly. He uses AI to challenge personal biases and gain outsider perspectives as a verification step.
Vladimir began with ChatGPT for writing help and brainstorming, then explored no-code AI tools like CL, GZ, and Lovable. After trying developer-oriented tools like Cursor, he experienced data loss when the "apply all changes" button deleted work, highlighting the importance of understanding Git.
Elena heavily uses AI for document creation, brainstorming, and research with Claude Code or ChatGPT. She started prototyping with AI a year ago, initially struggling with Cursor due to lack of coding background, then successfully used Lovable to create prototypes and visualize ideas independently.
AI now compresses the entire product development lifecycle from research through design and coding. Designers, product managers, and developers co-create with AI, reshaping team workflows.
Vladimir reported that designing in Matter accelerated their development cycle approximately three times, sometimes seeing changes reach production the next day. He now designs directly in Matter more often than in Figma.
Intercom's product design team uses Cursor for prototyping and creates GitHub pull requests for small UI fixes. LinkedIn's CPO discussed their fullstack builders program where small AI-accelerated teams handle entire product cycles from idea to launch.
Matter targets non-developer users working with existing codebases. The demo uses a web-based project from GitHub - their own landing page. The system auto-detects the repository and suggests project names.
For GitHub access, users can invite developers to handle initial setup once, benefiting the entire team. Private repositories require a personal access token obtained through GitHub developer settings. Public repositories may work without tokens.
Matter creates a mirror copy of repositories on their servers, updating with each change from the original. This functions as a safe sandbox where experimentation occurs without affecting the original codebase.
The AI agent analyzes the repository by reading README files and generating instructions, determining how to launch applications and prepare environments.
Matter supports privately self-hosted GitLab repositories using SSH keys for authorization, though GitLab merge requests are not currently supported.
Some repositories require authentication tokens for private npm registries containing organization-specific libraries and component libraries. This is a secure method for distributing dependencies within organizations.
Users can mention team members in chat, send notifications, and enable Slack integration for developer collaboration during setup and development tasks.
The agent automatically detects required environments like NodeJS 24 and runs preparation scripts. Warm-up scripts prepare environments for specific projects, while development server scripts launch applications. Snapshots of file systems are taken after initial setup to speed up subsequent tasks.
The interface features a chat on the left and live preview on the right, showing the actual application from the GitHub repository. Available tools include copy link, zoom level adjustment, device mode selection, and element selection.
The first task demonstrated adding a typewriter effect to specific text, with the agent localizing the relevant code location and implementing changes while showing synonyms for the selected word.
The second task involved adding a login button to the header, aligned right opposite the JetBrains logo. The agent utilized existing button components from the codebase rather than creating new ones. The current implementation uses the OpenAI model.
The button created by the agent is not a random button but comes from the existing component library. The theming settings were not properly applied. As a designer, you can prompt the agent to fix contrast issues on the button. The agent successfully added styles to make the button visible again.
We don't need we do not need new button in the codebase.
When an agent implements a button from scratch, the result may be better visually but won't be as usable at later stages of development. Reusing existing components from the codebase is preferred over creating new ones.
The import from Figma feature allows integration with Figma where users can paste a link to a Figma artboard. After copying the link to the selection and passing it to Matter, the Figma frame is unfurled automatically. Matter downloaded all icons from the Figma mockup without requiring any SVG icons to be provided separately.
Figma is still used because it serves as a starting point for raw ideas, functioning like a piece of paper where different things and styles can be easily tried. This saves time compared to describing artboards with words through prompts. The workflow involves starting in Figma, then sharing artifacts directly to Matter instead of replacing them with prompts.
Green gradients appeared on buttons due to hover effects from the original Figma mockup. Matter reused a popup component from the codebase for the login form popup. While this existing popup is not highly customizable, the agent chose to use it rather than create a new popup each time. The popup was successfully adjusted to show green gradients only on hover.
The design now matches the Figma mockup. With this artifact, the concept is clear enough to pass to stakeholders including Elena or developers. A summary of the task can be used for creating issues in issue trackers. The artifact includes a link that can be opened in Utah and shared with others for comments.
The workflow includes handing off via pull request in GitHub, making the process seamless and familiar to developers. Code quality is already quite high. Certain changes such as typing effects could be merged immediately. For the login form, behavior needs to be added since buttons do not work at the moment. This can be achieved either via Matter or with developer local tooling.
The pull request description includes links to the original Matter task and preview. When reviewing pull requests, developers can see the preview directly in Matter rather than needing to check out locally and launch. This is a huge difference for understanding markup appearance.
The system provides a live preview with all changes that can be opened in a new browser tab. Work can continue in select element mode. A summary of all changes introduced in the task or idea is available. Elena can duplicate the idea to work on top of existing changes without interfering with the original task, enabling real collaboration.
A new project was set up in Matter and connected to a monorepo in less than five minutes. Tasks were iterated using chat with AI agent and live preview. Use cases were checked and a GitHub pull request was created for developers to review and merge.
As a product manager, the workflow involves jumping directly to Matter chat to iterate on user interfaces. Once satisfied with results, the PRD prepared by Matter can be copied to create issues in issue trackers. Links to live previews can be shared. Alternatively, starting with issue tracker descriptions, copying the issue PRD to Matter chat, then iterating on UI prototypes before sharing with engineering teams.
The live preview is valuable for product managers because it allows validating ideas with customers or real-world users. The prototype can be iterated on independently and the link shared during user interviews. Users can interact with the artifact as a real working website.
The Matter workflow has sped up feature development at least three times, sometimes even more.
Preview links are closed by default under authorization for enterprise security. Only users with access to Matter can see previews. The development environment runs a dev server not designed for high load. Anonymous access is planned for future implementation.
Under the hood, a virtual machine spins up and serves the web server. When not used for a certain amount of time, the VM hibernates. Accessing a hibernated preview requires waking it up, which involves waiting. A deployments feature is planned where front-end packets will be built and placed on CDN for instant loading and completely free service.
Matter supports developing any kind of web project. Backend, databases in Docker, and other services can be spun up in containers. For simple frontend or static resource setups, CDN serving provides blazingly fast performance.
Extensive databases using Docker, Postgres, Supabase can be run. The virtual machine is generic Linux with Docker capabilities. Databases can run as Docker containers or processes. The system has 16 GB RAM by default, but larger machines can be requested for demanding setups.
A guidelines feature exists inside Matter where coding guidelines can be customized with additional information and instructions for the agent. When importing projects, the system attempts to detect and import existing code MD files. Guidelines can be updated manually. Automatic guideline updates based on agent discussions are being considered.
Collaboration was built into Matter from the beginning. Users can mention people in chat and share preview links. The tool targets teams specifically rather than indie developers or designers. Basic collaboration scenarios are supported including Slack integration, handoff with summaries and issues, and pull request features.
Matter makes explaining ideas to developers and stakeholders much easier without needing to write Google documents and asking audiences to imagine concepts. The tool speeds up and improves collaboration and communication. For product managers, this is crucial as communication with various team members and external parties is a key responsibility.
When sharing task links or mentioning colleagues, the full context including chat history, prompts, artifacts, and Figma links remains accessible. This makes it easier to get help compared to local setups where explaining context requires describing localhost environments and chat histories.
From a developer's perspective, the experience is 50/50. Some changes can be merged almost as-is with only small tweaks needed. This unloads developers from implementing markup to match mockups exactly. Developers can focus on logic, refactoring, and more interesting tasks. The role shifts toward being a facilitator and mentor.
With newer models, code quality is improving and complete messes are becoming rarer. In worst-case scenarios where code is unusable, a reference implementation exists with a definition of done already written. Implementation can be done from scratch or through reprompting. Understanding whether code is worth attention or complete mess happens quite quickly. The 50/50 split is expected to shift toward 80/20.
Users can access the product tomorrow without waiting on a waitlist. Feedback collection is important at this early stage for continued product improvement.
The session covered the complete product development journey from initial setup to handing off a pull request to developers. The agent demonstrated unpredictability in its behavior, but the overall process worked effectively despite deviating from expected outcomes.
The team will continue developing Matter inside of Matter and hopes to receive more user success stories and experiences with the tool.
Question addressed: Whether Matter can work with a Compose Desktop project, including the select tool.
The speaker lacks extensive Compose Desktop experience but suggests that if the Compose Desktop project can be launched in a web browser, it should work inside Matter via iframe embedding, similar to the cross-platform capability demonstrated earlier.
While Matter can work with any front-end technology, conventional technologies like Webpack, Vite, and React are the primary focus. It would be valuable to see user experiences with Compose Desktop projects.
The session provided value in sharing developer experience and explaining the technical processes behind the scenes. The team expressed appreciation for the opportunity to share insights with participants.
Keep JetBrains in your library
Save the videos and channels worth coming back to, and find them again in one place.
