Tell me if this workflow sounds familiar.
Designers create screens in Figma, refine the visuals, document interactions, and pass everything to developers.
Development then turns those screens into a working experience, often uncovering decisions that were never fully resolved during design.
It's a process many of us have followed for years. And it's a process that works well for our purposes.
But just because the process "works" doesn't mean that we can't find ways to improve it.
In fact, my work with ANML has given me an opportunity to change that sequence.
With AI-assisted coding tools like Claude, designers can move from visual exploration to functional browser-based prototypes much earlier.
They can work with actual layouts, test interactions, refine motion, and develop reusable components while the experience is still taking shape.
While this may seem like I'm simply replacing a tool. In practice, however, this change is about how much of the actual digital experience gets designed before development begins.
Establish The Direction Before Writing Code
The ability to generate an interface quickly doesn't make the initial discovery work any less important.
If anything, it makes having a clear direction more valuable.
Before building anything, I want to understand the business, the audience, the objectives, and the constraints shaping the project.
Those findings inform the experience strategy and brand direction, giving the team a basis for evaluating the decisions that follow.
I also see value in maintaining a shared project knowledge base.
Research, meeting notes, requirements, design decisions, and strategic documents give AI tools the context they need to produce work that reflects the actual project rather than a generic interpretation of a prompt.
Without that context, speed can become a liability.
Move From Visual Exploration to Functional Design
Figma remains useful for establishing a visual language.
Designers can explore typography, color, composition, grids, imagery, and component styles without having to build every idea in code.
This isn't the stage of the process that needs an upgrade. After all, visual exploration is often the fastest way to compare directions and establish a coherent system.
The difference is that the team no longer needs to resolve every screen and interaction in a static file before moving forward.
AI-assisted coding makes it possible to bring an established design language into a functional browser environment.
For example, Claude Code can help translate existing design decisions into working interfaces, particularly when it has access to the relevant design files, components, and project context.
Designers can then work with the interface directly. They can adjust a layout, inspect its behavior at different viewport sizes, and see how actual content affects the composition.
This creates a more connected relationship between visual design and implementation.
Rather than asking developers to reconstruct every detail from a collection of references, the team can establish more of the intended experience in a working environment.
Design Beyond The Static Screen
Once the design moves into the browser, the work doesn't have to stop at making the interface look like the original Figma file.
This is where I see the biggest difference in the workflow.
Instead of producing another static screen to show a variation, designers can change the actual interface and evaluate the result.
They can test different layouts, adjust motion, and refine interactions without having to recreate every iteration in Figma first.
The design process becomes less about preparing screens for someone else to implement and more about working through the experience itself.
How To Start Designing In The Browser
1. Start with a defined visual direction
Use Figma to establish the fundamentals, including typography, color, layout, imagery, and component styles.
Give Claude access to the relevant design files and project documentation so it can work from the direction the team has already established.
This is so that you can carry existing design decisions into the browser, not generate an entirely new visual concept from scratch.
2. Build the parts that benefit from interaction
Not every screen needs to become a functional prototype. Focus on elements where seeing the design in action can reveal something a static representation cannot.
Navigation, responsive layouts, animated transitions, and complex user flows are good places to start.
Build them in the browser, test how they behave, and make adjustments based on what you observe.
3. Iterate in the environment that makes sense
Some changes are easier to explore in Figma, while others are better handled directly in the browser. Move between the two as needed rather than forcing the entire process into one tool.
A browser-based experiment might expose a problem with the visual hierarchy that requires another round of design exploration. A revised Figma layout might then return to the browser for interaction testing.
The important part is maintaining a connected workflow in which each environment helps answer a different set of questions.
4. Review the working experience before handing it off
Use the functional prototype to identify issues with layout, responsiveness, and interaction before the production build.
Bring developers into the process to assess technical constraints and determine what needs further refinement.
The prototype should provide a clearer reference for the intended experience, not be mistaken for production-ready code.
Rethink The Role of Static Design
Static design files aren't going away. Figma remains valuable for exploring concepts, establishing visual systems, and communicating design decisions.
What changes is the expectation that those files must contain every answer before the team can move forward.
With AI-assisted coding, designers can explore more of the actual experience earlier, testing ideas in the browser instead of relying exclusively on static representations.
The browser becomes an extension of the design process rather than a destination reserved for development.
For me, that's the real opportunity we're unlocking at ANML.
