AI How-to Section Generator.

Describe the task and MeDo writes the teaching section — numbered steps with honest durations, a prerequisites card that disqualifies early, a result line per step, saved progress for checklists, and anchors so support can link to step three.

Every Step Is a Promise That the Next One Works

A how-to section succeeds or fails on a promise: if the reader does what step one says, step two will make sense. Most step lists break that promise in the same three ways — prerequisites surface only after step three fails, nothing says how long anything takes so readers cannot budget attention, and steps get numbered without ever showing what completion looks like, which is how people finish 'successfully' with a broken setup. Prerequisites, honest durations and a visible result per step are not decoration; they are the difference between an outline and a tutorial. The boundaries are just as concrete. A stepper is a widget that tracks a user's live progress through a flow they cannot leave, like checkout — a how-to section teaches a reader who arrived by search and can walk away at any line. A blog-section lists posts for discovery and contains no instructions at all. When the job is 'this reader completes this task,' neither substitute survives the swap.

4 modelos

Modelos de How-to Section que você pode gerar

Cada modelo é um prompt real, não uma captura de tela. Copie para qualquer editor de IA, ou rode no MeDo e receba código React + Tailwind.

PopularTutorial Landing

Five-Step Walkthrough With Result Callout

The teaching section that doubles as a landing page: duration proof up top, evidence per step, and a CTA that arrives after the reader believes the task is achievable.

Create a five-step how-to section for a tutorial landing page titled 'Ship your first integration'. Use a 672px column: 40px indigo numbered circles, 20px semibold titles, two-line bodies, right-aligned duration chips. Step one is a prerequisites card with two requirements and warning icons; steps three and five each carry a light code block followed by a green 'You should see:' result line. Number circles fill with a white check when the reader ticks the step's checkbox, and completed state persists in localStorage. End with a tinted results callout listing what now works, then an indigo call-to-action button labeled 'Start building'. Anchor each step with a slug id, scroll-margin-top 96px, so deep links clear the sticky header.

Teste no MeDo

InteractiveOnboarding Checklist

Checkable Steps With Saved Progress

Moves the format in-app: checkable rows, inline action buttons, a progress bar and persistence per workspace. This is where how-to becomes onboarding.

Create an onboarding checklist for inside a SaaS app, shown after sign-up. Render a card with a 'Getting started' header, a '2 of 5 complete' counter, and a thin indigo progress bar filling as steps are checked. The five steps are single rows: 20px checkbox, 15px medium label, one-line zinc-500 hint; action steps embed an inline button — 'Connect domain', 'Invite teammate' — marking done on success. Persist state per workspace id in localStorage, fade each completed row toward zinc-400 over 150ms, and keep completed rows visible, not removed. When all five are done, swap the body for a quiet success panel — no confetti — with a 'You're all set' message and the next action.

Teste no MeDo

DeveloperSetup and Verify

Install Steps With a Terminal Check

Docs-grade setup: prerequisites, copyable commands, and a verification block whose expected output is printed — so the reader learns about failure at the step where it happened.

Create a developer setup section for installing a CLI tool, styled for a docs page. Start with a prerequisites card: Node 20 or higher, a terminal, and an API key, linked to where to find one. Render four steps, each a 32px numbered outline circle, 16px semibold title, one context sentence, and a dark 13px mono code block with a copy button. Finally, add a verification block: a one-line command, its expected output in green, and a red 'If you see an error' note pointing at a troubleshooting anchor. Give every code block an aria-label describing the command, keep it horizontally scrollable rather than wrapping, and slug-anchor each step so issues can cite 'step 2' unambiguously.

Teste no MeDo

CompactRecipe Card

Two-Column Recipe With Chips

The densest honest variant: metadata chips, checkboxable ingredients, and single-sentence actions that are the instruction — built to survive being cooked from.

