RSS Amplifier

Product with Attitude · Aug 25, 2026

Kimi K3: I Designed One Newsletter Hero in 11 Stunning Ways

0
Sign in to vote or save

Karo (Product with Attitude) · Product with Attitude

11 ways to design the same newsletter hero. Built with Kimi K3 from essentially the same UX copy and subscription structure. Read the article to learn how to copy and adapt every asset, prompt, and codebase.

After my Claude Design review, four PwA members have independently asked about design styles that don’t look blatantly AI-ish.

Or, more precisely: how to brief AI when the visual is clear in your head but not on your tongue.

I’ll know it when I see it, I just don’t have the words to describe what I really want.

Daniela

I can picture exactly how I want it to look, but I struggle to translate that vision. I eventually adapted an existing design, and while the result is fine, it doesn’t feel like something I’m particularly proud of.

— PwA Reader

We usually learn to like before we learn to explain why. And that's okay.

Don’t ever let it make you feel like you’re not ready to start experimenting. None of us were born with a design vocabulary.

We are not covering centuries of visual design in one Substack post. Instead: hero sections with prompts and code, plus a workflow for translating every possible I’ll know it when I see it into design direction for your AI.

We’ll do that 11 times, using the exact same website in 11 different design styles.

You’ll also enjoy this article if you’re curious what Kimi K3 can do while the internet continues its Claude-and-GPT hype cycle.

Or, if your brain likes looking at beautiful things.

AI-ish design (also: Claude-ish design) is the readily identifiable default aesthetic of interfaces generated by AI coding tools without clear human art direction.

Side-by-side comparison of two AI-ish newsletter landing page designs showing the recognizable default aesthetic of AI-generated websites. The first uses a dark navy grid background, purple glow, centered oversized headline, blue-to-purple gradient text, trust badge, email field and generic “Insights that matter. Delivered weekly.” copy. The second uses a pale lavender background, bold centered headline, purple gradient typography and button, a large rounded white subscription card, pill-shaped badges, emojis, check-mark benefits and soft shadows. Both examples demonstrate common AI website design patterns: indigo and purple gradients, oversized sans-serif headlines, rounded cards, badge pills, generic newsletter copy, emoji interface elements and highly polished but interchangeable layouts.
Side-by-side comparison of two AI-ish newsletter landing page designs showing the recognizable default aesthetic of AI-generated websites.

Some telltales: the indigo-to-purple gradient style that Claude is terribly fond of. Identically rounded cards with soft shadows. Badge pills everywhere. Tailwind, Tailwind, Tailwind.

But I think that definition misses its most important tell: we look at it and feel nothing. Annoyance, maybe. But mostly nothing.

I saw far more indigo websites in 2025 than I do now. So: progress. But plenty still leave you with that same blank feeling.

The table below shows what changes when we guard our taste like a hawk:

AI-assisted craft compared with AI model defaults across 13 design dimensions: typography, type hierarchy, color, containers, layout, spacing, imagery, buttons, copy treatment, brand details, responsive behaviour, iteration, and feeling. Each row pairs an intentional art-direction decision with the generic output an AI model produces by default, showing why art-directed pages create curiosity, tension, or delight while default LLM-generated design stays polished but forgettable. From Product with Attitude by Karo Zieminski, August 2026.
AI-assisted craft vs AI model defaults comparison table: 13 dimensions from typography to feeling, and why intentional art direction wins.

Because Kimi K3 is shockingly good at design even before you give it a single Skill. That’s because it can see its own work.

Kimi K3 arrived in July 2026 from Moonshot AI: 2.8 trillion parameters, open weights.

It runs an agentic visual loop. Which basically means it iterates between code and live screenshots. On July 17, that capability helped put it at #1 on Arena’s Frontend Code Arena, ahead of Claude Fable 5.

Yes. Fable 5 got beaten at frontend design by a Chinese open-weight model.

Arena.ai Frontend Code Arena leaderboard showing Kimi-K3 ranked first with a score of 1,679. Claude Fable 5 ranks second with 1,631, GPT-5.6 Sol (xHigh) third with 1,618, and GLM-5.2 (Max) fourth with 1,587. The benchmark compares AI models on frontend code generation performance.
July 2026 Arena Frontend Code leaderboard snapshot showing Kimi K3 at #1, ahead of Claude Fable 5, GPT-5.6 Sol and GLM-5.2.

