Make Your Landing Page’s Value and Next Step Clear

See how a landing page guides one main action

Visitors need to understand your offer and know what to do next. landing-page-design starts with the audience, the benefits and one main action. It then plans the copy, sections and visual design.

The video above shows Elaya’s landing page work. In the sleep service example, notice:

• The headline leads with a benefit: “Restorative Sleep” names the benefit of feeling refreshed after sleep, while the image creates a relaxing mood.
• The next step sits near the explanation: The email field and main button appear below the headline, making it easy to continue.

Differences from similar skills

• huashu-design: Compares three visual directions across websites, presentations and app prototypes. landing-page-design focuses on a landing page’s audience, offer and main action, then applies its own typography, spacing and motion rules.
• Emil UI skills collection: Focuses on interface motion, interaction details and code review. landing-page-design starts with what the page needs to say and guides the build through the full page.

Install the rules and prepare your product details

In this walkthrough, you’ll build a portrait photography booking page using prompts written by Opuskill.

1. Open a terminal in the project where you want to build the page. Follow the repository’s Claude Code installation method:

mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/

2. Find .claude/skills/landing-page-design/SKILL.md in your project. Open Claude Code in that project and ask it to read and use landing-page-design. Ask it to summarize how it plans the content before applying the visual rules. This helps confirm that it has read the file.

Set up other tools

For other tools, follow the README:

Tool	Where to add the rules
Cursor	Save the skill’s SKILL.md as .cursor/rules/landing-page-design.md, or paste it into the project rules
Codex	Merge the skill into the project’s existing AGENTS.md, keeping the current instructions
Windsurf / Cline	Merge it into .windsurfrules / .clinerules, respectively

Gather your portfolio photos, service details and booking link. Then describe who will visit and what worries them. Someone booking their first portrait session may worry about posing. The page can explain how you guide them during the shoot.

Plan the copy and structure, then build the hero

Send this request in your coding tool’s chat after replacing the bracketed fields:

Use landing-page-design to create a portrait photography booking page.
Audience: people booking their first portrait session.
Main goal: help visitors check available times and book a session.
Concerns: not knowing how to pose, how the shoot works or what the service includes.
Portfolio photos: [photo files or links].
Service details: [location, process, included services and public pricing].
Booking link: [real booking URL].
First propose the page outline, hero headline and description, main button copy, benefits, process and FAQ.
Recommend whether search engines should index the page and explain your layout choice.
Use the facts I provide. List missing information as material to supply.
Wait for my approval before writing code.

Review whether the headline explains what you offer and who it is for. Check that the button names the next step. For example, “Check available times” is more specific than “Learn more.” Then check whether the photos and service details address concerns about posing, the session and what clients receive.

When the plan works, send:

Build only the hero using the approved plan.
Keep the approved headline, description and photos. Label the main button “Check available times.”
Use my booking URL for the button.
Apply the typography, spacing, radius and motion rules in landing-page-design.
Deliver index.html and its assets, with instructions for previewing it in a browser.
Stop after the hero and wait for my feedback.

Open the hero and check that the headline, photo and button each have a clear role. Refine this section first so the rest of the page has a visual foundation to follow.

Complete the page and check buttons and mobile layouts

Once the hero works, ask the agent to continue:

Keep the approved hero and complete the page section by section using our outline.
Continue with benefits, the session process, portfolio work or client feedback, FAQ and a final booking button.
Use the work and feedback I provide. List missing material as items to supply.
Include the skill's separate large tagline section, with words revealed in reading order as it scrolls into view.
Point every main booking button to the same booking URL.
Follow the hero's typography, spacing and motion. Complete the mobile layout.
Deliver the updated files and preview instructions. Explain which sections you completed.

The skill has its own rules for font choices, type sizes, spacing and the separate tagline reveal. If your brand guidelines differ from these defaults, state your requirements in the request. The skill explicitly gives user instructions priority.

Open the page using the supplied instructions and check three things:

1. Read through the content: Each section should help explain why someone would book. Check the service descriptions and FAQ against your material.
2. Follow the buttons: Open the hero and footer booking links. Both should reach your supplied URL. Move to the buttons with Tab and check that the focused element is easy to see.
3. Use a phone width: Check headline wrapping, photos, text and button sizes. Scroll through the page and check the tagline reveal and navigation.

When requesting a fix, name the location and the change you want. For example: “At phone width, the hero heading pushes the button off screen. Shorten the description and adjust the spacing. Keep the photo and overall layout.”

Adapt the copy and visual rules to your product

If the page feels too formal, make a focused change to the copy and accent color:

Keep the section order, photos and booking URL.
Change only the hero headline and description to sound warmer and emphasize guidance during the shoot.
Use my brand accent color: [color value].
Update buttons, links and selected states together. Keep the text easy to read.
Keep the current typography, spacing and motion. Show before and after screenshots.

For a software trial page, define the audience, benefits and main action again. Booking a session becomes starting a trial. Portfolio photos become product screenshots. The session process becomes onboarding steps. Rewrite around the new audience’s concerns while keeping the method: approve the plan, then build section by section.

Start your own project with this template:

Use landing-page-design to build a landing page for [product or service].
Audience and context: [who visits and where they come from].
Main problem: [one important problem].
Desired action: [book / try / download / sign up].
Available material: [product details, images, client feedback and destination links].
Brand requirements: [fonts, colors, voice and content to preserve].
Propose the content and layout first. After I approve, build section by section, starting with the hero.
Deliver: [a page in the current project / HTML files].