Skip to content
Recaply.
Sign inSubmit a tool

DirectoryKits

Build a Landing Page

From one sentence to a live page, without a template look.

BuildFree to startUpdated

Get the kit

Three parts, one job

Each part works on its own. In this kit each one hands the next a file.

Use

Base44

Builds the page and the app behind it from a text prompt.

Takes
One sentence about the product you want to test
Hands on
landing-app.zip
How
In the editor, click More actions, then Export project as ZIP and Download ZIP (Builder plan and up); unzip it for your agent.

Give your agent

Frontend Design

Gives your agent a design direction instead of a template look.

Takes
landing-app.zip
Hands on
design-plan.md
How
Paste design-plan.md into [Stack, key files and how to run tests], so each new feature keeps the page's look.

Run

Claude Code to Add a Feature

Adds the next feature as a plan, then small tested changes.

Takes
design-plan.md
Gives you
A landing page with its own look, and new features added in small tested steps

Use any part on its own, or all three in this order.

RocketSponsoredResearches what to build, builds the app and tracks your competitorsVisit

Paid placement. It does not change our picks or any ranking.

Set it up

In the order you use them.

1

Use Base44

In the editor, click More actions, then Export project as ZIP and Download ZIP (Builder plan and up); unzip it for your agent.

Visit Base44FreeRecaply earns a commission if you buy through this link.base44.com

Or use Lovable or Emergent; keep the skill and the prompt.

base44.com
Base44 homepage
2

Give your agent Frontend Design

Paste design-plan.md into [Stack, key files and how to run tests], so each new feature keeps the page's look.

$npx skills add anthropics/skills --skill frontend-design
By AnthropicApache 2.0180k stars
anthropics/skills › frontend-design/SKILL.md

---

name: frontend-design

description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

---

# Frontend Design

Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for…

## Ground your designs in the subject matter

If the brief does not identify what the product or subject matter is, identify it yourself before designing, and confirm with the client.…

## Design principles

3

Run Claude Code to Add a Feature

Fill in the 3 blanks, then run it.

The feature you wantWhat must keep workingStack, key files and how to run tests
Fill it in
recaply.co/prompts/coding
<feature_request> {{The feature you want}} </feature_request> <must_keep_working> {{What must keep working}} </must_keep_working> <project_notes> {{Stack, key files and how to run tests}} </project_notes> </context> <task> Using the feature request and notes above, add this feature. A good result: - starts from how the code works now and follows the patterns, names and libraries already in use - gets to the feature through small steps, each one leaving the app working - leaves everything under "must keep working" behaving as before, shown by the tests or checks you ran - tells me plainly what changed, what you could not test and

Questions about this kit

Is this kit free?

Yes, to start. Base44 has a free plan, and the skill and the prompt are free.

Is there a tool other than Base44 for this job?

Yes. Lovable and Emergent do the same job well. Keep the skill and the prompt.

How does my agent get Frontend Design?

Run npx skills add anthropics/skills --skill frontend-design. Your agent reads the skill when the task fits.

Where is the Claude Code to Add a Feature prompt?

On its page: fill in the blanks, then copy it or open it in ChatGPT, Claude or Grok.

Who picks the kits?

We do. A sponsor can take the labelled row under a kit, but never one of its three picks.

More kits in Build

Pages, features and fixes, with your agent.

All kits in Build
Ship a Feature: quick look

Ship a Feature

Think it through first, then let your agent write tested code.

  1. Use Claude Code
  2. Give your agent Brainstorming
  3. Run Write a Function From a Spec
Fix a Bug: quick look

Fix a Bug

Find the root cause before anyone touches the code.

  1. Use Cursor
  2. Give your agent Systematic Debugging
  3. Run Debugging for Errors and Stack Traces
Review Code Before You Merge: quick look

Review Code Before You Merge

Your branch reviewed, the findings fixed and a description reviewers can follow.

  1. Use CodeRabbit
  2. Give your agent Code Review and Quality
  3. Run Pull Request Description
Secure Your App: quick look

Secure Your App

Scan the code, fix what it finds, then check what scanners miss before launch.

  1. Use Snyk
  2. Give your agent Security and Hardening
  3. Run Security Check for Vibe-Coded Apps