Home

Work

Feedbacks

Contact

Resume

Home

Work

Feedbacks

Contact

Resume

Resume

DESIGN SYSTEM

DESIGN SYSTEM

AI ASSISTED WORKFLOW

AI ASSISTED WORKFLOW

AI APPLICATION

Agentic Standarization:

Agentic Standarization:

Agentic Standarization:

Scaling Product with AI Automation

Scaling Product with AI Automation

Scaling Product with AI Automation

A framework for multi platform consistency, reducing production overhead for 20+ teams through a closed-loop AI to Code pipeline.

A framework for multi platform consistency, reducing production overhead for 20+ teams through a closed-loop AI to Code pipeline.

PLATFORM

PLATFORM

INNOTE

INNOTE

STATUS

STATUS

In Progress

In Progress

SCOPE

SCOPE

Audit · Doc · Define · Verify

Audit · Doc · Define · Verify

Due to NDA restrictions, only a high-level overview of the project can be shared. The work presented highlights the overall problem space, design approach, and impact without disclosing confidential business information or proprietary details.

Due to NDA restrictions, only a high-level overview of the project can be shared. The work presented highlights the overall problem space, design approach, and impact without disclosing confidential business information or proprietary details.

WHAT WE ACHIEVED

100+

100+

100+

Components standardised

20+

20+

20+

Teams empowered

-40%

-40%

-40%

reduction in production TAT

STRATEGIC CONTEXT

Platform-First Thinking:
Solving for Ecosystems, Not Features.

Platform-First Thinking:
Solving for Ecosystems, Not Features.

Platform-First Thinking:
Solving for Ecosystems, Not Features.

Product serves as the foundational core for our entire ecosystem. The challenge wasn't a 'UI cleanup' but instead it was a systems architecture problem. My objective was to redefine success from 'delivering components' to 'engineering a self governing system'."

Product serves as the foundational core for our entire ecosystem. The challenge wasn't a 'UI cleanup' but instead it was a systems architecture problem. My objective was to redefine success from 'delivering components' to 'engineering a self governing system'."

Similar cards existed with different designs due to lack of standard guidelines.

Similar cards existed with different designs due to lack of standard guidelines.

12+

12+

Teams building on this platform
simultaneously

Teams building on this platform
simultaneously

12 team spread across 16 products were continuously building on this platform.

only 40%

only 40%

Adherence to the design system.

Adherence to the design system.

Current DS was made for web apps and full screen softwares. This platform works in constraints of 400px to 600px. Thus DS guideline did not apply to InNote as a platform.

Current DS was made for web apps and full screen softwares. This platform works in constraints of 400px to 600px. Thus DS guideline did not apply to InNote as a platform.

Avg. 8x

Avg. 8x

Avg. 8x

Times the same pattern existed in non-standard form

Times the same pattern existed in non-standard form

More that 8 non standard pattern for cards, tabs, rows, filters, and footers existed in InNote. Each team had rebuilt their own version. The design file had diverged from the MDS system entirely.

More that 8 non standard pattern for cards, tabs, rows, filters, and footers existed in InNote. Each team had rebuilt their own version. The design file had diverged from the MDS system entirely.

Why AI

Why AI

The case for AI tools

The case for AI tools

Manually auditing over 250+ sections, writing Confluence docs, replacing components, and verifying bindings would have taken a whole quarter of focused Figma work. AI tools like GPT, Claude and perplexity help to sort, verify and create components as per requirements.

Manually auditing over 250+ sections, writing Confluence docs, replacing components, and verifying bindings would have taken a whole quarter of focused Figma work. AI tools like GPT, Claude and perplexity help to sort, verify and create components as per requirements.

THE PROBLEM

Three forces pulling the

platform apart.

Three forces pulling the

platform apart.

Three forces pulling the

platform apart.

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Fragmentation

Each team had recreated the same patterns independently which made global updates impossible without touching every instance manually.

Downstream effect

