EUI Content Cooker

Design reviews are more productive with believable content. EUI Content Cooker helps Elastic designers prototype with realism — generating authentic data, converting structures, and editing tables directly in Figma.

Challenge

Designers across Elastic often mock up screens using placeholder text or generic data. The results looked synthetic, especially when testing scale or presenting high-fidelity flows to stakeholders.

We also lacked efficient ways to update EUI Figma components — like breadcrumbs and tables — which required much clicking and formatting.

Idea

Build a Figma plugin that streamlines realistic content and layout creation for Elastic designs.
The tool began as a data generator, but evolved into a full content and structure utility that supports three key workflows:

1. Data Generation: Populate mockups with Elastic-specific fields — service.name, host.name, @timestamp, trace IDs, and more — using AI-defined data patterns.
2. Breadcrumb Builder: Convert a simple list of strings into correctly formatted EUI breadcrumb items, ready to drop into any page design.
3. Table Editing: Enable designers to adjust and test data layouts with direct table editing — set column widths, move or duplicate columns, and align text to mimic EUI behavior.

AI Workflow

• ChatGPT helped define generator logic for data fields and create formatting rules for breadcrumb and table structures.
• Cursor scaffolded the plugin’s architecture (manifest, worker, and UI panel) and wired up TypeScript utilities for Figma integration.
• Iterated on real Elastic designs to fine-tune realism, spacing, and layout fidelity.
• Each feature (data, breadcrumbs, tables) became modular, allowing future extensions or integration into an internal EUI design toolkit.

Outcome

• A multi-purpose Figma plugin that speeds up Elastic design work:
  • Realistic Elastic-specific data population
  • One-click breadcrumb conversion
  • Editable tables with width, alignment, and duplication controls
• Improved realism and flexibility in solution mockups
• Designers can now test scale, structure, and hierarchy without switching tools or hand-crafting layouts

Reflection

EUI Content Cooker turned routine Figma busywork into a creative advantage.
By combining AI-generated content with structured layout tools, it helps designers focus on interaction and flow — not formatting.

This project represents something new I have grown to enjoy: using AI to extend design systems into practical, empowering tools that make design faster, more expressive, and more connected to the real product.