Creating a Mockup Generation Skill

After collecting leads, the next step is creating a personalized website mockup for each prospect. This makes outreach much stronger because instead of sending a generic message, you can show a business what its redesigned website could actually look like.

In this example, a second Claude Code skill is created called generate-mockup. This skill takes a lead from the database, usually by practice name or domain, and then works through a repeatable process.

The skill:

• Reads the lead’s details from the database;
• Visits the prospect’s current website;
• Pulls real information such as the practice name, services, location, and contact details;
• Uses that content to generate a modern one-page redesign;
• Follows the design direction already defined in the project;
• Saves the mockup as a self-contained HTML file;
• Updates the database with the mockup path and changes the lead status to mockup-ready.

To keep the output simple and portable, the mockup is created with plain HTML and Tailwind CSS through a CDN. This means each page can be hosted easily without needing a full app setup.

Because the skill is stored inside the project’s .claude/skills folder, it can be reused whenever needed. Claude may not always detect the skill automatically in Claude Desktop, so it can help to explicitly tell Claude which skill to use and where it is located.

When the skill runs successfully, it creates a mockup based on real information from the prospect’s site. This helps avoid invented claims and makes the result more credible. For example, the generated mockup can include real services, opening hours, and team information, while clearly marking placeholder sections such as reviews or inactive contact forms.

This process is powerful because it turns lead data into a personalized sales asset. Instead of manually designing a preview for every prospect, Claude can handle much of the work and create a repeatable workflow that can later be improved, scaled, and automated even further.