Hey, I’m Karo Zieminski 🤗.

AI PM and builder. I write Product with Attitude, an AI newsletter for tens of thousands of readers across 146 countries, helping them develop critical AI literacy the only way it sticks: through practice.

Welcome to the 399 of you who have joined us since last week! Here’s what you might have missed:

Subscribe for free, and I’ll keep bringing you deeply researched,
human-written articles like this.

SUBSCRIBE

And if you share this article with 3 friends or colleagues,
I’ll thank you with 3 months of a premium subscription.

Refer a friend

Eleven hero sections, one newsletter website, identical copy and subscription structure, built 11 times in 11 different design styles. I wanted the visuals (and textures!), not the words, to do all the talking.

Eleven visual directions for designing the same newsletter hero section with AI, from Conceptual Editorial Minimalism and Punk Editorial Collage to Botanical Luxury Minimalism and Alpine Cinematic Editorial. Each design style is defined by a distinct concept, typography treatment, image language, texture, composition, and color palette. Proof that better AI website design starts with specific art direction.
Conceptual Editorial Minimalism website hero section built with Kimi 3, featuring a black cat appearing to emerge through a translucent frosted off-white surface, with its head and paws partially visible and softly blurred into the surrounding background. The asymmetrical editorial composition places the conceptual photograph on the left and newsletter content on the right, using extensive negative space and a disciplined grid. A large yellow “dispatch” wordmark, bold black sans serif headline, small uppercase issue metadata, minimalist navigation, email subscription field, black rounded subscribe button, and bottom statistics bar create a restrained modern interface. The design combines conceptual photography, editorial minimalism, Swiss-inspired typography, monochrome black-and-cream colors, a single yellow accent, soft-focus surreal imagery, and contemporary magazine art direction to create a distinctive Kimi 3-generated newsletter landing page.
Conceptual Editorial Minimalism. Combines one surreal photographic idea with disciplined typography, extreme negative space, and a restrained black, cream, and yellow palette. Built with Kimi K3, the hero uses a black cat seemingly emerging through a frosted surface as the focal concept, pairing Swiss-inspired editorial structure with contemporary art direction.

Copy assets, prompt, and code

Find the password here.

Nocturne Editorial Surrealism website hero section built with Kimi 3, featuring a large luminous hummingbird with dark iridescent green plumage and translucent coral-orange wings glowing against a nearly black background. The bird is rendered in a detailed natural-history illustration style and dominates the right side of the composition, while the left side contains a newsletter headline reading “The ideas worth your inbox,” set in bold white sans serif typography with an elegant peach italic serif accent. The interface includes small uppercase issue metadata, minimalist login and get-started controls, a rounded email subscription field, and a bottom statistics bar showing subscriber count, weekly publishing cadence, average reading time, and ad-free status. The design combines nocturne color palettes, surreal naturalist illustration, dark luxury minimalism, cinematic asymmetry, editorial typography, museum-style specimen presentation, and glowing biological imagery to create a distinctive Kimi 3-generated newsletter landing page.
Nocturne Editorial Surrealism combines luminous natural-history illustration with dark luxury minimalism and cinematic editorial composition. An oversized glowing hummingbird, near-black negative space, peach serif accents, and restrained UI combine to create a website that feels like a nocturnal museum plate turned into a contemporary digital publication. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

Cinematic Frosted-Glass Editorial website hero section built with Kimi 3, featuring a close-up portrait of a woman viewed through condensation-covered textured glass, with only her green-gray eyes visible clearly through a narrow horizontal opening. Water droplets, fog, blur, and frosted glass obscure most of the face, creating a mysterious cinematic composition in muted charcoal, moss-gray, beige, and soft white tones. Large uppercase sans serif typography is split across the layout, with “THE IDEAS WORTH” positioned in the upper left and “YOUR INBOX.” on the right, while small issue metadata, minimalist navigation, a dark rounded newsletter subscription form, and a bottom statistics row display subscriber count, weekly publishing frequency, average reading time, and ad-free status. The design combines frosted-glass photography, conceptual portraiture, cinematic minimalism, brutalist editorial typography, atmospheric web design, tactile condensation textures, and asymmetric magazine composition to create a distinctive Kimi 3-generated newsletter landing page.
Cinematic Frosted-Glass Editorial combines conceptual portrait photography, condensation textures, oversized typography, and atmospheric minimalism. The hero reveals only the subject’s eyes through a strip of frosted glass, turning concealment itself into the composition while keeping the surrounding newsletter UI deliberately restrained. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

