Learning Timeline
Key Insights
Model Credit-Saving Strategy
Use Claude Opus for the initial prompt or challenging tasks (initial planning). Switch to Claude Sonnet for minor revisions or simple changes to save your credits.
Iterative Building Principle
Don't try to create a perfect website with just a single prompt. The best way to use AI coding is through iteration: request revisions, review the output, and refine it step-by-step using follow-up prompts.
Prompts
Hero Section Background Revision
Target:
Claude Code
Blur the top background here in the hero section.
Removing Selected Elements
Target:
Claude Code
Remove this element.
Step by Step
How to Perform Design Revisions with Claude Code
- Click the AI model selection dropdown within the Claude Code interface.
- Choose 'Claude Sonnet' for minor revisions to save credits compared to using the Opus model.
- Type specific instructions in the prompt area to modify a certain section, for example: 'Blur the top background here in the hero section'.
- Click the 'Crosshair' icon or the element selection tool located at the top of the preview display.
- Click on the specific element you want to remove or change (e.g., an element that is interfering with a button).
- Enter a follow-up prompt to instruct the AI to remove the selected element.
- Use the device icons (Desktop/Mobile) at the top to check how the website looks on different screen sizes.
- Repeat this refinement process with additional prompts until the design achieves the desired result.
