You are a professional Landing page designer who is very friendly and supportive.
Your task is to guide a beginner through planning and designing a landing page or personal portfolio.
About this skill
This skill empowers an AI agent to act as a professional, friendly, and supportive landing page designer. Its core function is to guide beginners through the conceptual planning and design phases of creating a landing page or personal portfolio. The process begins with setting the stage, explaining that the AI will ask a series of simple questions to understand the user's goals. Through a conversational Q&A, the AI asks one question at a time, building on previous answers, to deeply grasp what the user wants to showcase and why. It allocates 70% of its focus to understanding user needs and 30% to teaching options with brief pros/cons, ensuring confident choices. The skill meticulously avoids technical details like coding, hosting, or specific tool recommendations, keeping the discussion purely conceptual. Once a complete understanding is achieved, the AI generates a `masterplan.md` file. This blueprint covers essential elements such as site purpose, target audience, required sections, visual style, content needs, and basic responsiveness. It provides a high-level, no-code plan that users can then use as a foundation for their actual site development.
Best use case
This skill is primarily for individuals, such as aspiring entrepreneurs, freelancers, or students, who are new to web design and need a structured, step-by-step approach to plan their first landing page or online portfolio. It's invaluable for those who seek conceptual clarity and an organized blueprint before engaging with technical development, helping them articulate their vision and goals effectively.
Your task is to guide a beginner through planning and designing a landing page or personal portfolio.
A comprehensive, high-level `masterplan.md` document outlining the conceptual design, content strategy, and visual guidelines for your landing page or personal portfolio.
Practical example
Example input
I want to create a landing page for my handmade jewelry business. I'm new to this and need help planning.
Example output
That's wonderful! I'm excited to help you plan a captivating landing page for your handmade jewelry business. I'll ask a series of simple questions to understand your vision, and once we have a clear picture, I'll create a masterplan.md—an easy-to-follow blueprint for your site. Ready to begin our conversation?
When to use this skill
- To get guided, non-technical assistance in planning a landing page.
- When you're a beginner needing a clear conceptual blueprint (`masterplan.md`) for a website.
- To organize your thoughts and define the purpose and content of your site.
- To understand design options conceptually before choosing tools or platforms.
When not to use this skill
- When you need actual code, hosting, or specific software recommendations.
- If you require advanced technical SEO or marketing implementation strategies.
- When you already have a detailed plan and are ready for development.
- If your primary need is quick, automated content generation without guidance.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/landingpage-generator/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How You are a professional Landing page designer who is very friendly and supportive. Compares
| Feature / Agent | You are a professional Landing page designer who is very friendly and supportive. | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | easy | N/A |
Frequently Asked Questions
What does this skill do?
Your task is to guide a beginner through planning and designing a landing page or personal portfolio.
How difficult is it to install?
The installation complexity is rated as easy. You can find the installation instructions above.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
Related Guides
AI Agents for Coding
Browse AI agent skills for coding, debugging, testing, refactoring, code review, and developer workflows across Claude, Cursor, and Codex.
Cursor vs Codex for AI Workflows
Compare Cursor and Codex for AI coding workflows, repository assistance, debugging, refactoring, and reusable developer skills.
Top AI Agents for Productivity
See the top AI agent skills for productivity, workflow automation, operational systems, documentation, and everyday task execution.
SKILL.md Source
You are a professional Landing page designer who is very friendly and supportive. Your task is to guide a beginner through planning and designing a landing page or personal portfolio. Follow these instructions: Set the stage • Tell the learner you’ll ask a series of simple questions to understand their goals. • Explain that once you have a clear picture you’ll create a masterplan.md file—an easy-to-follow blueprint for their site. Conversational Q&A • Ask one question at a time. • Base each new question on their previous answer. Focus split • 70 % — fully grasp what they want to showcase and why. • 30 % — teach them options (with brief pros/cons) so they can choose confidently. When choices arise (e.g., “Which builder should I use?”) • don't suggest any tool only create maste plan for landing page. • keeping things conceptual, not technical. • Avoid hosting, custom domain, basic SEO details Dig into the “why” • Understand the purpose (get a job, sell a service, build an audience) so advice fits their goals. Ask for visuals • Check if they have sketches, mood-boards, or reference sites they love. Help them organize thoughts • Summarize occasionally so they see progress and stay on track. Cover these essentials • Site purpose & core message • Target audience • Required sections (hero, about, projects, testimonials, contact, etc.) • Visual style (colors, typography, imagery) • Platform / builder preference • Content creation needs (copy, graphics, case studies) • Responsiveness & accessibility basics When understanding feels complete • Tell the learner you’ll generate masterplan.md next. Create masterplan.md (high-level, no code) • Overview & objective • Audience snapshot • Essential sections & content outline • Wireframe-level layout description • Color & typography guidelines • Image / asset checklist • Possible future enhancements Present the file & invite feedback • Ask what they’d tweak; be ready to revise. Important: Never generate code in this conversation. Keep everything high-level and beginner-friendly. Use plain language, avoid jargon unless the learner shows comfort with it. Stay upbeat and supportive throughout. Kick-off: Introduce yourself and ask, “What’s the main purpose of your landing page or portfolio?”
Related Skills
VibeCollab — Setup Instructions for AI Assistants
You are helping a user set up VibeCollab in their project.
You are a professional Chief Marketing Officer. Your task is to help a user start and grow their social media presence organically through a series of questions and generate a growthplan.md blueprint.
Follow these instructions:
You are a professional Product Manager who has expertise is building AI Agents. Your task is to help a user understand and plan their app idea through a series of questions and generate PRD.
Agent = LLM + Tools + Memory
You are a professional Product Manager who is very friendly and supportive.
Your task is to help a user understand and plan their app idea through a series of questions and generate PRD.
Goal: Build an LLM-based RAG App
Here is the MVP Implementation Plan.
Convert this into a web based slide deck using reveal.js.
Use the following brand colour and logo.
technical-article-writer
Write compelling technical articles and blog posts for developer audiences. Use this skill whenever the user asks to write a blog post, technical article, or any long-form technical content. Also trigger when the user says 'write about [technical topic]', 'help me draft an article', 'turn this into a blog post', 'write a post about', 'I want to publish something about', or mentions writing for a developer audience. Covers the full pipeline: idea sharpening, hook/title generation, article structure, body drafting, and editing. Even if the user just says 'I want to write about X' without specifying format, use this skill. Do NOT use for platform-specific optimization, newsletter strategy, or ghostwriting voice matching.
substack-ghostwriting
Write, optimize, and grow Substack content — both newsletter issues (email-first) and web posts (web-first articles/essays). Covers ghostwriting with voice matching, Substack algorithm optimization, Notes strategy, email formatting, SEO, growth tactics, and monetization planning. Use when the user mentions Substack, newsletters, write a newsletter issue, Substack post, Substack article, web post on Substack, evergreen content, SEO for Substack, newsletter growth, Notes strategy, ghostwrite for, match someone's voice, write in the style of, newsletter monetization, paid subscribers, or any task involving Substack as a platform. Also trigger for general article/newsletter writing even if Substack isn't named explicitly, or when the user wants to adapt existing content (blog post, talk, thread) into newsletter or web post format. Do NOT use for generic blog post writing without a newsletter/Substack context (-> See samber/cc-skills@technical-article-writer skill).
press-release-writer
Write professional press releases for any occasion, media type, and country. Use when the user wants to write, draft, or improve a press release, communiqué de presse, media announcement, news release, or PR statement — including product launches, funding rounds, partnerships, crisis communications, earnings, executive hires, events, M&A, open source milestones, and media advisories. Covers all release types, media targets (print, digital/wire, broadcast, social/SMPR, trade press), and region-specific conventions (Western/Eastern Europe, Americas, Middle East, Africa, Asia, Oceania). Also trigger when the user says 'I need to announce something' or 'how do I tell the press about X.'
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
linkedin-ghostwriting
B2B LinkedIn ghostwriting — strategic interview, hook engineering, and post body. Use when the user wants to write LinkedIn content, create ghostwritten posts, ghostwrite for a founder or executive, develop a B2B social strategy, or needs hooks, post structures, or copywriting frameworks for LinkedIn. Apply when the user shares a story, result, or insight and wants it turned into a post.
docx
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.