A web-design skill for your AI tool. Tell it what the product does and what the primary CTA is; it ships a 6-page SaaS landing by locked layout rules — Next.js + Tailwind, ready to deploy after install.
★★★★★4.9 · 217 reviews1,203 downloadsv2.3 released 2026-09-18
Sample output · CenteredPreview
Pages6Layout variants3StackNext.js + TailwindContrastAll AA
Details
Ask AI to “make a landing page” and every result looks different: ad-hoc type sizes, uneven spacing, primary button buried on screen three. The model isn’t the problem — nobody told it how this page type should look.
This skill encodes a refined SaaS landing as rules: information order (hero first, then what conversion goals require), type scale and spacing (8 steps, 8-point grid, locked), contrast (preflight check — fail AA and the palette is replaced). You describe the product; it won’t ask layout questions again.
What you can do
One brief → 6-page landing, desktop and mobile already laid out
Change one variant param to restyle the whole site — no regenerate
Consistent output when you build the same kind of site for many clients
Who it’s for
Designers and front-enders shipping marketing sites who need fast first drafts
Builders without a design resource who still want pages that look intentional
Locked palette & tokens
Ink / #1F1A3D
Ink 70 / #59547A
Cobalt / #6C4CFF
Coral / #FF7A45
Wash / #F4F0FF
How to use it
Prerequisites: Any of Claude, Cursor, Codex, Windsurf (Agent Skills folder support) · Node 18+ to run the generated project
Install saas-landing with npx skillux add saas-landing, or unzip into your tool’s skills folder (Install tab).
Start a new agent session so the pack is discovered.
Describe the product and primary CTA in one sentence — e.g. “Landing / marketing for a budgeting app; primary action is Start free.”
Review the draft, tweak copy or variant params if needed, then deploy the generated project.
Install saas-landing (saas-landing) with the CLI, or download the zip and place it by hand.
Recommended. Authorizes this machine, then writes saas-landing into your agent skills folders.
1 · Login
npx skillux login
Opens the browser to authorize this machine.
2 · Install
npx skillux add saas-landing
Writes the pack into your agent skills folders.
3 · Update
npx skillux update
Pulls newer versions for packs you already installed.
