DEDUPED Hot AI repos, turned into use cases Get 5 a day

How to build a landing page from shortlisted award-winning references with Awwwards MCP

Turn 2 to 5 Awwwards sites into a cited design brief your agent can build from.

Authorization notice. Awwwards MCP is dual-use. Only use it on software, sites and systems you own or have explicit permission to test.

Who it is forA solo developer or designer starting a new marketing page who wants a visual direction backed by real award-winning sites.

The problemChoosing a look from memory or a blank prompt produces generic layouts and no evidence for color, type, or motion choices.

The outcomeA 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.

What you need first

  • Node.js 22.13 or newer (check with `node -v`)
  • An MCP-compatible coding agent such as Claude Code, Codex CLI, OpenCode, or Cursor
  • No API key or account is needed for the core search tools
  • Playwright, as linked from the README, for the live-capture, scroll-map, and verify tools

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 for your agent

Use the awwwards-mcp server to search for portfolio references, shortlist 3 sites, then call create_design_brief with the slugs and the goal "<project 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.

Share: X LinkedIn Hacker News Email Copy link

Disclaimer

Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked "Seen in the wild", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email [email protected] and we will look at it promptly. Full disclaimer page