Home About Me

I Thought Using Copilot to Write My JSX Was Cheating

I've been working in React and Next.js lately, and since my main stack is Vue, writing React doesn't come naturally to me.

When I get a UI design, my first thought is usually: I know roughly how the structure should go — I just don't want to type each JSX tag myself.

So I started doing something different. I'd drop in a comment describing the structure I wanted and let Copilot edit fill in the rest:

{/* title center h1 */}
<h1>title here</h1>
{/* content card round bg-white shadow */}
<div>card title...</div>

After writing these comments, I hand it over to Copilot edit to continue writing the structure automatically.

Sometimes Copilot guesses exactly right. Sometimes it writes something completely off. Either way, I stay in control.

At first it felt a little like cheating. The JSX wasn't hand-typed line by line; it came from comments plus autocomplete. I even felt vaguely guilty about how much effort it saved me.

Later I was chatting with ChatGPT about this, and one sentence woke me up:

"You're not relying on Copilot — you're having it help you implement faster."

That landed. Looking back, this isn't dodging the work. It's collaboration.

What my workflow actually looks like

Most of my structure thinking happens while looking at the design:

  • Which parts are sections?
  • What repeats and should become a component?
  • Where does the layout need semantic meaning?

I write those down as comments first, then sketch the structure with the minimum amount of markup.

{/* form: left-right layout, text on left, input on right */}
<label>用户名:</label>
<input type="text" />

When the comments are specific enough, Copilot picks up on the layout pattern I want and fills in Tailwind classes, basic structure, even nesting. It isn't always perfect, so I fix it by hand. But because the structure is planned ahead of time, my overall speed is much higher.

A quick example of how I sketch structure:

{/* Card-left flex-column border:purple-100 */}
<div className="flex flex-col border border-purple-100 rounded-lg p-4">...</div>

The comment carries both the structure and the styling intent. Copilot produces the full JSX, and I fine-tune from there.

How it played out in a real project

I worked on an AI audio product as the frontend developer. The stack was React and Next.js. My tasks included a login component, some back-office pages, and fleshing out the homepage.

We collaborated through GitHub Issues and PRs, and I split branches by task. For each page, I'd plan the structure in comments first, then let Copilot continue, then adjust based on what actually rendered.

That comment-driven JSX flow made building page components dramatically faster on this project.

Not everyone uses AI this way

Honestly, I've run into people who say "just let the AI do it" about everything — and their output is either full of bugs or structurally messy.

My habit is to map the project structure first, break it into an outline, then build from the smallest module upward.

Some people will just say "build me some system" with no detail, and the request is too vague to even start. In that situation, no AI can save you.

I've worked with teammates who didn't lead the task and expected Copilot to write the requirement from scratch. The project ended up stalling.

AI is a tool, not an excuse. It can fill in code, but it can't replace thinking. It saves time, but it doesn't save responsibility.

Where I land on AI-driven development

AI tools are like running shoes that help me go faster, but the route and the destination are still mine.

I'm happy to use Copilot or ChatGPT to speed up my workflow. I just don't believe in "fully AI deliverable."

The developer I want to be is someone who can clearly express structure, collaborate with tools, and ship the work personally.

I'll let AI accelerate me, but I won't let it take the fall for me.

For developers who are second-guessing themselves

You're not weaker because you use Copilot.

You're asking "does this count as real engineering?" because you're responsible enough to care.

As long as you know what you're doing, understand the logic behind it, and can actually land the project — you're not just someone who "uses Copilot." You know how to use it well.

Don't let the crowd that says "just let AI handle it" speak for you.

AI is the assistant. You're the core.

That's how I collaborate with AI on frontend projects — and it's a gentle way I've found to speed myself up.