Cursor skills for design work
Install PopNow skills in Cursor. Download a skill, unzip it into the skills folder, and call it by name in your next chat.
- Where skills go
For every project
~/.cursor/skillsFor this project only
.cursor/skills - How to call a skill
Mention the skill by name, or just describe the job and let Cursor pick it.
/popnow-<skill> - Connect PopNow
Skills are free. To generate images, video or sound, set your PopNow API key in POPNOW_API_KEY. Calls using this key draw from your separate API balance in USD. Each paid generation is quoted first and waits for your approval.
POPNOW_API_KEY
- 1Copy the install prompt
Paste it into Cursor. It downloads the skill with your API key and unzips it into the right folder.
- 2Ask for the result
Call the skill and say what you need in plain words: the topic, the audience, the length.
- 3Review and refine
Open the file it made, ask for changes in the chat, and ship when it looks right.
All skills
- SaaS Landing Page TemplateWeb
A calm, light marketing site for a software product with a working product console, pricing and sign-up.
- Landing Page from AI MockupsWeb
See three full-page designs first, pick one, and your agent builds it as clean, responsive code.
- Brand Kit & DESIGN.md GeneratorImage
A brand kit from a short brief: checked palette, open fonts, SVG logo, mockups and a DESIGN.md agents follow.
- Animated Hero SectionWeb
A landing-page hero with a gently rotating headline word, two buttons and a wide image frame.
- Cinematic Product Launch PageWeb
Film-lit near-black page: serif title card over drifting light, letterboxed night scene, reservation form.
- Design System ShowcaseWeb
Explore editable color tokens, measure contrast and export a consistent CSS and JSON token set.
Keep Cursor design work connected to the project
Start with the interface you are actually shipping
A useful Cursor skill assignment connects a design artifact to the files and content already under review. For a software marketing page, bring the product name, audience, approved capabilities and existing screenshots. SaaS Landing Page Template provides a light marketing-site workflow with an offline HTML deliverable and validation for links, forms and sample leftovers. Landing Page from Mockup is another catalog option when the visual starting point is an existing mockup. Choose the reference-led route when matching a supplied composition matters more than exploring a new direction.
Install instructions without losing their resources
Cursor's listed personal directory is ~/.cursor/skills and its project directory is .cursor/skills. Extract the whole popnow-prefixed package into the intended scope so that SKILL.md can refer to the files shipped with it. The invocation pattern is a slash followed by the skill name. For instance, /popnow-saas-landing-page should be followed by the product brief and the parts you want reviewed. Windsurf uses .windsurf/skills for its project location and a plain-name call pattern; copying a Cursor path into that setup would confuse two distinct installation instructions.
Check the handoff beyond the screenshot
For a Cursor landing-page pass, review content and behavior together: every button needs a destination, sample testimonials need replacement with authorized copy, and a sign-up mockup needs to be understood in the context of your real application. Brand Kit & DESIGN.md Generator can establish tokens and written guidance before a second page is built. Ask for a small first pass, compare it against the source brief, and only then expand the site. If the assistant produces generic advice, confirm which SKILL.md it read. If the page renders but looks incomplete, inspect missing assets and unresolved copy rather than treating installation as the likely cause.
Three ways to install
- Ask your agent
Copy a skill's install prompt into your agent. It reads the install guide, downloads the package with your key and unzips it into the right folder.
https://popnow.ai/api/skills/install.md - Use the CLI
popnow skills finds and installs skills from your terminal.
npm install -g @popnow/cli && popnow skills - Over MCP
With the developer MCP connected, ask for a style: find_skills suggests packages and install_skill hands over the playbook and the install commands.
find_skills → install_skill - Generation uses your API key
Skills are free. The images, video, music and voice they make through PopNow are charged in USD to the API balance behind POPNOW_API_KEY, after a quote you approve.
POPNOW_API_KEY
Install guides by agent
Same skills everywhere; only the folder changes.
Frequently asked questions
Which Cursor directory should I pick for a client website?
Use .cursor/skills when the workflow belongs to that website's repository. Choose ~/.cursor/skills when it is part of your personal toolkit. Whichever scope you select, retain the package folder and resources together so the assistant can follow the complete workflow.
How do I ask Cursor to use a landing-page skill?
Name the installed skill with the slash syntax shown here, then provide the product outcome and real content. Include reference screenshots when relevant and identify which claims are approved. A request tied to specific material gives the workflow something concrete to build and validate.
Should I select a mockup skill or the SaaS template?
Landing Page from Mockup is worth inspecting when you already have a visual reference to reproduce. SaaS Landing Page Template offers its own software-marketing structure. Review both examples and required inputs; select the one that minimizes unnecessary reinterpretation of your approved design.
Does a successful preview finish the website review?
A preview is only one checkpoint. Test destinations, forms, narrow layouts and leftover sample material, then compare the deliverable with your project's integration requirements. A generated HTML artifact should be reviewed before it becomes part of a deployed site or a customer-facing flow.
Start building in minutes
One key for every model, a USD balance you top up when you need to, and an exact price before every run.