Handing Off to Developers
Once your interactive prototype captures the right experience, the next step is getting it into the hands of your engineering team. Dazl supports several handoff patterns depending on what works best for your team.
Once your interactive prototype captures the right experience, the next step is getting it into the hands of your engineering team. Dazl supports several handoff patterns depending on what works best for your team.
Handoff Options
Share a Published URL
Publish the project and share the live URL. Developers can interact with the prototype to understand the intended behavior — click through flows, inspect states, test on different devices. This is especially useful for communicating interactions and animations that are hard to describe in a static document.
Share a Spec or Prompt
Export your project's specifications from the Specs panel and share them as a prompt or brief that a developer can feed into their own AI coding tool. The combination of a clear spec plus a working interactive prototype gives engineering a strong foundation to implement from.
This approach works well when:
- The engineering team uses a different tech stack than the prototype
- The developer prefers to implement from scratch using their own tools
- The prototype is meant to communicate behavior and design intent, not be the production codebase
Push to GitHub
Click the GitHub icon in the top bar to connect your project to a GitHub repository. Once connected, you can push commits and pull changes without leaving the editor. This is the most seamless handoff option — your engineering team works from the same repo and can pick up exactly where you left off.
Download the Project
From the Project menu (click the project name in the top-left corner), select Download Project to get a copy of the source code. Share the downloaded files with your team through whatever channel works — email, Slack, a shared drive.
What Makes a Good Handoff
A Dazl prototype is more than a static mockup. When you hand off, the developer gets:
- Working interactions — they can click through the prototype to see exactly how flows should behave
- Real code — the code is readable, structured, and uses standard web technologies (React, CSS)
- Design system — the theme tokens, color scales, and typography scales are defined and consistent
- Specs — your project specifications document the reasoning and requirements behind the decisions
You don't need a 20-page spec when you have a working interactive prototype. A focused spec that explains the why behind key decisions, paired with a prototype that demonstrates the what, communicates more effectively than a document alone.
Related Articles
- Publishing and Sharing – share a live URL for review
- Writing Specs – create specs that support handoff
Publishing and Sharing
When your interactive prototype is ready for feedback, you can publish it to a live URL or share the preview link — giving stakeholders, team members, or test users access to the real experience.
The Editor Layout
The Editor is the workspace where you build, edit, and inspect your project. It opens when you click a project from the Dashboard.