From source files to your own landing page
- Inspect the whole preview. Check the page structure and mobile layout. Pick a design that suits your content, not just a hero you like.
- Read the Source tab. Confirm the stack, files, licence and access status. Download and extract the available package into a new folder.
- Run the unchanged project first. Follow its README and compare it with the preview. This gives you a baseline before an AI tool edits the code.
- Give the tool the project and one clear task. Ask it to inspect the existing files, preserve the framework and explain its changes. Start with your headline, product description and button destination.
- Review each change. Check the diff, run the page again and inspect the result at desktop and mobile widths. Save a working version before adding another change.
A useful first instruction for your AI tool
After opening the extracted source in your coding tool, replace the bracketed text below with your own content. This is a customisation instruction for files you already have, not a prompt to reproduce a locked template.
Inspect this project and its README before editing.
Keep the existing framework, layout and responsive behaviour.
Change the headline to: [your headline]
Change the introduction to: [your product description]
Set the primary button text and URL to: [label and destination]
Reuse existing components and styles. Do not add dependencies
or invent testimonials, performance claims or working services.
Explain which files changed and how I can check the result.
Avoid pasting passwords, API keys or private client data into an instruction. Configure services through the project’s documented environment settings when you are ready to connect them.
Need a section instead of a complete template?
Use a reusable section when your page already has a structure. The free section collection includes a hero, features, pricing, FAQ and footer. Check each package’s dependencies and how its styles interact with your existing page.
For a full animated page, compare the animated landing page collection. Motion should remain understandable on mobile and with reduced motion enabled. Browsing an animation does not imply its source is free.
Before you publish your adaptation
- Replace fictional brands, quotes, figures and campaign copy with your own accurate content.
- Check links, forms, keyboard controls and page overflow at narrow widths.
- Connect and test any real account, email or payment service. Demo interactions are not a backend.
- Run the package’s build command where applicable and review the downloaded licence.
See How to use FrameShelf for preview, prompt and source details, or contact us with the template name and the setup step that failed.