
AI generation workspace screen for a web app, designed for Lumen Desk, a fictional ai product. Shows a prompt and sources input panel with generation options, a generated market brief with inline citations, KPI cards and a table, a citations inspector and next-step actions (refine, export, share). Corporate style: IBM Plex Sans, a dark brand-coloured sidebar, 4px corners and subtle shadows. Comes with the full HTML and a DESIGN.md with light and dark colour tokens.
#f9fdff · surface #e8f1f6 · text #121d22 · muted #58666d · primary #0080a9 · accent #5769ca#10171a · surface #1d262b · text #eceff0 · muted #a8b3b9 · primary #2bc5ff · accent #a2b5ffAdd the Made Good Designs library to your assistant once. Then ask for UI references, brand palettes, font pairings and design tokens in any chat.
https://madegooddesigns.com/inspiration/mcp?ref=ui-ai-interfaceSettings → Connectors → Add custom connector → paste the URL.
Settings → Apps & Connectors → Advanced → Developer mode → Create → paste the URL.
One click, then confirm in Cursor.
One click, then confirm in VS Code (Copilot agent mode).
claude mcp add --transport http made-good-designs https://madegooddesigns.com/inspiration/mcp?ref=ui-ai-interface
gemini mcp add --transport http made-good-designs https://madegooddesigns.com/inspiration/mcp?ref=ui-ai-interface
Add this to the app's MCP config (Windsurf: mcp_config.json).
Fonts: IBM Plex Sans (Google Fonts)
Prompt copied: paste it into the chat that just opened.
Writing about this screen?
search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.