PortfolioIntroduction
With AI coding tools like Claude Code, Cursor, and GitHub Copilot, there are many options to choose from. It's natural to wonder "which one should I use?"
This article shares how I actually use Claude Code and Cursor, from a non-engineer perspective. There's no single right answer, but hopefully this helps.
Differences Between Claude Code and Cursor
| Aspect | Claude Code | Cursor |
|---|---|---|
| Environment | Terminal (CLI) | Desktop App (GUI) |
| Operation | Text-based instructions | Visual operation + AI completion |
| Project Awareness | Easy to overview entire project | Focused on open files |
| Best For | Changes across multiple files | Single-file editing, new creation |
Neither is superior—they simply excel in different situations.
For Small Pages or Landing Pages
For simple HTML-centric pages like single-page landing pages, I use Cursor.
Why Cursor Works Well
- Visually intuitive: File tree visible, easy to understand what's where
- Instant preview: Real-time preview available with extensions
- Excellent HTML completion: Tag input assistance and AI completion work smoothly
For small adjustments like "change this section heading" or "make the button blue," it's convenient to open files directly in Cursor and give instructions.
For Larger Projects
For projects spanning multiple files, like Next.js sites or features requiring APIs, I run Claude Code in the terminal.
Why Claude Code Works Well
- Understands entire project: Can make changes while understanding relationships across files
- Coordinated modifications: Instructions like "change this component and fix all files using it" work well
- Configuration file changes: Also suggests modifications to package.json, tsconfig.json, etc.
For tasks like "add a new page and add a link to the navigation," Claude Code handles multi-location changes more smoothly.
Practical Usage Examples
Case 1: Creating a Company Introduction LP
Tool: Cursor
Reason:
- Contained in a single page
- HTML and CSS focused
- Many visual adjustments like image placement
Case 2: Site with Contact Form
Tool: Claude Code
Reason:
- API route needed for form submission
- Want to add validation processing
- Implementation spans multiple files
Case 3: Text Corrections on Existing Site
Tool: Either works
Points:
- Single location → Quick fix in Cursor
- Multiple pages → Batch update with Claude Code
Combining Both
In practice, I often use both together.
Basic project structure, routing, shared components
Page appearance, text corrections, style adjustments
API integration, new feature implementation
Rather than trying to perfectly divide usage from the start, I recommend beginning with "use whichever feels easier."
When Setup or Configuration is Unclear
When stuck on tool setup or environment configuration, you can ask Claude Code itself.
Give instructions like "explain how to install Cursor" or "write Node.js environment setup steps to a file," and it outputs the procedures as text. Following along saves the trouble of researching yourself.
Of course, asking ChatGPT or other AI chat services also works. Using multiple AIs strategically is another approach.
Summary
- Small-scale, HTML-focused → Work visually in Cursor
- Multiple files, adding features → Work with project overview in Claude Code
- When unsure, try both → Choose what feels easier
There's no right answer for tool selection. Finding your own comfortable approach is the key to enjoying AI coding.