Brand Ally

Autonomous brand compliance that finds violations and opens PRs to fix them.

Comment

Inspiration

As digital products scale across teams and repositories, brand consistency inevitably breaks down. Design guidelines end up trapped inside Figma files or PDF brand kits while developers move fast. The result is design drift: mismatched hex colors, unauthorized typography, inconsistent border radiuses, and broken contrast standards slipping straight into production.

Manual design reviews are time-consuming bottlenecks. We asked ourselves: Why should human developers spend hours spotting and manually patching UI styling defects when an autonomous agent can observe, diagnose, and fix them automatically? This inspired Brand Ally—an agentic brand partner that bridges the gap between design governance and code execution.

What it does

Brand Ally is an autonomous brand compliance and remediation agent built for continuous delivery pipelines.

  • Dual-Modality Auditing: Analyzes both static frontend code (CSS, Tailwind, styled components) and live UI screenshots to detect visual and structural brand discrepancies.
  • Autonomous Remediation: Instead of just flagging errors, Brand Ally generates precise, PR-ready Git patch files (.patch / .diff) to resolve color deviations, typography violations, and spacing issues directly.
  • Seamless CI/CD Integration: Integrates into CI/CD pipelines via GitHub Actions, running automated compliance checks on pull requests and offering inline autonomous fixes.
  • Interactive Command Center: Features a real-time web dashboard allowing teams to trigger on-demand audits, review diffs, inspect compliance scores, and download remediation patches instantly.

How we built it

Brand Ally is engineered with an agentic architecture powered by Google Cloud and Google AI:

  • Core Agent Intelligence: Built using the Google Agent Development Kit (ADK) and orchestrated with Gemini, leveraging its high-reasoning multimodal capabilities to cross-reference design tokens against UI screenshots and codebase extracts.
  • Autonomous Task Workflow: The agent executes a multi-step cycle: Input (Code/Image) -> Gemini Multimodal Analysis -> Violation Detection -> Rule Engine -> Diff Generation -> Git Patch Output.
  • Backend & Deployment: Fully containerized and hosted as a serverless service on Google Cloud Run, ensuring rapid cold starts, low latency, and infinite scaling during CI batch jobs.
  • CI/CD Automation: Integrated a custom GitHub Actions workflow file that triggers Brand Ally on every pull request, auditing code changes against configured brand rulesets.

Challenges we ran into

  • Patch Precision & Code Context: Generating valid, syntactically correct Git patch files across different styling paradigms (Tailwind utility classes vs. raw CSS) required rigorous prompt engineering and structured tool-calling schemas within the agent framework.
  • Multimodal Visual Grounding: Ensuring Gemini accurately mapped detected visual anomalies in rendered UI screenshots directly to the specific lines of underlying frontend code without hallucinating CSS rules.
  • Latency Optimization: Streamlining the end-to-end agentic workflow to ensure image token processing, rule verification, and diff generation ran fast enough to fit naturally within standard CI pull request check windows.

Accomplishments that we're proud of

  • Zero-Friction Remediation: Creating an agent that doesn’t stop at reporting bugs—it generates working code fixes that developers can apply in one click.
  • Production-Grade Architecture: Successfully deploying a containerized agent to Google Cloud Run with clean integration into GitHub Actions.
  • True Agentic Autonomy: Delivering a complete end-to-end autonomous loop: Trigger -> Audit -> Decide -> Patch -> Pull Request.

What we learned

  • The Power of Agentic Frameworks: Structuring workflows with Google ADK enabled modular tool calling, deterministic validation steps, and robust error recovery.
  • Multimodal Reasoning for UI: Gemini’s multimodal understanding is uniquely positioned to evaluate spatial hierarchy and visual aesthetics alongside raw source code.
  • Developer Experience First: For AI agents to gain traction in software engineering teams, their output must fit seamlessly into existing Git-native workflows.

What's next for Brand Ally

  • Direct Figma Sync: Real-time bi-directional syncing with Figma design token APIs to automatically update compliance rules whenever design tokens change.
  • Automated PR Merging & Canary Audits: Allowing Brand Ally to autonomously branch, commit, and open PRs directly via the GitHub API with visual regression test results attached.
  • Expanded Framework Support: Native rule parsers for mobile platforms (Jetpack Compose, Flutter, SwiftUI) to provide unified brand enforcement across web and mobile ecosystems.

Built With

  • ai-agents
  • automation
  • ci-cd
  • devops
  • docker
  • fast-api
  • frameworks-&-languages-python-typescript-react-next.js-tailwindcss-fast-api-docker-automation
  • gemini
  • git
  • github-actions
  • google-agent-development-kit
  • google-cloud
  • google-cloud-run
  • multimodal-ai
  • next.js
  • python
  • react
  • tailwindcss
  • typescript
  • vertex-ai
  • webhooks
Share this project:

Updates