{"slug": "details-so", "title": "Details.so", "summary": "Details.so launched a handpicked website-design inspiration gallery that captures individual interface details — hero sections, footers, page transitions, preloaders and micro-interactions — from live production sites, tagged by hand and updated weekly. The service also offers an MCP integration that connects the reference library to AI clients such as Claude Code and Cursor, letting users search Details from their AI tools.", "body_md": "## This is Inspo\n\nThe best websites, handpicked weekly. Only the exceptional ones make it in.\n\nEverything you need to find better ideas and build websites that stand out.\n\nGo find the details that make your next project stand out. We'll keep adding new ones every week.\n\nUnlock unlimited inspiration for your next project.\n\nType what you need in your own words. Smart Search will find the best matches for you, or use filters to narrow things down.\n\nReal transitions, buttons, and sections as paste-ready code. The details that make sites unforgettable.\n\nConnect Details to your AI. Find the right inspiration, explore directions, and bring them into your project.\n\nIf it's here, it's exceptional. Updated weekly.\n\nCouldn't load more items. Refresh the page or sign in again.\n\nOne great detail is all it takes to change a project. Find yours. New ones added every week.\n\nThe goal isn't to copy what you see. It's to train your eye, find better ideas faster, and make stronger design decisions when you start your next project.\n\nDetails is focused on the parts that make great websites great: hero sections, footers, page transitions, preloaders and the micro-interactions in between. Every example is captured from a live production site, tagged by hand, and added weekly.\n\nMost galleries collect full-page screenshots, which means finding one great footer or preloader requires digging through entire sites. Here, every capture is filed by the exact detail it shows, so the right reference is a filter away.\n\nEverything is handpicked from production websites. There are no concept shots that never shipped.\n\nThe more exceptional interfaces you study, the easier it becomes to recognize the spacing, hierarchy, motion and interaction choices that make a website feel considered.\n\nOver time, those decisions become instinct, so you can move from a blank page to a strong direction faster.\n\nFull-site galleries are useful when you need broad direction. But finding one strong navigation, footer or transition means opening and scanning site after site.\n\nDetails organizes the exact parts, so you can compare relevant approaches in minutes instead of searching for hours.\n\nYes, as references, not templates. Study what makes an idea work, combine it with other references, and adapt it to the project's own content and brand.\n\nGreat work is not copied from one source. It is assembled from many good decisions.\n\nProbably. One useful layout or interaction can save hours of searching and help turn an average project into one that feels considered.\n\nPro gives you the full library and everything added each week.\n\nAdd to board\n\nThis will delete and all the items saved in it. Items saved to other boards are not affected.\n\nManage the identity connected to your Details account.\n\nPermanently remove your Details account and its associated data.\n\nReview your personal plan and any Team access attached to your account.\n\nBrowse the latest Details releases with Starter access.\n\nManage shared access, seats, and the people you work with.\n\nInvite teammates to save inspiration together, share boards, and add comments in one workspace.\n\nHandpicked from the most original, high-end design on the web. Now available directly to your AI.\n\nTell your AI what you’re working on and get relevant references directly from Details.\n\nExplore the references together. Mix a layout from one, motion from another, or simply choose the direction that feels right.\n\nYour AI understands how each reference works and can adapt those ideas to your own project.\n\nChoose your client and we'll show you exactly how to connect it.\n\nRun this once in a terminal to register Details for your user account.\n\n`claude mcp add details --scope user --transport http https://api.details.so/mcp`  Start Claude Code, enter the command below, then choose Details.\n\n`/mcp`  Choose Authenticate and sign in to your Details account in the browser.\n\nReturn to Claude Code and start searching Details.\n\nIn Cursor, open Settings → Tools & MCP and choose New MCP Server. Use global settings for every project, or project settings for one workspace.\n\nPaste this configuration into your mcp.json file and save it.\n\n```\n{\n  \"mcpServers\": {\n    \"details\": {\n      \"url\": \"https://api.details.so/mcp\"\n    }\n  }\n}\n```\n  Back in Tools & MCP, find Details, choose Connect, and approve access in the browser.\n\nDetails is now available to Cursor in the scope you selected.\n\nRun this once in a terminal to register the remote server.\n\n`codex mcp add details --url https://api.details.so/mcp`  Run the login command to open Details authorization in your browser.\n\n`codex mcp login details`  Sign in to Details, review the request, and choose Continue.\n\nReturn to Codex. Start a new session if it was already open during setup.\n\nFrom the chat input, open the add menu, choose MCPs, then select Add MCP.\n\nName the connection Details and paste the remote server URL.\n\n`https://api.details.so/mcp`  Select OAuth when prompted, then sign in and approve Details access.\n\nDetails is now available from your v0 chat.\n\nOpen the integrations or MCP area in your AI client.\n\nCreate a remote HTTP MCP server named Details and paste this address.\n\nUse OAuth when available, then sign in and approve access to Details.\n\nThe Details tools should now appear in your client.\n\nGive friends 10% off and unlock rewards as they join.\n\nAn active Pro, Max, or Lifetime plan is required to share this link.\n\nShare your link\n\nA friend joins\n\nYour setup gets better\n\nShare your unique link with friends. When someone joins Details through your link and subscribes to a paid plan, they count as a successful referral and move you closer to your next reward.\n\nA referral counts when a new customer joins through your unique link and subscribes to a paid Details plan. Refunded, disputed, fraudulent, or otherwise reversed purchases don’t count. You can find the full eligibility rules in our Referral Program Terms.\n\nRewards unlock automatically as you reach each referral milestone. We’ll let you know whenever you’ve unlocked something new.\n\nIt depends on the reward. Details credit and Lifetime are applied directly to your account. For physical rewards, we’ll contact you to arrange delivery. Approved Setup Upgrade contributions are normally sent through PayPal, so you’ll need a PayPal account that can receive payments.\n\nAt 30 successful referrals, you unlock a $500 Setup Fund. Every 10 more successful referrals adds another $200 and unlocks your next Setup Upgrade request. There’s no limit to how much the fund can grow.\n\nAnything that genuinely improves your creative setup. That could be a monitor, chair, laptop, tablet, camera, keyboard, software, or another tool that helps you do better work. See our Referral Program Terms for the full eligibility guidelines.\n\nChoose something that improves your creative setup and submit an upgrade request. Tell us what you’re getting, what it costs, and how much you’d like to use from your Setup Fund. We’ll review it and contact you to arrange the contribution, normally through PayPal. Full requirements are covered in our Referral Program Terms.\n\nNo. You can submit one Setup Upgrade request at each 10-referral milestone. Anything you don’t use stays available and carries into the next milestone, but unused request opportunities don’t stack.\n\nNope. Once unlocked, your Setup Fund receives another $200 at every 10-referral milestone. There’s no final milestone, so you can keep referring and keep growing it.\n\nFixed rewards are generally provided as shown and can’t be exchanged for cash. If there’s an issue receiving a physical reward in your country, get in touch and we’ll see what we can do.\n\nNo. Self-referrals, duplicate accounts, fake accounts, or other attempts to artificially generate referrals aren’t eligible. See our Referral Program Terms for the complete rules.\n\n You’ll find all eligibility requirements, reward conditions, Setup Fund guidelines, shipping rules, and other details in our   [Referral Program Terms](/legal/referral-program-terms) \n.\n \n\nOnce it unlocks at 30 referrals, every 10 more adds another $200 and unlocks your next Setup Upgrade request. There’s no limit.", "url": "https://wpnews.pro/news/details-so", "canonical_source": "https://www.details.so/inspo", "published_at": "2026-09-11 00:27:10+00:00", "updated_at": "2026-09-11 00:53:12.873806+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "ai-products"], "entities": ["Details.so", "Claude Code", "Cursor", "MCP"], "alternates": {"html": "https://wpnews.pro/news/details-so", "markdown": "https://wpnews.pro/news/details-so.md", "text": "https://wpnews.pro/news/details-so.txt", "jsonld": "https://wpnews.pro/news/details-so.jsonld"}}