Create a compact recipe-style how-to section for a lifestyle site, rendered as a two-column card. The left column holds metadata chips — '20 minutes', 'Serves 4', 'Beginner' — above an ingredients list with custom checkboxes and portion labels. The right column holds six numbered steps as tight rows: 24px circle number, 15px medium action of at most two lines, no body copy — the action is the instruction. Highlight the followed step with a light indigo row background advancing on click, and a one-line result note under the final step. Keep the whole card under 480px tall, stack the columns below 640px, and mark the structure with ordered-list semantics so screen readers announce 'step 3 of 6'.

Teste no MeDo

Como personalizar seu How-to Section

Write the prerequisites that disqualify

'You'll need an account' is decoration; 'without a verified domain, stop after step 3' saves a reader twenty minutes of doomed effort. Name the accounts, versions and access levels per step, and mark which prerequisites have a link that resolves them on the spot.

Give every step a visible done signal

A step without evidence of completion is a coin flip the reader keeps taking. End each step with what success looks like — 'the table shows three rows', a green terminal checkmark — so a reader who missed a sub-step discovers it now, not five steps later.

Budget time the way readers actually spend it

Durations earn trust when they are honest, including the unflattering parts: '2 min, plus up to an hour for DNS propagation' beats a chip that quietly lies. Show total time near the title so readers can decide to start at all — that decision is what durations are for.

Anchor every step for support and sharing

Give each step a slug id and a scroll-margin-top that clears your header, so 'see step 3' in a support ticket or comment is a link, not a scavenger hunt. Anchors also let a reader resume a long setup tomorrow from the exact step where they stopped.

Quem usa o componente How-to Section

Tutorial landing page

A five-step walkthrough with a total-time chip, a prerequisites card and a results callout feeding a start-free CTA — the section is the page's proof that the product is learnable in an afternoon.

In-app onboarding checklist

A 2-of-5-complete card on the dashboard with checkable rows, inline action buttons per step, and progress persisted per workspace, so setup survives refreshes and teammates.

Recipe and lifestyle content

A two-column recipe card — ingredients with checkboxes on the left, six tight numbered actions on the right, time and servings as chips — that stays scannable while someone cooks with wet hands.

Developer setup documentation

An install section with prerequisites, terminal blocks with copy buttons, and a verification step whose expected output is printed in green, so failure is diagnosable at the step where it happened.

Padrões de How-to Section para diferentes sites

O mesmo componente how-to section, ajustado ao tipo de site em que ele entra.

01 / 04

Course and Tutorial Landing Pages

The section doubles as a sales argument: outcome preview first, then steps short enough to feel finishable, then a CTA that lands after belief instead of before it. Steps here teach and persuade, which is why result lines matter more than screenshots.

Estilos e variações de How-to Section

Escolha a variação que combina com o resto da página e gere-a.

01 / 04

Numbered Rail

Circles connected by a thin vertical line, the canonical tutorial silhouette. The connector does real work: it says the steps are ordered and the path is continuous, which is why it is wrong for independent reference lists that happen to be numbered.

How-to Section em React, Next.js, Vue e Svelte

React, Next.js, Vue 3, SvelteKit, Astro ou HTML puro — o mesmo how-to section, seis formas de integrar.

01 / 03

React How-to Section

Completed steps as an array of indexes in localStorage, seeded lazily on first render and written back on every change. Key storage by the guide's slug so two guides on one site never share a progress state.

src/components/HowToSteps.tsx

const [done, setDone] = useState<number[]>(() =>
  JSON.parse(localStorage.getItem('webhook-setup') ?? '[]'))

useEffect(() => {
  localStorage.setItem('webhook-setup', JSON.stringify(done))
}, [done])

{steps.map((step, i) => (
  <label key={step.slug} id={step.slug} className="flex items-start gap-4">
    <input type="checkbox" checked={done.includes(i)}
      onChange={() => setDone((d) =>
        d.includes(i) ? d.filter((x) => x !== i) : [...d, i])} />
    <span className="font-semibold">{step.title}</span>
  </label>
))}

Como adicionar o seu How-to Section a um projeto

Quatro passos, de escolher um modelo de how-to section até subir para produção.

01~2min

Write Each Step's Done Signal First

