Landing Page
ファイル1つで製品サイトが完成——スマホでも美しく表示されます
単一ファイルのHTMLマーケティングランディングページです。ヒーロー、課題、解決策、機能、料金、お客様の声、FAQ、CTAを備え、依存関係ゼロでオフラインでも動作します。

3ステップでインストール
登録不要。CLIツールも不要です。お使いのAIを選んで、1行コピーして貼るだけです。
ご自分で入れたい場合は、スキルを購入($4.99)し、購入完了画面からZIPをダウンロードして、上のディレクトリに展開し、AIのセッションを再起動してください。結果は同じです。すでに購入済みの場合は、AIアシスタントにダウンロードしてもらうこともできます。
実際の活用事例
実際のユーザーがAIエージェントで、まさにこの仕事をやり遂げた事例です。
Run web research jobs and capture screenshots into a doc
事例を読む →活用事例Edit keynote videos with motion graphics using a video agent
事例を読む →活用事例Let an AI CEO run a small security scanner business
事例を読む →パックの内容
SKILL.md(手順書)1点とスターターテンプレート1点が入っています。プレビューはこちらです:
Landing Page
When to use
- A new product/service is launching and you need a shareable link that looks great on phones
- You're running an event, course, or signup and need a single page that explains the offer and collects leads
- A small business (B&B, café, studio) needs a more polished front door than a social feed
- Before sending a proposal, send a link so the other party understands who you are in 3 minutes
- No full website, no frameworks — just one file that opens with a double-click
Workflow
- Distill the pitch (input: product description → output: selling-point list)
Ask 4 things: ① what the product is in one sentence ② who the target user is ③ how it beats competitors (max 3 points) ④ what you want visitors to do after reading (message us / fill in a form / place an order / call). Selling points must be concrete — no unverifiable fluff like "premium quality" or "the ultimate experience". - Lock the structure (input: selling-point list → output: 8-section outline)
Lay out per the 8-section output spec: for each section write its goal (one sentence), what content goes in, and what image/button it pairs with. The CTA must appear at least 3 times on the page (hero, mid-page, closing), with copy tweaked slightly to fit each context. - Write the copy (input: outline → output: section-by-section copy)
Plain-language standard: headlines ≤15 chars, readable aloud in one breath; open the pain-point section with "Sound familiar?…" and 3 concrete scenarios; in the features section each item = "feature name + one-line benefit"; write 5 FAQ questions users would actually ask (price, support, how to get started…) — no softball questions that only exist to brag. - Generate the page (input: copy → output: single HTML file)
Build on the template.html skeleton: swap in the copy, adjust the palette (warm paper is the default, or match the brand color), fill in real contact details. All styles inline, zero external dependencies — one file, double-click to open. - Mobile self-check (input: HTML → output: checklist)
Verify each item: ① the headline + CTA are visible on a phone without scrolling ② buttons are easy to tap with a finger (height ≥44px) ③ images have alt text ④ no horizontal scrollbar ⑤ zero external requests (opens offline). - Honesty check (input: HTML → output: revision notes)
Check: does the price say "starting at / what's included"; do testimonials have real sources (never invent reviews); do outcome promises leave room ("helps" not "guarantees"). Fix copy directly when something's off — no settling.
Output spec
テンプレートのプレビュー
Your Product Name — One-Line Pitch /* ===== Colors (warm paper look): to rebrand, just edit these 4 variables ===== */ :root{ --paper:#faf6ef; /* paper background */ --ink:#3a2e24; /* dark-brown body text */ --accent:#c2703d; /* ochre accent: buttons, prices, keywords */ --card:#fffdf8; /* card background */ --line:#e8dcc8; /* divider lines */ } *{margin:0;padding:0;box-sizing:border-box} body{ background:var(--paper); color:var(--ink); /* System font stack: zero external dependencies, works offline */ font-family:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; line-height:1.7; } .wrap{max-width:720px;margin:0 auto;padding:0 20px}
スキルパック本体(SKILL.md とテンプレート)は英語で書かれています。


