# Matt Legrand
> Matt Legrand, software engineer and product designer at Anthropic (mattlegrand.ai).
The full text of every article on https://mattlegrand.ai/, newest first. The digest with profiles and career is at https://mattlegrand.ai/llms.txt.
# Smarter ghost text
URL: https://mattlegrand.ai/work/ghst/
Published: 2026-02-22
Updated: 2026-08-27
Topics: AI, Developer tools, CLI, Open source
> ghst is a zsh plugin that puts LLM ghost text on your command line: inline autocomplete as you type, plain-English commands, and history search by meaning, with nothing running until you press Enter.
[ghst](https://github.com/insprd/ghst) is a zsh plugin that puts LLM ghost text on your command line. A dim suggestion appears as you type and Tab accepts it, Ctrl+G takes a request in plain English and hands back a command, Ctrl+R searches your history by what a command did rather than what it contained, and nothing runs until you press Enter yourself. It works in any terminal emulator and talks to OpenAI or Anthropic.
Code editors have had ghost text for years,[^suggestions] and it has become the kind of feature you only notice once it's gone. The terminal never got it. You have Ctrl+R for substring search over history and Tab for file paths, and neither has any idea what you're trying to do. Where this does exist on the command line, in Warp or GitHub's Copilot CLI, it comes attached to a new terminal or a separate tool, and I did not want to give up the shell, the emulator and the years of muscle memory I already have. I wanted three things added to the terminal as it is: a suggestion as I type, a way to describe a command instead of remembering it, and history search that understands "that ffmpeg command from last week" without me recalling a single flag. ghst is those three things in one plugin.
[^suggestions]: The look comes from [zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions), which has drawn history matches as dim text after the cursor for years and needs no model to do it. ghst's suggestions come from an LLM that also sees your directory and git state, so they can be things you have never typed.
## Getting started
```bash
uv tool install ghst
ghst init
exec zsh
```
`init` asks for your provider and key, adds the shell integration to `.zshrc`, and starts the daemon; `exec zsh` reloads the shell with it active. From there Tab or → accepts a suggestion and Shift+→ takes it a word at a time. Configuration, the list of supported providers and the issue tracker are in the [repo](https://github.com/insprd/ghst).
## Two processes
Most of the work went into keeping the prompt responsive. Zsh's line editor, ZLE, is synchronous, so any call that waits on the network freezes the cursor for as long as it takes. That rules out calling an API from a widget. ghst splits in two instead: the widgets stay in zsh and do nothing but read and draw, and a Python asyncio daemon does the talking, with a Unix domain socket between them.
```
zsh (ZLE widgets) ←── Unix domain socket ──→ ghstd (Python asyncio daemon)
```
The shell connects once with `zsocket` and keeps the connection open. On the other side the daemon holds a connection pool, an LRU cache of responses, a circuit breaker for when the provider is down, and cancellation for requests that are already stale, so when you type another character before the last suggestion arrives, the pending call is dropped rather than drawn late over the wrong text.
Drawing the suggestion turned out to be its own problem. ZLE has a `POSTDISPLAY` variable meant for exactly this, but on zsh 5.9 on macOS it renders ANSI escapes as literal characters, so the dim styling came out as garbage after the cursor. ghst goes around ZLE and writes the escape codes straight to `/dev/tty`, using colors from the 256-color range. Colors 16 through 255 are fixed and terminal themes don't remap them, so the ghost text looks the same in iTerm, Ghostty and the stock Terminal, whatever palette is in use.
## Two kinds of prompt
Autocomplete and plain-English commands feel like one feature and turned out to need opposite prompts. Autocomplete is text continuation: the model sees `git ch` and its job is to produce `eckout main`. A plain-English command is instruction following: the model sees "list files larger than 10MB" and its job is `find . -size +10M`. ghst runs them on different models too, a small fast one such as `gpt-4o-mini` for the continuation that fires on every keystroke and a stronger one such as `gpt-4o` for commands and history search, where a second of latency is fine and a wrong answer is not.
```python
# FIM-style: "continue this text"
AUTOCOMPLETE_SYSTEM = """Continue the user's shell command from where it left off.
Return ONLY the continuation text, nothing else."""
# Instruction-following: "translate this request"
COMMAND_SYSTEM = """Convert the user's natural language description into a shell command.
Return ONLY the command, nothing else."""
```
Treating autocomplete as continuation also settled a question I had been handling badly, which is whether a suggestion should begin with a space. If you have typed `git ch` the answer is no, and if you have typed `git checkout` it is yes, and any rule I wrote for that had exceptions. Framed as continuation, the model produces the next characters of the text, spaces included, and the rule went away.
## Nothing runs on its own
ghst never executes a command. A plain-English request or a history match lands in your buffer as text, where you can read it and edit it, and it runs only when you press Enter; Ctrl+Z puts back whatever you had before. Commands like `rm -rf /` and `curl | sh` are flagged on the way through, before the request ever reaches the model.
Everything that leaves your machine is scrubbed first. Shell history and terminal output go through a redaction pass that strips API keys, tokens, passwords and anything else that looks like a credential before it is sent to the provider, and if you would rather not keep your own key in the config file, `GHST_API_KEY` in the environment works instead.
---
# Sketching with words
URL: https://mattlegrand.ai/work/draw-ai-canvas/
Published: 2025-10-29
Topics: AI, Design tools, Product design
> Teaching a drawing tool to think about space, hierarchy, and layout.
## I wasn't happy with existing drawing tools, so I made one myself
Digital whiteboarding and sketching tools are prominent in my workflow. It's the fastest way to explore and express ideas while generating artifacts that transmute easily into higher fidelity. But every time I sketch a user flow, I end up manually sketching out UI primitives that are purely placeholders. This repetitive process can be time-consuming and frustrating.
Tools like Excalidraw are great at what they do, but they have a "blank canvas" problem (literally). It's easy to get hung up on generating believable details in the midst of some higher-level design decisions.
So I built [draw.cafe](https://draw.cafe). It's a drawing tool that lets you describe what you want in plain English and generates a complete, editable layout on the canvas.
You can generate "fat-marker" wireframes, like a dashboard with KPI cards and a line chart, with natural language. The AI handles the placement and sizing, giving you a real starting point you can refine with [draw.cafe](https://draw.cafe)'s other drawing tools.
## Draw Cafe has AI that understands layouts
[Draw.cafe](https://draw.cafe) uses a semantic generation engine. Typing "create a dashboard with three KPI cards and a bar chart" generates the entire layout: properly sized cards, labeled axes, realistic data, appropriate spacing, and visual hierarchy. These are fully editable canvas elements; rectangles, text, lines, and so on, that you can move, resize, style, and refine just like you'd drawn them manually.
[Draw.cafe](https://draw.cafe) understands different interface patterns. For example: dashboards, mobile apps, data visualizations, org charts, timelines, flowcharts, wireframes. Each pattern has its own visual conventions, and the system applies them automatically. A mobile app gets navigation patterns and touch-friendly sizing. A scatter plot gets labeled axes, a legend, and proper margins. A timeline gets chronological flow and clear milestones. The engine uses a multi-stage pipeline that detects interface types, injects contextual guidance, enforces design principles, and validates output before it hits the canvas.
Examples of what draw.cafe can generate: Dashboards, charts, data visualizations with labeled axes and legends, wireframes for typical user interfaces, and more.
## Making language models understand visual design
Getting AI to generate useful layouts turned out to be the hardest part of this project. Language models are great at text, typically bad at spatial reasoning and visual hierarchy.
The canvas was purpose-built to mitigate this. It stores elements as `json` objects with properties like `type`, `position`, `size`, `color`, and `content`. This allows the system to reason about layout and style in a structured way.
```json
{
"elements": [
{
"id": "element_abc123",
"type": "rectangle",
"x": 100,
"y": 150,
"width": 200,
"height": 100,
"angle": 0,
"opacity": 1,
"style": {
"strokeColor": "#000000",
"backgroundColor": "#ffffff",
"fillStyle": "solid",
"strokeWidth": 2,
"strokeStyle": "solid",
"roughness": 1,
"opacity": 1
}
}
```
Asking [draw.cafe](https://draw.cafe) to draw a "dashboard with metrics" processes the prompt through a semantic generation pipeline. First, the user draws an area on the canvas where the dashboard will be placed. This opens the prompt input, so we start off with size & position data to accompany the desired wireframe. This actually informs layout and design decisions; draw.cafe will generate very different results for a dropdown-sized design area vs. a full-screen desktop area.
**Interface Type Detection**
Next, the system analyzes your request to identify what you're trying to create. "Dashboard with metrics" triggers different generation logic than "mobile app login screen" or "scatter plot showing sales data." The system recognizes distinct interface patterns, each with its own visual conventions.
**Contextual Prompt Enhancement**
[Draw.cafe](https://draw.cafe) injects specific guidance for the interface type. Data visualizations get instructions about chart areas, labeled axes, legends, grid lines, and margins. Mobile interfaces get guidance about navigation patterns, content hierarchy, and touch target sizing. Dashboards get rules about card layouts and KPI presentation.
A simple user request like "create a bar chart" becomes a detailed prompt that includes:
- Canvas dimensions and target area
- Chart-specific requirements (axes, labels, data points, legend)
- Design principles (spacing, hierarchy, balance)
- Suggested colors based on semantic meaning (e.g., red for danger, green for success)
- Instructions to use realistic content instead of "Lorem ipsum"
**Design Principle Enforcement**
Every prompt includes fundamental design principles: proper spacing, visual hierarchy, balanced layouts, and consistent color usage.
**Output Validation and Sanitization**
Language models are probabilistic. They hallucinate invalid colors, create elements outside canvas bounds, or generate overlapping shapes. The validation pipeline catches these issues:
- Schema validation ensures structural correctness
- Bounds checking keeps elements within canvas dimensions
- Minimum size enforcement prevents invisible elements
- Overlap detection identifies and adjusts problematic positioning
- Color validation ensures only valid hex codes
This multi-stage pipeline transforms raw LLM output into clean, usable layouts. The difference between "random shapes" and "useful starting point" is entirely in the prompt engineering.
## It's also a fantastic drawing tool
Generative wireframing is the headline feature, but [draw.cafe](https://draw.cafe) also includes a robust set of design tools. I've made opinionated choices about grouping and stacking behaviors, some informed by my own muscle memory with other design tools.
It's designed for speed and efficiency; in particular, batch changes for color and text properties.
Select any content and right click to batch-convert colors with the color wheel.
### Draw Cafe performs well even with large canvases
Here's how Draw stays responsive:
- **Spatial Indexing** Fast element lookup using spatial data structures instead of linear search. When you click on the canvas, the system doesn't check every element---it only checks elements in that spatial region.
- **Update Throttling** React re-renders throttled to 60fps during rapid interactions like dragging. No excessive re-renders, no janky performance.
- **Lazy Loading** On-demand component loading reduces initial bundle size. You don't load the AI generation code until you actually use the AI tool.
- **Edge Runtime Optimization** API routes optimized for Vercel Edge runtime minimize latency. Faster responses, better user experience.
- **Memoization** Unchanged elements don't re-render. Only the elements you're actively manipulating get updated.
Result: smooth interactions even with complex canvases containing hundreds of elements.
## What's next
- **Multi-Pass Generation** Right now, generation is single-shot: one prompt, one response. Staged generation with content analysis → layout planning → element generation could improve quality through iterative refinement.
- **Design System Integration** Incorporating formal design systems with grid constraints, typography scales, and spacing rules would improve consistency and professional quality. Think Tailwind-style constraints baked into the generation logic.
- **Real-Time Collaboration** Multiple simultaneous editors, Figma-style. The infrastructure is there (PostgreSQL, auto-save), just needs WebSocket coordination.
## Why this matters
I built [draw.cafe](https://draw.cafe) because I wanted to skip the tedious parts of layout creation. It's a tool that combines AI generation with traditional design tools in a way that actually saves me time. It also demonstrates that language models can perform acceptably well in spatial relationships and visual hierarchy when given a robust prompt design and information in a structured format.
GenAI doesn't need to be perfect to be useful. It just needs to be good enough to save time. I typically generate 80% of a drawing automatically, then refine the remaining 20% manually. This is the sweet spot for AI-powered creative tools.
---
# An agent that actually understands your codebase
URL: https://mattlegrand.ai/work/augment-agent/
Published: 2025-04-02
Topics: AI, AI agents, Developer tools, Product design, Code intelligence
> How we solved the context problem that makes most AI coding assistants useless in real codebases, creating an agent that can work with 100k+ file repositories.
## Most AI coding assistants break down in real codebases.
If you've tried using AI coding assistants on anything larger than a toy project, you've probably hit the same wall we did: they work great for isolated functions but fall apart when they need to understand how your actual codebase fits together.
The problem isn't the underlying AI models; it's context. When an AI assistant only sees a few lines around your cursor, it can't understand the broader architecture, existing patterns, or how changes in one file might affect dozens of others. You end up with suggestions that look reasonable in isolation but break when integrated into your real system.
After watching developers struggle with this limitation across codebases ranging from startup MVPs to enterprise monorepos with 100k+ files, we built Augment Agent to solve the context problem from the ground up.
Augment Agent can one-shot tickets from Github or Linear. In this demo, the Agent is asked to solve a feature request from an open source repo. Augment's Context Engine allows it to gain more relevant understanding of the existing codebase in relation to the task.
## The context capacity problem
Other AI coding tools are limited by their context windows, typically 8K to 32K tokens. That sounds like a lot until you realize it's maybe 20-30 files worth of code. In a real codebase, understanding how to implement a feature often requires context from:
- The existing API patterns and data models
- How similar features were implemented elsewhere
- The testing patterns and infrastructure setup
- Configuration files and environment variables
- Documentation and architectural decisions
## Context Engine: Beyond simple file search
Our Context Engine doesn't just search for keywords, it understands semantic relationships between code concepts. When you ask it to implement a new API endpoint, it automatically pulls in:
The engine maintains a real-time index of your codebase, tracking not just what code exists but how different pieces relate to each other. This means when you're working on authentication, it knows to surface your existing auth patterns, middleware, and related tests, even if they're scattered across dozens of files.
### Memories: Learning your patterns over time
Beyond just understanding your current codebase, Augment Agent learns and remembers your coding patterns, preferences, and project-specific conventions. These **Memories** persist across conversations and continuously improve the quality of generated code.
The Agent learns this pattern and automatically applies it to new code, maintaining consistency across your entire codebase without you having to specify it every time.
### Native tool integrations
Most AI assistants live in isolation within your code editor. But real development work spans multiple tools, including GitHub for code review, Linear for issue tracking, Notion for documentation, Slack for team communication.
We built native integrations for the tools developers actually use:
- **GitHub**: Understands your PR patterns, issue history, and repository structure
- **Linear**: Connects tasks to code changes and understands project context
- **Notion**: Pulls in relevant documentation and architectural decisions
- **Jira**: Links development work to business requirements
- **Confluence**: Accesses team knowledge and process documentation
These aren't just API connections, they're deep integrations that understand the relationships between your code and your broader development workflow.
### Model Context Protocol
We've fully embraced the **Model Context Protocol (MCP)**, an emerging standard for connecting AI systems to external tools and data sources. This means Augment Agent can connect to virtually any system in your development stack.
Early adopters are already using MCP connections to:
- Debug production issues by connecting to monitoring tools like Datadog
- Automate deployment workflows through Vercel and Cloudflare integrations
- Access internal documentation and knowledge bases
- Connect to custom internal tools and APIs
MCP is still evolving, but we're committed to contributing to the standard and ensuring Augment Agent works seamlessly with the entire ecosystem of development tools.
## Real-world testing in production codebases
We didn't build Augment Agent in isolation. Throughout development, we worked with teams managing everything from early-stage startups to enterprise monorepos with hundreds of thousands of files.
The feedback was consistent: context is everything. Teams reported that Augment Agent was the first AI tool that could actually understand their existing architecture well enough to suggest meaningful improvements and implement complex features that span multiple systems.
## What's next for AI-powered development
Augment Agent represents our first step toward AI that truly understands software development as a collaborative, context-rich process. We're already working on capabilities that will further bridge the gap between AI assistance and human expertise.
The future of development isn't about replacing developers; it's about amplifying human creativity and problem-solving by removing the friction of context switching and repetitive implementation work.
## Press & Links
- [Augment Code](https://www.augmentcode.com/)
- [Augment — Meet Augment Agent](https://www.augmentcode.com/blog/meet-augment-agent)
---
# Predicting your next edit
URL: https://mattlegrand.ai/work/next-edit/
Published: 2025-02-19
Topics: AI, Developer tools, Code intelligence
> Next Edit extends code completions beyond the cursor across your workspace, suggesting comprehensive edits to complete tasks quickly.
## Introducing Next Edit: AI that understands the ripple effect of code changes
Next Edit extends code completions beyond the cursor and across your entire workspace. It understands what you're trying to accomplish and works in the background to suggest edits that help you complete your tasks more quickly and comprehensively.
### The tedious game of find-and-replace
Every software engineer knows the pain: you update a field in one file, and now you're hunting through the codebase updating SQL queries, tests, and type definitions to match. What should be a simple change becomes a tedious game of find-and-replace.
Next Edit is our solution to this problem. It extends code beyond the cursor by understanding the ripple effects of your changes and automatically suggesting updates across your entire workspace. While you code, it's scanning your codebase, identifying dependent files, and generating contextual suggestions that keep your code in sync.
Next Edit is available to everyone using Visual Studio Code.
## A motivating example: Adding a new field
Imagine you're adding a new `session_id` field to an existing data class in your codebase. Traditionally, this would involve several manual steps:
1. **Updating the Data Class**: First, you'll need to add the new `session_id` field to your data class, placing it next to the existing `request_id` field.
2. **Propagating Changes**: Then, you'll need to update all direct usages of that data class throughout your codebase. This includes modifying function calls, adjusting method signatures, and updating any place where the data class is instantiated or manipulated.
3. **Updating Related Components**: Beyond direct usages, you also need to modify relevant SQL queries, update protobuf messages, and adjust other related classes to incorporate the new `session_id` logic.
With Next Edit, as soon as you make the initial change to add the `session_id` field, Augment detects your intent and begins to suggest the necessary changes across your entire codebase.
### Identifying and updating dependencies
Once you introduce the `session_id` field, Next Edit systematically analyzes your codebase to ensure consistency across all relevant areas:
- **Direct Usages**: It identifies all the places where the data class is used and suggests edits to include the new `session_id` field.
- **SQL Queries**: It locates relevant SQL queries that need updating and provides suggested edits.
- **Related Classes**: It recognizes other classes and components that should incorporate the `session_id` logic, suggesting modifications to ensure consistency.
### Ensuring test coverage
To maintain correctness and prevent regressions, Next Edit also updates relevant tests and protobuf usages, ensuring they align with the new `session_id` field.
### Beyond refactoring: Supporting iterative development
In addition to refactoring, we've also found this feature to be incredibly helpful for developing new code, as you iterate over different draft versions. Whether you're adjusting a function signature, renaming a variable, or refining logic, Next Edit automatically kicks in to update relevant parts of your codebase.
This allows you to focus on problem-solving rather than tedious updates—so your workflow matches the speed of your thinking, not just your typing.
### How Next Edit is different
While Augment Next Edit and other features like Cursor Tab or GitHub Copilot Next Edit Suggestions all propose changes beyond the cursor, Next Edit stands out in a few key ways:
- It relies on a **specially trained location model** and draws from your recent editing history to offer relevant suggestions—even in large files or across multiple files.
- By contrast, other tools often require manually positioning the cursor to trigger edits.
- Next Edit also leverages Augment's incredible **codebase retrieval**, delivering more accurate and context-aware edits overall.
#### Example: Augment Next Edit vs. Cursor Tab
**Augment Next Edit**: Once `session_id` is added as a field in `EditDatum`, Next Edit finds and fixes all the changes in `edit_dataset.py` without the user needing to move their cursor to each relevant area!
**Cursor Tab**: Needs a lot more intervention to make the changes in `edit_dataset.py` and the user has to move their cursor to relevant parts of the code to get suggestions.
## What's next: Further opportunities to improve Next Edit
While we're excited about what we've achieved with Next Edit, we're committed to continuous improvement. Here's what's next:
### Automating larger commits and PRs
We're working on scaling up Next Edit to handle more substantial changes:
- **From Small Commits to Big PRs**: Enhancing the model's ability to understand broader contexts and dependencies will allow it to assist with larger pull requests and significant refactoring tasks.
- **Understanding Complex Dependencies**: Improving the model's capability to comprehend and navigate complex code dependencies across multiple files and modules.
- **Bulk Edit Support**: Enabling the feature to suggest and apply changes across many files simultaneously and consistently, reducing the time spent on repetitive tasks.
### Better integration with other features like Chat
Integrating Next Edit with our chat functionality opens up new possibilities:
- **Enhanced Contextual Understanding**: Chat can provide additional context to make next edit suggestions more precise, especially when multiple potential edits are possible.
- **Interactive Problem Solving**: Developers can use chat to ask for explanations, request alternative solutions, or clarify the intent behind suggestions.
- **Cohesive Development Environment**: Combining these features creates a more intelligent and supportive environment, further reducing friction and enhancing productivity.
Building Next Edit was a challenging but rewarding journey. We tackled complex AI problems to create a feature that understands your intent, knows where to apply changes, and executes those changes accurately and efficiently.
By leveraging our advanced retrieval infrastructure, novel modeling techniques, and a deep understanding of developer workflows, we've created a tool that keeps you in the flow, reduces manual toil, and accelerates your coding process.
## Press & Links
- [Augment Code](https://www.augmentcode.com/)
- [Introducing Next Edit for VS Code](https://www.augmentcode.com/blog/introducing-next-edit-for-vscode)
- [The AI Research Behind Next Edit](https://www.augmentcode.com/blog/the-ai-research-behind-next-edit)
- [Augment's Real-Time Codebase Index](https://www.augmentcode.com/blog/a-real-time-index-for-your-codebase-secure-personal-scalable)
---
# Building a context engine for real codebases
URL: https://mattlegrand.ai/work/augment/
Published: 2024-10-15
Topics: AI, Developer tools, Product design, Code intelligence
> How we built Augment's Context Engine to solve why AI coding assistants fail: understanding what matters in 100k+ file repositories.
## Every AI coding assistant uses the same foundation models. Context is what separates the useful from the useless.
If you've used AI coding tools on anything beyond toy projects, you've probably experienced the same frustration: they work brilliantly on isolated functions but completely fall apart when they need to understand how your actual system fits together. The AI suggests changes that look reasonable in isolation but break when integrated into your real codebase.
The problem isn't the underlying models from OpenAI, Anthropic, or Google. It's context. When an AI only sees a few dozen lines around your cursor, it can't understand your architecture, existing patterns, or how changes ripple through your system. You end up constantly re-explaining your codebase, manually finding relevant files, and fixing suggestions that ignore critical dependencies.
At Augment, we set out to solve this from first principles: what would it take to build an AI that truly understands large, complex codebases?
## The grep problem: Why most agents fail on real tasks
Most AI coding tools rely on basic keyword search, which is essentially grep with better UX. When you ask them to implement a feature, they search for relevant-looking file names and function names, dump whatever they find into the context window, and hope for the best.
This approach has fundamental limitations:
**They don't know what they don't know.** Grep can only find exact matches. It misses semantic relationships, architectural patterns, and implicit dependencies. If your authentication logic is in a file called `security.ts` but the AI searches for "auth," it won't find it.
**They confuse proximity with relevance.** Finding files that mention "payment" doesn't mean you've found the right payment logic. Large codebases often have multiple payment implementations, legacy code, test fixtures, and documentation that all match the same keywords.
**They can't see patterns across the codebase.** Understanding how your team handles error logging, database transactions, or API versioning requires analyzing dozens or hundreds of files to extract the common patterns. Grep gives you individual matches, not the bigger picture.
The result? AI agents that start strong but degrade quickly. They make changes that work in isolation but break integration tests. They reinvent patterns that already exist elsewhere in your codebase. They require constant hand-holding and re-explanation.
Augment's Context Engine maintains a real-time semantic index of your entire codebase, understanding not just what code exists but how different pieces relate to each other. When you ask it to implement a feature, it automatically surfaces the relevant architecture, patterns, and dependencies.
## Building a semantic understanding of code
We built Augment's Context Engine as a specialized search system for code. Not keyword matching, but semantic understanding of how software systems are structured and how they evolve.
### Real-time indexing across your entire stack
The Context Engine maintains a live index of your codebase, tracking not just file contents but the relationships between different pieces of code. When you're working on authentication, it knows to surface:
- Your existing auth middleware and how it's configured
- Similar authentication patterns used elsewhere in the codebase
- Related tests and how they're structured
- Configuration files and environment variables that affect auth
- Recent changes to authentication logic and why they were made
This isn't magic. It's a purpose-built indexing system that understands code structure. We parse your codebase to build a graph of dependencies, analyze commit history to understand evolution, and use embeddings to capture semantic relationships that go beyond syntax.
### Understanding patterns, not just files
When you ask Augment to "add logging to payment requests," it doesn't just search for files containing "payment" and "logging." It maps the entire request path:
1. The React component that initiates the payment
2. The API endpoint that receives the request
3. The payment service that processes it
4. The database transactions involved
5. The webhook handlers that confirm completion
Then it analyzes how your team already handles logging in similar flows. Does your team use structured logging? What log levels do you use for different scenarios? How do you handle sensitive data in logs? The Context Engine extracts these patterns and applies them consistently.
## Beyond the repository: Understanding your team's reality
Code doesn't exist in isolation. Real software development involves commit history, issue trackers, documentation, design decisions, and tribal knowledge that never gets written down. We built the Context Engine to understand all of it.
### Commit history: Why changes were made
Looking at your Git history, the Context Engine learns not just what changed but why. When someone refactored the authentication system six months ago, that context matters. When a particular pattern was introduced to fix a production bug, that's valuable information.
This historical understanding prevents the AI from suggesting changes that repeat past mistakes or undo carefully considered decisions.
### Codebase patterns: How your team actually builds
Every team has conventions that go beyond the style guide. Maybe you always wrap database calls in a specific error handling pattern. Maybe you have a particular way of structuring API responses. Maybe you use feature flags in a specific way.
The Context Engine learns these patterns by analyzing your existing code. It doesn't impose generic "best practices." It learns how your team actually builds and maintains consistency with those patterns.
### External sources: Docs, tickets, and design decisions
Through native integrations with GitHub, Linear, Jira, Notion, and Confluence, the Context Engine pulls in context from across your development workflow. When you're working on a feature, it can reference:
- The original ticket that describes the requirements
- Design documents that explain the architecture
- Previous discussions about implementation approaches
- Related issues and how they were resolved
We also support the Model Context Protocol (MCP), an emerging standard for connecting AI systems to external tools. This means Augment can connect to virtually any system in your development stack, including monitoring tools, deployment platforms, internal documentation, and custom APIs.
### Tribal knowledge: What never gets written down
Some of the most valuable context never makes it into documentation. Edge cases discovered through painful debugging sessions. Performance gotchas that everyone on the team knows about. Subtle interactions between different parts of the system.
The Context Engine discovers this tribal knowledge through deep codebase analysis. It finds the patterns in how your team handles edge cases, the defensive checks that appear in critical paths, the comments that explain non-obvious decisions.
## The Infinite Context Window: Signal over noise
Having access to your entire codebase doesn't mean dumping everything into the AI's context window. That would be overwhelming and counterproductive. The Context Engine's job is to find exactly what matters for your specific request.
### Intelligent retrieval and ranking
When you ask Augment to implement a feature, the Context Engine:
1. **Retrieves relevant context** using semantic search, not just keyword matching
2. **Ranks by relevance** based on how closely each piece of code relates to your request
3. **Compresses without losing information** by extracting the essential patterns and relationships
4. **Respects access permissions** ensuring the AI only sees code you have access to
The result is what we call the Infinite Context Window. From the user's perspective, it feels like the AI has perfect knowledge of your entire codebase. In reality, it's seeing a carefully curated subset, but it's the right subset.
### Proof in production: The Elasticsearch study
We validated the Context Engine's effectiveness through a blind study comparing AI-generated pull requests to human-written code. We used the Elasticsearch repository (3.6 million lines of Java from 2,187 contributors) as our test case.
We generated 500 pull requests using Augment and compared them to merged code written by humans. The results: Augment's pull requests matched or exceeded human code quality, significantly outperforming other AI coding tools.
The difference wasn't the foundation model. It was context. Augment understood the Elasticsearch codebase well enough to write code that fit naturally into the existing architecture, followed established patterns, and handled edge cases appropriately.
Blind-study scores for 500 AI-generated Elasticsearch pull requests, judged against merged human code. Bars to the right of the rule beat the human baseline.
## Press & Links
- [Augment Code](https://www.augmentcode.com/)
- [Augment: Introducing the Context Engine](https://www.augmentcode.com/blog/context-engine)
- [Augment raises $252M to build AI that understands your codebase](https://techcrunch.com/2024/08/07/augment-raises-252m-to-build-ai-coding-assistant/)
---
# Real-time collaboration tools for software teams
URL: https://mattlegrand.ai/work/replit-teams/
Published: 2024-07-20
Topics: AI, Developer tools, Product design, Collaboration
> Collaborative tools that bring the natural feel of Google Docs and Figma to software development for teams building in real time.
## Replit Teams
Real-time collaboration tools like Google Docs and Figma feel natural. Software development tools don't. Replit Teams enables users to collaborate and ship from a shared environment, with both real-time and asynchronous options.
Teams is a suite of tools, entirely in the browser, to help enterprises and startups ship faster from idea to production.
To enable this, we built several fundamental product architectures: version control, preview deployments, role-based access control, and multiplayer AI.
Overview demo of Replit Teams features, demonstrating remote collaboration, product iteration with natural language, version control, and deployment.
## The challenge: Making collaborative coding feel as natural as Google Docs
Traditional software development workflows weren't designed for real-time collaboration. Git-based version control requires constant context switching between local environments, branches, and pull requests. Team members work in isolation until they're ready to merge, creating friction and slowing down iteration.
Replit Teams reimagines this workflow. Instead of each developer maintaining their own local environment with its own dependencies and configurations, teams work from a shared, cloud-based workspace. This eliminates the infamous "works on my machine" problem and enables true multiplayer development.
## Version control that works with real-time collaboration
We built a version control system that complements git rather than replacing it. Teams can use traditional git workflows if they prefer, but Replit Projects provides a native alternative optimized for browser-based collaboration.
With Replit Projects, team members can fork a main Repl, work on features in isolation, and merge changes back when ready. The Project dashboard provides visibility into all ongoing work, showing who's working on what and how their changes differ from the main branch.
This trunk-based workflow feels native to Replit's real-time model. Code reviews happen faster because reviewers can jump directly into a live environment, test changes immediately, and even pair program with the author to refine the implementation.
## Role-based access control for enterprise security
Enterprise teams need granular control over who can access what. We implemented role-based access control that lets organizations define custom permissions for different team members.
Administrators can control access at the project level, managing who can view, edit, or deploy specific Repls. This enterprise-grade security makes Replit Teams viable for companies with strict compliance requirements while maintaining the fluid collaboration experience that makes Replit unique.
## Multiplayer AI: Shared context for AI-powered development
When multiple developers work together, the AI assistant should understand the entire team's context, not just one person's view. Multiplayer AI in Replit Teams enables the whole team to interact with the same AI agent, which maintains awareness of the project's full history and all contributors' work.
This shared AI context means team members can pick up where others left off without re-explaining the project's architecture or goals. The AI learns from the team's collective interactions, becoming more effective over time at understanding the project's specific patterns and conventions.
## Preview deployments for rapid iteration
Every change deserves to be seen in production-like conditions. Replit Teams includes automatic preview deployments, so team members can instantly share working versions of their changes without affecting the main deployment.
This capability transforms how teams gather feedback and validate ideas. Designers can review UI changes in a live environment. Product managers can test new features before they reach production. Stakeholders can interact with work-in-progress implementations to provide early input.
## The impact: Shipping faster from idea to production
By removing the friction from collaborative development, Replit Teams enables organizations to move faster. Features that would take days to review and deploy in traditional workflows can ship in hours. Teams spend less time managing environments and merge conflicts, and more time building.
For startups, this velocity is transformative. Small teams can compete with larger organizations by leveraging multiplayer development to maintain momentum. For enterprises, Replit Teams provides a modern development experience while maintaining the security and access controls required for regulated industries.
---
# Tools for the next generation of software developers
URL: https://mattlegrand.ai/work/replit/
Published: 2024-07-16
Topics: AI, Developer tools, Product design, Collaboration
> Today, comparatively few people build software the rest of the world uses.
## The software bottleneck
Today, comparatively few people build software the rest of the world uses. While [demand for software development](https://bucket.legrand.design/Supply_and_demand_for_software_developer.pdf)[^1] and transformation of every economy sector by [software increases exponentially](https://a16z.com/why-software-is-eating-the-world/)[^2], the number of people who can build, deploy, and maintain software remains low. Software engineers are now the greatest chokepoint for growth.
Most of these people are concentrated into a few [specific demographics](https://www.zippia.com/software-engineer-jobs/demographics/)[^3], meaning all the world's software is conceived, built, and delivered by a small cadre geographically, culturally, and financially detached from the billions who rely on their choices. This broadens the technology gap for [anyone who doesn't belong to these demographics](https://medium.com/hh-design/the-world-is-designed-for-men-d06640654491)[^4], or can't make [unilateral digital tool architectures](https://bucket.legrand.design/applsci-12-04902.pdf)[^5] function for their purposes.
This gap is Replit's opportunity.
[^1]: Ronald Fernandes, Ashish Arora, and Jai Asundi, "[Supply and Demand for Software Developers in India](https://bucket.legrand.design/Supply_and_demand_for_software_developer.pdf)," H. John Heinz III School of Public Policy & Management, Carnegie Mellon University
[^2]: Marc Andreessen, "[Why Software Is Eating the World](https://a16z.com/why-software-is-eating-the-world/)," Andreessen Horowitz, August 20, 2011
[^3]: "[Software Engineer Demographics and Statistics [2025]](https://www.zippia.com/software-engineer-jobs/demographics/)," Zippia, updated January 8, 2025
[^4]: Kat Ely, "[The World Is Designed for Men](https://medium.com/hh-design/the-world-is-designed-for-men-d06640654491)," HH Design (Medium), September 8, 2015
[^5]: [Unilateral Digital Tool Architectures](https://bucket.legrand.design/applsci-12-04902.pdf), Applied Sciences
## The next billion developers
Replit jailbreaks software development. There are roughly [30 million software developers in the world](https://www.statista.com/statistics/627312/worldwide-developer-population/)[^6]. Replit's mission is to unlock the next billion via a new class of software creator: [citizen developers](https://www.gartner.com/en/information-technology/glossary/citizen-developer)[^7].
Replit is an online IDE that lets you write, run, and share code directly from your browser. It supports multiple programming languages, templating and configuration tools, and AI developer intelligence.
Projects that would have been impossible a few years ago can now launch in minutes. High barriers to adopting new languages or technology stacks have deterred even experienced engineers from pursuing new ideas. Replit changes that by enabling developers to build and deploy faster, spending more time in a [state of flow](https://bucket.legrand.design/flow.pdf)[^8].
[^6]: Lionel Sujay Vailshery, "[Developers population worldwide 2018-2024](https://www.statista.com/statistics/627312/worldwide-developer-population/)," Statista, August 21, 2023 (updated November 26, 2024)
[^7]: "[Citizen Developer](https://www.gartner.com/en/information-technology/glossary/citizen-developer)," Gartner IT Glossary
[^8]: Saima Ritonummi, Valtteri Siitonen, Markus Salo, Henri Pirkkalainen, and Anu Sivunen, "[Flow Experience in Software Engineering](https://bucket.legrand.design/flow.pdf)," Proceedings of the 31st ACM Joint European Software Engineering Conference and Symposium on the Foundations of Software Engineering (ESEC/FSE '23), December 3--9, 2023
## Core workspace and AI tooling
I worked across two domains at Replit: the core workspace and Replit AI.
The workspace contains tools to build, deploy, and manage projects: Deployments, Authentication, Secrets, and databases. I designed and developed new workspace tools like Dependencies, which simplifies project configuration with Nix OS and automates detection and installation of binaries, runtimes, and language servers for Node.js, Python, and Go.
Replit AI provides developer intelligence and pair programming capabilities. I created ways to interact with AI in the workspace using code intelligence, retrieval augmentation, and agentic workflows across codebases.
## Replit Teams
Real-time collaboration tools like Google Docs and Figma feel natural. Software development tools don't. Replit Teams enables users to collaborate and ship from a shared environment, with both real-time and asynchronous options.
Teams is a suite of tools, entirely in the browser, to help enterprises and startups ship faster from idea to production.
To enable this, we built several fundamental product architectures: version control, preview deployments, role-based access control, and multiplayer AI.
Overview demo of Replit Teams features, demonstrating remote collaboration, product iteration with natural language, version control, and deployment.
## Replit Projects
A Project is a set of connected, forkable Repls in a Team space. Users can fork a Repl to work on a feature in isolation, then merge changes back to the main Repl when ready, mirroring trunk-based workflows.
Since building on Replit is fundamentally different than local-first development, Project version control exists alongside traditional git. Developers of all experience levels can collaborate with the toolchain of their choice. Replit users can view all ongoing development in one place using the Project tool.
There have been no major shakeups in the software engineering workflow since git. With Replit's realtime collaboration, we saw an opportunity to change this.
The challenge: create better version control without reinventing git. Replit users can collaborate live within a Repl, which isn't possible in local-first development. This changes code review etiquette. Typically, reviewers make changes in their own branches rather than live-editing. But when collaboration happens live in the same environment, code review can be dramatically faster.
We developed version control that felt native to Replit's real-time model while adopting practices like trunk-based development and stacking, all while maintaining compatibility with developers using their own IDEs and git tools.
Every Project has a main Repl as the source of truth. In this example, `AnvilWebServer` is the main Repl. Each team member has their own fork, like `MattLegrand-07-03`. Users begin by forking any Repl in the organization and are prompted to convert it into a Project.
Choosing "Fork & start a Project" converts the Repl into the main Repl and moves the user to a new fork. The Project tool opens and shows no changes from main yet. Modifications to the fork are reflected in the Project tool.
## Replit AI
Replit AI provides developer intelligence and pair programming capabilities. I created ways to interact with AI in the workspace using code intelligence, retrieval augmentation, and agentic workflows.
### Building a design system for AI tools
Previously, Replit AI was a simple chatbot and inline editing tool called Ghostwriter. We wanted tools that could interact with the workspace. The most common AI chat workflow requires copying and pasting code into the editor. We wanted Replit AI to have workspace awareness: inline edits, multiturn instruction, visibility of Shell and Deployments.
We developed a design system for Replit AI supporting threaded history, codeblocks and snippets from Shell and Deployment logs, error diagnosis, and command execution.
A few examples of the Replit AI chat tool, demonstrating threaded history, connected code, inline function calling to the workspace, actions, and context management tools.
### Defining hierarchies for context
Code Intelligence is the ability of an AI to understand and answer questions about a codebase. We ask language models: "What is `this`?" or "What does `this` do?" One of the more challenging aspects is defining what `this` represents. It could be the current file, a folder, the entire project, or external documentation.
"Context" is how the scope of a prompt is managed. Techniques for delivering context involve inferring or letting the user define segments of text based on desired scopes. These segments can be gathered through late retrieval or dumped to the model as a pre-prompt.
While we can infer some contexts automatically, I wanted to define a clear rubric for categorizing context types and create easy access points for users to manage them.
I chose `@` for nouns and `/` for actions as primary keyboard triggers. `@` appends a single context item. `/` describes a task like "explain" or "modify". These combine into expressions that define scope and intent.
### Assemble & Run Jobs
Early agentic workflow experiments included generative UI in the Replit AI chat. By stringing together prompts and interpreting returned lists as UI rather than raw text, we presented recommendations as tasks users could perform in sequence.
Prototype of Replit AI using new foundational archetypes: Assemble Jobs and Inline Generation.
By transforming language model generations into structured data, the tool concatenates and performs transformations sequentially.
These primitives became the precursors to Replit Agent. Once we could expose workspace functions to AI, the next step was building a fully autonomous development system.
## Figma-to-Replit plugin
Replit Labs is a space for creative hacker projects and experiments. As a Hack Week project, Devin and I built the Figma-to-Replit plugin and released it to the community.
After selecting a frame in Figma, the plugin generates a React project and opens a new repl. The project can be built and deployed in seconds. The goal: streamline the process from designing in Figma to prototyping with code, generating visually accurate, responsive code from designs.
Live demo of the Replit Figma plugin used to export a "Twitter clone" design from Figma, leveraging component and auto layout features to prescribe component structure and responsive layout properties.
Unlike tools that provide simple HTML approximation with inline styles, the export is high-quality and well-organized. Figma components become React components; styles are built and compiled using Lightning CSS. For most web projects, this is a valuable starting point that saves significant frontend work.
Generate a Repl directly from your Figma design and instantly share a static React site. Use Replit AI to add functionality and tweak your design before deploying to production.
### Debut
We showcased the plugin in a live demo at a [prototyping workshop at the a16z SF office](https://lu.ma/prototyping-replit). It hit top 10 among Figma's trending plugins.
Figma-to-Replit was one of the first plugins to support Dev Mode and was featured in [Figma's blog post on Dev Mode plugins](https://www.figma.com/blog/figma-dev-mode-codegen-plugins/#turn-designs-into-react-components-with-replit) that generate code. We leverage Dev Mode to inspect frames, preview project structure, debug responsivity, and include or exclude files and assets.
[Install it here](https://figma.li/replit).
## Press & Links
- [Replit — Replit to Figma: Experiment with Replit's Figma Plugin](https://blog.replit.com/figma-to-replit)
- [Codegen Plugins (And Other Tips) for Automating Design to Code | Figma Blog](https://www.figma.com/blog/figma-dev-mode-codegen-plugins/)
- [Replit launches new product in race for AI coding assistants](https://www.semafor.com/article/04/02/2024/replit-launches-new-product-in-race-for-ai-coding-assistants)
- [Replit — Raising $97.4M at $1.16B Valuation](https://blog.replit.com/b-extension)
- [Startup Replit launches a ChatGPT-like bot for coders](https://www.semafor.com/article/02/15/2023/startup-replit-launches-a-chatgpt-like-bot-for-coders)
- [Vibe Coding Tool Replit Doubles In Valuation To $3 Billion](https://www.forbes.com/sites/iainmartin/2025/07/30/vibe-coding-tool-replit-doubles-in-valuation-to-3-billion/)
- [Replit — Introducing Replit Teams](https://blog.replit.com/teams)
- [Replit — Introducing Replit Projects](https://blog.replit.com/introducing-replit-projects)
- [Replit — Introducing Multiplayer AI Chat](https://blog.replit.com/multiplayer-ai)
---
# Idea to app, fast
URL: https://mattlegrand.ai/work/replit-agent/
Published: 2024-07-16
Topics: AI, AI agents, Developer tools, Product design, Collaboration, No-code
> Replit Agent is an AI system that can create and deploy applications from idea to deployment in just minutes, revolutionizing how developers build software.
## From Idea to Deployment in Minutes
Replit Agent is an AI system that can create and deploy applications with just a few sentences and a few minutes of time. It represents a fundamental shift in how software is built, making the journey from concept to live application faster and more accessible than ever before.
You can think about the Agent like a pair programmer that works at superhuman speed. It configures your development environment, installs dependencies, and executes code. Whether you're working from your laptop or the Replit mobile app, the Agent is changing how developers build software.
## The Power of AI-Driven Development
Replit Agent builds on the foundation of Replit AI, which provides developer intelligence and pair programming capabilities, enabling developers to build and deploy faster through powerful workspace interactions and code intelligence powered by retrieval augmentation and agentic workflows across codebases.
The Agent starts by generating a plan from your app description. Once approved, it enters an execution loop: reading the environment, deciding the next action, and executing it — whether that's writing code, configuring tools, or asking for input. Throughout the process, it collaboratively checks in with you to ensure alignment.
The Agent represents the evolution of these AI capabilities into a fully autonomous development system. Unlike traditional AI coding assistants that require constant guidance, Replit Agent can take high-level instructions and execute complete development workflows independently.
## Building on Replit's AI Foundation
The Agent leverages robust AI infrastructure, including foundational capabilities that enable the Agent to work effectively across different programming languages and project types while maintaining awareness of the broader development context:
- **Context Management**: Sophisticated systems for understanding project scope and user intent through `@` mentions for nouns and `/` commands for actions
- **Workspace Integration**: Deep integration with Replit's development environment, including the ability to interact with Shell, Deployments, and other workspace tools
- **Code Intelligence**: Advanced understanding of existing codebases through retrieval augmentation and semantic analysis
## The Future of Software Development
Replit Agent represents a significant step toward democratizing software development. By removing traditional barriers to entry, it enables a new class of citizen developers to build and deploy applications that solve real problems.
The Agent is currently available in early access to all Replit Core subscribers. While it should be treated as "alpha" software, early users are already seeing significant benefits regardless of their technical experience level.
This technology builds on years of research and development in AI-powered development tools, representing the culmination of efforts to make software development more accessible, collaborative, and efficient.
## Looking Forward
Replit Agent marks a pivotal moment in software development history. By combining the accessibility of natural language instructions with the power of automated development workflows, it opens up software creation to a much broader audience while maintaining the sophistication needed for real-world applications.
The future of software development is becoming more collaborative, more accessible, and more focused on solving problems rather than wrestling with technical implementation details. Replit Agent is leading this transformation.
## Press & Links
- [Introducing Replit Agent](https://blog.replit.com/introducing-replit-agent)
- [Replit Agent v2 in Early Access](https://blog.replit.com/agent-v2)
- [Inc.: After Partnering With Anthropic, Replit Has Grown Revenue by 10x](https://www.inc.com/ben-sherry/after-partnering-with-anthropic-replit-has-grown-revenue-by-10x/91147509)
---
# AI-powered development tools for modern workspaces
URL: https://mattlegrand.ai/work/replit-ai/
Published: 2024-05-20
Topics: AI, Developer tools, Product design, Design systems
> Designing workspace-aware AI that understands your codebase through context hierarchies, inline edits, and agentic workflows
## Replit AI
Replit AI provides developer intelligence and pair programming capabilities. I created ways to interact with AI in the workspace using code intelligence, retrieval augmentation, and agentic workflows.
A few examples of the Replit AI chat tool, demonstrating threaded history, connected code, inline function calling to the workspace, actions, and context management tools.
### Building a design system for AI tools
Previously, Replit AI was a simple chatbot and inline editing tool called Ghostwriter. We wanted tools that could interact with the workspace. The most common AI chat workflow requires copying and pasting code into the editor. We wanted Replit AI to have workspace awareness: inline edits, multiturn instruction, visibility of Shell and Deployments.
We developed a design system for Replit AI supporting threaded history, codeblocks and snippets from Shell and Deployment logs, error diagnosis, and command execution.
### Defining hierarchies for context
Code Intelligence is the ability of an AI to understand and answer questions about a codebase. We ask language models: "What is `this`?" or "What does `this` do?" One of the more challenging aspects is defining what `this` represents. It could be the current file, a folder, the entire project, or external documentation.
"Context" is how the scope of a prompt is managed. Techniques for delivering context involve inferring or letting the user define segments of text based on desired scopes. These segments can be gathered through late retrieval or dumped to the model as a pre-prompt.
While we can infer some contexts automatically, I wanted to define a clear rubric for categorizing context types and create easy access points for users to manage them.
I chose `@` for nouns and `/` for actions as primary keyboard triggers. `@` appends a single context item. `/` describes a task like "explain" or "modify". These combine into expressions that define scope and intent.
### Assemble & Run Jobs
Early agentic workflow experiments included generative UI in the Replit AI chat. By stringing together prompts and interpreting returned lists as UI rather than raw text, we presented recommendations as tasks users could perform in sequence.
Prototype of Replit AI using new foundational archetypes: Assemble Jobs and Inline Generation.
By transforming language model generations into structured data, the tool concatenates and performs transformations sequentially.
These primitives became the precursors to Replit Agent. Once we could expose workspace functions to AI, the next step was building a fully autonomous development system.
---
# Better version control, without reinventing git
URL: https://mattlegrand.ai/work/replit-projects/
Published: 2024-04-14
Topics: AI, Developer tools, Product design, Collaboration, Version control
> How we built version control that feels native to real-time collaboration, adopting trunk-based development and code review workflows without reinventing git.
## Replit Projects
A Project is a set of connected, forkable Repls in a Team space. Users can fork a Repl to work on a feature in isolation, then merge changes back to the main Repl when ready, mirroring trunk-based workflows.
Since building on Replit is fundamentally different than local-first development, Project version control exists alongside traditional git. Developers of all experience levels can collaborate with the toolchain of their choice. Replit users can view all ongoing development in one place using the Project tool.
There have been no major shakeups in the software engineering workflow since git. With Replit's realtime collaboration, we saw an opportunity to change this.
The challenge: create better version control without reinventing git. Replit users can collaborate live within a Repl, which isn't possible in local-first development. This changes code review etiquette. Typically, reviewers make changes in their own branches rather than live-editing. But when collaboration happens live in the same environment, code review can be dramatically faster.
We developed version control that felt native to Replit's real-time model while adopting practices like trunk-based development and stacking, all while maintaining compatibility with developers using their own IDEs and git tools.
Every Project has a main Repl as the source of truth. In this example, `AnvilWebServer` is the main Repl. Each team member has their own fork, like `MattLegrand-07-03`. Users begin by forking any Repl in the organization and are prompted to convert it into a Project.
Choosing "Fork & start a Project" converts the Repl into the main Repl and moves the user to a new fork. The Project tool opens and shows no changes from main yet. Modifications to the fork are reflected in the Project tool.
---
# Figma to Code transforms designs into React projects
URL: https://mattlegrand.ai/work/figma-to-code/
Published: 2024-02-14
Topics: Developer tools, Design tools, React, Product design, Collaboration
> A Figma plugin that exports designs into production-ready React projects, streamlining the journey from design to deployment.
## Figma-to-Replit plugin
Replit Labs is a space for creative hacker projects and experiments. As a Hack Week project, Devin and I built the Figma-to-Replit plugin and released it to the community.
After selecting a frame in Figma, the plugin generates a React project and opens a new repl. The project can be built and deployed in seconds. The goal: streamline the process from designing in Figma to prototyping with code, generating visually accurate, responsive code from designs.
Live demo of the Replit Figma plugin used to export a "Twitter clone" design from Figma, leveraging component and auto layout features to prescribe component structure and responsive layout properties.
Unlike tools that provide simple HTML approximation with inline styles, the export is high-quality and well-organized. Figma components become React components; styles are built and compiled using Lightning CSS. For most web projects, this is a valuable starting point that saves significant frontend work.
Generate a Repl directly from your Figma design and instantly share a static React site. Use Replit AI to add functionality and tweak your design before deploying to production.
### Debut
We showcased the plugin in a live demo at a [prototyping workshop at the a16z SF office](https://lu.ma/prototyping-replit). It hit top 10 among Figma's trending plugins.
Figma-to-Replit was one of the first plugins to support Dev Mode and was featured in [Figma's blog post on Dev Mode plugins](https://www.figma.com/blog/figma-dev-mode-codegen-plugins/#turn-designs-into-react-components-with-replit) that generate code. We leverage Dev Mode to inspect frames, preview project structure, debug responsivity, and include or exclude files and assets.
[Install it here](https://figma.li/replit).
## Press & Links
- [Replit — Replit to Figma: Experiment with Replit's Figma Plugin](https://blog.replit.com/figma-to-replit)
- [Codegen Plugins (And Other Tips) for Automating Design to Code | Figma Blog](https://www.figma.com/blog/figma-dev-mode-codegen-plugins/)
- [Replit launches new product in race for AI coding assistants](https://www.semafor.com/article/04/02/2024/replit-launches-new-product-in-race-for-ai-coding-assistants)
- [Replit — Raising $97.4M at $1.16B Valuation](https://blog.replit.com/b-extension)
- [Startup Replit launches a ChatGPT-like bot for coders](https://www.semafor.com/article/02/15/2023/startup-replit-launches-a-chatgpt-like-bot-for-coders)
- [Vibe Coding Tool Replit Doubles In Valuation To $3 Billion](https://www.forbes.com/sites/iainmartin/2025/07/30/vibe-coding-tool-replit-doubles-in-valuation-to-3-billion/)
- [Replit — Introducing Replit Teams](https://blog.replit.com/teams)
- [Replit — Introducing Replit Projects](https://blog.replit.com/introducing-replit-projects)
- [Replit — Introducing Multiplayer AI Chat](https://blog.replit.com/multiplayer-ai)
---
# On Solutionism
URL: https://mattlegrand.ai/work/solutionism-interview/
Published: 2023-10-31
Author: Lenny Attab
Interviewee: Matt Legrand
Topics: Design, Interview, Ethics
> Lenny Attab interviews Matt Legrand about solutionism: the idea that every problem facing humanity can be solved with creativity, and what that demands of designers.
Lenny Attab interviewed me about solutionism, the idea that every problem facing humanity can be solved with enough creativity, and what that asks of the people who design things. The subject was not new to me. Ten years earlier I wrote and directed [_Solutionism_](https://solutionism.film/), a short design documentary that screened at the Cannes Court Métrage, and in the decade since I had designed products across wearables, digital health, car interfaces, fashion, no-code tools, machine learning, and new media publishing. The interview first ran on LinkedIn.
## What is solutionism?
Solutionism is a term for the idea that every problem facing humanity, especially those created by humanity in the first place, can be solved with creativity. This is pronounced in a landscape where people look to conventional tools for effecting change like governments, NGOs, lobby groups, PACs, technology corporations, nonprofits, advertisement, activism, conscious consumerism, and other sociopolitical instruments to deliver solutions to their problems, even as those tools fail to function properly, and even counterproductively.
Skeptics of this concept love to point to the failures and deceptions in the cycle of consumer technology: absurd contraptions of the World's Fair in the 1900s, Google Glass[^glass], tyrannical or draconian edge cases in social media platforms. It's important to point out that we are not calling this "technologism". Technology is a tool, and like any other tool, can be used positively or negatively. Once equipped with a hammer, you can choose to hammer a nail, or someone's face. It's absurd to suggest that a technology, like the internet, is intrinsically bad because it's used for profit by Silicon Valley.
[^glass]: Glass got two endings: the $1,500 Explorer Edition sold from 2013 until Google [pulled it from consumers](https://en.wikipedia.org/wiki/Google_Glass) in January 2015, and the pivot to factory floors lasted until March 2023, when Google stopped selling Glass Enterprise Edition 2.
From _Solutionism_ (2012), which went from the Cannes Court Métrage in May 2013 to seven more festivals that year. More at [solutionism.film](https://solutionism.film/).
## How did you get to work on this topic? What drew you into critical theory of design?
In my early career, I was primarily looking for ways to infuse art into the commercial work that I was being paid for, but I was getting more and more frustrated with the limitations and compromises introduced by working with clients who didn't share this lust for quality and groundbreaking work. In one case I worked on a campaign for a popular brand of disinfectant wipes who was actively working to convince parents that they needed to use their product in order to keep their children healthy when there was clinical evidence to the contrary[^antibacterial]. This was clearly an example of very effective communication design being misused. I decided that the only way to have the level of agency I wanted as a designer was to work on my own products rather than collaborating with organizations I didn't respect.
[^antibacterial]: Regulators eventually agreed about the category: in 2016 the FDA [banned triclosan and 18 other antibacterial ingredients](https://www.fda.gov/consumers/consumer-updates/skip-antibacterial-soap-use-plain-soap-and-water) from consumer washes after manufacturers could not show they were safer or more effective than plain soap and water.
## Why is it important?
Whether or not a designer makes the same choices I did, the impact they have is powerful and elemental. Designers have the ability to influence human behavior, and do it at scale.
## How exactly can design processes be applied to the way we operate as a society?
There are a few different popular frameworks for design problem solving, but in essence, they emulate the scientific method in that they provide steps for identifying and validating hypotheses. I think the most effective versions of this approach ensure that people are at the center of the design process. It also means that every single person can be empowered to work for positive change, because these methods are not so technical that they require any kind of special training, and because everyone is creative.
## What is your opinion on the statement "design can save the world"?
People don't like this one sometimes because they think it's saying that the design industry, or even the tech industry (since that's where most designers are employed), is going to save the world. That's obviously not true, but I would double down and say only design can save the world. Personal and collective responsibility, creativity, and ingenuity have always been the only ways that we've improved our lives, from the very first hominid that learned to create a torch[^fire], or any other parable you prefer to use as the first creative act. Most of our problems since that moment have been self-inflicted, many more so than are follow-on problems directly resultant from our creations. It's not like our creations necessarily need to be our own downfall. Clean energy is ready to go whenever.[^solar]
[^fire]: The record really does start with a torch: the earliest secure evidence of fire use, at [Wonderwerk Cave](https://www.sciencedaily.com/releases/2012/04/120402162548.htm) in South Africa about a million years ago, is of early humans (likely _Homo erectus_) capturing flames from wildfires and carrying them deep into the cave, long before anyone could kindle one. A [2026 reanalysis](https://www.sci.news/archaeology/wonderwerk-cave-fire-use-14848.html) pushes the traces back as far as 1.8 million years.
[^solar]: A nod to The Onion's ["Scientists Politely Remind World That Clean Energy Technology Ready To Go Whenever"](https://theonion.com/scientists-politely-remind-world-that-clean-energy-tech-1819576507/) (May 2014). The joke has only become more literal since: by 2020 the International Energy Agency's World Energy Outlook was calling the best solar projects the ["cheapest electricity in history"](https://www.carbonbrief.org/solar-is-now-cheapest-electricity-in-history-confirms-iea/), cheaper than new coal or gas in most major markets.
## Can you give an example of a design that actually has a deeper meaning than product selling?
I think eyeglasses are my favorite example.[^spectacles] They primarily exist to help people see better. There are secondary benefits, such as being a fashion accessory. Because we operate in a capitalist system, one of the best mechanisms for delivering these benefits to people are through practical product marketing, manufacturing and supply chain processes, and so on. Because they have existed for a while, they could be viewed as a pure commodity, except that there's room for designers to create new value through experience or modality diversification (contact lenses, retail experiences) or cultural dialogue via form (style, shape, materials, branding, etc). All of this is good, because it becomes an avenue for self-expression, and even art, all while making sure people can see well. You may rightly criticize the (numerous) issues and threats to the planet that exist in the fashion industry, but I don't think anyone would argue we should stop making eyeglasses to solve them.
[^spectacles]: Spectacles were invented in Italy [around the 1280s](https://www.medievalists.net/2016/03/medieval-eyeglasses-wearable-technology-of-the-thirteenth-century/). Preaching in 1306, the friar Giordano da Pisa marveled that "it is not twenty years since there was discovered the art of making spectacles which help one to see well, an art which is one of the best and most necessary in the world." Seven centuries later there is still room to design them.
## You argued for solutionism in 2013. Do you think it has spread enough among the design community to the point it has made a difference?
I didn't invent this idea: Evgeny Morozov, a Belarusian writer and researcher who studies the political and social impact of technology, introduced the concept in his book _To Save Everything, Click Here_.[^morozov] He presented this word as the idea that every social problem has a technological fix. He's right that this is a flawed idea, and I tend to agree that when we can't see technology as anything other than a product or opportunity to harvest value from people, we are fixing problems that don't exist.
[^morozov]: Evgeny Morozov, _[To Save Everything, Click Here: The Folly of Technological Solutionism](https://www.hachettebookgroup.com/titles/evgeny-morozov/to-save-everything-click-here/9781610393706/)_, PublicAffairs, 2013. Morozov borrowed the word from architecture and urban planning, and credits the framing to a design theorist, Michael Dobbins: solutionism presumes rather than investigates the problems it tries to solve, reaching "for the answer before the questions have been fully asked."
We have to break away from this myopic view of what a tool is, so that we can stop entertaining anarcho-primitivist or fearful attitudes toward the tool and actively reengage in ways to make the tool work for us. We can also stop depending on technology corporations to solve our problems and getting disappointed when they don't (because it isn't why they exist).
I don't think the adoption of this philosophy has spread at all. Most designers today work in user experience and digital product design, and I think most designers are more concerned with short term outcomes in more effective entertainment and data capture that drive profit for investors, because that's how they've been trained.
## How can someone who is not a designer use these concepts to impact their community?
Everyone is a designer whether they call themselves one or not, because everyone is creative. I prefer a very expansive view of what "community" means: it could be a Discord server you're in, a group of close friends, your neighborhood, a group of people with shared experience in your city, or the city itself (which I believe is the highest order unit of community that can exist)[^cities]. But it's up to you to accept personal responsibility for contending with the problems your community faces, because creativity is the most effective tool you have.
[^cities]: Benjamin Barber pressed the same claim to its limit in _[If Mayors Ruled the World](https://yalebooks.yale.edu/book/9780300209327/if-mayors-ruled-the-world/)_ (Yale University Press, 2013), arguing that cities, pragmatic and indifferent to borders, already handle transnational problems better than nation-states do.
---
# Where'd the color go?
URL: https://mattlegrand.ai/work/wide-gamut-images/
Published: 2023-06-20
Updated: 2026-08-27
Topics: React, Color science, Images, Performance
> Every image pipeline I've used quietly flattens Display P3 to sRGB. How I got the color back in Next.js, and then in this site's Astro build.
I first noticed this while exporting UI designs for a creative tool. The interface leaned on colorful labels and status indicators, and the greens in particular, the kind of saturated green that only exists on a wide-gamut screen, came out of the published pages noticeably flatter than the same exports looked in Figma on the same MacBook. Nothing in the build had errored or warned about it, and it took me a while to accept that the image pipeline had quietly thrown the color away on its own.
I've since hit the same thing twice more, on two different frameworks, and the second time was on the site you're reading. This post is the story of chasing it down: what's actually happening, the two-line fix at the center of it, and how much scaffolding each framework made me build to reach those two lines.
## Where the color goes
Every React publishing stack I've used converges on the same machinery for images. Next.js Image, Astro's asset pipeline, Gatsby, Eleventy Image: under the hood they all hand your files to [Sharp](https://sharp.pixelplumbing.com/) for resizing, format conversion and responsive srcsets, and those optimizations are real ones you want.
They also all inherit Sharp's default behavior, which is to strip the ICC color profile and convert everything to sRGB. That's a sensible default for compatibility and a bad one for anything photographed or designed in Display P3, where it gives you fast images that look washed out without any framework telling you it happened.
Drag the slider to compare. The left half keeps its Display P3 profile, and the right half is the same image after the pipeline's sRGB conversion, with every color that doesn't fit clipped to the nearest one that does. On a P3 screen the difference is obvious; on an sRGB screen the two halves look identical, which is exactly why this bug survives code review.
What annoyed me most, once I found it, was how small the fix is, since Sharp is perfectly capable of keeping the profile and the frameworks simply never ask it to:
```javascript
// Default framework processing
sharp(inputBuffer)
.resize(width, height)
.webp({ quality: 75 }) // No ICC profile preservation
.toBuffer();
// With P3 preservation
sharp(inputBuffer)
.resize(width, height)
.keepIccProfile()
.webp({
quality: 75,
smartSubsample: false, // Maintains color accuracy
})
.toBuffer();
```
## What P3 actually adds
sRGB has been the web's color space since the 1990s, and it covers a surprisingly small slice of what your eyes can see. [Display P3](https://en.wikipedia.org/wiki/DCI-P3) is a superset of it: every sRGB color exists in P3, but P3 reaches [roughly 25% further](https://webkit.org/blog/6682/improving-color-on-the-web/)[^1], mostly into the deep reds and the vivid greens that make interfaces feel alive. The mechanism is just wider primaries. When a color lives in P3 but not in sRGB, conversion snaps it to the closest color in sRGB.
[^1]: Dean Jackson, "[Improving Color on the Web](https://webkit.org/blog/6682/improving-color-on-the-web/)," WebKit Blog, June 2016
This doesn't say much about where the extra colors actually are, so I built the explorer below for this post. Drag the sliders to move through OKLCH: the solid shape is sRGB and the translucent shell around it is P3. Rotate it and you can see the shell bulge at some hues, the greens and reds especially, and barely exist at others.
The reason any of this matters is that the screens moved. MacBooks, iMacs, decent monitors and basically every phone can show P3 now. Safari has [rendered P3 in CSS since 2016](https://webkit.org/blog/6682/improving-color-on-the-web/) and Chrome [caught up in 2023](https://developer.chrome.com/blog/chrome-111-beta#css-color-level-4)[^2]. A pipeline that silently converts to sRGB is optimizing for displays its readers no longer own.
[^2]: "[Chrome 111 Beta: CSS Color Level 4](https://developer.chrome.com/blog/chrome-111-beta#css-color-level-4)," Chrome for Developers, February 2023
## Next.js: going around the optimizer
The first time I fixed this was on a Next.js site. Next.js Image processes images at request time behind an optimizer you can't configure beyond a handful of knobs, and none of the knobs are about color. The only escape hatch is `unoptimized`, which skips Sharp entirely:
```tsx
```
That keeps the color and throws away everything else: no resizing, no format conversion, no srcset. It's fine for one hero image and doesn't scale to a site.
So instead of fighting the architecture I went around it. I built a `P3Image` component that wraps Next.js Image with a custom loader: local images route through my own API endpoint, external URLs pass through untouched, and all of Next.js Image's client-side behavior stays intact.
```tsx
const p3Loader = ({ src, width, quality }) => {
if (src.startsWith("http://") || src.startsWith("https://")) {
return `${src}?w=${width}&q=${quality}`;
}
const params = new URLSearchParams({
src: src,
w: width.toString(),
q: quality.toString(),
format: format,
});
return `/api/image?${params.toString()}`;
};
export default function P3Image({ src, width, height, ...props }) {
return ;
}
```
The API route is where the two lines live. It checks for an existing profile and keeps it with `keepIccProfile()`, or assigns P3 with `withIccProfile('p3')` when the source has no color information at all. (Sharp's [ICC profile API](https://sharp.pixelplumbing.com/api-output/#keepiccprofile) has the details.)
```javascript
const metadata = await sharpInstance.metadata();
if (metadata.icc) {
sharpInstance = sharpInstance.keepIccProfile();
} else {
sharpInstance = sharpInstance.withIccProfile("p3");
}
const optimizedBuffer = await sharpInstance
.webp({
quality: quality,
effort: 4,
smartSubsample: false,
})
.toBuffer();
```
`smartSubsample: false` turns off the chroma subsampling that smears saturated edges; for JPEG output the equivalent is `chromaSubsampling: '4:4:4'` instead of the default `'4:2:0'`. Both add 10 to 20% of processing time per image, which is fine because the results get cached.
And that "cached" is doing a lot of work in the sentence. Around the two lines I cared about, the route also needed its own cache keyed on source and parameters, mtime-based invalidation, and path traversal checks. The built-in optimizer already had all of that. I was rebuilding it to reach a config option.
At least the optimization survived. Here's what a 2250×1500 lossless P3 WebP costs at each viewport, through Sharp at quality 75:
| Viewport | `unoptimized` | Default `` | ICC-preserving route |
| -------- | ------------- | ----------------- | -------------------- |
| 640px | 3,340 KB | 12 KB | 12 KB |
| 828px | 3,340 KB | 17 KB | 17 KB |
| 1080px | 3,340 KB | 25 KB | 24 KB |
| 1200px | 3,340 KB | 28 KB | 28 KB |
| 1920px | 3,340 KB | 54 KB | 51 KB |
| 2250px | 3,340 KB | 69 KB | 66 KB |
Full P3 fidelity costs nothing in bytes; what it costs is architecture. The custom route runs on a server or a serverless function instead of Vercel's edge, so first loads pick up 50 to 250ms depending on where the reader is, and automatic AVIF negotiation is gone unless you rebuild that too. A component, a loader, an API route, a cache and a set of security checks, all to reach two lines the optimizer wouldn't expose.
## Replacing the service
This site uses Astro, and images get processed once at build time rather than per request. So there's no route to stand up and no runtime cost to weigh. But Astro's stock image service has exactly the same flaw: the same Sharp default, left in place. A Display P3 photo comes out of the build reinterpreted as sRGB, duller on the screens most readers hold.
The difference is that Astro left a seam. You can replace the image service wholesale with one config line:
```javascript
// astro.config.mjs
image: {
service: {
entrypoint: "./src/image-service.mjs",
},
},
```
My replacement is small. Anything without a profile goes to the stock pipeline, byte-for-byte the same as before. Anything with a profile gets the stock resize and encode, plus the line it was missing:
```javascript
// src/image-service.mjs (condensed)
import baseService from "astro/assets/services/sharp";
export default {
...baseService,
async transform(inputBuffer, transform, config) {
const { icc } = await sharp(inputBuffer).metadata();
// No profile: the stock pipeline is already correct.
if (!icc) return baseService.transform(inputBuffer, transform, config);
// Mirror the stock resize and encode, plus the line it was missing.
const pipeline = sharp(inputBuffer)
.rotate()
.resize({ width: transform.width, withoutEnlargement: true })
.keepIccProfile();
const { data, info } = await pipeline
.webp(encoderOptions(transform, config))
.toBuffer({ resolveWithObject: true });
return { data, format: info.format };
},
};
```
The pixels are never converted. The profile just rides along, and the browser renders the gamut the photo was taken in.[^3] Because the service sits inside the framework's own pipeline, everything downstream keeps working: the srcset, the `sizes` math, the build cache, lazy loading, CLS-safe dimensions. There's no wrapper component to remember. A plain markdown image in an article gets the treatment automatically, and so does every ``, like these three:
[^3]: With one hard-won exception: 16-bit sources need a two-pass route, because every Sharp profile-attachment API corrupts 16-bit pixels. The 16-to-8-bit reduction runs through a color transform that gamut-clips, then tags the clipped pixels with the original profile. I verified it with WebKit's P3 gamut-test image, whose two out-of-sRGB reds merged into one, hiding the logo on every display while the profile rode along intact. The fix: resize at 16-bit precision and cast to 8-bit with no profile handling, then attach the source profile to the already-8-bit intermediate, which is transform-free.
Three phone photographs in Display P3, through the build-time pipeline. The red of the truck and the flare and the yellow of the 911 would all be casualties of an sRGB conversion.
That's the whole change: one file and one line of config, compared with the component, loader, API route, cache and security checks the Next.js version needed, and it doesn't give up edge distribution to get there. Both fixes come down to the same two lines of Sharp, and the only difference is how far each framework made me go to reach them.
## Reflections
None of this should have been necessary. The fix is two lines in Sharp, and there's no reason it can't live in the frameworks. For Next.js I'd want a `preserveColorProfile` option, globally and per image, that calls `keepIccProfile()`, disables `smartSubsample` for WebP and uses `4:4:4` chroma for JPEG. Default it to `false` and nobody's build changes.
```ts
// next.config.ts
const nextConfig = {
images: {
preserveColorProfile: true,
},
};
```
The broader ask, for any framework that optimizes images on my behalf, is one of two things: a knob, or a seam. Astro shipped the seam, so correcting the default was a project-local file that survives upgrades like any other project file. Next.js shipped neither, so correcting it meant rebuilding half the optimizer outside the framework. Either answer is fine. Silence is the only wrong one, because this failure is invisible in code review, invisible in CI, and visible only to someone squinting at an exported design wondering where the color went.
---
# Build full-stack applications without writing code
URL: https://mattlegrand.ai/work/bubble/
Published: 2021-03-10
Topics: Design systems, Product design, No-code, UX, User research
> Bubble is the world's most powerful no-code platform. The Maison design system transformed its editor experience, enabling rapid customer growth.
## The platform
Bubble is the world's only full-stack, no-code platform. It enables anyone to design, develop, and deploy web applications without coding. In the no-code space, it stands out by offering complexity and customization unmatched by other platforms. Users can create custom marketplaces, social networks, or food delivery services without touching a line of code.
The platform covers the entire app-building process, from UI design to backend workflows. Users can create dynamic content, integrate third-party services, and set up complex logic flows. While other no-code tools excel in specific areas, Bubble's flexibility makes it the go-to choice for bringing complex ideas to life.
### What we did
The Maison design system let Bubble achieve rapid customer growth. I led a cross-functional team to overhaul the editor's user experience. We integrated customer feedback, worked in parallel on features, and coordinated releases to transform the platform's usability. Maison, the design system we developed, unified the editor's interfaces under a cohesive component structure.
Maison brought modern standards to Bubble, introducing best practices from leading design tools. The structured framework reduced the learning curve and made it easier to implement new features as the platform grew.
The design language made Bubble competitive with other browser-based design tools. Users could rely on consistent, predictable behaviors across the platform. Maison also introduced enhanced support for responsive design, addressing a long-standing gap in the platform's capabilities.
### Bubble in 2019
It's early 2019, and using Bubble is a daunting task. Its UI was the result of years of bootstrapped development.[^bootstrapped] The interface was burdened with design inconsistencies and heavy technical debt. The editor lacked a cohesive visual language and predictable behaviors. Essential features were often hidden within menus or workflows, making it challenging for users to navigate intuitively.
[^bootstrapped]: Seven years of it. Emmanuel Straschnov and Josh Haas founded Bubble in 2012 and ran it on revenue alone until a [$6.25M seed round](https://bubble.io/blog/bubble-raises-seed-round/) led by SignalFire closed in June 2019, a few months into this project. The [$100M Series A](https://techcrunch.com/2021/07/27/no-code-bubble-series-a/) from Insight Partners came two years later, in July 2021.
The Bubble interface prior to design efforts, while capable of building complex products itself, didn't possess the ease of use or reliability needed to sustain adoption.
Using Bubble was like navigating a complex "working wireframe." Powerful functionalities were scattered and difficult to locate. Users relied on Google searches and community forums to piece together solutions.
#### Faster than learning to code
"Yeah, it's a pain, but it's still way faster than learning to code." Despite these hurdles, Bubble had attracted over 500,000 registered users. For entrepreneurs and builders, it offered a unique opportunity to launch web applications without hiring engineers or learning to code.
Users were willing to endure the pain points because of the platform's ability to let them create complex applications independently. Their dedication underscored Bubble's potential and the need for improvements to reach a wider audience.
### Three goals
Bubble needed an overhaul to grow beyond its early adopters. That meant addressing its usability issues and creating a more polished experience. By engaging with entrepreneurs who relied on Bubble and using the platform ourselves, we identified core priorities:
1. **Create consistent UI appearance and behaviors**. Establish a cohesive design language and predictable behaviors across the platform to remove friction and provide a foundation for future development.
2. **Adopt common precedents from best-in-class design software** Incorporate familiar design patterns from tools like Figma and Webflow to make the platform more approachable for users transitioning from other design environments.
3. **Deliver proper support for responsive design.** Modernize the platform's outdated JavaScript layout engine[^layout] to support apps that adapt seamlessly across different screen sizes.
[^layout]: Flexbox reached W3C Candidate Recommendation in September 2012, the year Bubble was founded, and shipped unprefixed in every major browser by 2015. Bubble had spent its entire life computing layout in JavaScript that the browser could already do natively.
## The new Bubble editor
The redesigned editor keeps Bubble's structure of five tabs, one for each layer of an application, and gives them a shared visual language for the first time. Design, Workflows, Backend Workflows, Data, and Styles now use the same panels, controls, and hierarchy.
The Design tab is where users define and customize the visual layout and style of their application. It provides a canvas where elements like text, images, buttons, icons, and input fields can be added and arranged using a drag-and-drop interface. The tab includes tools for configuring each element's properties, such as size, color, font, borders, and alignment. There are also options for responsive design, allowing elements to adjust to different screen sizes. With layering and grouping capabilities, users can create organized, complex layouts.
The Workflows tab in the Bubble editor is where users define the actions and logic that drive their app's functionality. This tab allows users to set up workflows triggered by specific events, such as a button click, page load, or form submission. Each workflow consists of a series of actions that can manipulate data, navigate between pages, send emails, or update elements on the page. Users can set conditions on workflows, making them execute only if certain criteria are met, enabling complex, dynamic behaviors. This no-code approach to defining workflows empowers users to create sophisticated application logic by sequencing actions without writing code.
Backend Workflows are workflows that run on the server rather than the client side and can be triggered from external sources or scheduled to run at specific times. They are particularly useful for tasks that need to happen independently of user interaction, like processing large batches of data, sending periodic notifications, or handling complex calculations.
The Data tab is a visual database editor and config tool where users define, manage, and organize the data structure for their application. Users can create custom data types and specify fields for each type, such as text, number, date, or file, allowing for a structured representation of the app's data. It also allows users to view and modify entries in the database, making it easy to add, edit, or delete data as needed.
The Styles tab enables users to create and manage reusable design styles. Users can define styles for various elements like buttons, text fields, and images, and specify attributes like font, color, size, border, and shadow. Once a style is created, it can be applied to multiple elements, so any updates to the style in this tab will automatically reflect across all elements using it.
## A headless design system
Maison is a headless design system. Unlike most design systems, it separates content from design and layout. This approach lets the Bubble team deploy updates faster using predefined rules to dynamically display variable content. By decoupling visual components from content, the team can manage and deploy designs without reconfiguring the entire system for each change.
The modular nature supports product squads by letting them iterate and launch features without waiting on dedicated design resources. Designers and developers can work independently, speeding up the production pipeline. Product teams benefit from a consistent design language that ensures cohesive experiences across the platform.
### Theme switching
Maison was designed with both light and dark modes from the outset. Integrating these modes required a higher-order abstraction of element styles so they could function seamlessly across both themes without duplicating assets. Users can toggle between modes without performance lag. Today, this is usually facilitated via [Media Queries Level 5's `prefers-color-scheme`](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme), which didn't yet have broad browser support at the time.[^scheme]
[^scheme]: It arrived over the course of the project: [Safari 12.1](https://caniuse.com/prefers-color-scheme) in March 2019, Firefox 67 in May, Chrome 76 in July, and Edge only with its Chromium rebuild (79) in January 2020. Maison's toggle had to work on its own until then.
Maison's light and dark themes bring an adaptable, visually consistent experience to the Bubble editor. We enabled seamless theme switching for users' color scheme preferences.
## Responsive design
We built modernized responsive design tools. The new responsive design system was a major release for Bubble: by mixing and matching three basic container types, users can build modern layouts based on the `flexbox` CSS module.[^responsive]
[^responsive]: The new engine went to [open beta in November 2021](https://forum.bubble.io/t/new-responsive-engine-beta-is-live/176816) and became the default for every new app on [June 27, 2022](https://bubble.io/blog/new-responsive-2022/), with more than 27,000 apps already upgraded during the beta. Existing apps were never migrated automatically; each page moved over when its builder chose to.
### Responsive settings
The core idea is to centralize responsive settings within the element's property editor. Users can set and control responsive behaviors directly within each element's editor, achieving flexible layouts with minimal effort.
The responsive system is built on three simple widgets: Resizing (Fixed Size), Pin to Edge, and Margins. These tools are similar to layout tools in Sketch. Resizing lets users specify fixed dimensions, Pin to Edge anchors elements to specific points on the canvas, and Margins create consistent spacing.
Bubble's responsive toolset includes conditions that can be set for each element based on specific page widths, moving away from universal breakpoints. Designers can create custom conditions to govern how elements behave at different screen sizes. The Responsive button in the toolbar lets users preview how these conditions impact the layout by dragging the canvas width.
Resizing & Pin to edge are similar to the layout tools used in Sketch. Column gutters can be created using Margins. Instead of universal breakpoints, each element can receive conditions that govern changes to these properties at specific page widths.
## The property editor
Maison shines in the property editor. It is where users configure each element's appearance, behavior, and data connections. It also allows setting up conditional logic and connecting elements to workflows.
## User research
I established a user research practice within our Customer Success team. As a lean team of 30, Bubble lacked resources for dedicated user research, so I trained Customer Success team members to take on UX research responsibilities. This created an efficient feedback loop that connected product design with real user insights.
Empowering our Customer Success team as UX researchers brought the voice of the customer directly into our development process. We could identify issues early, adapt designs in real-time, and maintain a user-centered approach with limited resources.
The Bubble team in 2019. Our redesign team was a dedicated group composed of designers, engineers, and members of our Customer Success team who had taken on new roles in user research. This cross-functional team worked closely together to bring the new Bubble editor to general release.
## Rollout
We broke down the redesign into frequent, manageable releases. This let us deliver new components gradually while keeping users involved from the beginning. We solicited feedback on early concepts to ensure our design direction aligned with their needs.
By releasing updates regularly, we minimized the risk of overwhelming users with large-scale changes. This also allowed us to make real-time adjustments based on user feedback.
### Project management
I used a project management approach called [Shaping](https://basecamp.com/shapeup) to define and structure project work, reducing timeline risks and maintaining momentum. Shaping allowed us to prioritize components and divide work effectively across the team.
This approach empowered our team to stay on track, shipping updates consistently while keeping users engaged. We minimized potential delays and avoided the risks associated with large, monolithic releases.
### Visual and workflow tracks
We implemented a parallel strategy to manage the integration of new UX patterns into the existing UI. This hybrid approach allowed us to roll out visual and workflow improvements gradually, even as feature development continued. For features already in progress, we adapted elements of the new design system into the existing UI.
By releasing changes incrementally, we could monitor user reactions closely and adjust accordingly. This reduced the risk of disorienting users and ensured a smooth transition to the new interface.
## Outcomes
Maison had a transformative impact on Bubble's development and user experience. Developers can now roll out features with a consistent UI without needing direct design intervention. By establishing a unified set of rules and components, Maison streamlined the product development process and enabled faster development cycles.
Maison brought Bubble in line with best-in-class design tools like Figma and Webflow. By standardizing the UI and enhancing the overall visual experience, Maison has resulted in tangible benefits that are visible not only in qualitative feedback from users but also in measurable growth metrics.
The new design system elevated the user experience by introducing cohesive, predictable interactions. For Bubble users, Maison represents a significant improvement in how they interact with the platform. This leap forward helped solidify Bubble's position in the no-code market.
## Press & Links
- [Bubble Raises $100M Series A to Empower the Next Generation of Software Creators](https://techcrunch.com/2021/07/27/no-code-bubble-series-a/)
- [Bubble - The full-stack, no-code app builder | Product Hunt](https://www.producthunt.com/products/bubble#bubble-3)
- [Bubble Figma Integration | Product Hunt](https://www.producthunt.com/products/bubble/launches/bubble-figma-integration)
- [New Responsive Editor - Bubble | Product Hunt](https://www.producthunt.com/products/new-responsive-editor-bubble)
---
# Data-driven care for injectable medicine
URL: https://mattlegrand.ai/work/gocap/
Published: 2019-04-24
Topics: Healthcare, IoT, Product design, Hardware, UX
> Common Sensing succeeded in bringing a novel smart hardware device from concept to market in a difficult space.
Common Sensing succeeded in bringing a novel smart hardware device from concept to market in a difficult space. It was a healthcare technology company we created to transform home treatment of chronic disease. We developed a smart hardware device that empowered individuals to take control of their health in a highly regulated market where such advancements have been limited.
Our hardware product, Gocap, addressed a significant gap in chronic disease management, particularly for diabetes, the costliest chronic condition in the United States. We recognized that managing diabetes successfully happens outside clinic walls, in patients' daily routines. Gocap integrates seamlessly into users' lives, helping them better manage their condition and improve their health outcomes.
We engaged directly with hundreds of users to learn about their daily challenges and preferences. This collaborative process helped us navigate complex regulatory barriers while ensuring Gocap met both healthcare requirements and real user needs. Gocap became more than a medical device; it became an empowering lifestyle tool.
## A Fitbit for injectable medicine
We created Gocap, a connected health product that acts as a "Fitbit for injectable medicine". In the United States, over [$400 billion in direct medical costs](https://diabetes.org/newsroom/press-releases/new-american-diabetes-association-report-finds-annual-costs-diabetes-be)[^1] are attributed to diabetes. More than half of diabetes patients are [not meeting their treatment goals](https://www.amjmed.com/article/S0002-9343%2813%2900490-7/fulltext)[^2]. The diabetes treatment market is comparable in size to the entire consumer electronics industry, yet if half of Americans struggled this way to get value from all consumer electronics, it would signal an industry crisis.
[^1]: American Diabetes Association, "[New American Diabetes Association Report Finds Annual Costs of Diabetes to be $412.9 Billion](https://diabetes.org/newsroom/press-releases/new-american-diabetes-association-report-finds-annual-costs-diabetes-be)," 2023
[^2]: Stuart A. Ross, "[Breaking Down Patient and Physician Barriers to Optimize Glycemic Control in Type 2 Diabetes](https://www.amjmed.com/article/S0002-9343%2813%2900490-7/fulltext)," The American Journal of Medicine, September 2013
I met my cofounders, Rich and Jamie, following a service design initiative I led at [IDEO](https://ideo.com/) focused on insulin adherence. Gocap was conceived as a smart, connected cap for insulin pens that captures each dose without disrupting the patient's flow, logs data via Bluetooth to a smartphone app, and allows users to share dosing information with clinicians in real time.
Gocap surrounds patients with a proactive support network. Real-time data sharing with clinicians provides support and accountability, helping both patients and providers catch potential issues early and adjust treatment as needed.
## How Gocap works
Gocap replaces the disposable injector pen's plastic cap with a smart version. Users remove it to take a dose and put it back when finished. Gocap records each dose automatically and transmits it to the user's mobile app via Bluetooth.
The smart cap replaces the existing plastic cap that comes with insulin (and other medicine) disposable injector pens. When a user takes a dose, they simply remove the cap and place it back when finished. Gocap logs the dose amount and transmits it to the user's companion mobile app over Bluetooth.
The companion app gives users a real-time view of their dosing history and patterns. Users can share this data with healthcare providers, allowing for continuous monitoring and support between doctor visits.
## Getting the hardware right
Designing IoT hardware like Gocap is challenging due to limited iteration once production begins. Early prototypes used on-demand 3D printing, but full-scale production required expensive ABS molds costing up to $80K each. The product needed to be nearly flawless by manufacturing, as changes become costly.
Gocap consists of an inner and outer plastic shell, a flexible printed circuit board, and a lens cover above the display.
The measurement hardware uses an array of infrared LEDs and a corresponding array of sensors that sit on either side of the injector pen cavity.
One significant change was moving from an LCD to an OLED display. The OLED screen provided a versatile interface that could accommodate various information displays on a single SKU, allowing us to handle different user needs without requiring separate hardware versions.
I was particularly interested in the perceived differences in objects we have to use and objects we want to use. Many objects that meet health needs are perceived as scary, unappealing, or unworthy of public display. Not so for eyeglasses; they're an article of fashion, even though they serve a medical purpose: correcting vision. What's the delta between eyeglasses and a hearing aid?
By placing Gocap's industrial design within the design language of consumer wearables and lifestyle products, we created a tool that people actually wanted to incorporate into their daily routine.
## Co-designed by Gocap users
To ensure Gocap was intuitive and practical, especially for older adults managing diabetes, we conducted hundreds of hands-on usability studies. With terabytes of GoPro footage, we captured every movement, challenge, and triumph as users interacted with early prototypes, allowing us to refine every detail from grip comfort to display readability.
These studies aligned with FDA guidelines on user-centered design while helping us identify and resolve usability barriers. This collaborative approach ensured that Gocap felt empowering and accessible to its users.
### Packaging design for easy onboarding
Since Gocap wouldn't always be deployed in person, users needed to set up Gocap with their injectable medicine, charge it, download the app, and sync it over Bluetooth, all without intervention. Gocap's packaging design made this possible by providing affordances and education during the unboxing process.
I produced marketing and educational materials like this video, the packaging itself, the Gocap website, and so on completely in-house, using resources from our shared hacker space, [Industry Lab](https://www.industrylab.com/).
## Designing the Gocap App
The Gocap App featured design innovations that threw conventional UI out the window. Designing it presented unique challenges: over a third of prospective users had never owned a smartphone before, so we had to rethink conventional digital design norms. Traditional affordances and cues were ineffective for this audience. I designed an interface for iOS and Android based on innovative, simplified guidelines:
1. **No navigational UI.** Menus, drawers, and tabs were eliminated to prevent essential information from being hidden or difficult to find. The interface was designed to be as direct as possible.
2. **One screen, one action.** Each screen shows only what users need to see at that moment, reducing cognitive load and guiding them step-by-step through their tasks.
3. **Low reliance on iconography.** Icons were minimized and replaced with clear text labels, allowing users to understand and interact without needing to interpret unfamiliar symbols.
4. **Use color to create a sense of category and place.** Consistent color-coding for core categories like medication types, glucose levels, and alerts helped users quickly orient themselves and understand each section's purpose at a glance.
## Gocap Dash for care providers
Gocap Dash let care providers focus on the patients that needed their attention. The care ecosystem for injectable medicine is intricate, involving patients, families, caretakers, healthcare providers, payers, and pharmacies. Gocap enabled data sharing with approved parties throughout this ecosystem, delivering insights that reduce costs and improve care quality.
We developed Gocap Dash, a web application that highlights actionable insights from patient data. Gocap Dash organizes patient information at a population level, categorizing individuals by risk and identifying those in need of immediate intervention. Real-time dose information allows providers to monitor adherence closely, while built-in analytics identify behavioral patterns linked to treatment outcomes.
Gocap Dash is a web application for care providers that shows population-level stratification, real-time dose information, categorizes patients based on risk, identifies intervention needs, and characterizes correlated behaviors.
The dashboard's analytics surface patterns in patient behavior that correlate with treatment outcomes, enabling providers to deliver more personalized, proactive care and catch potential issues before they escalate.
## A unique problem: optimizing for fax machines
Not everyone in the care ecosystem could take advantage of Gocap Dash's power. Many care providers were stuck using older computers running [Windows XP after its end-of-life](https://unit42.paloaltonetworks.com/iot-threat-report-2020/)[^xp-healthcare], or weren't able to connect to the internet from systems where they handled patient information. We discovered that sending patient records over fax was one of the most common methods for transferring protected health data.
[^xp-healthcare]: "[IoT Threat Report](https://unit42.paloaltonetworks.com/iot-threat-report-2020/)," Palo Alto Networks, March 10, 2020
We implemented PDF exports and direct-to-fax capability, optimizing data visualizations to render well in the low-pixel scan area available in a typical fax.
## Clinical outcomes
In partnership with the [Joslin Diabetes Center](https://www.joslin.org/about-joslin-diabetes-center), we conducted a pioneering connected health study that revealed Gocap's tangible impact on clinical outcomes. The study demonstrated that Gocap users experienced improved health outcomes, including better insulin adherence and a reduction in missed doses.
Beyond individual outcomes, the study unearthed valuable insights into insulin use behavior on a broad scale. For the first time, we documented widespread challenges with insulin dosing, identifying specific patterns of non-adherence that had previously gone unnoticed. This behavioral data equipped healthcare providers with critical information, enabling them to address these issues proactively and develop more personalized treatment approaches.
### The data gap for pen users
Without Gocap, most people who use insulin have no access to data-driven support. While most treatments for diabetes focus on patients with insulin pumps, this represents around 350k people who use insulin[^pump-users]. There are more than 7.2 million Non-pump insulin users in the United States[^pen-users], with no dose data.
[^pump-users]: Brooke H. McAdams and Ali A. Rizvi, "[An Overview of Insulin Pumps and Glucose Sensors for the Generalist](https://pubmed.ncbi.nlm.nih.gov/26742082/)," Journal of Clinical Medicine, January 4, 2016
[^pen-users]: Israel Hodish, "[Decades Into Diabetes, Insulin Therapy Still Hard to Manage](https://theconversation.com/decades-into-diabetes-insulin-therapy-still-hard-to-manage-67829)," The Conversation, November 14, 2016
### Detecting dose stacking
Gocap identifies dangerous behaviors and increases safety. A Joslin study patient was stacking doses over and above their prescription. Gocap data illuminated how dose stacking resulted in hypoglycemia.[^dose-stacking]
[^dose-stacking]: Medha N. Munshi, Christine Slyne, Tara MaNeil, Joslin Diabetes Center, Harvard Medical School, et al. "[Nonadherence to Insulin Therapy Detected by Bluetooth-Enabled Pen Cap Is Associated With Poor Glycemic Control](https://pubmed.ncbi.nlm.nih.gov/30862650/)," Diabetes Technology & Therapeutics, March 2019
### Off-prescription dosing
Gocap identified users who were modifying their doses off-prescription. Some Joslin study patients took amounts that differed substantially from their prescribed dose amount. Some users were very adherent, but needed a change to their prescription.[^patient-adherence] For example, one patient demonstrated more glucose levels in range when taking their doses higher than their prescribed amount.
[^patient-adherence]: Toschi E, MD, Carl S, Greenberg J, BS, Greaves T, BS, Atakov-Castillo A, BA, Slyne C, BA, Munshi M, MD. "[Use of Gocap to evaluate appropriateness bolus insulin dosing to achieve target glucose levels in patients on basal bolus regimen](https://bucket.legrand.design/elena-toschi-joslin-harvard-edu-2018-feb-9-attd.pdf)," February 2018
## Closing the loop
Gocap serves more than 7 million patients whose data was previously invisible to their clinicians and themselves. After proving Gocap's safety, efficacy, and usability through rigorous trials, we partnered with connected glucose meters and injectable pens to offer Gocap as part of comprehensive, bundled solutions. This approach "closed the loop" for clinicians and patients alike. Clinicians gained a clear, data-driven view of their patients' adherence, while patients received the insights they needed to take control of their treatment.
As Gocap matured, we expanded beyond insulin to other high-risk injectable medications, such as hormone therapies and fertility treatments. Today that once-invisible data is accessible and actionable.
### Acquisition & Exit
In 2021, Common Sensing was acquired by [Bigfoot Biomedical](https://www.bigfootbiomedical.com/bigfoot-unity). By joining Bigfoot, Gocap became part of a fully integrated diabetes care solution, combining connected glucose monitoring, insulin management, and treatment adherence.
Bigfoot had already assembled the other essential pieces of the connected health puzzle. Integrating Gocap into this ecosystem allowed us to deliver a complete, seamless solution. Through Bigfoot, Gocap continues to transform how chronic disease is managed on a large scale.
## Press & Links
- [Abbott to Acquire Bigfoot Biomedical, Furthering Efforts to Develop Personalized, Connected Solutions for People with Diabetes](https://abbott.mediaroom.com/2023-09-05-Abbott-to-Acquire-Bigfoot-Biomedical,-Furthering-Efforts-to-Develop-Personalized,-Connected-Solutions-for-People-with-Diabetes)
- [Common Sensing Raises $6.6M to Scale Smart Insulin Pen Cap](https://hitconsultant.net/2018/04/12/common-sensing-smart-insulin-pen-funding/)
- [Common Sensing, Flex partner to redesign digital insulin pen sensor](https://www.drugdeliverybusiness.com/common-sensing-flex-partner-to-redesign-digital-insulin-pen-sensor/)
- [Common Sensing kicks off clinical study of connected insulin pen caps to track dosing](https://medcitynews.com/2016/10/insulin-dosing-study-and-internet-of-things/)
---