Writing New Features from Natural Language

Writing code by describing what you want in plain English is where Claude Code truly shines. Instead of writing every line yourself, you tell Claude Code what you need, and it plans, writes, and implements the feature across your codebase.

In this lesson, you will learn how to craft effective feature requests, understand how Claude Code plans its work, handle multi-file changes, and iterate on generated code.

The Power of Natural Language Feature Requests

Traditional coding means translating your mental model into syntax -- figuring out the right API, the correct import paths, the proper types. Claude Code removes that translation step. You describe the outcome you want, and Claude Code handles the implementation details.

Here is a simple example to show the difference:

# Without Claude Code, you would need to:
# 1. Find the header component file
# 2. Look up the dark mode library or CSS approach
# 3. Write the toggle component
# 4. Wire up the state management
# 5. Update the CSS/Tailwind classes
# 6. Test it manually

# With Claude Code:
> Add a dark mode toggle to the header component

That single sentence kicks off a process where Claude Code reads your existing header component, understands your styling approach, and implements a working dark mode toggle that fits your codebase.

How Claude Code Plans Before Coding

Claude Code does not just start writing code blindly. When you request a feature, it follows a methodical process:

Step 1: Understanding the Existing Code

Claude Code first reads the files that will be affected. If you ask it to add a dark mode toggle to the header, it will:

[Reads src/components/Header.tsx]
[Reads src/app/layout.tsx]
[Reads tailwind.config.ts]
[Reads src/styles/globals.css]

Step 2: Identifying Patterns

Claude Code looks at how your codebase already does things. It notices:

• Are you using Tailwind or plain CSS?
• Do you have a theme context or use CSS variables?
• How are other toggles or buttons implemented in the project?
• What state management approach does the project use?

Step 3: Planning the Changes

Before writing code, Claude Code outlines what it will do:

Claude Code: I'll add a dark mode toggle to the header. Here's my plan:

1. Create a new ThemeContext in src/contexts/ThemeContext.tsx to manage
   the dark/light state
2. Add a DarkModeToggle component in src/components/DarkModeToggle.tsx
3. Update Header.tsx to include the toggle
4. Wrap the app in ThemeProvider in layout.tsx
5. Update tailwind.config.ts to use the "class" dark mode strategy

Let me implement this.

Step 4: Implementing

Claude Code then writes the code, creating or editing files as needed.

This plan-first approach means Claude Code produces code that fits your existing patterns rather than introducing foreign conventions.

Simple Feature Examples

Let us start with straightforward features to see how the workflow feels:

Adding a UI Element

> Add a "Back to top" button that appears when the user scrolls
  down more than 500px

Claude Code will create a component with scroll detection, smooth scrolling behavior, and styling that matches your project.

Adding a Utility Function

> Create a utility function that formats dates as "2 hours ago",
  "3 days ago", etc. Put it in src/utils/formatDate.ts

Adding an API Endpoint

> Add a GET endpoint at /api/health that returns the app version
  from package.json and the current timestamp

For each of these, Claude Code reads existing code to match your patterns, then implements the feature.

Multi-File Changes

Real features rarely live in a single file. Claude Code handles multi-file changes naturally, which is one of its biggest advantages over simple code completion tools.

Example: Adding a Contact Form

> Add a contact form page at /contact with fields for name, email,
  and message. It should validate inputs and submit to a new API
  endpoint that sends an email using the existing email utility.

Claude Code will create or modify several files in one conversation:

Claude Code: I'll implement the contact form feature. This requires
changes across several files:

[Creates src/app/contact/page.tsx]
  - Page component with the contact form
  - Client-side validation for all fields
  - Submission handling with loading and success states

[Creates src/components/ContactForm.tsx]
  - Reusable form component with name, email, message fields
  - Uses the same form patterns as your existing LoginForm

[Creates src/app/api/contact/route.ts]
  - POST endpoint that validates the request body
  - Calls the existing sendEmail utility from src/lib/email.ts
  - Returns appropriate success/error responses

[Edits src/components/Header.tsx]
  - Adds a "Contact" link to the navigation menu

All of these changes are coordinated. The form submits to the correct API path, the API uses your existing utilities, and the navigation links to the right page.

Iterating on Generated Code

Code rarely comes out perfect on the first try, and that is completely fine. One of Claude Code's strengths is iterating within the same conversation, where it remembers all the context.

Refining the Implementation

> Add a dark mode toggle to the header

# Claude implements it...

> Actually, make it a dropdown with three options: light, dark,
  and system

# Claude refactors the toggle into a dropdown...

> Add a smooth transition when switching themes, about 200ms

