MotionSites Prompt Capture
Goal
When a user requests a website/UI design, go to motionsites.ai to find matching prompt templates and provide an optimization plan tailored to the user's project. The output of this skill is "recommended prompt + optimization plan," not direct code.
Workflow
1. Refine Requirements
First confirm key information; if missing, proceed with reasonable defaults—do not keep asking:
- Website type: Landing page / SaaS site / Portfolio / Agency site / Hero section / E-commerce page, etc.
- Visual style: Dark, glassmorphism, gradients, minimal, 3D, particle backgrounds, etc.
- Animation needs: Scroll animations, parallax, smooth scrolling, 3D interactions, etc.
- Content structure: Which sections are needed (navigation, hero, features, pricing, footer, etc.)
- Tech stack: Default React/Next.js + Tailwind + shadcn/ui (Build Web Apps plugin environment); if the user specifies another stack, use theirs.
2. Visit motionsites.ai
- Prioritize using an in-app browser (if the user already has it open or it's available) to open https://motionsites.ai/ and browse categories (SaaS, Agency, Portfolio, Landing pages, Hero sections, etc.).
- When the browser is unavailable, use open_page or web search to retrieve page information. Note that this site is a JS-rendered SPA; static scraping may not capture category content—in that case, explain that using a browser would be more accurate.
- Filter by three dimensions: "type + style + animation" to find 1-3 best-matching prompts.
3. Output Recommended Prompt
- Display the full original text of the selected prompt(s)—do not rewrite or translate them.
- Explain the match reason for each prompt (why it suits the user's needs).
- If no exact match is found, choose the closest one and clearly point out the differences; never fabricate a non-existent prompt.
4. Provide Optimization Plan
List optimization points tailored to the user's real project, point by point:
- Tech Stack Adaptation: The prompts are natively aimed at Lovable/Bolt/Cursor/Claude; explain how to migrate to the user's stack (default React + Tailwind + shadcn/ui; component splitting, design token reuse).
- Animation Implementation: motionsites commonly uses GSAP ScrollTrigger + Lenis smooth scrolling; give key trade-offs for implementation (performance, fallbacks, accessibility, prefers-reduced-motion).
- Visual Assets: When hero images, textures, or icons are needed, explain that they can be generated via imagegen or sourced from resources required by the prompt.
- Verification Method: After implementation, use Playwright / frontend-testing-debugging for browser validation (responsiveness, animations, console errors).
- Risk Warnings: Point out parts of the prompt that may not apply to the current project (dependencies, performance overhead, placeholder content).
5. Wrap Up
Finally, ask the user if they want to start implementation according to the optimization plan; do not write any code before the user confirms.
Trigger Examples
- "I need you to create a website that uses UI design."
- "I want to build a SaaS landing page, help me find prompts from MotionSites."
- "Help me create a portfolio website with hero animations; give me the plan first."
Notes
- Do not skip the "find prompt" step and go straight to writing code.
- Keep the prompt text as-is; the optimization plan targets the user's project—by default, do not rewrite the prompt itself unless the user asks.
- Always browse motionsites.ai in a real browser to pick prompts, avoiding guesswork from memory about the site's content.