saglitzdesign-mcp 0.3.1

package/knowledge/examples/ios.json

@@ -0,0 +1,299 @@
+[
+  {
+    "id": "ios-paywall-finimize",
+    "title": "Finimize — free trial paywall with annual/monthly plans",
+    "platform": "ios",
+    "app": "Finimize",
+    "pattern": "paywall",
+    "description": "Dark paywall that stacks trust elements before the plans: an 'App of the day' App Store laurel and a rotating user testimonial carousel with star rating and '10k+ reviews'. The annual plan is pre-selected with a 'Free Trial' pill and '$0 during 1 week then $79.99/year' framing, while a high-contrast blue 'Start My Free Trial' CTA anchors the bottom.",
+    "tags": ["paywall", "pricing", "subscription", "free trial", "social proof", "testimonial", "upsell"],
+    "mobbin_url": "https://mobbin.com/screens/9519cde9-ba84-4c29-ae9a-ae38590e87be",
+    "image": "images/ios-paywall-finimize.jpg"
+  },
+  {
+    "id": "ios-paywall-moonly",
+    "title": "Moonly — weekly/annual/lifetime plan picker over hero image",
+    "platform": "ios",
+    "app": "Moonly",
+    "pattern": "paywall",
+    "description": "Full-bleed lifestyle photo behind a translucent plan card listing Weekly, Annually and Lifetime options with radio selection, per-week price normalization and 'Birth Chart' bonus badges on higher tiers. A 'What's Included' chip grid, 'No Commitment. Cancel Anytime.' reassurance line and a floating white 'Continue' pill complete the sell.",
+    "tags": ["paywall", "pricing", "subscription", "lifetime", "plan comparison", "upsell", "cancel anytime"],
+    "mobbin_url": "https://mobbin.com/screens/b2a7f4f6-e03e-4875-97ec-79c299a244c7",
+    "image": "images/ios-paywall-moonly.jpg"
+  },
+  {
+    "id": "ios-paywall-liven",
+    "title": "Liven — paywall with free-trial toggle",
+    "platform": "ios",
+    "app": "Liven",
+    "pattern": "paywall",
+    "description": "Light gradient paywall that opens with a 5-star user testimonial, then lists weekly-with-trial, annual and lifetime plans as cards; the selected trial card has a green outline, checkmark and an explicit 'Enable free trial' toggle. The CTA restates the offer ('Continue with 3 days trial') and small print covers billing terms with Terms/Privacy links.",
+    "tags": ["paywall", "pricing", "subscription", "free trial", "toggle", "testimonial", "plan selection"],
+    "mobbin_url": "https://mobbin.com/screens/a612cffd-939d-471f-9b89-bf734058ab1a",
+    "image": "images/ios-paywall-liven.jpg"
+  },
+  {
+    "id": "ios-paywall-notboring-vibes",
+    "title": "(Not Boring) Vibes — Support Creators paywall with save badge",
+    "platform": "ios",
+    "app": "(Not Boring) Vibes",
+    "pattern": "paywall",
+    "description": "Highly branded paywall with oversized display type ('SUPPORT CREATORS') and a 3D character peeking over a gradient card. Plans are big pill buttons — Monthly $6.98 vs Yearly $39.98 with an inline '(SAVE 48%)' label — plus a cheaper single-app tier below, showing how a bold visual identity can carry a simple two-tier pricing decision.",
+    "tags": ["paywall", "pricing", "subscription", "bundle", "discount badge", "bold typography", "gradient"],
+    "mobbin_url": "https://mobbin.com/screens/51ffbb52-5e31-48c6-93ad-af019c59d08d",
+    "image": "images/ios-paywall-notboring-vibes.jpg"
+  },
+  {
+    "id": "ios-onboarding-pinterest",
+    "title": "Pinterest — gender question with privacy note",
+    "platform": "ios",
+    "app": "Pinterest",
+    "pattern": "onboarding",
+    "description": "Single-question onboarding step: a dot progress indicator, one bold question ('What's your gender?'), a one-line justification explaining the data will shape content and won't be visible to others, and three full-width outlined answer buttons. Minimal chrome keeps completion friction near zero.",
+    "tags": ["onboarding", "personalization", "questionnaire", "progress indicator", "survey", "signup flow", "privacy note"],
+    "mobbin_url": "https://mobbin.com/screens/13e8e6a4-0282-4eec-bb53-1022f6d81d48",
+    "image": "images/ios-onboarding-pinterest.jpg"
+  },
+  {
+    "id": "ios-onboarding-flo",
+    "title": "Flo — personalization intro before questionnaire",
+    "platform": "ios",
+    "app": "Flo",
+    "pattern": "onboarding",
+    "description": "Pre-questionnaire interstitial that sells the upcoming questions: a friendly illustrated collage, headline 'Let's create your custom program', and an expectation-setting subline ('Takes less than a minute'). The branded CTA 'Personalize Flo for me' frames answering questions as a benefit to the user rather than a chore.",
+    "tags": ["onboarding", "personalization", "intro screen", "illustration", "expectation setting", "questionnaire", "custom program"],
+    "mobbin_url": "https://mobbin.com/screens/9d162d41-4400-45d1-b1b0-a19717c8b0b2",
+    "image": "images/ios-onboarding-flo.jpg"
+  },
+  {
+    "id": "ios-onboarding-hulu",
+    "title": "Hulu — personalized interests prompt",
+    "platform": "ios",
+    "app": "Hulu",
+    "pattern": "onboarding",
+    "description": "Dark, text-first personalization prompt that addresses the user by name ('Hey John, let's personalize your profile!') and explains the payoff — better recommendations — in one sentence. A single full-width 'Choose Interests' CTA keeps the step focused; the name highlight in brand green adds warmth without imagery.",
+    "tags": ["onboarding", "personalization", "interests", "recommendations", "dark mode", "welcome", "profile setup"],
+    "mobbin_url": "https://mobbin.com/screens/906fe67b-71bc-418a-81d7-9429663295e2",
+    "image": "images/ios-onboarding-hulu.jpg"
+  },
+  {
+    "id": "ios-auth-reddit",
+    "title": "Reddit — log in with social options above credentials",
+    "platform": "ios",
+    "app": "Reddit",
+    "pattern": "auth",
+    "description": "Login sheet that leads with three outlined social options (Google, Apple, magic 'Login Link') above an 'OR' divider and traditional username/password fields with a show-password eye and 'Forgot password?' link. Legal agreement text sits under the title, and the disabled gradient Continue button signals form state clearly.",
+    "tags": ["auth", "login", "sign in", "social login", "sso", "apple sign in", "magic link", "password"],
+    "mobbin_url": "https://mobbin.com/screens/3a993e71-e6d1-49bc-9451-495fca570e36",
+    "image": "images/ios-auth-reddit.jpg"
+  },
+  {
+    "id": "ios-auth-myfitnesspal",
+    "title": "MyFitnessPal — email login with social alternatives",
+    "platform": "ios",
+    "app": "MyFitnessPal",
+    "pattern": "auth",
+    "description": "Classic email-first login: labeled email/password fields, a full-width blue 'Log In' button and 'Forgot password?' link, then an 'OR' divider with Google, Apple and Facebook buttons. The reassurance line 'We will never post anything without your permission' addresses the top social-login anxiety right where it occurs.",
+    "tags": ["auth", "login", "sign in", "social login", "email login", "sso", "trust copy"],
+    "mobbin_url": "https://mobbin.com/screens/7336baf0-22a8-4e07-be82-59bd383432a4",
+    "image": "images/ios-auth-myfitnesspal.jpg"
+  },
+  {
+    "id": "ios-auth-vocabulary",
+    "title": "Vocabulary — value-framed sign in with Apple/Google",
+    "platform": "ios",
+    "app": "Vocabulary",
+    "pattern": "auth",
+    "description": "Account-creation screen that leads with the user benefit — 'Keep your data safe' plus a line about never losing favorites and settings — instead of a bare login form. Only two high-contrast pill buttons (Apple, Google) are offered, and terms/privacy links are tucked into small footer text, keeping the decision effortless.",
+    "tags": ["auth", "sign in", "social login", "apple sign in", "google sign in", "value proposition", "account creation"],
+    "mobbin_url": "https://mobbin.com/screens/62f02032-d47e-49ff-9bef-1424e97d00ac",
+    "image": "images/ios-auth-vocabulary.jpg"
+  },
+  {
+    "id": "ios-navigation-x",
+    "title": "X — For You feed with five-tab bottom bar",
+    "platform": "ios",
+    "app": "X",
+    "pattern": "navigation",
+    "description": "Timeline home with swipeable top tabs (For You, Following, custom lists) under a minimal header, media-rich cards with engagement counts, and a five-icon bottom tab bar (home, search, communities, notifications with badge, messages). A floating blue compose FAB overlaps the feed above the tab bar.",
+    "tags": ["navigation", "tab bar", "home feed", "timeline", "fab", "notification badge", "top tabs"],
+    "mobbin_url": "https://mobbin.com/screens/996603fa-1a10-4bc1-9431-030fa88848f2",
+    "image": "images/ios-navigation-x.jpg"
+  },
+  {
+    "id": "ios-navigation-medium",
+    "title": "Medium — dark home feed with scrollable topic tabs",
+    "platform": "ios",
+    "app": "Medium",
+    "pattern": "navigation",
+    "description": "Dark reading feed pairing a large 'Home' title and bell icon with horizontally scrollable content tabs (For you, Following, Featured) that include a '+' to add topics. Article cards mix author byline, bold headline, thumbnail and meta (date, claps, comments); a green compose FAB sits above the four-tab bottom bar.",
+    "tags": ["navigation", "tab bar", "home feed", "dark mode", "content tabs", "article cards", "fab"],
+    "mobbin_url": "https://mobbin.com/screens/857360ff-cae6-4b2c-a198-9929531590ec",
+    "image": "images/ios-navigation-medium.jpg"
+  },
+  {
+    "id": "ios-navigation-substack",
+    "title": "Substack — Notes feed with segmented filter and tab bar",
+    "platform": "ios",
+    "app": "Substack",
+    "pattern": "navigation",
+    "description": "Social notes feed with a large page title, avatar and search in the header, plus Home/Subscribed filter pills directly under it. Posts embed rich link previews with image, source and title; an orange compose FAB floats above a five-tab bottom bar where the active tab carries a subtle dot indicator.",
+    "tags": ["navigation", "tab bar", "feed", "filter pills", "link preview", "fab", "social"],
+    "mobbin_url": "https://mobbin.com/screens/929e23be-180b-4234-aa16-a214a0f7f7c7",
+    "image": "images/ios-navigation-substack.jpg"
+  },
+  {
+    "id": "ios-navigation-behance",
+    "title": "Behance — Explore grid with top tabs and bottom bar",
+    "platform": "ios",
+    "app": "Behance",
+    "pattern": "navigation",
+    "description": "Visual discovery home built as a two-column masonry grid of project cards, each with a thumbnail, owner avatar and truncated title. The header combines a search icon, Explore/For You/Following text tabs and a filter control; a five-icon bottom tab bar handles global navigation, letting the imagery dominate.",
+    "tags": ["navigation", "tab bar", "explore", "grid feed", "masonry", "discovery", "portfolio"],
+    "mobbin_url": "https://mobbin.com/screens/4312076f-72e1-443f-87f4-538438eecd4c",
+    "image": "images/ios-navigation-behance.jpg"
+  },
+  {
+    "id": "ios-checkout-etsy",
+    "title": "Etsy — choose a payment method with stepper",
+    "platform": "ios",
+    "app": "Etsy",
+    "pattern": "checkout",
+    "description": "Payment step with a three-stage progress stepper (Shipping, Payment, Review) and reassuring copy — 'You will not be charged until you review this order'. Radio rows pair each method (card, PayPal, Apple Pay, Klarna) with recognizable brand logos, and an ineligible Klarna option is disabled with its '$50 minimum' reason stated inline.",
+    "tags": ["checkout", "payment", "payment methods", "stepper", "progress indicator", "apple pay", "klarna", "ecommerce"],
+    "mobbin_url": "https://mobbin.com/screens/5712cce4-8d52-4d29-bee9-ece6ca849b5c",
+    "image": "images/ios-checkout-etsy.jpg"
+  },
+  {
+    "id": "ios-checkout-uniqlo",
+    "title": "UNIQLO — payment option step with trust footer",
+    "platform": "ios",
+    "app": "UNIQLO",
+    "pattern": "checkout",
+    "description": "Numbered checkout section ('2. Payment option') listing Credit card, PayPal, Apple Pay and Klarna as large outlined buttons, with coupon and gift card rows collapsed above. A help entry point ('IQ chat') and a TLS encryption reassurance line with lock icon at the bottom tackle checkout abandonment directly.",
+    "tags": ["checkout", "payment", "payment methods", "coupon", "gift card", "trust badge", "ecommerce", "help"],
+    "mobbin_url": "https://mobbin.com/screens/b488d6f6-ce3d-4853-a0c1-15a4a4be3944",
+    "image": "images/ios-checkout-uniqlo.jpg"
+  },
+  {
+    "id": "ios-checkout-warby-parker",
+    "title": "Warby Parker — minimal single-question payment screen",
+    "platform": "ios",
+    "app": "Warby Parker",
+    "pattern": "checkout",
+    "description": "Radically pared-down payment step framed as a single question — 'How do you want to pay?' with the order total right beneath. One card groups two radio options (card, PayPal) with icons, a secondary 'Check and apply benefits' row follows, and the blue 'Review your order' CTA promises a review step before commitment.",
+    "tags": ["checkout", "payment", "payment selection", "minimal", "radio buttons", "order total", "conversational ui"],
+    "mobbin_url": "https://mobbin.com/screens/b595b518-e339-44c9-86ca-83fd80a0184c",
+    "image": "images/ios-checkout-warby-parker.jpg"
+  },
+  {
+    "id": "ios-checkout-zalando",
+    "title": "Zalando — checkout with saved card and order summary",
+    "platform": "ios",
+    "app": "Zalando",
+    "pattern": "checkout",
+    "description": "Checkout combining payment selection and cost transparency on one screen: radio options for PayPal and credit/debit card (with network logos), a saved card row with delete icon, and a 'New Card' option. Below, a grey summary block itemizes subtotal, delivery and VAT-inclusive total right above the 'Next' button.",
+    "tags": ["checkout", "payment", "saved card", "order summary", "voucher", "ecommerce", "total breakdown"],
+    "mobbin_url": "https://mobbin.com/screens/a4f7b96f-ff18-49ef-914a-9a9cff8c8a42",
+    "image": "images/ios-checkout-zalando.jpg"
+  },
+  {
+    "id": "ios-settings-tinder",
+    "title": "Tinder — settings grouped by feature with section labels",
+    "platform": "ios",
+    "app": "Tinder",
+    "pattern": "settings",
+    "description": "Settings list where every feature (Matchmaker, Q&A Events, Top Picks, Double Date, Music Mode, Astrology) gets its own uppercase section label above a single rounded 'Manage' row with trailing value and chevron. A checkmark confirm button in the header replaces a save flow; heavy whitespace makes a long list scannable.",
+    "tags": ["settings", "preferences", "grouped list", "section headers", "list rows", "chevron", "account"],
+    "mobbin_url": "https://mobbin.com/screens/b2a957ef-0522-463f-a64b-9b0015af8cd9",
+    "image": "images/ios-settings-tinder.jpg"
+  },
+  {
+    "id": "ios-settings-gentler-streak",
+    "title": "Gentler Streak — settings with toggles and helper text",
+    "platform": "ios",
+    "app": "Gentler Streak",
+    "pattern": "settings",
+    "description": "Native-feeling grouped settings mixing row types: value rows (Character: 'Thematic'), toggles for calculation options, and navigation rows for Notifications. Footnote helper text under each group explains what the setting actually does, and an 'App Settings' row with external-link arrow hands off to iOS system settings honestly.",
+    "tags": ["settings", "preferences", "grouped list", "toggles", "helper text", "ios native", "switch"],
+    "mobbin_url": "https://mobbin.com/screens/07d9ec6a-cb0e-4cb3-9a3c-4505d32f74ab",
+    "image": "images/ios-settings-gentler-streak.jpg"
+  },
+  {
+    "id": "ios-settings-textnow",
+    "title": "TextNow — settings with mixed row types under uppercase headers",
+    "platform": "ios",
+    "app": "TextNow",
+    "pattern": "settings",
+    "description": "Dense settings screen organized under small uppercase section headers (Profile, Notifications, Voice, Look and Feel) that mixes disclosure rows, value rows ('Notification Sound: Alert 3', 'Call Forwarding: Off') and inline green toggles. Current values shown in the accent color let users audit state without drilling into subpages.",
+    "tags": ["settings", "preferences", "grouped list", "toggles", "notifications", "section headers", "value rows"],
+    "mobbin_url": "https://mobbin.com/screens/ad5aa6e3-c55c-441c-ac9e-691473e07f92",
+    "image": "images/ios-settings-textnow.jpg"
+  },
+  {
+    "id": "ios-empty-state-shake-shack",
+    "title": "Shake Shack — empty bag with playful copy and CTA",
+    "platform": "ios",
+    "app": "Shake Shack",
+    "pattern": "empty-state",
+    "description": "Empty cart turned into brand moment: a line-drawn character holding a takeout bag with '?!', playful headline 'Say what?! Your bag is empty.', and a next-step subline. The single green 'Find a Location' button converts the dead end into the exact action that fills the bag.",
+    "tags": ["empty state", "empty cart", "call to action", "illustration", "brand voice", "zero state", "food ordering"],
+    "mobbin_url": "https://mobbin.com/screens/c041a22d-8521-4351-8a41-18892e7e795c",
+    "image": "images/ios-empty-state-shake-shack.jpg"
+  },
+  {
+    "id": "ios-empty-state-coursera",
+    "title": "Coursera — no enrolled courses with Explore CTA",
+    "platform": "ios",
+    "app": "Coursera",
+    "pattern": "empty-state",
+    "description": "Learn-tab empty state with a simple open-book illustration, an encouraging headline — 'You haven't enrolled in any courses (yet)' — and a one-line nudge to start. The blue 'Explore courses' button routes the user straight to the catalog, and the tab bar remains visible so context is never lost.",
+    "tags": ["empty state", "zero state", "call to action", "illustration", "education", "onboarding nudge", "first use"],
+    "mobbin_url": "https://mobbin.com/screens/7e5f69c8-bf8b-4a66-99dc-c811a1aeded7",
+    "image": "images/ios-empty-state-coursera.jpg"
+  },
+  {
+    "id": "ios-empty-state-grab",
+    "title": "Grab — no bookings yet with redirect to discovery",
+    "platform": "ios",
+    "app": "Grab",
+    "pattern": "empty-state",
+    "description": "Empty bookings list using a friendly human illustration, a plain-language headline ('No restaurant bookings yet') and a subline that suggests the fix — explore top dining spots and book instantly. A full-width green 'Explore dining spots' CTA converts the empty screen into an acquisition surface for another feature.",
+    "tags": ["empty state", "zero state", "call to action", "illustration", "cross-sell", "bookings", "discovery"],
+    "mobbin_url": "https://mobbin.com/screens/1ecb8058-f083-42c9-980a-ae3eb46e3eab",
+    "image": "images/ios-empty-state-grab.jpg"
+  },
+  {
+    "id": "ios-search-linkedin",
+    "title": "LinkedIn — typeahead company search results",
+    "platform": "ios",
+    "app": "LinkedIn",
+    "pattern": "search",
+    "description": "Scoped search ('Company') showing live typeahead results as the user types 'Mobbin': each row pairs a logo, bold name and a category subtitle ('Company · Software Development') for instant disambiguation. Clear-input control, keyboard kept visible and zero extra chrome make refinement fast.",
+    "tags": ["search", "typeahead", "autocomplete", "results list", "avatars", "disambiguation", "keyboard"],
+    "mobbin_url": "https://mobbin.com/screens/32f5c06d-4140-4c62-8c58-8a72604a7c9f",
+    "image": "images/ios-search-linkedin.jpg"
+  },
+  {
+    "id": "ios-search-apple-tv",
+    "title": "Apple TV — search results with category filter tabs",
+    "platform": "ios",
+    "app": "Apple TV",
+    "pattern": "search",
+    "description": "Search results for 'Live' organized by scope pills (Top Results, Movies, TV Shows, Cast & Crew) with the active filter highlighted. Each result row uses a landscape thumbnail, title, type label and an overflow menu; the Search tab in the bottom bar stays highlighted to anchor location.",
+    "tags": ["search", "results list", "filter tabs", "scope pills", "thumbnails", "media", "tab bar"],
+    "mobbin_url": "https://mobbin.com/screens/797ef41b-5a29-437e-83c1-4cb0b8f2edee",
+    "image": "images/ios-search-apple-tv.jpg"
+  },
+  {
+    "id": "ios-search-artsy",
+    "title": "Artsy — search overlay with instant artist results",
+    "platform": "ios",
+    "app": "Artsy",
+    "pattern": "search",
+    "description": "Search presented as an overlay dimming the browsing context behind it, with instant artist results ('Pablo' → Picasso, Serrano, ...) rendered as small artwork thumbnails plus serif names that reinforce the gallery brand. Clear and Close affordances plus a keyboard Search key keep the interaction lightweight and reversible.",
+    "tags": ["search", "instant results", "overlay", "typeahead", "thumbnails", "art", "autocomplete"],
+    "mobbin_url": "https://mobbin.com/screens/12ae613f-b698-49eb-bc85-838b82bee5c0",
+    "image": "images/ios-search-artsy.jpg"
+  }
+]