If any of these designs catches your eye, please share or restack this guide so more people can find it.

Share

Punk Editorial Collage website hero section built with Kimi 3, featuring a high-energy mixed-media composition of vintage publishing objects including an open book, fountain pens, ink bottle, quill, typewriter, and a large illustrated hand holding a pen. The background combines distressed paper texture, black ink, halftone printing, graffiti-like paint splashes, and layered electric blue, acid green, yellow, and hot pink color fields. Large uppercase headline typography reads “THE IDEAS WORTH YOUR INBOX,” with individual letters highlighted in bright contrasting colors, while a black rectangular newsletter subscription form, hot pink subscribe button, minimalist navigation, and a wide black statistics bar show subscriber count, weekly publishing cadence, average reading time, and ad-free status. The design combines punk editorial design, DIY zine aesthetics, neo-brutalism, graffiti graphics, vintage print ephemera, screen-print texture, analog publishing imagery, maximalist collage, and contemporary web UI to create a distinctive Kimi 3-generated newsletter landing page.
Punk Editorial Collage. DIY zine graphics, vintage publishing ephemera, neo-brutalist UI, and graffiti-inspired color. Built with Kimi K3, the hero layers typewriters, ink, books, pens, distressed print textures, and electric color into a deliberately chaotic editorial composition that feels closer to a punk poster or independent magazine than a conventional landing page.

Copy assets, prompt, and code

Find the password here.

Surrealist watercolor editorial website hero section built with Kimi 3, featuring a large painterly portrait of a woman with rust-colored abstract hair covering her eyes, set against a muted sage green and teal textured background. The design combines literary magazine typography, elegant high-contrast serif headlines, italic editorial accents, minimalist navigation, a centered newsletter subscription form, paper-like grain, watercolor and gouache textures, and an analog art-book aesthetic. The interface uses restrained UI elements and muted natural colors to create a distinctive editorial web design that feels like an independent magazine, illustrated journal, or contemporary art publication rather than a conventional AI-generated landing page.
Surrealist Watercolor Editorial. Combines literary magazine typography with painterly illustration, muted natural colors, paper-like texture, and restrained interface design. The style pairs elegant serif type and minimal UI with expressive analog artwork, creating a website that feels closer to an art book or independent magazine than a typical AI-generated landing page. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

Surrealist retro collage website hero section built with Kimi 3, featuring an oversized vintage paper airplane carrying a small woven hot-air balloon basket, a crescent moon, floating gold wax seal, halftone clouds, and engraved mountain scenery. The composition uses cobalt blue, dusty violet, peach, amber, cream, and muted teal tones with visible paper grain, faded ink, halftone printing, and vintage poster textures. A large rounded white “dispatch” wordmark dominates the center above a newsletter headline, supporting copy, email subscription form, and translucent information cards showing subscriber count, publishing frequency, reading time, and ad-free status. The design combines surrealist collage, mid-century print aesthetics, vintage travel posters, analog editorial art direction, retro-futurism, and modern web UI to create a distinctive newsletter landing page that looks intentionally art-directed rather than conventionally AI-generated.
Surrealist Retro Collage. Built like a dreamy risograph collage. Combines mid-century print textures, vintage travel-poster imagery, impossible scale, and analog ephemera with contemporary web UI. Halftone mountains, paper cutouts, celestial motifs, bold rounded typography, and translucent interface elements create a dreamlike editorial website that feels both nostalgic and strangely futuristic. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

Futurist glass editorial website hero section built with Kimi 3, featuring a large cinematic close-up portrait of a woman with short platinum hair and blue eyes positioned behind layered translucent glass panels. The interface uses a cool steel-blue, icy gray, and white color palette with frosted-glass blur, subtle transparency, thin vertical dividers, soft-focus background imagery, and minimal luxury UI elements. A large editorial headline reading “The ideas worth your inbox” appears on the left beside newsletter copy, an email subscription field, and a rounded subscribe button, while small navigation links and subscriber statistics frame the composition. The design combines glassmorphism, cinematic photography, editorial asymmetry, luxury technology branding, minimalist typography, and futuristic web design to create a premium newsletter landing page with a polished near-future aesthetic.
Futurist Glass Editorial. A full-bleed triptych portrait combines cinematic photography, frosted-glass panels, cool monochromatic colors, and restrained typography with a minimal luxury interface. Transparency, blur, asymmetric composition, and large-scale photography create a near-future editorial website that sits somewhere between a fashion campaign and a premium technology launch. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

