Loading...

Landing page design skill · ai-design-skills

These landing pages drew 15,000 bookmarks. Their designer just made the AI skill behind them free

Add this skill to a coding AI like Claude Code or Cursor and ask for a landing page. The AI first asks for the one action you want visitors to take. Then it settles the page structure, copy, FAQ, and design values and builds the page from scratch. Elaya, a product designer in Dubai with eight years of experience, released the skill for free. We collected founders who rebuilt their own product homepages with it and shipped them.

Oct 26, 2026·3 cases

Creator demo: a reel of landing pages Elaya designed with this skill. Source: Elaya on X

On October 24, Dubai-based product designer Elaya posted a 15-second video on X that strings together a series of landing pages. The post read: "I designed all of these landing pages in the last two months, using @higgsfield, Claude, and Cursor with my custom AI designer skill. The skill is open source". By October 26 it had passed 530,000 views, and it had been saved for later (15,000 bookmarks) more often than it had been liked (9,000 likes). We gathered three founders who rebuilt their own product homepages with this skill and shipped them. One did it on October 20, four days before the launch post. The other two did it on October 25, the day after. The landing page skill had been public in the same repository since July.

nogu, a software engineer in Japan who tried the skill, wrote: "素のAIエージェントでもLP自体の完成はできると思うけど、原理原則に沿って作成することができる (I think a bare AI agent can finish a landing page on its own, but this way you can build it according to core principles)"

Elaya has been a product designer for eight years, is building a product called slopscan.co, and takes on client design work. The skill is free under the MIT license, and you can sell pages built with it without crediting the source. Shortly after launch, Leon Lin, who made another design skill called taste-skill, asked for credit, and on October 26 Elaya added the attribution and rewrote the parts that overlapped.

The skill makes the AI ask questions before it writes any code. The first one is "What is the ONE primary action?" Once it has the answers, the AI lays out a page outline, hero copy, benefits, a how-it-works sequence, an FAQ, search visibility (SEO/AEO), and a layout plan. Then it builds the page with the fonts, spacing, corner radii, and motion values the designer has set.

Reference 01Wahaj Siddiqui, who built Hysaab, an AI finance tool for companies in the Gulf · Own product homepage

An AI finance tool's homepage now walks through its three steps with live animations, plus an eight-question FAQ

Wahaj rebuilt the English Hysaab homepage with the skills in this repository. In the PR, Wahaj wrote that the skill's font and color values were swapped for Hysaab's own brand values, while its rules for structure, copy, spacing, corners, and motion were applied.

The new homepage makes Request access the only primary button, with Book a demo right beside it. A new How it works section gives each of its three steps an illustration that actually moves. Four result cards animate only when they scroll into view and stop once they leave the screen. The page also gained a tagline that lights up word by word as you scroll, and an eight-question FAQ answered with information already on the site.

In the same work on October 25, the Arabic homepage was switched to the same design.

The first screen of the Hysaab homepage. Under the headline 'Your finance team. Without changing your accounting system.' sit a Request access button and a Book a demo link, a strip of integrations (Xero, Zoho Books, QuickBooks, Odoo, Wafeq, ERPNext), and a month-end close calendar panel on the right
First screen of hysaab.ai, captured Oct 26, 2026. The numbers in the right-hand panel are values the page labels as examples.

Reference 02Julianchoo, who built the meeting-notes app Breeze · Own product homepage

A meeting-notes app drops a 'replay your recording' promise it couldn't keep, and its homepage now starts with one button

Before adding landing-page-design to the project's.claude/skills/ folder, Julianchoo read through it. Julianchoo described it as "plain markdown with no scripts and no hidden content" and limited the skill to the public homepage.

The new homepage puts a single button on the first screen, 'Record your first meeting', which starts with Google sign-in. From there it runs through the problem and the fix, five benefits, three steps from recording to summary, an 11-question FAQ on privacy, devices, and audio handling, a note that eases worries before people try it, and a final call-to-action button.

The old homepage promised you could listen to your audio again, but audio uploaded to the server is deleted once transcription finishes. The new copy says exactly that. Julianchoo reported that at phone width (390px) and desktop width (1440px), in both light and dark themes, the page did not overflow sideways and the console showed no errors.

The first screen of the Breeze homepage. On a cream background: the headline 'Stay in the conversation. Breeze writes the notes.', a single 'Record your first meeting' button, and the line 'No bot joins your call. Breeze listens from its own tab.'
First screen of breeze-ai-lime.vercel.app, captured Oct 26, 2026.

