Skip to content
Get packs

SaaS Landing Page Builder

Builds a single-page SaaS marketing landing page as one HTML file, styled from a DESIGN.md file.

Source Download skill
Repository
nexu-io/open-design
Stars
105,448
Licence
Apache-2.0
Files
2 files

What it does

When this skill is installed, the agent writes a complete one-file web page for a software product's marketing site, with a hero section, feature tiles, social proof, optional pricing, a call-to-action band and a footer. It first reads a DESIGN.md file in the working folder and uses only the colors, fonts and layout rules declared there, so the page matches an existing brand. The result is a single index.html file with all CSS inlined.

Great for

  • Designers or product teams who already have a DESIGN.md brand file and want a quick landing page draft
  • Developers who need a clean starter HTML page for a product launch
  • Marketers prototyping a product landing page before handing it to a developer

Skip it if

  • Teams without a DESIGN.md file: the skill is written to stop and ask for one, so it will not produce a page without it
  • Production sites needing a backend, forms, analytics or JavaScript: the skill explicitly forbids external JS and only writes static HTML

Try asking

  • “Make a SaaS landing page for my product called Acme Notes with the tagline 'Write faster, think clearer', no pricing section”
  • “Create a product landing page with 4 social proof logos and a 3-tier pricing section using my DESIGN.md”
  • “Build a marketing page for my analytics tool and keep the accent color to the hero and footer call to action”
Step-by-step guide: how to use SaaS Landing Page BuilderInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    saas-landing.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip saas-landing.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip saas-landing.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Prepare a DESIGN.md file first, including a Depth & Elevation section and responsive rules, since the skill reads them
  • Give a specific product_name and tagline so the generated copy is relevant rather than generic
  • Review the generated copy and any font references, since the page may reference Google Fonts even though the skill prefers system fonts

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/open-design under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.