Product Design Copilot

Product Design Copilot recommends UX improvements and generates components in context, on your Figma File. (Figma Plugin)

Inspiration As a Product Designer, I wanted a copilot that understands the context of the problem I'm solving, explains “why” and builds the UI instantly in Figma.

What I built: A LLM Figma Plugin that analyzes the selected frame and context, persona, flows, and generates UX improvements, pattern suggestions with rationale, WCAG notes, and can insert real components from a bound library.

How it works: • Plugin UI collects task, persona, constraints; reads the frame. • Backend prompts LLM (Gemini); validates JSON. • Pattern mapping ties suggestions to Material Web components and previews. (Future: All OSS Design Systems. You can also provide your own Design System.) • Plugin inserts UI components and scaffolds with auto‑layout.

Lessons and challenges: • The “why this pattern fits” is the magic. • Speed matters; we cap analysis to keep round‑trip under 15s. • Library binding turns advice into production‑ready components; missing keys fall back gracefully.

Built With

• figma
• gemini
• material
• node.js
• typescript