A small change to one screen ripple to all 200+ screens. Since the instances are detached, each screen needs to be edited individually resulting in errors and inconsistent designs.

Component Redundancy

There were no reusable components that different teams can use to create design as per their requirements.

Downstream effect

Every card design looked different. Placement of elements was not constant resulting in a broken experience for the customers

Knowledge Silos

Confluence document were often missing for the design decisions taken at the time designing that particular card

Downstream effect

Designers had to often follow instict or browse through endless files to get context of the design they wanted to make

THE APPROACH - AI ASSISTED FLOW

Audit. Create . Document
Test in that order

Audit. Create . Document
Test in that order

Audit. Create . Document
Test in that order

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Figma Audit


  • Read InNote node to get full design context including child frames, variants, and layer structure. via MCP

  • Identified all patterns across sections

  • Catalogued different type of cards, different patterns for similar information.

Create

Claude.md

Design enforcer doc


  • Read InNote node to get full design context including child frames, variants, and layer structure

  • Catalogued different type of cards, different patterns for similar information.

Test

PRD execution


  • Use a combination of existing PRD + deign enforcer doc + design context to create designs directly in FIGMA file via MCP connection using claude Identified all patterns across sections

Document

Guidelines and guardrails

AI assisted SOP doc


  • Design guidelines for different component for designer and devs. to refer

  • Create skills and agent to enable designers to create design.

  • Create SOP for for creating new screens using claude .

DEFINING COMPONENTS

2 Card Designs making
200+ screens

2 Card Designs making
200+ screens

2 Card Designs making
200+ screens

platform works on widgets in form of cards. Cards form the basis of every screen. As part of standardisation, the first task was to define generic card designs that can be used to design every screen on the platform

platform works on widgets in form of cards. Cards form the basis of every screen. As part of standardisation, the first task was to define generic card designs that can be used to design every screen on the platform

We used claude and Figma MCP server to directly create

STESS TESTING

4 Teams, 1 prompt
6 Products

4 Teams, 1 prompt
6 Products

4 Teams, 1 prompt
6 Products

Boundary Testing: We didn't just check if it looked pretty. We performed stress tests by injecting maximum character counts, multi-language strings, and broken image links to see where the component logic would fail.

Success Metric: We achieved a 90% First-Pass Success Rate, meaning 9 out of 10 AI-generated screens required zero manual adjustment by a designer.

Boundary Testing: We didn't just check if it looked pretty. We performed stress tests by injecting maximum character counts, multi-language strings, and broken image links to see where the component logic would fail.

Success Metric: We achieved a 90% First-Pass Success Rate, meaning 9 out of 10 AI-generated screens required zero manual adjustment by a designer.

PROOF ON CONCEPT

Bridging the Gap:
A Bi Directional Design to Git Pipeline.

Bridging the Gap:
A Bi Directional Design to Git Pipeline.

Bridging the Gap:
A Bi Directional Design to Git Pipeline.

The ultimate test of system maturity is the friction between Design and Engineering. We moved beyond static handoffs to a proof of concept where design changes were pushed directly to Git.

The ultimate test of system maturity is the friction between Design and Engineering. We moved beyond static handoffs to a proof of concept where design changes were pushed directly to Git.

The first test failed because the code did not follow the existing structure of product, the output took too much time because of scanning to all the git repos and too many tokens were being consumed making the process not right

SETTING THINGS RIGHT

Creating a skill
That unifies it all

Creating a skill
That unifies it all

Creating a skill
That unifies it all

Creating a skill that helps AI understand context and wear different hats. Claude worked in different rolls from working as PRD evaluator to doing QA of final output

Creating a skill that helps AI understand context and wear different hats. Claude worked in different rolls from working as PRD evaluator to doing QA of final output

The final code seemed ship ready and just required backend integration before pushing it to stagging, This helped in redifing the design handoff. the handoffs were no one figma files but actual deployable level code that could seamlessly be integrated into the current product repos.

