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
Iolanthe - Anti-Slop Website Designer AI Skill
$7.00
Skip to product information
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
this skill
one payment
yours forever
Complete skill package instant downloadiolanthe-anti-slop-website-ui-designer.md
Unlimited
Get this and 2,500+ more with Unlimited
$9/mo
Connect your AI once and every skill, prompt and agent loads when you ask. Unlimited also includes the AI CRM your Claude or ChatGPT can run.
AI CRM includedThis skill$7once, this skill only
Unlimited$9/mothis + 2,500+ more + AI CRM, first 7 days free
Pay once, keep foreverInstant download30-day money-back guarantee
As featured onProduct HuntFazierKittyLaunch
Secure checkout by Shopify
Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.
Ask Iolanthe something hard.
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.
Or have every skill inside your AI.
Questions before you buy? A person answers, usually the same day: 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.
Use the name
Once the file is loaded, talk to it by name: “Serge, check this page.” That is what the name is for. It also keeps several skills apart in one chat.
Once the file is loaded, talk to it by name: “Serge, check this page.” That is what the name is for. It also keeps several skills apart in one chat.
// the skill your AI runs on
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.
// what's inside
What's inside this skill
- 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.
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
Subscribers can still buy single files and keep them after they cancel.
// 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.
// how to install
Under 2 minutes
Four steps. Any AI chat.
- 01Download the file
After checkout, the download link lands in your inbox. Save the file anywhere on your device.
- 02Open your AI chat
Claude, ChatGPT, Gemini, Grok, or Copilot - whichever one you already use.
- 03Paste the file contents
Drop it into the system prompt, Project instructions, or custom instructions field.
- 04Start working
Your AI is now configured as a specialist. Ask it anything inside its domain.
No technical knowledge required.
With Unlimited there is nothing to download. Connect your AI once, then just ask: "Load Iolanthe from KissMySkills."
// faq
Questions about this product
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.