AI Compass / Knowledge cards

Websites without the AI look

directions, references, checks

Checked 16 October 2026 Michael Engel Website

Without constraints, a model reaches for the average, for example purple gradients. Two tools help. Anthropic’s public skill frontend-design fixes a specific design direction and names typical AI mistakes. Inspo is an MCP server, that is, an interface that provides tools to the agent. It gives the agent real websites with their design values as templates: colours, fonts, spacing.

What it is for

Your site looks like your brand and not like a template.

Steps

For landing pages, use the frontend-design skill.
Always ask for several design directions and only then pick one.
Real references instead of adjectives: install Inspo (per the repo, npx -y inspo-mcp install) and filter by industry, layout or light/dark as needed.
Ask which references were used and check that nothing is copied.
For apps and dashboards, first put several HTML drafts side by side in mocks/, then build.
Apply a design.md with the brand rules only to the finished first page. Earlier, it fixes the design too soon.
In the CLAUDE.md, require a subagent to check the result against the design.md.

Before the first draft: the interview

Before Claude drafts anything, it interviews you: “Ask until nothing is left open, with multiple-choice options.” The answers go into a file brief.md. All later design requests come from this one document, so the style stays the same across several drafts. AI LABS shows this with Google Stitch, an AI tool for page designs that can be operated from Claude Code. The pattern also works without Stitch.

Limits

The videos show the effect only as an impression from a few examples.
References do not always fit the industry. With screenshots that show a cookie banner, the agent guesses the hidden part.
Only recreate other people’s interfaces if you are allowed to. According to the Inspo README, the screenshots remain the work of their designers, and every template names its source.
Privacy: Inspo runs locally via npm or through a hosted endpoint of the provider. With the hosted endpoint, your requests go to a third party. According to the README, tool name, success and duration are logged there, but no IP addresses and no search texts.
Skills are third-party code. Read and check them first (see Links). The skill state in the videos dates from June and should be retested with the current model.
The Stitch drafts in the AI LABS video were made for desktop only, and the mobile view broke. Stitch does offer mobile and web as options, but you still need your own check at tablet and phone sizes. According to the video, the finished check skills are in the AI Labs Pro community (the video does not state a price), and in the video the author has Claude build them. Stitch needs a Google account, and the video does not state prices. A command line from Google exists as the npm package @google/stitch (version below 1.0).

Sources

AI LABS: 4 Ways to Actually Build Stunning Websites with Claude Code, 13 June 2026, 2:43–3:49, 5:26–11:24. Sponsored by Kimi, plus a paid community
AI LABS: Insane Claude Design Skills You Need To Build Beautiful Websites, 23 June 2026, 0:32–2:08. Sponsored by SciSpace
AI LABS: Github #1 Trending Skill’s Author Just Fixed Claude’s Design Problem, 18 September 2026, 5:24, 7:02–9:43, 11:08–11:53. Sponsored by Monid/Manifold (6:05)
AI LABS: Google Just Fixed AI Design By Releasing This, 13 October 2026, 1:38, 4:52–5:57, 7:03, 9:25–10:50, 13:01. Sponsored by Wispr Flow (7:43–8:34), plus self-promotion for AI Labs Pro
GitHub: anthropics/skills (frontend-design) and Nutlope/inspo, retrieved 11 October 2026

Status

Checked 11 October 2026, extended 16 October 2026 · Maturity new (skills available, effect shown only by the creators)