>_Building AppsWithout Code
Content & sections / DETAILED TASK GUIDE

Rewrite the hero headline

A hero headline should explain the page quickly. Give the assistant the audience, the thing you offer, and the benefit you can actually demonstrate. Review the words before making them live.

BY BUILDING APPS WITHOUT CODEUPDATED OCT 14, 2026DIRECT TOOL + AI PROMPT

Before you start

  • An accurate description of the product or page.
  • The existing headline text.
  • For direct mode: a unique text node in static HTML.

How to do it

  1. Describe who the page is for and what they can do there.
  2. Draft one short headline that makes a specific, supportable promise.
  3. Use direct mode to replace a unique phrase, or AI mode if the headline is in a component.
  4. Check line wrapping at phone, tablet, and desktop widths.

Before & after

ILLUSTRATIVE EXAMPLE
<h1>Build your first app, one clear step at a time.</h1>

Visitors can understand the page without reading the entire introduction, and the heading still fits the layout.

MAKE IT YOURS

Use with an AI coding tool

1 Describe your change

Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.

We remember this choice on this device. Choosing a tool does not connect it to this website.

2 Copy your prompt

Read the complete prompt below, then copy it.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

Check line breaks, responsive text fit, and heading hierarchy.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

If the result is not what you expected

The headline has become a paragraph

Keep supporting details in the description rather than shrinking the heading until it fits.

The new text includes an unsupported claim

Replace it with a result the page actually delivers.

Undo the change

Restore the previous text only. Keep the original heading level and any unrelated layout improvements.

References & testing

The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. The direct tool uses our shared local-edit engine; native Windows execution remains unverified.

MDN: heading elements ↗ · Our review approach