Jonathon's AI Wiki

AI Web Design

7 min read

AI-powered website and landing-page generation — prompt libraries, template marketplaces, AI website builders, and the spec-prompt patterns that turn one-shot prompts into production-ready frontends.

This topic covers the builder layer that sits on top of Claude Code, Claude Design, Lovable, Bolt, v0, and Cursor — paid prompt catalogs, free template galleries, the people selling them, and the design-quality patterns that separate vibe-prompted slop from spec-prompted polish.

For the underlying tooling itself (Claude Design, the design skills, MCP integrations) see Claude AI. For the prompt patterns this topic relies on, see Prompt Engineering.

Articles

  • Codex + MagicPath Design Workflow — Four-tool composition that takes one-line “design a SaaS landing page” prompt to deployed-on-Vercel design via Codex CLI. (1) MagicPath.ai as a Codex skill — installs the connector, restart Codex, authenticate; acts as the in-Codex previewer / infinite-canvas surface (the “Figma for Codex”). Codex’s built-in GPT image 1.5 generates logo/icons inline with no API key needed; swap to GPT Image 2 with own key. (2) skills.sh find skills as second-order tool to surface relevant skills inside Codex. (3) Make Interfaces Feel Better by Jacob Krehel — ~16 design principles (concentric border radius, optical-over-geometric alignment, shadows-over-borders, the other ~13 not enumerated on-screen in the source video; flagged as Open Question). (4) Mobbin MCP as design-inspiration retrieval surface (returns examples from Mixpanel/Visitors/Wrangle; redesign target sections to match inspiration color/style/copy). Final step: MagicPath “push to custom domain” via Vercel preview deployment without leaving Codex. Also shows Visual Edits — Codex’s in-canvas component-level deletion/editing UX (right-click → “delete element” pattern). Sits next to Impeccable v3 and Open Design in the design-runtime cluster but is structurally distinct as a multi-tool composition pattern rather than a single toolkit.
  • Robo Nuggets) — impeccable.style, ~25k stars, MIT. Open-source toolkit behind the Claude Code design-skills cluster. v3 ships a 37-pattern AI-slop catalog, a Chrome extension that flags slop on any live URL, and a bake/tweak workflow for last-mile manual sliders. 23 commands operating against a shared 7-file design knowledge base (typography / color / spatial / responsiveness / interaction / motion / UX writing). Variation-first prompting (3 lightweight variants → pick by reaction). Canonical entity article for the framework that design-skills-overview documents skill-by-skill.
  • Open Design — Local-First Open-Source Alternative to Claude Design (nexu-io) — Apache-2.0, ~24.3k stars, TypeScript. Local-first runtime that auto-detects 15 coding-agent CLIs on the user’s PATH (Claude Code, Codex, Devin, Gemini, OpenCode, Cursor Agent, Qwen, Copilot, Hermes, Kimi, Kiro, Kilo, Mistral Vibe, DeepSeek, Pi) and drives them with 31 composable Skills (27 prototype + 4 deck modes) and 72 brand-grade Design Systems as DESIGN.md payloads. Multi-provider BYOK proxy (Anthropic / OpenAI / Azure / Google), read-only stdio MCP server defaulting to whatever project the user has open, anti-AI-slop machinery (turn-1 discovery form + 5-dimensional self-critique). The only entry in this topic that is simultaneously local-first, open-source, multi-agent, and Hermes-compatible — sits next to Refero Styles / Neuform / Crafft / MotionSites in the spec-prompt-catalog cluster but is structurally distinct as the runtime layer rather than a catalog.
  • Beautiful HTML Templates — 30-Template Slide Deck Library for AI Agents (zarazhangrui) — MIT, 17 stars at fetch. Clone-and-adapt library of 30 HTML slide-deck templates explicitly authored for AI coding agents to consume. Integration contract lives in AGENTS.md — the agent asks user about occasion + mood, picks 3 candidates from index.json, builds title-slide previews populated with the user’s real content, opens them, and lets the user pick by reaction. Strict preserve-fonts/palette/grid + replace-content rulebook. Layout-extension discipline (when a brief needs a slide type the template doesn’t have, the agent designs it in the template’s existing design system, not graft from another). Sister project to Frontend Slides by the same author — the Claude Code plugin form factor of the same design sensibility.
  • Design Rocket)
  • Refero Styles — Design Systems for AI Agents
  • Crafft — AI Creative Studio with Claude MCP
  • Neuform — AI HTML Design Templates and Systems (Meng To) — 400+ free design systems by Design+Code founder Meng To. Two consumption modes: download the rendered HTML, or copy the DESIGN.md spec-prompt and paste into Claude Design (or any compatible tool). Each system is remixable across web/mobile/slides/motion-design contexts. Heavy use of WebGL and three.js for landing-page section blocks. Login-walled catalog; main signal is Meng To’s own X bookmark + the public landing page. Sister to Refero Styles, Crafft, MotionSites in the spec-prompt-catalog cluster.
  • Hallmark — A Design Skill That Refuses to Look AI-Generated — Claude Code + Cursor design skill from usehallmark.com. Four-mode framework: Build (macrostructure → theme → enrichment, refuses to repeat structural fingerprints), Study (extract structural DNA from a screenshot or URL without pixel-copying; lock the DNA writes a portable design.md), Audit (diagnose against anti-pattern catalog), Redesign (rebuild with different structural fingerprint). Explicitly refuses five recognizable AI tells — purple gradients, single-font layouts, centered symmetry, generic icon-tile feature cards, the default wordmark-left/4-link-centered/CTA-right nav. Eight non-configurable foundational rules (type pairing, OKLCH color, geometric spacing, character-appropriate easing, distinct voice, asymmetric layout, readable hierarchy, restraint). Auto-installs into ~/.claude/skills/hallmark/ and .cursor/rules/hallmark.mdc. Differs from other entries in this topic by being the refusal layer — most tools optimize for plausibility; Hallmark optimizes for not shipping the AI-default aesthetic. Slots cleanly into the Codex + MagicPath chain as the anti-default enforcement step.
  • unslop-ui — Data-Driven AI-Slop Detection (Claude Skill + CI Scanner) — a Claude skill whose banned-pattern list is frequency-weighted from ~3.2M Reddit posts (data-driven, not hand-curated taste) paired with a CI-failable Python scanner that flags and removes AI-generated design tells in a build pipeline. The detection-and-enforcement counterpart to the prescriptive anti-slop guides — measures which AI tells actually annoy people, then fails the build on them. Sits beside Hallmark and Impeccable v3 in the anti-AI-aesthetic cluster, distinct as the data-grounded + CI-gated entry.
  • EmDash CMS — Astro + Cloudflare WordPress Successor with Sandboxed Worker Plugins + Built-In MCP for Agents — github.com/emdash-cms/emdash (MIT, TypeScript, 10,667★, last push 2026-05-26). Full-stack TypeScript CMS on Astro + Cloudflare, pitched as the spiritual successor to WordPress. Three distinctive moats: sandboxed Worker-isolate plugins via Cloudflare Dynamic Worker Loaders with declared capability manifests (fixes WordPress’s plugin-as-attack-surface problem — 96% of WP vulns come from plugins); Portable Text content storage (structured JSON instead of HTML-with-embedded-metadata-comments — content decouples from presentation); first-class agent integration (built-in MCP server + agent skills for plugins/themes + CLI for content/schema). Three starter templates ship in-repo (blog/marketing/portfolio). Runs on Cloudflare (D1+R2+Workers) or any Node.js + SQLite. Sits adjacent to marketplaces in the broader 2026 agent-callable-platform pattern.

New registries on the watchlist

[Reddit signal — r/ClaudeCode 2026-05-19] Source: raw/reddit-1thep3j.md (214 score / 31 comments, OP necati-ozmen, Showcase flair). designmd.sh launched as a public registry for DESIGN.md files — framed by its author as “basically skills.sh for design systems.” Same shape as the skills.sh catalog (community-discoverable, GitHub-hosted source artifacts), but scoped to the spec-prompt DESIGN.md format that Neuform, Refero Styles, and Open Design all publish in. Index-only at launch — full article pending if the catalog grows past the initial Showcase post.

Adjacent coverage in other topics

11 items under this folder.