
Low stock list screen for a web app, designed for Rosterline, a fictional operations product. Shows an inventory table filtered to low stock: tabs with counts, location and category chips, on hand vs par with stock bars, Low/Critical/Out/On order badges, last counted, suggested order quantities and a bulk create-purchase-orders bar. Minimal style: cool neutrals, Inter, 8px corners and soft shadows. Comes with the full HTML and a DESIGN.md with light and dark colour tokens.
Part of Spot low stock and receive a delivery (step 2)
#f9fcff · surface #ffffff · text #1c242e · muted #5a6472 · primary #3571ba · accent #7a76e0#0f151c · surface #1f2630 · text #f0f4f8 · muted #a9b2be · primary #7db4fb · accent #bcbeffAdd 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-inventory-dashboardSettings → 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-inventory-dashboard
gemini mcp add --transport http made-good-designs https://madegooddesigns.com/inspiration/mcp?ref=ui-inventory-dashboard
Add this to the app's MCP config (Windsurf: mcp_config.json).
Fonts: Inter (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.