My 48-Hour Quest to Make Design Intelligence Shareable
My 48-Hour Quest to Make Design Intelligence Shareable
My 48-Hour Quest to Make Design Intelligence Shareable
Last weekend I joined 7 other designers and makers from across the globe (South Africa, California, the UK, Berlin & India) for the Into Design Systems Hackathon. In 48 hours we morphed from strangers into a hive mind tackling a problem we all felt deeply: Design systems hold immense behavioral knowledge, but that "design intelligence" often gets lost when the system leaves a designer's hands.
We didn't set out to build another design tool but we wanted to explore a bigger question:
What if a design system could educate, not just generate?
Not just provide a layout, but explain "here's why this works", when to use it and what changes with context.
---
Day 1: The Global Brainstorm & Taming Scope
During our Friday kickoff a key insight emerged: many of us work with design systems in complex corporate environments. We've seen how the intent behind a component library, the researched patterns, the accessibility rules andthe business logic fails to translate for PMs, engineers, and stakeholders.
Our initial concept was a sandbox for natural language to UI, but through discussion it evolved into something more ambitious and nuanced: a pattern driven educational tool.
The Core Shift: From generating screens to explaining decisions. The tool wouldn't just assemble components, it would act as a conduit for "design intelligence" providing context, rationale, and linting against anti patterns. It would be designsystem agnostic, focusing on the UX patterns an organisation has validated.
The immediate challenge was scope. With the clock ticking we had to be ruthlessly clear so we defined a lean user journey: Describe a screen → See it built with correct patterns → Get the "why" behind each choice. We left the whiteboard with a focused mission and a plan.
---
Day 2: The Relay Race
Saturday was where chaos turned into coherence. Working in a staggered, global relay, pieces began snapping into place.
Morning: The prototype was already functional. We had a context gathering wizard capturing user role, industry andgoals. We had a multi-view comparator showing side-by-side comparisons of Material Design vs. Apple HIG. We had a working "inspector" panel providing real time rationale for every design decision.
Afternoon: We shifted from building to refining and storytelling. Shane implemented brilliant persona based explanations, showing a CEO "revenue impact" and a designer "layout rationale" for the same component.
Evening: Polish over features. Streamlined UI, collapsible panels, dark mode, accessibility options. The team each poured their expertise into parallel streams: educational components, layout alternatives, learning systems, and integration logic. Work passed across time zones like a baton, each handoff improving the whole.
---
What We Built: The Design Intelligence Playground
By demo day our prototype demonstrated a compelling vision:
Context-First Wizard Grounds every generation in your role, domain, and project goals
Multi System Comparison Compare Material, HIG, or custom systems side-by-side
Component Inspector Right-hand panel explains the "why" accessibility, layout rationale, business context
Role Adaptive Insights Toggle between Designer, Executive, or Developer views for tailored rationale
Alternative Layout Generation Keeps non-designers in problem solving mode while respecting system constraints
Flow Screens Generates multiple states (login, error, success) showing complete user journeys
Our key differentiator? We weren't just building another UI generator. Tools like Figma Make, Magic Patterns, or Subframe can create interfaces from design systems, but they don't provide context on why decisions were made. Our goal was to create a judgment engine that preserves and scales design thinking when a designer isn't in the room.
---
My Ownership Moment: Closing the Loop with Share & Export
During our Saturday refinement session we realised we had built something beautiful, a sandbox that could reason about design, adapt to different audiences, and compare systems intelligently. But as Nick demoed the prototype, I asked: "How does this leave the room?"
If our tool generated brilliant, well-reasoned interfaces but trapped them in a sandbox, we failed. Design systems exist to create consistency across teams and tools. Our intelligence needed to travel. With time getting tight, I focused on three core principles:
1. Preserve the Intelligence: Export couldn't be just screenshots. We needed to capture the reasoning.
2. Meet Stakeholders Where They Live: Different roles need different formats.
3. Close the Feedback Loop: Enable the insights to return to the design process.
Using Figma Make I vibe coded a functioning prototype of the share & export feature and then passed it onto the group so it could be integrated into our platform.
The Three Part Export System:
· PDF Reports: Structured documents with design rationale organized by role, executive summaries on business impact, technical specs for developers, and pattern documentation for designers.
· Prompt Portability: Export the generation context as a structured prompt for other AI tools or saved for iteration.
· Image & Notes: Clean visuals with embedded rationale callouts, perfect for Slack conversations or quick stakeholder reviews.
· The Collaboration Loop: The most exciting part was designing how exports could seed further collaboration. A shared PDF wasn't a dead end, it included direct links back to the playground for iteration. It created what I called the "reasoning trail" making design intelligence traceable and actionable.
The export feature was the bridge between our sandbox and the real world design process. It answered the "so what?" that makes tools actually useful in organisations.
---
The Real Win: Team Alchemy Across Time Zones
The product was the output, but the process was the highlight. How does a team of 11 strangers across 8 time zones build something coherent in 48 hours?
Radical Clarity: We obsessed over a single, compelling "why" for the tool. Every feature was weighed against whether it served our core mission of externalizing design judgment.
Asynchronous Trust: We used FigJam as a persistent brain, creating sections for concerns, ideas, and synthesis. We voted, we iterated, we trusted each other to advance the work in our waking hours. Team member Nicolas Piquita built a timezone tracker just to visualize our collaboration windows, a meta-solution to our core hackathon challenge.
Polish in Handoff: Each person focused on refining one piece before passing it on. What made this special wasn't just the volume of work, but the intentionality. Layout tweaks from Pavani, learning behaviors from Sofia, integration perspectives from Nicolas. Each handoff deepened the concept.
---
Presentation Day: 3 Minutes to Prove a Hypothesis
Sunday arrived. We had a functioning prototype, and a thorough demo:
---
What We Learned in 48 Hours
1. The biggest design system challenge is knowledge transfer.
Components are easy. The judgment behind them, when to use an error state, how to balance security with usability, which pattern fits this business context, that's hard. And that's what we need to scale.
2. Ownership is empowering.
Raising my hand for a critical feature with hours left was intimidating. But that pressure distilled my thinking to what truly mattered. The export feature became symbolic of our entire thesis: Design reasoning shouldn't be locked in designers' heads. It should be packaged, shared, and made actionable.
3. Global collaboration works when vision is clear.
Despite the time zone chaos, we built something cohesive because we all understood our north star: externalizing design judgment. Every decision—from the context wizard to the inspector panel to the export functionality—served that mission.
4. The "last mile" problem is universal.
AI can generate brilliant outputs, but if those outputs can't integrate into existing workflows, they remain curiosities. Export functionality is the last mile of AI design tools. It's not an add-on; it's the bridge between insight and impact.
---
The Afterglow: Tired, Proud, and Charged Up
The hackathon is wrapped.
This wasn't about building a shipped product. It was about proving a concept and, more importantly, connecting with a phenomenal community of thinkers who all believe design systems can be more than just component libraries, they can be teaching tools, reasoning partners, and the carriers of our collective design judgment.
Huge thanks to Sil Bormüller and the Into Design Systems team for creating this space for experimentation. And to my incredible teammates Shane, Dre, Nicolas, Shivang, Pavani, Sopia, and Nick—this was design hustle at its finest.
The hackathon may be over, but the question remains: How will we design tools that don't just generate outputs, but cultivate understanding?
I'm excited to keep exploring one export, one shared insight, one bridged workflow at a time.
Onward. 🚀
---
P.S. The journey of how a design system integrates its "behavioral identity" into LLMs is just beginning. This hackathon felt like a first step into that new frontier. If you're thinking about design systems, AI, or the space between, let's talk!
Last weekend I joined 7 other designers and makers from across the globe (South Africa, California, the UK, Berlin & India) for the Into Design Systems Hackathon. In 48 hours we morphed from strangers into a hive mind tackling a problem we all felt deeply: Design systems hold immense behavioral knowledge, but that "design intelligence" often gets lost when the system leaves a designer's hands.
We didn't set out to build another design tool but we wanted to explore a bigger question:
What if a design system could educate, not just generate?
Not just provide a layout, but explain "here's why this works", when to use it and what changes with context.
---
Day 1: The Global Brainstorm & Taming Scope
During our Friday kickoff a key insight emerged: many of us work with design systems in complex corporate environments. We've seen how the intent behind a component library, the researched patterns, the accessibility rules andthe business logic fails to translate for PMs, engineers, and stakeholders.
Our initial concept was a sandbox for natural language to UI, but through discussion it evolved into something more ambitious and nuanced: a pattern driven educational tool.
The Core Shift: From generating screens to explaining decisions. The tool wouldn't just assemble components, it would act as a conduit for "design intelligence" providing context, rationale, and linting against anti patterns. It would be designsystem agnostic, focusing on the UX patterns an organisation has validated.
The immediate challenge was scope. With the clock ticking we had to be ruthlessly clear so we defined a lean user journey: Describe a screen → See it built with correct patterns → Get the "why" behind each choice. We left the whiteboard with a focused mission and a plan.
---
Day 2: The Relay Race
Saturday was where chaos turned into coherence. Working in a staggered, global relay, pieces began snapping into place.
Morning: The prototype was already functional. We had a context gathering wizard capturing user role, industry andgoals. We had a multi-view comparator showing side-by-side comparisons of Material Design vs. Apple HIG. We had a working "inspector" panel providing real time rationale for every design decision.
Afternoon: We shifted from building to refining and storytelling. Shane implemented brilliant persona based explanations, showing a CEO "revenue impact" and a designer "layout rationale" for the same component.
Evening: Polish over features. Streamlined UI, collapsible panels, dark mode, accessibility options. The team each poured their expertise into parallel streams: educational components, layout alternatives, learning systems, and integration logic. Work passed across time zones like a baton, each handoff improving the whole.
---
What We Built: The Design Intelligence Playground
By demo day our prototype demonstrated a compelling vision:
Context-First Wizard Grounds every generation in your role, domain, and project goals
Multi System Comparison Compare Material, HIG, or custom systems side-by-side
Component Inspector Right-hand panel explains the "why" accessibility, layout rationale, business context
Role Adaptive Insights Toggle between Designer, Executive, or Developer views for tailored rationale
Alternative Layout Generation Keeps non-designers in problem solving mode while respecting system constraints
Flow Screens Generates multiple states (login, error, success) showing complete user journeys
Our key differentiator? We weren't just building another UI generator. Tools like Figma Make, Magic Patterns, or Subframe can create interfaces from design systems, but they don't provide context on why decisions were made. Our goal was to create a judgment engine that preserves and scales design thinking when a designer isn't in the room.
---
My Ownership Moment: Closing the Loop with Share & Export
During our Saturday refinement session we realised we had built something beautiful, a sandbox that could reason about design, adapt to different audiences, and compare systems intelligently. But as Nick demoed the prototype, I asked: "How does this leave the room?"
If our tool generated brilliant, well-reasoned interfaces but trapped them in a sandbox, we failed. Design systems exist to create consistency across teams and tools. Our intelligence needed to travel. With time getting tight, I focused on three core principles:
1. Preserve the Intelligence: Export couldn't be just screenshots. We needed to capture the reasoning.
2. Meet Stakeholders Where They Live: Different roles need different formats.
3. Close the Feedback Loop: Enable the insights to return to the design process.
Using Figma Make I vibe coded a functioning prototype of the share & export feature and then passed it onto the group so it could be integrated into our platform.
The Three Part Export System:
· PDF Reports: Structured documents with design rationale organized by role, executive summaries on business impact, technical specs for developers, and pattern documentation for designers.
· Prompt Portability: Export the generation context as a structured prompt for other AI tools or saved for iteration.
· Image & Notes: Clean visuals with embedded rationale callouts, perfect for Slack conversations or quick stakeholder reviews.
· The Collaboration Loop: The most exciting part was designing how exports could seed further collaboration. A shared PDF wasn't a dead end, it included direct links back to the playground for iteration. It created what I called the "reasoning trail" making design intelligence traceable and actionable.
The export feature was the bridge between our sandbox and the real world design process. It answered the "so what?" that makes tools actually useful in organisations.
---
The Real Win: Team Alchemy Across Time Zones
The product was the output, but the process was the highlight. How does a team of 11 strangers across 8 time zones build something coherent in 48 hours?
Radical Clarity: We obsessed over a single, compelling "why" for the tool. Every feature was weighed against whether it served our core mission of externalizing design judgment.
Asynchronous Trust: We used FigJam as a persistent brain, creating sections for concerns, ideas, and synthesis. We voted, we iterated, we trusted each other to advance the work in our waking hours. Team member Nicolas Piquita built a timezone tracker just to visualize our collaboration windows, a meta-solution to our core hackathon challenge.
Polish in Handoff: Each person focused on refining one piece before passing it on. What made this special wasn't just the volume of work, but the intentionality. Layout tweaks from Pavani, learning behaviors from Sofia, integration perspectives from Nicolas. Each handoff deepened the concept.
---
Presentation Day: 3 Minutes to Prove a Hypothesis
Sunday arrived. We had a functioning prototype, and a thorough demo:
---
What We Learned in 48 Hours
1. The biggest design system challenge is knowledge transfer.
Components are easy. The judgment behind them, when to use an error state, how to balance security with usability, which pattern fits this business context, that's hard. And that's what we need to scale.
2. Ownership is empowering.
Raising my hand for a critical feature with hours left was intimidating. But that pressure distilled my thinking to what truly mattered. The export feature became symbolic of our entire thesis: Design reasoning shouldn't be locked in designers' heads. It should be packaged, shared, and made actionable.
3. Global collaboration works when vision is clear.
Despite the time zone chaos, we built something cohesive because we all understood our north star: externalizing design judgment. Every decision—from the context wizard to the inspector panel to the export functionality—served that mission.
4. The "last mile" problem is universal.
AI can generate brilliant outputs, but if those outputs can't integrate into existing workflows, they remain curiosities. Export functionality is the last mile of AI design tools. It's not an add-on; it's the bridge between insight and impact.
---
The Afterglow: Tired, Proud, and Charged Up
The hackathon is wrapped.
This wasn't about building a shipped product. It was about proving a concept and, more importantly, connecting with a phenomenal community of thinkers who all believe design systems can be more than just component libraries, they can be teaching tools, reasoning partners, and the carriers of our collective design judgment.
Huge thanks to Sil Bormüller and the Into Design Systems team for creating this space for experimentation. And to my incredible teammates Shane, Dre, Nicolas, Shivang, Pavani, Sopia, and Nick—this was design hustle at its finest.
The hackathon may be over, but the question remains: How will we design tools that don't just generate outputs, but cultivate understanding?
I'm excited to keep exploring one export, one shared insight, one bridged workflow at a time.
Onward. 🚀
---
P.S. The journey of how a design system integrates its "behavioral identity" into LLMs is just beginning. This hackathon felt like a first step into that new frontier. If you're thinking about design systems, AI, or the space between, let's talk!
Last weekend I joined 7 other designers and makers from across the globe (South Africa, California, the UK, Berlin & India) for the Into Design Systems Hackathon. In 48 hours we morphed from strangers into a hive mind tackling a problem we all felt deeply: Design systems hold immense behavioral knowledge, but that "design intelligence" often gets lost when the system leaves a designer's hands.
We didn't set out to build another design tool but we wanted to explore a bigger question:
What if a design system could educate, not just generate?
Not just provide a layout, but explain "here's why this works", when to use it and what changes with context.
---
Day 1: The Global Brainstorm & Taming Scope
During our Friday kickoff a key insight emerged: many of us work with design systems in complex corporate environments. We've seen how the intent behind a component library, the researched patterns, the accessibility rules andthe business logic fails to translate for PMs, engineers, and stakeholders.
Our initial concept was a sandbox for natural language to UI, but through discussion it evolved into something more ambitious and nuanced: a pattern driven educational tool.
The Core Shift: From generating screens to explaining decisions. The tool wouldn't just assemble components, it would act as a conduit for "design intelligence" providing context, rationale, and linting against anti patterns. It would be designsystem agnostic, focusing on the UX patterns an organisation has validated.
The immediate challenge was scope. With the clock ticking we had to be ruthlessly clear so we defined a lean user journey: Describe a screen → See it built with correct patterns → Get the "why" behind each choice. We left the whiteboard with a focused mission and a plan.
---
Day 2: The Relay Race
Saturday was where chaos turned into coherence. Working in a staggered, global relay, pieces began snapping into place.
Morning: The prototype was already functional. We had a context gathering wizard capturing user role, industry andgoals. We had a multi-view comparator showing side-by-side comparisons of Material Design vs. Apple HIG. We had a working "inspector" panel providing real time rationale for every design decision.
Afternoon: We shifted from building to refining and storytelling. Shane implemented brilliant persona based explanations, showing a CEO "revenue impact" and a designer "layout rationale" for the same component.
Evening: Polish over features. Streamlined UI, collapsible panels, dark mode, accessibility options. The team each poured their expertise into parallel streams: educational components, layout alternatives, learning systems, and integration logic. Work passed across time zones like a baton, each handoff improving the whole.
---
What We Built: The Design Intelligence Playground
By demo day our prototype demonstrated a compelling vision:
Context-First Wizard Grounds every generation in your role, domain, and project goals
Multi System Comparison Compare Material, HIG, or custom systems side-by-side
Component Inspector Right-hand panel explains the "why" accessibility, layout rationale, business context
Role Adaptive Insights Toggle between Designer, Executive, or Developer views for tailored rationale
Alternative Layout Generation Keeps non-designers in problem solving mode while respecting system constraints
Flow Screens Generates multiple states (login, error, success) showing complete user journeys
Our key differentiator? We weren't just building another UI generator. Tools like Figma Make, Magic Patterns, or Subframe can create interfaces from design systems, but they don't provide context on why decisions were made. Our goal was to create a judgment engine that preserves and scales design thinking when a designer isn't in the room.
---
My Ownership Moment: Closing the Loop with Share & Export
During our Saturday refinement session we realised we had built something beautiful, a sandbox that could reason about design, adapt to different audiences, and compare systems intelligently. But as Nick demoed the prototype, I asked: "How does this leave the room?"
If our tool generated brilliant, well-reasoned interfaces but trapped them in a sandbox, we failed. Design systems exist to create consistency across teams and tools. Our intelligence needed to travel. With time getting tight, I focused on three core principles:
1. Preserve the Intelligence: Export couldn't be just screenshots. We needed to capture the reasoning.
2. Meet Stakeholders Where They Live: Different roles need different formats.
3. Close the Feedback Loop: Enable the insights to return to the design process.
Using Figma Make I vibe coded a functioning prototype of the share & export feature and then passed it onto the group so it could be integrated into our platform.
The Three Part Export System:
· PDF Reports: Structured documents with design rationale organized by role, executive summaries on business impact, technical specs for developers, and pattern documentation for designers.
· Prompt Portability: Export the generation context as a structured prompt for other AI tools or saved for iteration.
· Image & Notes: Clean visuals with embedded rationale callouts, perfect for Slack conversations or quick stakeholder reviews.
· The Collaboration Loop: The most exciting part was designing how exports could seed further collaboration. A shared PDF wasn't a dead end, it included direct links back to the playground for iteration. It created what I called the "reasoning trail" making design intelligence traceable and actionable.
The export feature was the bridge between our sandbox and the real world design process. It answered the "so what?" that makes tools actually useful in organisations.
---
The Real Win: Team Alchemy Across Time Zones
The product was the output, but the process was the highlight. How does a team of 11 strangers across 8 time zones build something coherent in 48 hours?
Radical Clarity: We obsessed over a single, compelling "why" for the tool. Every feature was weighed against whether it served our core mission of externalizing design judgment.
Asynchronous Trust: We used FigJam as a persistent brain, creating sections for concerns, ideas, and synthesis. We voted, we iterated, we trusted each other to advance the work in our waking hours. Team member Nicolas Piquita built a timezone tracker just to visualize our collaboration windows, a meta-solution to our core hackathon challenge.
Polish in Handoff: Each person focused on refining one piece before passing it on. What made this special wasn't just the volume of work, but the intentionality. Layout tweaks from Pavani, learning behaviors from Sofia, integration perspectives from Nicolas. Each handoff deepened the concept.
---
Presentation Day: 3 Minutes to Prove a Hypothesis
Sunday arrived. We had a functioning prototype, and a thorough demo:
---
What We Learned in 48 Hours
1. The biggest design system challenge is knowledge transfer.
Components are easy. The judgment behind them, when to use an error state, how to balance security with usability, which pattern fits this business context, that's hard. And that's what we need to scale.
2. Ownership is empowering.
Raising my hand for a critical feature with hours left was intimidating. But that pressure distilled my thinking to what truly mattered. The export feature became symbolic of our entire thesis: Design reasoning shouldn't be locked in designers' heads. It should be packaged, shared, and made actionable.
3. Global collaboration works when vision is clear.
Despite the time zone chaos, we built something cohesive because we all understood our north star: externalizing design judgment. Every decision—from the context wizard to the inspector panel to the export functionality—served that mission.
4. The "last mile" problem is universal.
AI can generate brilliant outputs, but if those outputs can't integrate into existing workflows, they remain curiosities. Export functionality is the last mile of AI design tools. It's not an add-on; it's the bridge between insight and impact.
---
The Afterglow: Tired, Proud, and Charged Up
The hackathon is wrapped.
This wasn't about building a shipped product. It was about proving a concept and, more importantly, connecting with a phenomenal community of thinkers who all believe design systems can be more than just component libraries, they can be teaching tools, reasoning partners, and the carriers of our collective design judgment.
Huge thanks to Sil Bormüller and the Into Design Systems team for creating this space for experimentation. And to my incredible teammates Shane, Dre, Nicolas, Shivang, Pavani, Sopia, and Nick—this was design hustle at its finest.
The hackathon may be over, but the question remains: How will we design tools that don't just generate outputs, but cultivate understanding?
I'm excited to keep exploring one export, one shared insight, one bridged workflow at a time.
Onward. 🚀
---
P.S. The journey of how a design system integrates its "behavioral identity" into LLMs is just beginning. This hackathon felt like a first step into that new frontier. If you're thinking about design systems, AI, or the space between, let's talk!