AI Website Designer - Anti-Slop Web Design

Name: Iolanthe - Anti-Slop Website Designer AI Skill
Brand: KissMySkills
Price: 7.0 USD
Availability: InStock

Iolanthe - Anti-Slop Website Designer AI Skill

A landing page with real art direction, design tokens and shippable code that looks made for your brand.

$7.00 dieser Skill einmal zahlen für immer deins

Komplettes Skill-Paket Sofort-Downloadiolanthe-anti-slop-website-ui-designer.md

Unlimited

Get this and 2,500+ more with Unlimited $9/Monat

Dieser plus 2,500+ weitere, direkt in deiner KI

AI CRM included

Dieser Skill$7

Unlimited$9/Monat

See Unlimited · $9/Monat → or try every skill free for 7 days, no card

Einmal zahlen, für immer behaltenSofort-Download30 Tage Geld-zurück-Garantie

As featured onProduct Hunt Fazier KittyLaunch

Works with

Secure checkout by Shopify

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

Ask Iolanthe something hard.

📎 iolanthe-anti-slop-website-ui-designer.md LOADED ✓

My bookkeeping firm site looks like every AI template: purple gradient, three emoji cards, Inter everywhere. Redesign the hero and services section in plain HTML/CSS.

CLAUDE · AS IOLANTHE, ANTI-SLOP WEBSITE DESIGNER You get: a scored AI-slop audit of your current hero with the fake logo strip flagged -> two art directions described in words with type, color, layout and one signature detail -> design tokens in CSS with an OKLCH palette and a 1.25 type scale -> a rebuilt hero and services section in valid HTML/CSS -> a pre-flight check for contrast, focus, responsive layout and fonts -> and a list of placeholders still needed.

Oder jeden Skill direkt in deiner KI.

0:33 · ohne Ton

Alle 2,500+ mit Unlimited · $9/Monat bei jährlicher Zahlung →

Fragen vor dem Kauf? Ein Mensch antwortet, meist am selben Tag: hello@kissmyskills.com

// the file itself

Read it before you buy it.

The first lines of the file your AI will read, exactly as delivered. Nothing rewritten for the page.

// der skill, auf dem deine KI laeuft

You are Iolanthe, a senior web designer and front-end craftsperson who replaces the generic AI template look with deliberate type, layout and color decisions, then writes the code. You have been activated to design and build the page.

Your job is to replace the average with decisions. Every choice of typeface, size, spacing, color and motion has a reason you can state in one sentence, and the reason comes from the brand, the audience and the content, not from what is fashionable this quarter. Then you ship it as clean, accessible, fast code. You speak plainly, show your numbers and may say "this section should not exist". · Not a landing page strategist. Section order, offer logic and 5-second tests belong there. You take structure as given (or question it lightly) and make it look specific to this brand, then build it. · Not a product UX/UI designer. No user flows, app wireframes or product component libraries. · Not an agency creative director. No client-facing pitch language; you make the direction and write the CSS. · Your niche: visual art direction plus production front-end code that avoids the generic AI template look. · A new landing page, homepage or small marketing site that must look intentional. · Redesigning a page that "looks like every other AI site" or "looks cheap". · Defining design tokens (type, color, spacing, radius, motion) for a small site. · Auditing a page before launch: visual quality, responsiveness, accessibility, performance. · Brand identity from scratch (logo, naming). You work from an existing logo or a typeset wordmark. · Web apps, dashboards, multi-step product flows - use a product UX/UI skill. · Conversion strategy and A/B test design - use a landing page strategist. · Writing all the copy. You tighten and mark copy; real copy comes from the user.

196 Zeilen · .md · sofortiger Download

// what's inside

Was steckt in dieser Fähigkeit?

Scored AI-slop audit before any redesign
Art directions from your brand, not from this year's trend
Design tokens: type scale, OKLCH colors, spacing, motion
Shippable HTML/CSS with an accessibility and speed pre-flight

Founders, freelancers and small teams who want a landing page or site that looks designed for their brand, not generated from a template.

// two ways to get it

Buy this file, or open the whole library.

Buy once

This skill as a file

$7 one payment, yours forever

Download right after checkout, keep it for good
Paste it into ChatGPT, Claude, Gemini or any AI chat, free plans included
30-day money-back guarantee

Unlimited Access

Every skill, prompt and agent, inside your chat

$9/mo cancel anytime, or $59 a year

All 2,500+ files in the library, loaded the moment you ask
Nothing to download or paste: connect once in Claude, ChatGPT, Claude Code or Cursor
Works on every Claude plan, free included · 30-day money-back guarantee on the first charge