# Claude adds the CSS transition...

> The dropdown should close when clicking outside of it

# Claude adds the click-outside handler...

Each iteration builds on the previous work. Claude Code does not start from scratch -- it modifies the code it already wrote.

Adjusting Behavior

> The form should show validation errors inline, not as an alert

> Move the submit button to the right side of the form

> Add a character count below the message textarea, max 500

Fixing Issues You Notice

> The toggle works but the icon doesn't change when I switch themes.
  Can you fix that?

> The form submits even when the email field is empty. The validation
  isn't working on the email field.

Best Practices for Feature Request Prompts

The quality of your prompts directly affects the quality of the generated code. Here are some guidelines:

Be Specific About Behavior

# Vague - Claude has to guess many details
> Add search to the app

# Specific - Claude knows exactly what to build
> Add a search bar to the header that filters the products list
  as the user types. It should search by product name and
  description, debounce input by 300ms, and show "No results
  found" when there are no matches.

Reference Existing Patterns

> Add a settings page following the same layout pattern as the
  existing profile page at src/app/profile/page.tsx

> Create a new ProductCard component similar to the existing
  BlogCard in src/components/BlogCard.tsx but for product data

This helps Claude Code match the style and conventions already in your project.

Specify the Location

> Create the new component in src/components/dashboard/

> Add the API route at src/app/api/notifications/route.ts

> Put the utility function in the existing src/lib/helpers.ts file

Break Down Large Features

For complex features, it is better to work incrementally:

# Instead of one massive request:
> Build a complete user dashboard with analytics, settings,
  notifications, and activity feed

# Break it down:
> First, create the dashboard page layout with a sidebar navigation
  that has links for Analytics, Settings, Notifications, and Activity

# Then in follow-ups:
> Now add the Analytics section with placeholder charts

> Add the Settings section with a form for updating user preferences

> Add the Notifications section that lists recent notifications

Mention Edge Cases

> Add a file upload component that accepts images only (jpg, png, webp),
  shows a preview before uploading, limits file size to 5MB, and shows
  an error message if the file is too large

Example Walkthrough: Adding a Contact Form to a Next.js App

Let us walk through a complete example from start to finish.

The Initial Request

cd ~/projects/my-nextjs-app
claude

> Add a contact form to the app. It should be at /contact, have fields
  for name, email, subject, and message. The form should validate all
  fields on the client side, submit to an API endpoint, and show a
  success message after submission. Use the existing Tailwind styles.

Claude Code's Process

Claude Code will:

1. Read your existing pages to understand the layout pattern
2. Check your Tailwind configuration and existing form components
3. Look at how other API routes are structured
4. Create the page, form component, and API route
5. Add proper TypeScript types
6. Include loading and error states

Reviewing the Output

After Claude Code finishes, review the changes:

> Show me a summary of all files you created or modified

Claude Code will list every file and what changed.

Testing and Iterating

> I tested the form and it works, but I want to add a couple things:
  1. Rate limiting on the API endpoint (max 5 submissions per minute)
  2. A honeypot field for spam prevention
  3. The success message should auto-dismiss after 5 seconds

Claude Code makes all three changes, modifying the existing files it created.

Common Pitfalls

Too Vague Requests

# Problem: Claude has to make too many assumptions
> Make the app better

# Solution: Be specific about what "better" means
> Improve the loading performance of the products page by adding
  pagination with 20 items per page

Missing Context

# Problem: Claude doesn't know about external constraints
> Add Stripe payments

# Solution: Provide relevant context
> Add Stripe checkout for our subscription plans. We have three plans
  defined in src/config/plans.ts. The user model in src/types/user.ts
  already has a subscriptionId field. Use Stripe Checkout Sessions.

Requesting Too Much at Once

If you ask for an entire feature-rich dashboard in one prompt, the result will likely be shallow. Build incrementally, testing each piece before moving on.

Not Reviewing the Output

Always review generated code before committing. Claude Code is powerful, but you should verify:

• The logic is correct for your specific use case
• Error handling covers your requirements
• No sensitive data is hardcoded
• The code follows your team's conventions

What You Learned

In this lesson, you learned how to use Claude Code to write new features:

• Describe features in natural language and let Claude Code handle the implementation
• Claude Code plans before coding: reading existing code, identifying patterns, then implementing
• Multi-file changes are handled in a single conversation
• Iterate on generated code with follow-up prompts to refine behavior
• Write specific prompts that reference existing patterns and specify behavior
• Break large features into smaller, incremental steps
• Always review generated code before committing

In the next lesson, you will learn how to use Claude Code for debugging and fixing errors in your code.