Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Specification into a Working App | Section
Introduction to Claude Code

Specification into a Working App

Swipe to show menu

With the project specification complete, Claude Code can begin building the dashboard. The prompt should clearly identify the project folder, the specification file, the required technologies, and the tasks Claude needs to complete.

In this example, Claude is asked to:

  • Build the dashboard with Next.js and Tailwind CSS;
  • Match the design of the existing landing page;
  • Create a new PostgreSQL database;
  • Add the leads and campaigns tables;
  • Seed the database with example leads;
  • Configure the local environment;
  • Start the development server;
  • Mark completed tasks in spec.md.

Claude then works through the specification, creates the database, adds mock data, builds the application, and checks the interface using screenshots. Once the process is complete, it provides a summary of the work and a local link for opening the dashboard.

The finished dashboard includes a login page, an activity summary, lead records, detailed lead pages, and campaign information. The example data makes it possible to test the interface before real leads are added.

After reviewing the result, you can give Claude smaller follow-up tasks. For example, you might ask it to add editable outreach templates for different campaign stages. This approach is often more effective than trying to describe every detail in the initial prompt.

Start with a clear specification, let Claude complete the main build, and then improve the application through focused iterations. This makes large development tasks easier to manage and helps move the project closer to a finished working product.

question mark

What should you do after Claude completes the initial dashboard build?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 11

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Specification into a Working App

With the project specification complete, Claude Code can begin building the dashboard. The prompt should clearly identify the project folder, the specification file, the required technologies, and the tasks Claude needs to complete.

In this example, Claude is asked to:

  • Build the dashboard with Next.js and Tailwind CSS;
  • Match the design of the existing landing page;
  • Create a new PostgreSQL database;
  • Add the leads and campaigns tables;
  • Seed the database with example leads;
  • Configure the local environment;
  • Start the development server;
  • Mark completed tasks in spec.md.

Claude then works through the specification, creates the database, adds mock data, builds the application, and checks the interface using screenshots. Once the process is complete, it provides a summary of the work and a local link for opening the dashboard.

The finished dashboard includes a login page, an activity summary, lead records, detailed lead pages, and campaign information. The example data makes it possible to test the interface before real leads are added.

After reviewing the result, you can give Claude smaller follow-up tasks. For example, you might ask it to add editable outreach templates for different campaign stages. This approach is often more effective than trying to describe every detail in the initial prompt.

Start with a clear specification, let Claude complete the main build, and then improve the application through focused iterations. This makes large development tasks easier to manage and helps move the project closer to a finished working product.

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 1. Chapter 11
some-alt