Why AI Coding Assistants Struggle with Something as Simple as Changing a Button Color

A Deceptively Simple Request

"Claude, change the 'Add to Cart' button to blue." — This sounds like the most trivial task any developer could imagine, something a junior frontend engineer could knock out in seconds. Yet when you hand this request to an AI coding assistant, things rarely go as smoothly as expected. This topic, which sparked a lively discussion on Hacker News, cuts right to the heart of a core pain point in AI-assisted development: locating the right context and making precise, targeted changes.

On the surface, changing a button color means editing a single line of CSS or swapping a class name. But for an AI that has no prior knowledge of your codebase, it first has to answer a series of questions: Which file is this button in? Is the project using plain CSS, Tailwind, styled-components, or some internal design system? What specific shade of "blue" do we mean? Are there multiple "Add to Cart" buttons that all need to be updated? These questions are what turn a simple request into a surprisingly complex problem.

Common Ways AI Coding Tools Go Wrong

The Limits of the Context Window

Modern frontend projects can span hundreds or even thousands of files, while AI models have a finite context window. Even models like Claude with exceptionally long context support can't "see" an entire large codebase at once. When a developer just says "make the button blue" without providing any file location hints, the AI might:

Modify the wrong button component entirely
Only update one instance, missing other places where the component is reused
Hardcode a color value, breaking the project's design conventions
Introduce a change that conflicts with the existing theming system

The Gap Between Semantic Understanding and Engineering Practice

"Blue" is a vague natural language concept. In professional frontend projects, colors are typically managed centrally through design tokens or CSS variables — think --color-primary or bg-blue-500. The right approach is to use the project's existing blue variable, not to slap in a #0000FF out of nowhere. Whether an AI understands and respects this kind of engineering convention is what separates code that "works" from code that's actually professional.

This is the deeper issue surfaced by the Hacker News discussion: the value of an AI coding tool isn't just whether it can generate code — it's whether it can generate correct, maintainable code within the constraints of an existing codebase.

Design Tokens are a systematic approach to abstracting visual design decisions — colors, typography, spacing, and more — into named variables. Pioneered by large-scale design systems like Salesforce Lightning Design System, the core idea is that "primary blue" isn't a raw hex value but a semantic name like color-action-primary. The underlying value can change with a theme switch, and every component referencing that variable updates automatically. In practice, design tokens are usually maintained in JSON or YAML and compiled into CSS variables, Sass variables, or platform-specific formats using tools like Style Dictionary. When an AI hardcodes a value like #1D4ED8, it bypasses this entire abstraction layer — leading to broken dark mode support, missed updates during brand refreshes, and a growing mismatch between design and code. This is the canonical example behind the engineering community's criticism that AI-generated code "runs but isn't production-ready."

How Agent Mode Is Changing the AI Coding Experience

From Code Completion to Active Understanding

In recent years, AI coding tools like Claude Code, Cursor, and Windsurf have been evolving from pure "code completion" into genuinely agentic tools. They can now:

Proactively search the codebase, locating relevant files using keywords like "Add to Cart"
Understand project structure, identifying the frameworks and styling approaches in use
Execute multi-step operations — read first, then modify, then run tests to verify the result

With this kind of capability, a request like "change the Add to Cart button to blue" actually becomes feasible. The AI is no longer a passive tool waiting for perfectly precise instructions; it becomes a collaborator capable of autonomously completing the full loop: understand the request → locate the code → make the change → verify the result.

Precise Instructions Still Matter

Even as AI capabilities improve rapidly, the "garbage in, garbage out" principle still applies. Experienced developers find that giving the AI clear context — specifying a file path, naming the relevant color variable, defining the scope of the change — dramatically improves the quality of results. This is exactly why many teams have started writing dedicated "project briefing files" for their AI coding assistants (such as CLAUDE.md or .cursorrules), pre-loading information about the tech stack, coding conventions, and directory structure.

CLAUDE.md and .cursorrules are a category of AI context configuration files — essentially a project README written for the AI to read. Placed in the repository root and committed alongside the code, these files let development teams document tech stack decisions (e.g., "This project uses Tailwind CSS v4 — do not use inline styles"), directory conventions, naming rules, prohibited patterns, and standard procedures for common operations. When an AI tool reads these files at startup, it's effectively receiving a project-level "system prompt" before every conversation, dramatically reducing low-quality edits caused by missing context. This practice has also sparked a growing community ecosystem, with developers publicly sharing optimized .cursorrules templates for different frameworks on GitHub — making AI behavior more consistent and convention-aligned within specific tech stacks.

Practical Advice for Developers

What might seem like a throwaway joke actually reflects the current state of AI-assisted programming: it's powerful enough to handle real tasks, but not yet powerful enough to operate entirely without human guidance.

A few things worth keeping in mind:

AI excels at tasks with well-defined boundaries — the vaguer the request, the more context a human needs to supply
The value of engineering standards is amplified — a well-structured, consistently documented codebase is far easier for AI to understand and modify correctly
The human-AI collaboration model is being reshaped — the developer's role is gradually shifting from "writing code" to "reviewing and guiding"

As agentic AI tools mature, requests like "change a button color" may genuinely become as simple as saying the words. But until then, understanding where AI's capabilities end — and learning to work with it in ways that play to its strengths — remains a skill every developer needs to develop.

Closing Thoughts

"Claude, change the Add to Cart button to blue" — this line is both a gentle jab at current AI limitations and a genuine expression of where things are headed. It reminds us that the true measure of an AI coding tool isn't how impressively it can write a complex algorithm, but whether it can reliably handle those "looks simple" tasks in a real, messy, constraint-laden engineering environment. And that, as it turns out, is the hardest part of all.