Skip to content
Recaply.
Sign inSubmit a tool

DirectoryKits

Plan and Build an App

From an idea to a PRD, a build plan and a first version you can click through.

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

ChatPRD

Turns your idea into a PRD with the goals, user stories and what is out of scope.

Takes
An app idea you can describe in a few sentences
Hands on
prd.md
How
In the document editor click Export, then Export as .md, and give the file to your agent.

Give your agent

Writing Plans

Has your agent break the PRD into small tasks in build order, each with how to test it.

Takes
prd.md
Hands on
app-plan.md
How
Paste the plan's Goal into [What the app does and for whom] and its first task into [The main flow, step by step].

Run

Lovable for Your First Build

Gives Lovable one first message that builds the main flow from start to end.

Takes
app-plan.md
Gives you
A first version in Lovable where the main flow works, and the next prompts in order

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

Set it up

In the order you use them.

1

Use ChatPRD

In the document editor click Export, then Export as .md, and give the file to your agent.

Visit ChatPRDFreechatprd.ai

Or use Spellmint or Squad AI; keep the skill and the prompt.

chatprd.ai
ChatPRD homepage
2

Give your agent Writing Plans

Paste the plan's Goal into [What the app does and for whom] and its first task into [The main flow, step by step].

$/plugin install superpowers@claude-plugins-official
By @obraMIT297k stars
obra/superpowers › writing-plans/SKILL.md

---

name: writing-plans

description: Use when you have a spec or requirements for a multi-step task, before touching code

---

# Writing Plans

## Overview

Write implementation plans for an engineer who has not seen this

codebase or this spec. Assume they write idiomatic code in the project's

language once they know the exact interface and the exact test, and that

3

Run Lovable for Your First Build

Fill in the 3 blanks, then run it.

What the app does and for whomThe main flow, step by stepThe look and feel you want
Fill it in
recaply.co/prompts/coding
<app> {{What the app does and for whom}} </app> <main_flow> {{The main flow, step by step}} </main_flow> <look_and_feel> {{The look and feel you want}} </look_and_feel> </context> <task> Using the app, flow and look described above, build version one. A good first build: - lets a user finish the main flow from start to end, with sample data that looks real - has only the screens the flow needs, each with a clear heading and an empty state - works at phone width as well as on desktop - keeps components small and named for what they show, with the sample data in one file, so later prompts can change one part without touching the re

Questions about this kit

Is this kit free?

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

Is there a tool other than ChatPRD for this job?

Yes. Spellmint and Squad AI do the same job well. Keep the skill and the prompt.

How does my agent get Writing Plans?

Run /plugin install superpowers@claude-plugins-official in Claude Code. Your agent reads the skill when the task fits.

Where is the Lovable for Your First Build 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
Build a Landing Page: quick look

Build a Landing Page

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

  1. Use Base44
  2. Give your agent Frontend Design
  3. Run Claude Code to Add a Feature
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