Bridging Design and Code: Dualite Unveils GitHub Import Feature

Dualite Alpha, a local-first design-to-code automation platform, has taken another major leap in closing the gap between designers and developers. With the launch of its new GitHub Import feature, Dualite Alpha now allows teams to directly import existing code repositories into their design canvas, seamlessly syncing visual and code elements in a unified workflow.

This update significantly boosts productivity for engineering and design teams, especially those managing large or legacy codebases. Let’s explore how it works and why it matters.

Step 1: Streamlining Setup: The GitHub Integration

Getting started is as simple as selecting the “Import from GitHub” option from the Dualite Alpha interface. Upon selection, the platform prompts the user for OAuth-based GitHub permissions. This one-time step ensures secure and authenticated access to the repositories tied to your GitHub account or organisation.

Once granted, Dualite Alpha fetches all associated repositories, allowing users to select a project and desired branch for import.

Step 2: Paste your GitHub Repository Link

After pasting your GitHub repository link, you can import your code and choose your preferred framework, language, package manager, and branch. For React projects, the default selections are React + Tailwind for the framework and TypeScript for the language.

And Submit Repository

Step 3: Chat with Alpha to Modify the Project

Code files, images, and assets are loaded directly into the code environment and displayed in the chat panel. You can install dependencies and run the project to view the existing UI (e.g., a dashboard table).

To build on top of it, simply chat with Alpha. For example, you can say: Prompt Alpha: "Please add a customer page with a list of customers and relevant dummy data." Alpha will understand the request, install any necessary dependencies, and generate the new page accordingly.

Step 4: View Generated Customer Page

A new page with dummy customer data is added.

Step 5: Push Changes Back to GitHub

Click GitHub Connected and choose to push: To the same branch, or Create a new branch

Then, add a commit message and click Create Commit.

Step 6: Verify Changes on GitHub Reload the GitHub repo to see the new commit and file changes. Shows a real example: "added customer page" with routing updates.

Step 7: Create a New Branch (Optional) You can name and push to a new branch, and later open a PR from GitHub.

Conclusion

With the GitHub Import feature, Dualite Alpha not only simplifies onboarding existing projects but also creates a fluid, two-way bridge between design and development. From importing code to visually modifying components and pushing updates back to GitHub, teams can now collaborate in real time without switching tools or losing context. Whether you're modernising a legacy app or building something from scratch, Dualite Alpha empowers teams to move faster, stay in sync, and ship with confidence.