What’s inside

One SKILL.md (the playbook) + one starter template. A preview:

Quartz SaaS Landing

When to use

• You're launching a SaaS product and the homepage needs to look distinct from every gradient-and-blob template
• Your product is about clarity, precision, or structure — analytics, developer tools, finance, operations — and the design should say so
• You have a one-sentence value proposition and need a full page built around it, not a page that buries it
• Your current landing page is a wall of features with no hierarchy and visitors bounce before they find the point
• You need a page that works equally well for a cold visitor from search and a warm referral who already half-believes

Workflow

1. Define the one promise (input: product facts → output: hero statement)
   Before any layout, pin down the single thing the page must make a stranger believe in five seconds: who it's for, what it does, and why it's better than the status quo. Write it as one sentence of under 20 words, then a supporting line of under 12. Everything below the hero exists to prove that sentence — if a section doesn't, it gets cut. A page with one promise converts; a page with five promises confuses.
2. Set the quartz visual language (input: hero statement → output: style rules)
   Quartz means facets, not glitter: flat polygonal shards, thin clean edges, subtle light refraction along facet seams, and a restrained palette — near-white or deep charcoal ground, one cool accent (a pale cyan or icy violet), and crisp dark text. Pick three facet shapes and reuse them: a large hero shard, a small divider shard, and a card-corner facet. No drop shadows, no gradients that smear, no stock-photo crystals. The page should feel cut from glass, not decorated with it.
3. Lay out the page top to bottom (input: style rules → output: full page structure)
   Order: navigation (logo, two links, one call-to-action button) → hero (promise, supporting line, two buttons, one product screenshot framed inside a large facet) → trust strip (customer names or integration logos, in plain text or simple marks) → feature grid (four to six features, each with a facet icon, a three-word title, and two lines) → one deep-dive section (a second screenshot plus three proof points) → pricing teaser (three tiers, middle one highlighted, prices or "starting at") → FAQ (four to six real questions) → final call-to-action → footer. One action per screen; the primary button always says the same thing.

Template preview

Quartz SaaS Landing — Page Template

One promise, one page. Fill this in before building any section.

The one promise

Hero statement (≤20 words): {who it's for + what it does + why it's better}

Supporting line (≤12 words): {the payoff in one breath}

Primary call-to-action (one wording, used everywhere): {e.g. Start free}

Secondary call-to-action: {e.g. See how it works}

Quartz style rules

• Ground: {near-white #___ / deep charcoal #___}
• Accent: {one cool accent — pale cyan / icy violet — #___}
• Facet shapes (3, reused): ① large hero shard ② small divider shard ③ card-corner facet
• Type: {display face} for headlines / {body face} for text

Buy the full skill pack — $4.99 Pro — all 471 skills