Everything below is free. Bookmark this page and come back whenever you need inspiration or a new component to play with.
These are the two prompts from my Framer Skills video. Replace the bracketed placeholders with your own project details.
Type /skill inside your Framer project, then paste this prompt:
Create a reusable Skill called “[PROJECT NAME] Design System.”
Use the existing pages in this project as the main source of truth. Whenever I ask you to create a new page or section, first study how the project uses components, typography, colours, spacing, grids, widths, buttons, corner radius, section layouts, and motion.
Reuse existing components and styles wherever possible instead of creating everything from scratch. Any new elements should feel like a natural extension of the existing website.
Keep every layout clean, responsive, and consistent across desktop, tablet, and mobile. Use motion subtly and only when it improves the experience.
Do not introduce new fonts, colours, components, or visual patterns unless I specifically ask for them. Do not fall back to a generic landing-page design.
The final result should feel like it was designed as part of [PROJECT NAME] from the beginning, while remaining fully editable on the Framer canvas.
Once the Skill is ready, run this prompt:
Using my [PROJECT NAME] Design System Skill, create a new responsive page for [PAGE OR FEATURE] within [PROJECT NAME].
Include [REQUIRED SECTIONS OR CONTENT] and finish with [PRIMARY CALL TO ACTION].
Keep the copy concise and build the complete page directly on the canvas.
Use this prompt in Framer Agents to build a responsive physics-based sticker wall where your images fall, collide, stack, and can be grabbed and thrown.
Build a full-frame interactive physics sticker wall component in Framer.
The component should accept up to 10 custom images through property controls. Display every image exactly as uploaded and preserve its original aspect ratio and transparency. Do not add any background, frame, border, shadow, crop, mask, or container around the images. Keep every image upright with rotation locked to 0° at all times.
When the component loads, the images should fall naturally under gravity, collide with one another, and stack at the bottom of the frame. Users should be able to grab, drag, and throw any image with natural momentum. Use real 2D physics and contain everything inside the component with invisible floor and side walls so no image can escape.
Add property controls for the image uploads, image size, gravity, bounciness, friction, drag weight, throw power, and wall padding. The default motion should feel tactile and slightly heavy, with controlled bounce rather than floaty movement.
Make the component responsive to its frame size across desktop, tablet, and mobile, and keep it performance-friendly. Create only the component. Do not add a page background, decorative UI, extra text, or additional sections.
Ready-to-use interactive components you can drop straight into your Framer projects.
Web Preloader — Add a smooth preloader to your site before it fully loads.
Eyes Follow Cursor — Playful eyes that track the user's cursor movement.
Dock — macOS-style dock component for your Framer builds.