Everything you need
to use the library.
A practical reference for browsing, bookmarks, design briefs, and connecting your AI. New here? Start with the How to use guide.
Browse and search
The homepage brings website inspirations and design styles into one feed. Use the collection filter to narrow it to either type, then search for a brand, layout, or idea. Page-type filters help you find specific kinds of website pages.
Website inspirations
Full-page website screenshots with available typography, color, and reference details. Open a card, then choose View full page to expand its screenshot.
Browse website inspirations ↗Design styles
Visual references with available design details. The dedicated archive includes search and filters for industry, theme, and visual style.
Browse design styles ↗Screenshots are archived references. They may differ from the current website, and detail varies by reference. Use Visit site when you want to see the current version.
Save and revisit references
- Select the bookmark beside a reference title.
- Open Saved to revisit your collection.
- Select the bookmark again to remove that reference from your favorites.
When signed in, favorites are linked to your account so you can access them on another device. Guest favorites are stored in the current browser. Use the same account when signing in elsewhere.
Use a design brief
A design brief is a downloadable text reference, not a ready-made website or source-code template. It gives your AI or collaborator context about the selected reference and the available design details.
- Open the reference you want to use.
- Choose its design-brief download action and follow any sign-in or access prompt.
- Open the downloaded file, or attach it to an AI app that accepts files. You can also paste its text into your conversation.
- Add your project goal, audience, brand, content, and preferred building tools.
Website inspiration briefs use Markdown (.md), a plain-text format. If your app cannot open an image link in the brief, provide the screenshot separately. A brief does not include the original website’s code.
Connect your AI
Styles Library supports compatible AI apps through MCP, a connection that lets an assistant request references and available design information from the library.
Server URLhttps://styleslibrary.site/mcp
Use the app-specific steps on the connection page. Sign in to your Styles Library account when prompted, approve the connection, and enable the library’s tools in your conversation. Availability depends on the app and its plan or workspace settings.
Check that it works
Find a minimalist website reference in Styles Library. Show me its screenshot if available, explain its typography and colors, and suggest how to adapt the direction for my project.
You can use downloaded briefs without an MCP connection. Styles Library supplies reference material; your chosen AI app handles the conversation and any code it generates.
Account and plans
Sign in to sync favorites and manage your access. Open the account icon for account settings, billing, and sign-out options. Your account shows the available plans and usage information.
Browsing is free. AI access and downloads may require sign-in and are subject to your account’s limits. Check your account for current allowances and pricing.
Open account and plans ↗Troubleshooting
My AI cannot find Styles Library.
Check the server URL above, complete sign-in, and make sure the library’s tools are enabled in the current conversation. Follow the instructions for your app on the connection page. If your app does not support remote MCP, use a downloaded brief instead.
My AI cannot see a screenshot.
Ask it to retrieve the reference’s screenshot using the connected library. If the app cannot display image responses or open image links, attach the screenshot yourself where supported. Ask it to identify what it can actually see before analyzing the design.
My saved references are missing on another device.
Confirm that both devices are signed in to the same account. Favorites saved while signed out are browser-specific; return to that browser and sign in. If a save did not complete, check your connection and try again.
A video preview is not playing.
Only references with an available video have moving previews. Open Cookie preferences in the footer and check whether video previews are allowed. Browser autoplay settings and reduced-motion preferences can also prevent playback. A static thumbnail is still available.
A screenshot looks blurry or different from the live site.
Image resolution varies across the collection. Expanding a screenshot reveals more of the page; it does not add missing image detail. Screenshots are archived, so the current site may have changed. Use Visit site to inspect it today.
I have reached a usage limit.
Open your account to check the current allowance and available plans. Follow any reset information shown there. Browsing the public collection remains available.