This is Inspo
The best websites, handpicked weekly. Only the exceptional ones make it in.
Haoqi
Portfolio of Haoqi Wen, a digital product designer and design engineer focused on AI-era digital products and design tools.
Loading page
Welcome inside
Everything you need to find better ideas and build websites that stand out.
You're all set.
Go find the details that make your next project stand out. We'll keep adding new ones every week.
Get full access
Unlock unlimited inspiration for your next project.
Pro
- Full Inspo library
- Unlimited category browsing
- 10 boards
- And more
Vault
- Full Vault library
- Full library access for your AI
- Copy-ready code
- And more
Find exactly what you need
Type what you need in your own words. Smart Search will find the best matches for you, or use filters to narrow things down.
This is the Vault
Real transitions, buttons, and sections as paste-ready code. The details that make sites unforgettable.
Your AI just got taste
Connect Details to your AI. Find the right inspiration, explore directions, and bring them into your project.
New board
Delete board
This will delete and all the items saved in it. Items saved to other boards are not affected.
Rename board
Account
Manage the identity connected to your Details account.
Delete account
Permanently remove your Details account and its associated data.
Plan & billing
Review your personal plan and any Team access attached to your account.
Personal plan
Starter
Browse the latest Details releases with Starter access.
Team access
Team
Manage shared access, seats, and the people you work with.
Collaborate with your team
Invite teammates to save inspiration together, share boards, and add comments in one workspace.
Members
·
Your AI just got access to taste.
Handpicked from the most original, high-end design on the web. Now available directly to your AI.
See how it works-
1 Ask for what you need
Tell your AI what you’re working on and get relevant references directly from Details.
-
2 Pick what you like
Explore the references together. Mix a layout from one, motion from another, or simply choose the direction that feels right.
-
3 Make it yours
Your AI understands how each reference works and can adapt those ideas to your own project.
Authorized apps
How to get started
Pick your AI tool
Choose your client and we'll show you exactly how to connect it.
Add Details to Claude Code
Run this once in a terminal to register Details for your user account.
claude mcp add details --scope user --transport http https://api.details.so/mcp Open the MCP menu
Start Claude Code, enter the command below, then choose Details.
/mcp Approve the connection
Choose Authenticate and sign in to your Details account in the browser.
Ready to use
Return to Claude Code and start searching Details.
Open MCP settings
In Cursor, open Settings → Tools & MCP and choose New MCP Server. Use global settings for every project, or project settings for one workspace.
Add the Details server
Paste this configuration into your mcp.json file and save it.
{
"mcpServers": {
"details": {
"url": "https://api.details.so/mcp"
}
}
} Connect your account
Back in Tools & MCP, find Details, choose Connect, and approve access in the browser.
Ready to use
Details is now available to Cursor in the scope you selected.
Add the Details MCP server
Run this once in a terminal to register the remote server.
codex mcp add details --url https://api.details.so/mcp Start the login flow
Run the login command to open Details authorization in your browser.
codex mcp login details Approve the connection
Sign in to Details, review the request, and choose Continue.
Ready to use
Return to Codex. Start a new session if it was already open during setup.
Open MCP connections
From the chat input, open the add menu, choose MCPs, then select Add MCP.
Enter the server details
Name the connection Details and paste the remote server URL.
https://api.details.so/mcp Approve the connection
Select OAuth when prompted, then sign in and approve Details access.
Ready to use
Details is now available from your v0 chat.
Find your client's MCP settings
Open the integrations or MCP area in your AI client.
Add the server URL
Create a remote HTTP MCP server named Details and paste this address.
https://api.details.so/mcp Approve the connection
Use OAuth when available, then sign in and approve access to Details.
Ready to use
The Details tools should now appear in your client.
Your AI just got access to taste.
Handpicked from the most original, high-end design on the web. Now available directly to your AI.
See how it works-
1 Ask for what you need
Tell your AI what you’re working on and get relevant references directly from Details.
-
2 Pick what you like
Explore the references together. Mix a layout from one, motion from another, or simply choose the direction that feels right.
-
3 Make it yours
Your AI understands how each reference works and can adapt those ideas to your own project.
How to get started
Pick your AI tool
Choose your client and we'll show you exactly how to connect it.
Add Details to Claude Code
Run this once in a terminal to register Details for your user account.
claude mcp add details --scope user --transport http https://api.details.so/mcp Open the MCP menu
Start Claude Code, enter the command below, then choose Details.
/mcp Approve the connection
Choose Authenticate and sign in to your Details account in the browser.
Ready to use
Return to Claude Code and start searching Details.
Open MCP settings
In Cursor, open Settings → Tools & MCP and choose New MCP Server. Use global settings for every project, or project settings for one workspace.
Add the Details server
Paste this configuration into your mcp.json file and save it.
{
"mcpServers": {
"details": {
"url": "https://api.details.so/mcp"
}
}
} Connect your account
Back in Tools & MCP, find Details, choose Connect, and approve access in the browser.
Ready to use
Details is now available to Cursor in the scope you selected.
Add the Details MCP server
Run this once in a terminal to register the remote server.
codex mcp add details --url https://api.details.so/mcp Start the login flow
Run the login command to open Details authorization in your browser.
codex mcp login details Approve the connection
Sign in to Details, review the request, and choose Continue.
Ready to use
Return to Codex. Start a new session if it was already open during setup.
Open MCP connections
From the chat input, open the add menu, choose MCPs, then select Add MCP.
Enter the server details
Name the connection Details and paste the remote server URL.
https://api.details.so/mcp Approve the connection
Select OAuth when prompted, then sign in and approve Details access.
Ready to use
Details is now available from your v0 chat.
Find your client's MCP settings
Open the integrations or MCP area in your AI client.
Add the server URL
Create a remote HTTP MCP server named Details and paste this address.
https://api.details.so/mcp Approve the connection
Use OAuth when available, then sign in and approve access to Details.
Ready to use
The Details tools should now appear in your client.
Send feedback
Members only
Invite friends.
Invite friends.
Upgrade your setup.
Give friends 10% off and unlock rewards as they join.
An active Pro, Max, or Lifetime plan is required to share this link.
0 referrals and rewards
$0
1
› Share your link
2
› A friend joins
3
Your setup gets better
Frequently asked questions
Share 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.
A 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.
Rewards unlock automatically as you reach each referral milestone. We’ll let you know whenever you’ve unlocked something new.
It 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.
At 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.
Anything 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.
Choose 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.
No. 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.
Nope. 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.
Fixed 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.
No. 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.
You’ll find all eligibility requirements, reward conditions, Setup Fund guidelines, shipping rules, and other details in our Referral Program Terms .
Your Setup Fund keeps growing
Once it unlocks at 30 referrals, every 10 more adds another $200 and unlocks your next Setup Upgrade request. There’s no limit.