Surreal Literary Editorial website hero section built with Kimi 3, featuring an expansive dreamlike landscape made from giant open books whose pages form rolling hills, ridges, and valleys across the entire composition. A small human figure wearing a flowing red dress walks through the oversized book landscape, creating a strong visual metaphor for entering a world of ideas and reading. The interface uses warm ivory and parchment tones, black typography, and deep red accents, with a large editorial headline reading “The ideas worth your inbox,” modern sans serif type paired with expressive italic serif lettering, minimalist navigation, a centered newsletter subscription field, and a lower statistics section showing subscriber count, weekly publishing cadence, average reading time, and ad-free status. The design combines surrealism, literary editorial design, conceptual landscape art, luxury minimalism, cinematic scale, book-inspired imagery, and magazine typography to create a distinctive Kimi 3-generated newsletter landing page.
Surreal Literary Editorial turns books into the landscape itself. An endless terrain of open pages, a lone figure in red, restrained cream-and-black typography, and elegant editorial UI create a conceptual website about ideas, reading, and getting lost inside them. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

Swiss Halftone Editorial website hero section built with Kimi 3, featuring a large black-and-white close-up portrait of a woman on the right rendered in dense halftone and stippled dot texture that gradually disperses into the off-white background. The left side uses a strict Swiss-inspired editorial grid with oversized black sans serif typography reading “The ideas worth your inbox,” with “your inbox” highlighted by a fluorescent chartreuse rectangle. Small uppercase issue metadata, minimalist navigation, thin registration-style rules, a rounded newsletter subscription field, and a bottom statistics row show subscriber count, weekly publishing cadence, average reading time, and ad-free status. The design combines Swiss modernism, halftone photography, pointillist portraiture, neo-brutalist typography, editorial minimalism, print-production graphics, asymmetrical layout, monochrome web design, and acid-green accent color to create a distinctive Kimi 3-generated newsletter landing page.
Swiss Halftone Editorial. Grid discipline with pointillist portrait photography, hard black typography, and one fluorescent chartreuse accent. Built with Kimi K3, the hero uses print-registration details, halftone texture, asymmetric composition, and stripped-back UI to create a website that feels like an experimental Swiss poster translated into a digital editorial interface.

Copy assets, prompt, and code

Find the password here.

Botanical Luxury Minimalism website hero section built with Kimi 3, featuring a dark cinematic background framed by moss-covered rock formations and shadowy forest textures on both sides of the page. The centered newsletter hero uses large white editorial typography with an elegant italic serif phrase, small uppercase issue metadata, a translucent navigation pill, minimalist login and get-started controls, and a rounded email subscription field. Four dark semi-transparent information cards sit across the lower section, showing subscriber count, weekly publishing cadence, average reading time, and ad-free status, each with thin borders and muted green accent lines. The design combines botanical imagery, luxury minimalism, editorial typography, subtle glassmorphism, cinematic nature photography, symmetrical composition, charcoal and off-white tones, and moss-green accents to create a premium Kimi 3-generated newsletter landing page.
Botanical Luxury Minimalism. Combines cinematic forest imagery, restrained interface design, editorial typography, and subtle glassmorphism. Mossy organic textures, deep black space, translucent cards, and refined serif-sans contrast create a premium website aesthetic that feels calm, elegant, and art-directed. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

Alpine Cinematic Editorial combines immersive mountain photography, oversized modernist typography, subtle cartographic details, and restrained luxury UI. Built with Kimi 3, the hero uses dramatic alpine peaks, golden-hour light, deep atmospheric shadows, and layered editorial typography to create a website that feels like a premium outdoor journal crossed with a contemporary magazine.
Alpine Cinematic Editorial. Combines immersive mountain photography, oversized modernist typography, subtle cartographic details, and restrained luxury UI. Dramatic alpine peaks, golden-hour light, atmospheric shadows, and layered type make the website feel like a premium outdoor journal crossed with a contemporary magazine. Built with Kimi K3.

