Fixing Generic AI Web Design with Inspo

Solving Generic AI Design

AI models often produce generic web designs because they rely on patterns frequently seen during training, such as specific color palettes (e.g., purple/blue on white) and safe, repetitive layouts. While existing design skills provide textual instructions or markdown-based guidance, they fail to show how components interact visually. Inspo addresses this by providing the agent with access to a database of 832 real-world sites and 2,320 captured pages, allowing the model to study actual design implementations rather than relying on abstract text descriptions.

How Inspo Functions

When an agent receives a design prompt, it uses the Inspo recommend tool to search for layouts that match the user's intent. The tool returns up to five relevant examples, including screenshots for both desktop and mobile, component references, and a design.md file. This file contains structured data including exact color values, font specifications, and spacing measurements. The agent uses this data to synthesize a unique layout by borrowing elements from multiple references, such as a hero section from one site and a button style from another, rather than cloning a single source.

Implementation and Limitations

Inspo installs as an MCP server in user scope, making it available across all projects. To achieve the best results, users should prompt the agent to provide design directions before building the full page. This allows the user to verify the chosen references and catch potential issues, such as irrelevant industry matches or design elements obscured by cookie popups in the source screenshots. For motion design, the author recommends pairing Inspo with the UI Skills MCP to integrate animation libraries like those from Emil Kowalski or Meng To.