As an newbie on Elements creating his website, a non-coder who has been working for years with Claude, I am the clear target of that feature :-))) I am really looking forward to working with it. I once tried a pure vibe-coding website creation, and I had the problem Dan is mentioning here: I can’t go back to the code and it is painful to ask Claude to correct this, change that, and amend this… But Elements+Claude working together is the best of both worlds.
My guess is the actual “best approach” is going to turn out to be:
- Design the site framework using the Elements components (and best with the Elements Essentials add-on and perhaps other third-party options) to get a basic design.
- Use AI to parse that and make corrections/additions/changes in a vibe coding way.
- Populate the resulting site with your actual content.
- Use AI and manual interaction to tweak.
Asking AI to do all the heavy lifting up front and just completely design a site starts to ignore all the goodness that has already been built into Elements, and I don’t think AI engines will completely keep up with all the possible components that can be added via the Store.
Moreover, AI is pattern matching by nature. That means that if you ask it to design a Web site, it’s going to create a Web site that looks like all the other average Web sites. Your landing page will look like everyone else’s. Not a way to stand out, and the current “average” is what I call a doom-scroll nightmare, particularly on mobile.
Thom - how would you make a site “stand out”?
Would it just be the main page? Or all pages?
A lot of animations or little?
Just curious how you would design it…
Not trolling- truly interested…
Well - used Claude to answer the question:
(Some good ideas)
Most sites fail to stand out for a single reason: they’re built to look “professional” instead of built to look like someone. A template with a stock hero image, a three-column feature row, and a sans-serif font says nothing. Standing out starts with having a point of view and expressing it relentlessly through every design and editorial decision. Here’s how that breaks down into things you can actually build.
Distinctiveness — the part that makes someone remember the URL
Typography is the single highest-leverage move, and almost everyone wastes it. The default move is one safe sans-serif everywhere. The distinctive move is a deliberate pairing with real contrast: a characterful display face for headlines and a clean, highly readable face for body. Concrete example — a serif with personality like Fraunces, GT Sectra, or Tiempos for headlines, paired with Inter, Söhne, or even system-ui for body. The contrast between an expressive headline and disciplined body text is what reads as “designed.” Push the display sizes bigger than feels comfortable (a 64–96px headline on desktop), tighten the letter-spacing slightly on the big stuff, and give body text generous line-height (1.6–1.7) and a constrained measure (65–75 characters per line). That measure rule alone separates readable sites from exhausting ones.
A signature visual device gives people something to recognize. Pick one and use it everywhere: a consistent accent color used only for interactive elements, a specific border treatment, a recurring shape, a custom underline animation on links, a particular way you frame images. For a trumpet education site, the device might be a thin brass-gold rule that appears under every section header and as the hover state on every link — small, but it becomes a fingerprint. The mistake is using five different decorative ideas; the win is using one idea ten times.
Color: most sites drown in neutral gray. A distinctive palette is usually one strong anchor color, one warm or cool neutral that isn’t pure gray (warm off-whites like #FAF8F4 read as intentional where #FFFFFF reads as default), and one sharp accent reserved exclusively for actions and links. When the accent only ever appears on things you can click, users learn your interface in seconds and the whole site feels considered.
The first screen — engagement is won or lost in 3 seconds
The hero should answer “what is this and why should I care” in plain language, not a vague tagline. “Trumpet lessons, technique studies, and a podcast for serious players — free” beats “Elevate your playing.” Pair a real, specific value statement with one primary action. Kill the carousel — rotating hero sliders are engagement killers because they move before anyone reads them and dilute the single message. One clear hero, one button.
Below the fold, the highest-engagement pattern for content sites is showing the content itself immediately rather than marketing about the content. A reader who lands and sees three real articles or a playable podcast episode embedded right there engages far more than one who sees feature boxes describing what they could find if they clicked deeper.
Engagement on the page — keeping someone reading
Long content lives or dies on rhythm. Break text every 3–4 paragraphs with something: a pull quote set large and offset, an image, a callout box, a subhead. The eye needs landing spots. Set a clear typographic hierarchy — if every heading looks the same weight, nothing guides the reader. A scannable article uses descriptive subheads that work as a skimmable outline on their own.
Specific high-engagement design elements that actually earn their place:
- A reading-progress bar at the very top for long articles. It’s a tiny touch that measurably increases scroll-through because it signals “this is finite, you’re making progress.”
- A sticky, minimal table of contents on the left for long-form pieces, with the current section highlighted as you scroll. This turns a wall of text into a navigable document.
- Inline, contextual links to related content placed within the relevant paragraph rather than dumped in a “related posts” block at the end. A link offered at the moment of curiosity gets clicked; the same link at the bottom gets ignored.
- For a podcast, a custom-styled player with a visible waveform, chapter markers, and a “jump to” list. Generic embed players look like everyone else’s; a styled player with timestamps you can click is both distinctive and genuinely more useful.
Performance is a design feature, not a backend afterthought. A site that paints in under a second feels premium no matter what it looks like; a beautiful site that takes four seconds feels broken. Concretely: serve images as WebP/AVIF at correct dimensions, lazy-load anything below the fold, self-host or preload your fonts with font-display: swap so text never blocks, and avoid layout shift by reserving image dimensions. Speed correlates directly with engagement and return visits — it’s invisible until it’s gone.
Micro-interactions signal craft. Subtle, fast (150–250ms) transitions on hover states, a gentle fade-in as sections enter the viewport, a link underline that draws in rather than just appearing. The rule is restraint and speed — anything slow or bouncy feels amateur. These details are subconscious but they’re a large part of why some sites just feel better.
Retention — the part most content sites neglect entirely
Engagement gets someone to read one piece; retention gets them to come back, and that’s where a publishing business actually lives. The mechanics that work:
Email capture is still the highest-ROI retention tool, and the design of the ask matters enormously. The worst version is an immediate popup before anyone’s read anything. The best version is a contextual inline signup placed after a reader has finished an article — they’ve just gotten value, so the ask “want the next one in your inbox?” lands at peak goodwill. Make the value concrete: “new technique study every week” beats “subscribe to our newsletter.” A second, well-timed exit-intent capture is acceptable if the inline one already did the polite work.
Give people a reason that’s tied to a schedule. A predictable cadence — a weekly article, a numbered podcast episode every Tuesday — trains return behavior in a way that sporadic publishing never does. Numbered, sequential content (Episode 17, 18, 19…) is especially sticky because it creates a sense of an ongoing series people don’t want to fall behind on.
Multiple subscription surfaces, because people return through different doors: a real RSS feed, the podcast on Spotify and Apple, email, and on-site “continue where you left off” if you can manage it. Each is a separate retention channel and you want all of them.
The single most underused retention design pattern for content sites is the end-of-content next step. The moment someone finishes reading is the highest-intent moment you’ll ever get from them, and most sites end with a dead stop or a generic footer. Instead, end with one specific, compelling next action: the single most relevant next article (not a grid of six — one strong pick), or “this pairs with Episode 18 on breathing.” A reader carried directly into a second piece is a reader who’s now twice as likely to return.
Putting it together as a concrete design
Picture a content article page that does all of this at once: warm off-white background, a 72px Fraunces headline with a thin brass rule beneath it, byline and reading time, then a single hero image. Body in Inter at 19px, 1.65 line-height, 70-character measure, centered in a clean column. A thin progress bar pinned to the top edge. A subtle sticky TOC on the left, current section glowing in the brass accent. Every link the same brass, underlined on a 200ms draw-in hover. Text broken every few paragraphs by a large offset pull quote or an image. At the end: no abrupt stop — an inline email capture framed as “the next study, weekly,” immediately followed by one hand-picked next article styled as a large, tappable card. Fast load, no layout shift, every interaction quick and quiet.
None of these individually is exotic. The thing that makes a site stand out is committing to a clear identity and applying these choices consistently across every page, so the whole thing feels authored by one confident hand rather than assembled from parts. Consistency is the actual differentiator — most sites are a patchwork, and a coherent one stands out by contrast alone.
Claude gets some of it right. I’d doubt that font is the first and foremost way to stand out, though. Remember, we have a long history of published content. A few magazines tried different fonts, though that mostly worked at the logo point.
The critical concept to stand out is “above the fold.” The current standard is doom-scroll to the content. And that’s worse on mobile than on desktop, but it can still be very problematic on desktop, too.
I’m going to use a site that was just promoted and praised here:
Visit the site: Berlin Sidecar Tours
On the desktop we’re shown a hero banner pretty much taking up all the above the fold area. No call to action here. No menu to get me to where I want to go faster. The “personal, unique, unforgettable” tag is somewhat buried and is reduced in importance to “experience Berlin by sidecar.” Learning that there are 1-5 tours and customizable requires scrolling. A “Tours” menu item would give me direct and faster access to the specific tours.
I’d generally say that sites that are calls to action require that to be above the fold, direct, and compelling without scrolling or sub-directs. The more you make a visitor work for the goods, the more likely they bolt.
Article-type sites are a different story (literally). The New York Times paper edition had a very specific practice they used: most important story on top, most important info in that story up front (there’s a strong practice these days for content sites to bury information, because otherwise the don’t get to display ads; if a person can glean the most important info from the lede, they don’t need to click through).
For desktop browsers I try to keep the landing page of my site no more than one scroll deep, most important things at the top. Most things on that page are clear pointers to what the reader might actually want. I’m in the midst of re-thinking all that as I redesign in Elements, but I’ll like keep to some variant of that. The thing I’ve been playing with lately is which variant, as the deeper material is now all done.
No doubt I won’t be perfect at this—one man bands have limitations ;~)—but the above are some of the things I’m always considering.
FWIW, I’d say “schedule” is more important than “email capture” long-term. If you’re retaining visitors, it’s important that they understand how/when you publish. Emailing them can lead them to thinking they know the latest and thus don’t need to visit the site. I’d agree with Claude about end-of-content-next-step. It’s something I currently don’t do well. It’s a way to keep someone engaged on your site and discovering the depth and breadth of what you provide.
That is a good suggestion and something I try to follow through with my other clients or own sites. I will talk to the client and propose some changes here, thank you 
@thominator
The Sidecar Tour site is better than most, and looks quite nice. But it’s sub-optimal is my point.
I think that one consideration to keep in mind is “how did someone get to this site?” If it’s via search, then that “personal, unique, and unforgettable” needs to be way more prominent and we need to know that these are personalized tours that are available, and that needs to happen above the fold. I’d also have an action “Have doubts about touring via Sidecar?” button.
Basically, if someone was looking for a tour of Berlin, they’re probably looking for:
- what are my options?
- how much?
- what will I see? what will I learn?
- how to schedule?
I’d want to drive (pardon the pun) the visitor more directly to those answers somehow rather than having them have to scroll to the answers (good news, the answers are there, it’s only a matter of how hard you’re making it for the site visitor to find them).
Mostly they will arrive due to PR and marketing campaigns and through recommendations. So the search engines might not yet play a role here until the site has some high value referrals coming in.
Then the action emphasis should be on picking options and how to schedule, I’d think.
Great developments Dan
The one thing that this might actually cannibalise it Templates in the ecosystem. As soon as the AI (whichever way its implemented) is introduced and the user points it in the direction of a theme/template/design it will be able to replicate this in an instant. This might make a big impact on developers. I don’t think though there is anything you can do about it IF you want a world where AI helps you.
As much as this is becoming a solid software platform there might be some interesting discussions in the future where developers try to protect their IP.
Be interesting to see how you guys naviagate this one.
I’m not sure Templates really work in Elements. In an ideal world, you could just apply a new Template to an existing page/folder structure and things would magically change. But that’s not the way it really works in Elements. Templates are more a starting place for a design than anything else.
I’ve already noted that some of the smarter designers are building out their own Components in their Templates, and that’s a better IP to try to protect than just “style.”
I get all that, whether it be templates/components etc etc anything that is being created by humans AI will potentially be able to sherlock them in real time inside Elements.
I’m pretty sure third-party developers will have to adapt to this new AI powered future, but I also think it’s too early to say exactly how this will shape the Elements ecosystem.
We can make a guess, but we’ll only really know a few months after we ship Elements with AI. It’s one of the reasons we’re taking things slow and demoing our progress each week.
And on that note, here’s a link to this weeks AI Dev Diary!
The issue here is “speed of achieving goal.” Developers that provide something that’s a reasonable price that immediately solves a site design problem are going to be fine. The actual cost of using AI isn’t currently being discussed correctly. It’s not just the cost of tokens, but it’s also the time you spend directing, redirecting, verifying, and tweaking via what I call AI as UI.
Most of us value our time very highly (and should), so a quick Component plug-in that does what we want costs less than wasting an hour or more trying to refine an AI-generated component. The more complex a Component is—such as the recent digital download one—the more that cost versus time swings towards developer-provided for-sale Components versus AI-generated ones.
From the designer-for-hire perspective, that becomes even more critical. How fast can you satisfy the client’s needs? Sometimes that will be solved by AI, sometimes by pre-built Components. My guess is that cosmetic adjustments will trend AI, complex functional Components will trend Store-bought.
very accurate analysis that I confirm 100%
I’d also like to introduce another variable, which primarily concerns the client’s target audience fir a freelance, and whether or not they need to provide a coherent design for their product. This adds to the complexity, and now AI i doesn’t seem capable of providing this support at this time, unless they just copy another site 
I think a style or repetition - AI can do without issues - but it depends on what you want also….
Maybe i misunderstood what you meant….
Hi Michael, yes, we probably don’t mean the same thing. I’m referring to aspects that are less visible in a project’s structure, but which instead relate to the site’s intended audience. It’s a counterintuitive concept, based on design rules, not code.
I’d go further. I’ve defined/architected a lot of seminal software in my career. Successful software starts with some key structural and definitional points, not coding. Essentially you need an architect. I don’t trust AI to be an architect. Much of what I’ve found is that I still need to do the architecture/structural work, but I can use AI to do the programming and fill-in from the blueprint I define.
This sort of thing is critical on the Internet. While we have a bunch of “tools” that are easily accessed (e.g. mySQL), underlying the net have been some unseen by users changes that have implications, such as the move towards JSON and Markdown. If you design a site one way, eventually you’ll end up in a “can’t get there from here” problem and have to completely start over. I’m in the process of that with four sites that survived 15 years of Internet change. What’s slowing me down some is that I really want to build for the next 15 years, and I’m still grappling with what that means structurally.
I don’t think you can plan for the next five years….
Will Agentic Agents be on your website?
Will they be Answering questions and planning content - maybe even direct video link broadcasting
Somehow the website has to evolve in content and delivery
With ai 
do we need websites? Very hard to say that… - for me -
I would guess video education- teaching would continue and be valued
What’s going to happen when advanced quantum computers come online….
So many questions and directions….
You are not the first person to ask this. For me the real question is: how do we share information without giving up control of the content to others, ensuring the message we cherish and want to communicate is delivered successfully?