Reference 03Nasser, who built Seera AI, an Arabic and English AI résumé service · Own product homepage

An Arabic résumé service's homepage drops a '53 reviews, 4.8 stars' rating that never existed and adds a bilingual FAQ

According to the PR Nasser had Claude Code put together, the original homepage had no FAQ, no large display tagline, and no skip-to-content link. The English page title still used the old name, CVCraft, and the structured data for search carried a '53 reviews, 4.8 stars' rating that did not actually exist.

After the change, the first line of the hero headline fades from white to gray, while the gold second line stays as it is. A six-question FAQ in Arabic and English now sits before the final call-to-action button, and a skip-to-content link was added for keyboard users. The English brand name changed to Seera AI, and the fake rating was removed.

Not every rule in the skill was followed. Nasser wrote: "I skipped the skill rules that clash with Seera glass on purpose". The animated background and the Readex Pro font stayed, and the skill's flat background, fonts, spacing, and corner values were left out.

The Arabic first screen of the Seera AI homepage. On a dark green background: the headline 'سيرتك الذاتية الاحترافية، جاهزة في دقائق.', a résumé editor panel, and a call-to-action button
Arabic first screen of cvcrft.com, captured Oct 26, 2026. The headline means 'Your professional résumé, ready in minutes.'

How people reacted

What people liked

  • “craft tells 14→0 ... the judge picked this branch on all three.”

    In gstack, a toolkit for Claude Code, the skill was adapted into /design-html after the request "Absorb all the interesting parts of this design skill". This is the result of a blind comparison against the existing version on three briefs.

    Garry Tan · gstack maintainer · GitHubgithub.com
  • “The skill arm had all six. The control had none.”

    An experiment that built the company's own product landing page from the same brief once with the skill and once without, then counted whether six designer-set values, such as the motion curve, headline gradient, and body text width, showed up. The post also promotes ThakiCloud's own product.

    ThakiCloud · Tech blogthakicloud.com
  • “Clean work. The hero spacing beats most hand-built pages I see.”

    A reply after watching the launch video.

    PrinceOwems · Web designer · Xx.com
  • “Another design-related skill, looks pretty cool.”

    Povilas Korop · AI coding instructor · Xx.com

What fell short

  • “the skill does not control facts.”

    Points out that the page built with the skill included numbers that weren't in the brief, such as '9m 41s' and '$38.42'.

    ThakiCloud · Tech blogthakicloud.com
  • “does the skill need a lot of planning and direction? it js gave me back a generic tech look for a perfume store”

    simpcns · Xx.com
  • “Not carried over because they conflict with gstack's rules: fixed font lists, gradient hero text, fixed palettes and spacing, mandatory scroll reveals, one designer's signature nav.”

    Garry Tan · gstack maintainer · GitHubgithub.com
  • “The skill's aesthetic (light, minimal editorial) is tuned to one direction”

    ThakiCloud · Tech blogthakicloud.com
  • “What used to be a leet landing page 2 months ago looks like ai slop rn”

    A reply to the launch post.

    The Web Tailor(@r3ttila) · Xx.com

How to start

Paste the request below into a coding agent like Claude Code, Cursor, or Codex. If you don't use a terminal, upload SKILL.md to a Claude.ai project and say 'follow this'. If you also want a short promo video (MP4 or GIF) of the finished page, ask it to add design-to-motion from the same repository too. Exporting video requires ffmpeg on your computer, and using Figma frames requires a Figma personal access token.

  1. Starter prompt

    Use this article as a reference: https://www.working-ref.com/en/reference/ai-design-skills-2026-10 Add the landing-page-design skill from the elayadesign/ai-design-skills repository on GitHub to this project (.claude/skills/ for Claude Code, AGENTS.md for Codex, .cursor/rules/ for Cursor). Before adding it, check that SKILL.md has no scripts or hidden instructions. Then look over my product and suggest three things worth trying with this skill. When I pick one, ask all of the skill's questions at once and get started. If nothing fits, start by redesigning the first screen of my homepage. Keep the fonts and colors my brand uses now.

Share this reference

Weekly · Free

Was this reference helpful?

The week in AI: the BEST
just 3, straight to your inbox

Work Smarter with AI

420 readers get it every week

You're in See you in your inbox with the next issue.

These landing pages drew 15,000 bookmarks. Their designer just made the AI skill behind them free | References