Claude Code research preview

Anthropic introduced Claude Code as a limited research preview on February 24, 2025. Its central workflow still makes a useful first exercise: let Claude read an existing website, identify the right file, make one small change, and show you how to verify it.

Before you start

• The current terminal version of Claude Code, installed, signed in, and able to answer a message. You do not need access to the old preview or its original model.
• An existing website project on your computer that you are allowed to edit, with a saved copy and a working local preview.
• The project’s normal instructions for opening that preview and running any existing checks. If it needs a runtime or dependencies, have those working first.
• One exact visible wording change, such as replacing a button label, plus the page where you can check it.

Want to do it yourself?

Difficulty

6 out of 10

Estimated completion time

45–90 minutes

Skills you’ll need: Record a baseline, review a plan and file diff, and check both visible wording and behavior after the edit.

I’ll do it myselfI’d rather get help

How this helps your brand

An inspected wording change can improve a customer-facing label while preserving its action. Finding the real source and testing the page gives you a careful method for maintaining an existing site.

1. 1

   Step 1: Record the page before changing it

   Open the website in its existing local preview. Choose a small change you can describe without interpreting design taste. For example, change the contact page’s main button from “Send” to “Request an estimate”, while keeping its existing action.

   Write down the page address, current text, desired text, and what the button currently does. Take a screenshot or keep the tab open. If the page already fails to load, fix that first; you need a working starting point to judge this exercise.

2. 2

   Step 2: Let Claude explain the project first

   Open a terminal in the project folder and start Claude with claude --permission-mode plan. Plan mode is for exploration without editing source files. Paste the prompt below, which asks for the relevant files and a proposed change.

   Ask for a short answer: which file contains the label, whether that wording is reused elsewhere, and which existing check is appropriate. Claude should inspect the actual project instead of assuming it uses a particular framework.

   If it names a file that does not exist or cannot find the wording, give it the page address and the exact visible text. Ask it to trace where the label comes from; it may be stored in a shared component or a translation file.

   Illustrated exampleTrace the wording to a real file before editing

   ›claude --permission-mode planPLAN · READ ONLY

   Find the source of “Send” on the contact page. Is it shared?

   Ask for evidence you can checkReal file · relevant location · existing check

   ‹/›

   FOUND IN PROJECTContactForm.tsx

   42 <button type="submit">
   43 Send
   44 </button>

   One label · action stays intact

3. 3

   Step 3: Agree on the smallest useful edit

   Read the proposed scope. A button-label change should not require replacing the layout, changing the form destination, or updating unrelated dependencies. If a shared label affects several pages, decide whether those pages should change too before editing.

   Tell Claude the acceptance check in everyday terms: the contact page shows “Request an estimate”, the same action still works, and the label fits at phone width.

   Keep a note of files that already had unsaved changes. Those changes belong to your starting point and should not be discarded when reviewing this task.

4. 4

   Step 4: Authorize the edit outside Plan mode

   After reviewing the plan, leave the planning session by typing exit. From the same project folder, start claude --permission-mode default. Supply the agreed file, old wording, new wording, and acceptance check again so the new session has the necessary context.

   Ask it to make only that change, list the files touched, and run the relevant existing check. Read tool permission requests and approve the actions needed for this task. If it cannot run a check, have it report the exact reason rather than calling the task tested.

5. 5

   Step 5: Check both the wording and the behavior

   Inspect the changed lines in your editor, then refresh the local preview at the same page address. Verify the replacement text and the button’s existing behavior. For a real form, use the project’s safe test process rather than sending an unexpected message to a live customer system.

   Narrow the browser window and check that the longer label stays readable. If the label is shared, visit the other affected page as well. A passing code check is useful evidence, but it cannot by itself confirm the wording looks right.

   Illustrated exampleCheck the exact change in the page and the form

   AGREED CHANGEContactForm.tsx

   −Sendold label

   +Request an estimatenew label

   ···type="submit"unchanged

   THEN CHECK

   /contact

   CONTACTHow can we help?

   Request an estimate ↗

   • 01 Same page · new words
   • 02 Fits at phone width
   • 03 Existing form action works

6. 6

   Step 6: Recover with the evidence from your check

   If the text did not change, compare the browser page, running project folder, and edited file. Tell Claude exactly which page still shows the old words and ask it to locate the rendered source before editing again.

   If a test fails, keep its exact output and ask whether the failure existed before this change. If the button behavior changed, ask Claude to undo only its task-specific edits, preserving your earlier work, then retest the original behavior.

   Once the visible check and any relevant project check pass, save a new working copy. Keep the final explanation of what changed and what remains untested with your project notes.

Help me plan one small wording change in this existing website. Stay in Plan mode and do not edit files yet.

Page in my local preview: [page address or route]
Exact current wording: [old wording]
Replacement wording: [new wording]
The existing action that must remain the same: [what the control does]
My normal preview and check instructions: [known project commands or documentation path]

Read the project instructions and locate the source of this wording. Name the real file and relevant location, explain whether it is shared with other pages, and propose the smallest edit. Identify the existing check we should run and the browser steps I should repeat, including a narrow-window check. If you cannot find the wording or need more information, say so instead of guessing. Finish with a short plan I can review before starting an editing session.