Skip to content
benchy.world

A launch page for what you make

Build a focused product page with a clear story and a responsive, editable layout.

Agent skillStarter workflow

Download SKILL.md

Readable and downloadable without an account.

Try in StudioMake it your own in Studio

Setup

Format
Agent skill
Agents
Claude Code, Codex
Tool
HTML & CSS

What you’ll need

  • Product brief and approved claims
  • Product images and brand assets
  • An existing project or output folder

The workflow

  1. Shape the story

    Connect the product, its benefit, and the next action.

  2. Build the page

    Use the existing stack and keep content straightforward to edit.

  3. Check the experience

    Review real browser layouts, controls, and missing-content states.

What you can work toward

  • Responsive page source
  • Desktop and mobile previews
  • A concise QA checklist

Instructions

Download

These instructions guide your agent. Tools, connections, and execution depend on your setup.

---
name: launch-page
description: "Build a focused product page with a clear story and a responsive, editable layout."
---

# A launch page for what you make

Use this workflow for a single product launch page or marketing page.

## Gather context
Read the existing project instructions and identify its framework, styles, and components. Collect the audience, product benefit, approved claims, primary call to action, license, assets, and content constraints.

## Build
1. Structure the page around the product, a concise value proposition, evidence supplied by the user, what is included, and a clear action.
2. Reuse the existing design system, dependencies, typography, and local asset conventions. Keep the page responsive and its content editable.
3. Use semantic HTML, accessible controls, visible keyboard focus, descriptive alternative text, and reduced-motion support. Avoid invented testimonials, counters, reviews, or certifications.
4. Implement only the requested interaction. If checkout or downloads are outside scope, make that boundary clear instead of implying a working transaction.
5. Run the project's relevant checks and review the page in a real browser at desktop and mobile widths. Check images, overflow, links, forms, and console errors.

## Deliver
Return the source and preview, summarize the checks, and name anything that remains a prototype. Do not deploy or publish without authorization.

## Example request

Build a launch page for a modular desk valet using these renders. Make the printable files the main action, explain what is included, and show a clear personal-use license. Use my existing web project.

How to use

  1. Copy or download the instructions.
  2. Save the download as SKILL.md inside a folder named after the skill, then add it through your agent’s supported skill setup.
  3. Confirm the tools and inputs are available, then review the result before publishing or printing.

Try this starting prompt

Build a launch page for a modular desk valet using these renders. Make the printable files the main action, explain what is included, and show a clear personal-use license. Use my existing web project.

The prompt opens as an editable draft. Attach the full instructions separately.