mubasildesign/saas-landing-page-forge

SaaS Landing Page Forge

Create a polished, responsive SaaS landing page inside the user's Figma file. Treat the user's content, product evidence, brand system, and existing Figma system as the source of truth. Generic design guidance never outranks them.

Start with intake

Read references/intake-and-planning.md. Ask for the inputs in one compact checklist, acknowledge what is already present, and separate missing essentials from optional inputs.

Do not block on recoverable gaps. Continue with labeled assumptions and placeholders when the user agrees or has already asked you to proceed. Never invent product capabilities, pricing, proof, customer logos, testimonials, metrics, compliance claims, or brand rules.

A valid Figma target and a connected MCP with suitable write tools are required to edit the file. If either is missing, provide the design brief and asset plan, then state the exact step needed to unblock Figma production.

Work in this order

1. Preflight: Inspect the available Figma MCP tools, open the supplied target, determine edit scope, and inventory the existing styles, variables, components, grids, and nearby frames. Follow references/figma-mcp-workflow.md.
2. Brief: Summarize the audience, offer, primary conversion, message, proof, assets, constraints, missing inputs, and assumptions. Get confirmation only for choices that materially change the result.
3. Content architecture: Preserve approved copy and organize it into a clear conversion path. Use references/conversion-and-content.md. Offer copy changes separately; never silently rewrite approved content.
4. Creative direction: Derive one coherent visual idea from the brand and product. Use references/visual-direction.md. When direction is genuinely open, present up to three distinct options and recommend one before building.
5. Figma foundations: Reuse the file's system when suitable. Otherwise create a small local system of variables/styles, grids, type hierarchy, spacing, radii, and reusable components.
6. Build: Compose the desktop landing page with real content and product screens. Create responsive tablet/mobile variants or explicit breakpoint behavior as requested. Use references/responsive-and-motion.md.
7. Review and repair: Run references/design-qa.md, correct material issues in the file, then re-inspect the affected frames.
8. Handoff: Report exact page/frame names, reusable components and styles, responsive variants, motion annotations, assumptions/placeholders, unresolved inputs, and remaining risks.

Figma operating rules

• Use only tools that the connected Figma MCP actually exposes. Never claim an edit, render, or inspection succeeded without tool evidence.
• Inspect before writing. After a write, inspect the resulting nodes or render before continuing.
• Do not overwrite or delete unrelated work. If the target is ambiguous, ask where to work or request approval to create a clearly named working page/frame.
• Prefer native editable layers, auto layout, components, variants, variables, text styles, and effects over flattened images.
• Keep product screenshots faithful: preserve aspect ratio, crop intentionally, and never redraw them in a way that implies nonexistent functionality.
• Use stable, descriptive naming. Avoid Frame 123, Group 5, or decorative grouping without layout purpose.
• Do not change sharing, permissions, publishing state, ownership, or libraries.
• On a failed write, inspect the file before retrying so a partial success does not create duplicates.

Quality bar

The page must communicate what the product does, who it is for, why it is credible, and what action to take within the first viewport. Use one dominant CTA, a coherent hierarchy, disciplined typography and spacing, accessible contrast, real proof only, and a visual idea connected to the product rather than generic SaaS decoration.

Motion is optional and purposeful. Specify it only when it improves attention, comprehension, feedback, continuity, or brand expression. Always include reduced-motion behavior.

Scope boundary

This skill produces a Figma landing-page design and implementation-aware handoff. It may annotate behavior, assets, and responsive rules, but it does not generate production frontend code unless the user separately requests that deliverable.

For provenance and the capability audit behind this combined skill, see references/source-coverage.md.