
Savings goal with projection screen for a mobile app, designed for Mintwell, a fictional finance product. Shows a personal savings goal: a progress ring (64% saved), amount saved vs target, months to goal, a balance chart with a dashed projection to the goal line and a faster what-if scenario, an auto-save slider, round-up toggles and other goals with progress bars. 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.
#f6faff · surface #ffffff · text #1e262f · muted #5a6471 · primary #1e63b2 · accent #9372da#0c1117 · surface #1b222b · text #f1f4f9 · muted #a9b2be · primary #6eaaf6 · accent #c9b6ffAdd 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-savings-goal-appSettings → 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-savings-goal-app
gemini mcp add --transport http made-good-designs https://madegooddesigns.com/inspiration/mcp?ref=ui-savings-goal-app
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.