See Unlimited Access →

Subscribers can still buy single files and keep them after they cancel.

Works with

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

// ask your assistant

Or let your AI set up this skill for you.

Go to kissmyskills.com/pages/for-ai-agents and set up the "Iolanthe - Anti-Slop Website Designer AI Skill" skill (handle: iolanthe-anti-slop-website-ui-designer) for me

Paste it into Claude, ChatGPT, Claude Code, Cursor or Codex. Your AI walks you through connecting KissMySkills (about 3 minutes, 7-day free trial) and loads the skill. What your AI will read →

What you're actually buying

Iolanthe is an AI website designer that makes landing pages and site UIs that do not look AI-generated. She sets an art direction from your brand, builds a real type scale, grid, spacing and color system as design tokens, then writes clean HTML and CSS, or Tailwind and React on request, section by section. Every page ends with a pre-flight check for accessibility, responsive layout and performance.

Built for founders, freelancers and small teams who are tired of purple gradients, glass cards and three emoji features. For redesigns she scores your page with an AI-slop audit first. She never invents testimonials, logos or stats. Unlike Elspeth, who plans section order and conversion logic, Denholm, who maps flows and design systems, and Mara, who directs agency work, Iolanthe is hands-on art direction plus production front-end code.

A landing page with real art direction, design tokens and shippable code that looks made for your brand.

Compatible with: Claude, Claude Code, ChatGPT, Gemini and Copilot. Install once as a Skill in Claude or paste it as instructions in any other AI chat.

Does it write code or only mockups? It writes real HTML and CSS, or Tailwind and React when you ask, built on design tokens.
Can it redesign my existing site? Yes - paste the page or its code and it runs a scored AI-slop audit before proposing directions.
Will it add testimonials and client logos? No - it leaves clearly marked placeholders until you supply real, permitted ones.
Does it work in Claude Code? Yes - it works in Claude, Claude Code, ChatGPT and any AI that can write code.

// installation Unter 2 Minuten

Vier Schritte. Jeder AI-Chat.

01
Datei herunterladen
Nach dem Bezahlvorgang wird der Download-Link an deinen Posteingang gesendet. Speichere die Datei an einem beliebigen Ort auf deinem Gerät.
02
Öffne deinen AI-Chat
Claude, ChatGPT, Gemini, Grok oder Copilot – ganz egal, welches du bereits nutzt.
03
Fügen Sie den Dateiinhalt ein
Füge es in das System-Prompt-, Projektanweisungen- oder benutzerdefinierte Anweisungsfeld ein.
04
Beginne mit der Arbeit
Deine AI ist jetzt als Spezialist konfiguriert. Frag sie alles innerhalb ihres Fachgebiets.

Keine technischen Kenntnisse erforderlich.

Mit Unlimited gibt es nichts herunterzuladen. Verbinde deine KI einmal und bitte sie dann einfach: „Lade Iolanthe von KissMySkills.“

Setup-Anleitung → Unlimited · $4.92/Monat bei jährlicher Zahlung →

// faq

Fragen zu diesem Produkt

What does Iolanthe - Anti-Slop Website Designer do?+

Iolanthe designs and codes landing pages and site UIs that look made for your brand. She proposes two or three art directions in words, turns the one you pick into design tokens (type scale, colors, spacing, motion), then builds the page section by section in HTML and CSS, or Tailwind and React on request, and finishes with an accessibility and performance pre-flight check.

What makes a website look AI-generated, and how does she fix it?+

The usual signs are purple-blue gradients, gradient text, glass cards, a centered hero with three emoji feature cards, one font at every size, the same rounding on everything, fake logo strips and unsourced numbers. Iolanthe scores these in a 15-point audit, removes anything untrue first, then fixes structure, typography, color and motion in that order.

How is Iolanthe different from Elspeth, Denholm and Mara?+

Elspeth plans landing page structure, section order and conversion logic. Denholm maps user flows, wireframes and design systems for products. Mara works like an agency creative director with client-facing language. Iolanthe is the hands-on designer who sets the visual art direction and writes the production front-end code. They combine well: structure from Elspeth, visuals and code from Iolanthe.

Can I use it with Figma or my own framework?+

Iolanthe works in code rather than inside Figma, but she writes specs and tokens you can recreate in a Figma file, and she outputs plain HTML/CSS, Tailwind or React. She can also adapt sections for Shopify, WordPress or Webflow. She never invents testimonials, client logos or statistics and never claims a design converts better without data.