THE DESIGN <> DEV HANDOFF PROCESS

Operational Efficiency:
Redefining the Handoff Paradigm.

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Design planning


  • A crossfuctional brainstorming activity between design, product and egineering to define

  • requirements, design expectations and engg. constraints

Claude + Skills


  • Designer uses claude and skill to create designs.

  • The skill enables the designers to generate wireframes before moving to the final design.

  • Once the wireframes are finalised, the final design are generated and converted to code which is in sync with the current code

Design Repo


  • Designers store the design in individual brances on git which can be accessed by developers.

Integration + QA


  • Backend is integrated to this frontend code that is generated.

  • The code is pushed to stagging for QA and customer validation

View Other Projects

03

AAKASH EDUCATION

Enterprise CMS

04

DOMINOS INDIA

Localisation of App

SETTING THINGS RIGHT

Creating a skill
That unifies it all

Creating a skill that helps AI understand context and wear different hats. Claude worked in different rolls from working as PRD evaluator to doing QA of final output

The final code seemed ship ready and just required backend integration before pushing it to stagging, This helped in redifing the design handoff. the handoffs were no one figma files but actual deployable level code that could seamlessly be integrated into the current product repos.

SETTING THINGS RIGHT

Creating a skill
That unifies it all

Creating a skill
That unifies it all

Creating a skill
That unifies it all

Creating a skill that helps AI understand context and wear different hats. Claude worked in different rolls from working as PRD evaluator to doing QA of final output

Creating a skill that helps AI understand context and wear different hats. Claude worked in different rolls from working as PRD evaluator to doing QA of final output

The final code seemed ship ready and just required backend integration before pushing it to stagging, This helped in redifing the design handoff. the handoffs were no one figma files but actual deployable level code that could seamlessly be integrated into the current product repos.

THE DESIGN <> DEV HANDOFF PROCESS

Operational Efficiency:
Redefining the Handoff Paradigm.

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Design planning


  • A crossfuctional brainstorming activity between design, product and egineering to define

  • requirements, design expectations and engg. constraints

Claude + Skills


  • Designer uses claude and skill to create designs.

  • The skill enables the designers to generate wireframes before moving to the final design.

  • Once the wireframes are finalised, the final design are generated and converted to code which is in sync with the current code

Design Repo


  • Designers store the design in individual brances on git which can be accessed by developers.

Integration + QA


  • Backend is integrated to this frontend code that is generated.

  • The code is pushed to stagging for QA and customer validation

THE DESIGN <> DEV HANDOFF PROCESS

Operational Efficiency:
Redefining the Handoff Paradigm.

Operational Efficiency:
Redefining the Handoff Paradigm.

Operational Efficiency:
Redefining the Handoff Paradigm.

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Design system debt rarely announces itself. It accumulates silently in every component that gets rebuilt because the right one wasn't found, in every hex value that gets hardcoded because binding felt slower.

Design planning


  • A crossfuctional brainstorming activity between design, product and egineering to define

  • requirements, design expectations and engg. constraints

Claude + Skills


  • Designer uses claude and skill to create designs.

  • The skill enables the designers to generate wireframes before moving to the final design.

  • Once the wireframes are finalised, the final design are generated and converted to code which is in sync with the current code

Design Repo


  • Designers store the design in individual brances on git which can be accessed by developers.

Integration + QA


  • Backend is integrated to this frontend code that is generated.

  • The code is pushed to stagging for QA and customer validation

View Other Projects

03

AAKASH EDUCATION

Enterprise CMS

04

DOMINOS INDIA

Localisation of App

View Other Projects

View Other Projects

03

AAKASH EDUCATION

Enterprise CMS

04

DOMINOS INDIA

Localisation of App

03

Enterprise CMS

AAKASH EDUCATION

04

DOMINOS INDIA

Localisation of App

gupta.dhruv2121@gmail.com

+91 9463450809

Create a free website with Framer, the website builder loved by startups, designers and agencies.