# AI use cases for Awwwards MCP (INSANE0777/Awwwards-mcp) Repo: [INSANE0777/Awwwards-mcp](https://github.com/INSANE0777/Awwwards-mcp) | Use cases: 4 | Page: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/ awwwards-mcp is a free, open-source MCP server that lets AI coding agents search award-winning websites for design inspiration and analyze, capture, and verify live sites. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Build a landing page from shortlisted award-winning references: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/brief-landing-page-from-award-winners/ - Score your build against a reference site and fix the gaps: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/score-build-against-reference-site/ - Turn a site's scroll animations into a runnable GSAP stub: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/rebuild-scroll-animations-as-gsap-stub/ - Get alerts when new award winners match your watched studios or tags: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/watch-studios-for-new-award-winners/ ## How to build a landing page from shortlisted award-winning references with Awwwards MCP Repo: [INSANE0777/Awwwards-mcp](https://github.com/INSANE0777/Awwwards-mcp) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README Turn 2 to 5 Awwwards sites into a cited design brief your agent can build from. **Who it is for:** A solo developer or designer starting a new marketing page who wants a visual direction backed by real award-winning sites. **The problem:** Choosing a look from memory or a blank prompt produces generic layouts and no evidence for color, type, or motion choices. **The outcome:** A Markdown direction and versioned JSON brief that cite the shared signals and outliers across the chosen sites, which the agent uses as its build spec. ### Steps 1. Run `claude mcp add awwwards -- npx -y awwwards-mcp` (or `codex mcp add awwwards -- npx -y awwwards-mcp` for Codex CLI). 2. Ask the agent to search for references with search_sites, for example by color, tag, or a free-text query such as "soft pastel e-commerce". 3. Shortlist 2 to 5 site slugs and write one required project goal. 4. Call create_design_brief with those slugs and the goal, and read the Markdown direction and JSON output. 5. Build the page from the brief, using only the cues it marks as evidence-backed. ### Prompt to paste into your agent ```text Use the awwwards-mcp server to search for portfolio references, shortlist 3 sites, then call create_design_brief with the slugs and the goal "". Expected output: a cited Markdown direction plus versioned JSON that separates shared signals from one-site outliers. Verify that every color and motion cue in your build traces back to a cited signal in the brief. ``` ### Caveat The brief is only as strong as the references chosen, and empty Interaction Plan fields mean no evidence was found, not that an effect should be invented. Dual-use notice: only use this on software, sites and systems you own or are authorized to test. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/brief-landing-page-from-award-winners/ ## How to score your build against a reference site and fix the gaps with Awwwards MCP Repo: [INSANE0777/Awwwards-mcp](https://github.com/INSANE0777/Awwwards-mcp) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Band-map your page and diff its motion against a reference, then iterate to a passing score. **Who it is for:** A frontend developer who has a draft page and needs an objective check that it matches the structure and motion of a chosen reference. **The problem:** Eyeballing a rebuild against a reference misses section spacing, scroll triggers, and easing differences. **The outcome:** A 0 to 100 score with a pass, warn, or fail verdict and evidence lines, plus a list of band and motion differences to fix. ### Steps 1. Run `claude mcp add awwwards -- npx -y awwwards-mcp` and install the Playwright setup linked in the README. 2. Ask the agent to run analyze_page_structure on the reference URL and on your local file:// build to compare section bands. 3. Run verify_build with the reference URL and your build to get the score, verdict, and evidence lines. 4. Fix the lowest-scoring bands or motion differences the evidence lines name. 5. Re-run verify_build until the verdict is pass. ### Prompt to paste into your agent ```text Use the awwwards-mcp server to run verify_build comparing my local build at against the reference . Expected output: a 0 to 100 score, a pass, warn, or fail verdict, and evidence lines naming each band or motion gap. Verify the score changes after you apply one fix and re-run the check. ``` ### Caveat Verification needs Playwright and compares structure and motion fingerprints only, so a passing score does not confirm visual polish or content quality. Dual-use notice: only use this on software, sites and systems you own or are authorized to test. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/score-build-against-reference-site/ ## How to turn a site's scroll animations into a runnable GSAP stub with Awwwards MCP Repo: [INSANE0777/Awwwards-mcp](https://github.com/INSANE0777/Awwwards-mcp) | Difficulty: Advanced | Time: 45 minutes | Basis: From the README Census a live page's scroll motion and generate a single-file GSAP ScrollTrigger starting point. **Who it is for:** A front-end developer who wants to recreate a scroll-driven effect they saw on a reference site and needs a starting timeline instead of reverse-engineering it by hand. **The problem:** Rebuilding scroll motion from a screen recording means guessing triggers, durations, and easing for each element. **The outcome:** A per-element scroll census and a single-file GSAP plus ScrollTrigger stub with one timeline per animation and a reduced-motion guard. ### Steps 1. Run `claude mcp add awwwards -- npx -y awwwards-mcp` and set up the Playwright tooling linked in the README. 2. Ask the agent to run analyze_scroll_map on the target URL to get the per-element census. 3. Optionally run get_motion_dna on the same URL to confirm the animation libraries and scroll model. 4. Pass the census JSON to build_gsap_stub to generate the single-file page. 5. Open the generated page and check each timeline against the original site, keeping the reduced-motion guard in place. ### Prompt to paste into your agent ```text Use the awwwards-mcp server to run analyze_scroll_map on , then pass the result to build_gsap_stub. Expected output: a runnable single-file GSAP plus ScrollTrigger stub with one timeline per census animation and a prefers-reduced-motion guard. Verify the stub opens without errors and that the timeline count matches the census. ``` ### Caveat The stub is a starting point built from captured motion, so trigger timing and easing usually need hand tuning against the original. Risk, reverse engineering: The census and stub recreate another site's motion, so use it to learn and rebuild techniques rather than copy a protected design or code. Dual-use notice: only use this on software, sites and systems you own or are authorized to test. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/rebuild-scroll-animations-as-gsap-stub/ ## How to get alerts when new award winners match your watched studios or tags with Awwwards MCP Repo: [INSANE0777/Awwwards-mcp](https://github.com/INSANE0777/Awwwards-mcp) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Poll new winners and watch studios or tags, then report only what changed since the last check. **Who it is for:** A designer or agency lead who tracks specific studios or design tags and wants fresh references without browsing the Awwwards listing every day. **The problem:** Checking the award listing by hand is slow, and it is easy to miss a new winner in a tag you care about. **The outcome:** A list of new winners and per-watch NEW deltas, with each new winner's elements made searchable immediately. ### Steps 1. Run `claude mcp add awwwards -- npx -y awwwards-mcp`. 2. Ask the agent to call new_winners once to seed the baseline and dump the current listing. 3. Ask the agent to add watches over studios, tags, or specific sites using watch_site. 4. Run new_winners again later to report the delta since the baseline. 5. Run watch_site with the list action to see NEW since last check per watch. ### Prompt to paste into your agent ```text Use the awwwards-mcp server to call new_winners to set a baseline, then add a watch_site entry for the tag . Expected output: a list of new winners and per-watch NEW since last check deltas. Verify that a second new_winners call reports only winners that were not in the first listing. ``` ### Caveat The watch list reports from the cached listing and never fetches on its own, so new_winners or search_sites must run to refresh it. Dual-use notice: only use this on software, sites and systems you own or are authorized to test. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/insane0777-awwwards-mcp/watch-studios-for-new-award-winners/