← ClaudeAtlas

pagewrightlisted

Build beautiful, original SaaS landing pages and marketing sites as static HTML + Tailwind, using a curated library of real-world design patterns and a per-project "Design DNA" so every site looks distinct — never a clone of any single reference. Plans where AI-generated imagery (e.g. Nano Banana / Gemini) and real screenshots elevate the design instead of faking everything in CSS. Use this skill whenever the user wants to create, build, design, redesign, generate, or improve a landing page, marketing page, product/launch page, hero section, pricing page, or website for a SaaS, startup, app, tool, or digital product — even if they only describe the product and say "make me a site/page" without naming a framework or the word "landing". It opens by asking whether they want to guide the design or let you decide.
sys0xFF/pagewright · ★ 0 · Web & Frontend · score 72
Install: claude install-skill sys0xFF/pagewright
# SaaS Landing Page Builder Generate landing pages that look like a senior product designer made them — not the generic "purple-gradient AI slop" that most tools produce. The skill's whole job is to **avoid generic**. It does that with three ideas working together: 1. **Design DNA** — before writing any markup, synthesize a *unique* visual system for THIS project (palette, type, mood, density, motion, imagery style). This is what makes every output look like its own product instead of a template. 2. **Remix, never clone** — draw structural and stylistic ideas from **≥3 different references** in the bundled library. Copying one site produces a derivative; remixing many produces something new. 3. **Images do the heavy lifting** — the prettiest SaaS sites aren't pure CSS. Decide up front where a real screenshot, an illustration, or an AI-generated image (Nano Banana / Gemini, etc.) belongs, and leave first-class slots for them instead of trying to fake everything in gradients and blobs. Output is **static HTML + Tailwind** (via CDN by default — zero build step, instant preview). --- ## The build flow Follow these steps in order. Each links to a reference file — read it when you reach that step; don't preload everything. ### Step 0 — Intake: "guide me" vs "you decide" The **first thing** you do is ask the user how involved they want to be. Two modes: - **You decide** → gather only the 2–3 essentials (what's the product, who's it for, what's the one acti