What problem does it solve?
SaaS and AI product landing pages often rely on vague claims, fake dashboards, and decorative AI visuals instead of showing how the product actually works. This Skill guides the design of landing pages where a real, deterministic, or clearly labeled workflow demo is the central evidence, keeping marketing copy honest and state-driven.
Core Features & Use Cases
- Product-as-proof page structure: Hero with a working product stage, friction proof, feature modules, audience tabs, pricing comparison, and deep-linked FAQ.
- Explicit state modeling: Input, processing, draft, edit, approval, and publish states with loading, quota, moderation, network, and error handling, plus deterministic replay and transcripts.
- Honest visual system: White-to-pale-blue surfaces, near-black text, one signal color, 12-column grids, and restrained motion with reduced-motion fallbacks.
- Use Case: A designer needs a landing page for an AI writing tool. The Skill produces a page where the hero shows an editable prompt, a labeled sample output, version history, and an approval step, followed by an honest pricing table whose ambiguous terms deep-link into the FAQ.
Quick Start
Use $product-proof-saas to design an original SaaS landing page where a clearly labeled deterministic workflow demo is the central proof, with explicit states, honest pricing, and reduced-motion support.
