Thanks to visit codestin.com
Credit goes to Github.com

Skip to content

rootrager/design-os-gemini

 
 

Repository files navigation

Design OS - Gemini Edition

Design OS - Gemini Edition

The missing design process between your idea and your codebase.

Design OS - Gemini Edition is a modified, cost-efficient version of Design OS. It helps you define your product vision, structure your data model, design your UI, and export production-ready components using Gemini CLI instead of Claude Code.

Rather than jumping straight into code, you work through a guided process that captures what you're building and why—then hands off everything your coding agent needs to build it right.

Why Gemini Edition?

The original Design OS is an incredible tool, but it relies on Claude Code. This version was created to:

  • Reduce Costs: Leverage the generous free tier of Google's Gemini models via the CLI.
  • Local Integration: Use a local bridge server to communicate with the gemini-cli tool directly.
  • Persian Support: Optimized for developers working in multilingual (RTL/LTR) environments.

The Design OS Process

  1. Product Planning — Define your vision, break down your roadmap, and model your data
  2. Design System — Choose colors, typography, and design your application shell
  3. Section Design — For each feature area: specify requirements, generate sample data, and design the screens
  4. Export — Generate a complete handoff package for implementation

Installation & Setup

1. Prerequisites

You must have the official Gemini CLI installed and configured on your system.

# Install globally with npm
npm install -g @google/gemini-cli

# Or run instantly with npx (no installation required)
# Note: The bridge server expects a global 'gemini' command by default.

The bridge server in this project specifically uses the gemini -p "..." --output-format json pattern, which is fully supported by the official CLI.

2. Clone and Install Dependencies

git clone https://github.com/yourusername/design-os-gemini.git
cd design-os-gemini
npm install

3. Running the Project

Design OS requires both the client and the bridge server to be running:

npm run dev

This will start:

  • Client: http://localhost:5173 (Vite)
  • Bridge Server: http://localhost:3001 (Express bridge to Gemini CLI)

Created by Brian Casel @ Builder Methods

Modified for Gemini by [Mahdi / rootrager]

Original tool created by Brian Casel, the creator of Builder Methods. This fork adapts the intelligence engine to use Gemini for enhanced accessibility and cost-efficiency.


License

MIT License - See LICENSE for details.

About

Using Gemini CLI instead of Cluade Code

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 94.5%
  • CSS 4.0%
  • JavaScript 1.1%
  • HTML 0.4%