Copy assets, prompt, and code

Find the password here.

And now I’d love to bring YOU into the experiment.

Close your eyes (and please don’t scroll back!).

Name the first two designs you can still see. Those are the ones that left the strongest imprint on your brain.

Which two designs appear first?

Leave a comment

Visual Prompt Engineering

Visual prompt engineering is the practice of pairing images with written instructions to give AI clearer context and guide its output.

The visual prompt engineering workflow: find a design reference, save it while you still remember why it caught your eye, then pair it with written instructions in your AI design or coding tool.

I recommend reading Figma’s Visual Prompt Engineering Guide.

First rule: if the design vocabulary isn’t coming, don’t force it. Switch to visual language instead.

The visual reference-to-prompt workflow turns an 'I'll know it when I see it' into design direction your AI can execute.

Browse sites like Cosmos or Behance and scroll until you see something that, well, stops the scroll. Save it for later. I mean it, I’ve made this mistake often enough to know better: save that thing immediately (that’s rule number 2). You can use tools like Cluing, bookmark it, anything.

If one of the saves feels close to what you want for your homepage, use it as a visual reference in the prompt. I’ve seen people paste it into ChatGPT first and asking it to describe the design in precise language. They were happy with the results. But in my tests, giving Kimi K3 the image AND the prompt worked even better.

Rule #3: prepare your UX copy (the words people see on your site) before you prompt.

Using today’s example, this is the copy I gave Kimi K3:

Detailed UX copy table for a newsletter homepage hero section titled “Dispatch.” The two-column table lists each interface element alongside its exact text: Wordmark — “Dispatch”; Kicker — “The Weekly Dispatch · Issue N°142”; Headline — “The ideas worth your inbox.”; Subhead — “One email every Friday. Big ideas, clear thinking, and zero noise — for 24,000 readers who like their insights sharp and their inboxes calm.”; Input placeholder — “you@example.com”; Button — “Subscribe”; Microcopy — “Free forever. Unsubscribe anytime.” The hero section also includes four newsletter credibility and subscription statistics: “24,000+ / Subscribers,” “Weekly / Every Friday,” “5 min / Average read,” and “100% / Free, no ads.” The image demonstrates how to structure UX copy for an email newsletter landing page or subscription hero before generating or designing the interface with AI.
UX copy specification table for a newsletter hero section, showing the exact wordmark, kicker, headline, subhead, email field, subscribe CTA, microcopy, and credibility stats used in the design.

Now hand it over to your AI. Just don’t paste in one of those giant “ultimate web design prompts” from the internet. Instead, ask the agent to interview you, one question at a time, until it has enough context to understand what you want. Until you both do.

You are a team of senior product designers, art directors, UX experts, and design engineers. Interview me one question at a time until you are at least 95% confident you understand my requirements.

That’s AI-assisted craft in practice: let the model do the assembly work, but keep the standard. (And please read the manifesto!)

If you choose to use Kimi K3, I accessed it via Perplexity Computer. Here are some other options:

Detailed comparison table showing five ways to access Kimi K3 in 2026. Routes include Perplexity Computer for Pro and Max subscribers; Kimi.com using membership credits, with K2.6 remaining the free chat model; the official Kimi API via platform.kimi.com or providers such as OpenRouter; Kimi Code integrations for Claude Code, OpenCode, Codex, Roo Code, and the VS Code extension; and self-hosting the open-weight model from Hugging Face. The table explains setup requirements, API pricing and context limits, membership-tier restrictions, and self-hosting requirements. Kimi K3 is a 2.8-trillion-parameter open-weight multimodal AI model from Moonshot AI, with up to a 1-million-token context window and approximately 1.5 TB of released weights.
5 ways to access Kimi K3 in 2026. A comparison table with Kimi K3 access routes: Perplexity Pro and Max, Kimi.com membership credits, the official Moonshot/Kimi API or OpenRouter, Kimi Code integrations for Claude Code, OpenCode, Codex and Roo Code, and self-hosting the 2.8T-parameter open weights from Hugging Face.

I hope this helps!

SUBSCRIBE

Read the original on karozieminski.substack.com

Comments

Nothing yet. Say the first thing.

    Sign in to join the conversation.