For every step, finish the sentence 'the reader should now see…'. If you cannot, the step is two steps or zero. Those result lines are the first thing to paste into the prompt, before any styling language.

02~1min

Pick the Variant That Matches the Reader's Position

A landing-page tutorial teaches before sign-up, an onboarding checklist acts inside the product, and a docs setup block verifies with a command. Pick one; mixing all three in one section is how step lists bloat.

03~2min

Paste Steps, Durations and Prerequisites

Give MeDo the real steps with honest durations, the prerequisites that disqualify, and any code or screenshots per step. Say where checkbox progress should persist if you chose the interactive variant.

04~4min

Walk It Cold, Then Anchor It

Run the generated section as a first-time reader: does each step produce its promised result? Then confirm every step's slug anchor jumps to the right place beneath your sticky header before shipping.

Perguntas comuns sobre How-to Section

Isn't a how-to section just a stepper with different content?

They answer different questions, and it shows in the markup. A stepper is a form widget: it tracks one user's enforced progress through a flow they cannot leave — checkout, account creation — where steps gate each other and the component owns the state. A how-to section is content: it teaches a reader who arrived by search, can leave at any line, and may do steps out of order or partially. That is why the section needs prerequisites, durations and per-step results while the stepper needs gating and validation. Swap one for the other and you either trap a reader or lose a checkout.

How many steps can a how-to section hold?

Somewhere around seven the section stops being a section. Past that point steps start branching — if step 4 differs for macOS and Windows, or step 3 can fail three ways, the reader needs a dedicated page with its own structure, not an ever-growing list. The honest signals it is time to split: you are writing conditional steps, a single step needs more than three sentences, or total duration passed half an hour. A section that admits its own limits reads as more trustworthy, not less complete.

Should steps be collapsible to keep the section short?

Rarely. A reader deciding whether to attempt the task reads steps to judge effort, and a collapsed step communicates neither its content nor its cost. Collapse only genuinely heavy payloads — a 40-line code block, a full screenshot — while titles, durations and result lines stay visible. If the section feels long because the copy is padded, collapsing hides the symptom and keeps the cause; tighten the steps instead. Completed onboarding checklist rows are the one case where collapsing genuinely reduces noise.

Will a how-to section get HowTo rich results in Google?

No — Google retired HowTo rich results in 2023, so any generator still promising them is selling 2022. The structure is still worth generating: real ordered lists and per-step headings help AI answer engines quote the exact step, they keep the content extractable for featured snippets, and they force the copy into honest instructional shape. Ask for the semantic structure and skip any JSON-LD pitch built around the deprecated result type.

How do I save a reader's progress through the steps?

Key a checkbox array in localStorage under an id specific to the guide — its slug plus a version — so a revised edition does not inherit stale checkmarks from the old one. Restore on mount and tolerate absence: private browsing, cleared storage and cross-device readers all start unchecked, which is why the section must read correctly with zero progress. Persist per-reader state only for interactive checklists inside your app; on a public tutorial page, progress is a courtesy, not a feature.

Gere seu how-to section agora.

Teste qualquer prompt — grátis, sem cadastro necessário.

Comece a construir grátis Ver preços

Stepper

Because four small commitments beat one large one. Describe your flow and MeDo generates a checkout-style stepper — numbered navigable stages, answers preserved when people go back, forward-only gating where it matters, and progress that survives a refresh. This is the flow stepper: it moves a person through a task, not a number up and down like the numeric stepper on iOS.

Componentes relacionados

Seção de Blog

Descreva o layout de blog que você quer — estilo de card, número de posts, artigo em destaque, filtros de categoria — e MeDo gera o componente completo. Entregue uma seção de blog polida sem tocar em uma única propriedade CSS grid.

Componentes relacionados

FAQ Section

Describe your product and your customers’ doubts and MeDo generates a FAQ section — questions sequenced by buying objection, a presentation you choose (accordion, two-column, or fully open), and FAQPage JSON-LD rendered from the same array so the markup and the structured data can never disagree.

Componentes relacionados