skills.rest
melonamin
melonaminCOMMUNITY
Explore all skills by this author →
𝕏@melonaminGitHub

landing-page

Build B2B SaaS landing pages through a four-phase planning, design, refinement, and polish workflow.

2|Updated Sep 3, 2022
Search Tags:#SaaS#landing page#UI/UX#web design#design workflow#frontend development
One-click install
npx skills add https://github.com/melonamin/dotfiles --skill landing-page-melonamin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: landing-page
Source: https://github.com/melonamin/dotfiles/tree/main/.claude/skills/landing-page
Command: npx skills add https://github.com/melonamin/dotfiles --skill landing-page-melonamin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill streamlines the creation of professional B2B SaaS landing pages, addressing the common challenges of design consistency, iterative feedback, and technical setup.

Core Features & Use Cases

  • Structured Workflow: Guides users through a four-phase process: Foundation, Design Variants, Iteration, and Polish.
  • Parallel Design: Generates multiple distinct design options simultaneously for user selection.
  • Iterative Refinement: Facilitates a rapid screenshot-feedback loop for design convergence.
  • Use Case: A startup needs to launch a new SaaS product and requires a high-converting landing page. This Skill will help them define requirements, explore visual styles, refine the design based on feedback, and ensure technical readiness.

Quick Start

Use the landing-page skill to build a new landing page for a B2B SaaS product.

Frequently Asked Questions about landing-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a high-converting B2B SaaS landing page?▼

Build a B2B SaaS landing page using a structured four-phase workflow encompassing planning, parallel design variants, iterative refinement, and final polishing. It applies constraint-first design principles to ensure professional visual consistency and technical readiness.

How does the iterative design workflow work for frontend web design?▼

The iterative design workflow uses a rapid screenshot-feedback loop for design convergence. It generates multiple distinct parallel design options simultaneously, allowing you to select and refine visual styles based on feedback before final polishing.

Do I need frontend-design and agent-browser skills to create a SaaS landing page?▼

Yes, creating a SaaS landing page requires frontend-design and agent-browser skills. These dependencies handle visual implementation generation and browser-based testing to validate the design during the refinement phases.

What is the best way to explore visual styles for a SaaS product launch?▼

The best way to explore visual styles is through parallel design generation. The workflow produces multiple distinct design options simultaneously during the Design Variants phase, enabling rapid comparison before committing to iterative refinement.

Can I use this structured design workflow for non-SaaS web design projects?▼

This workflow is specifically optimized for B2B SaaS landing pages, emphasizing constraint-first design principles. While the structured four-phase process applies to general web design, its use cases target SaaS product launches and high-conversion page requirements.

Related Skills

Explore More Design & Creative Skills→
pingmepipingmepi

pm-stage-01-brief

Generate a structured 7-section product brief from a business statement.

Community
Advanced
aaron-he-zhuaaron-he-zhu
142

on-page-seo-auditor

Audit on-page SEO elements and identify optimization opportunities on webpages.

Community
Intermediate
heysuhasheysuhas
2

sketch

Generate interactive HTML design variants for UI/UX exploration.

Community
Intermediate
joshua3403joshua3403

phase-3-mockup

Generate structured HTML/CSS/JS prototypes from user prompts.

Community
Basic