Molten Glass Landing
1つのアクションを中心に据えた、上質でガラス質なランディングページ。
AIを溶けたガラスのビジュアルシステムで働くランディングページデザイナーに変えます。流れのある半透明のパネル、温かみのあるガラスのハイライト、画面ごとに明確なアクション1つで、製品ページが上質に感じられ、コンバージョンにつながります。
3ステップでインストール
登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。
ご自分で入れたい場合は、スキルを購入（$4.99）し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。
パックの内容
SKILL.md（手順書）1点とスターターテンプレート1点が入っています。プレビューはこちらです：
Molten Glass Landing
When to use
- You are launching a product and need a single page that explains it and gets sign-ups
- Your current landing page looks like a wall of text and visitors bounce before the first scroll
- You want a premium, glassy look — translucent panels, soft glows, liquid gradients — without hiring a designer
- You have one hero offer and need every section of the page to point at it
- You are A/B testing a new headline or offer and need a clean page variant fast
Workflow
- Pin down the one action (input: your offer → output: single conversion goal)
Before any design, name the one thing the page must get visitors to do: start a trial, book a demo, join a waitlist, buy. One page, one action. Write it as a verb + object: "Start a free trial." Everything that doesn't serve that action gets cut or demoted. If you have two actions, pick the primary and make the second a quiet text link. - Draft the message stack (input: conversion goal + product facts → output: headline, subhead, proof, offer)
Build the message in this order: headline (the outcome, not the feature), subhead (who it's for + how it works in one line), proof (one number, one quote, or one logo row), offer (what they get and what it costs). Keep the headline under 10 words and readable in 3 seconds. If the headline needs a paragraph to explain it, it's not a headline yet. - Lay out the glass sections (input: message stack → output: full page structure)
Structure: hero (headline + subhead + one CTA + one product visual), problem (3 pains, one line each), solution (3 features tied to outcomes), proof (testimonial or metric), offer/pricing, FAQ (the 4 objections that kill conversions), final CTA. Each section sits on a translucent molten-glass panel over a dark, flowing gradient — panels overlap slightly, highlights sit on the top-left edge, and the CTA button is the brightest element on the page. - Write the copy in place (input: page structure → output: finished copy)
Write every section to a strict budget: hero subhead ≤ 25 words, feature blocks ≤ 20 words each, FAQ answers ≤ 40 words each. Cut adjectives; keep verbs and numbers. Every button says what happens next ("Get the template", not "Submit"). Read the page aloud — if a sentence makes you pause, shorten it. - Check contrast, load, and the fold (input: finished page → output: launch-ready page)
Verify three things: the headline and CTA are visible without scrolling on a phone; body text passes contrast against the glass panels (if a panel is too transparent over a bright gradient, darken the panel, never shrink the text); and the page loads fast — compress the hero visual, keep the gradient in CSS, and don't stack five animation libraries for one glow effect.
テンプレートのプレビュー
Molten Glass Landing — Page Template
One page, one action. Fill in the message stack first, then lay out the glass.
Conversion goal
The one action: {verb + object, e.g. Start a free trial} Audience: {who this page is for} Offer: {what they get + what it costs}
Message stack
Headline (≤ 10 words): {the outcome, not the feature} Subhead (≤ 25 words): {who it's for + how it works} Proof: {one number / one quote / logo row} Offer line: {what they get + price}
Page sections
Hero
- Headline: {headline}
- Subhead: {subhead}
- CTA button: {what happens next, e.g. Get the template}
- Hero visual: {one product visual}
スキルパック本体（SKILL.md とテンプレート）は英語で書かれています。
