Beyond Autocomplete:
When AI Meets UI to Supercharge Software Engineering
- Abhijeet Thakur, Senior UI Architect
- 12 min read
- January 12, 2025
Introduction
Developer productivity isn’t just a metric; it’s the engine of your company’s growth. Every hour saved on boilerplate code is an hour invested in your product’s competitive edge.
The rise of AI code generation tools promises a revolution in efficiency, but the landscape can be noisy. We’ve all seen demos suggesting AI is a magic button for creating perfect code overnight. Yet, for many tech leaders, the reality is a frustrating cycle of failed experiments.
The truth is, scaling an engineering team requires more than just giving developers a new tool. It requires a strategic framework where context-aware AI becomes a true partner in the development lifecycle.
At Indexnine, we don’t just use tools; we build frameworks around them. This is where our AI enablement services AI & ML Development provide a strategic advantage. We guide startups and enterprises to harness these powerful tools, avoid the common pitfalls, and create a force-multiplying effect on their engineering teams.
TL;DR – Is Cursor perfect? Not quite. Is it valuable in our day to day? Without a doubt, the lessons we gained were worth every stumble.
Can AI Really Help?
Can AI Really Help Build UI?
We started with a question every modern frontend team is asking: Can AI help turn Figma or existing designs into production-ready React components? Cursor AI promised just that—and we were curious (and skeptical).
Before we jump into the experiment, we should take a step back and ask: why does this even matter?
For teams working with complex frameworks like React, Cursor is a game-changer
Instead of generic advice, developers get intelligent, codebase-aware support for tasks like:
-
Rapid Component Generation
Creating new React components with associated CSS modules and test files from a single, natural language prompt. -
Automated Refactoring
Highlighting a block of code and asking the AI to refactor it for better performance or readability based on established best practices. -
In-line Documentation
Generating comments and documentation that are aware of the code's logic and purpose.
The core advantage is the reduction in context switching. Developers can ask questions, generate code, and fix errors within the editor, creating a seamless and highly productive workflow. Did it actually stack up?
The Experiment: The Good, the Glitchy, and the Fixable
The Experiment
To put it to the test, we picked a moderately complex dashboard design. It contains charts, tables, cards, icons, and a lot of visual nuance. Then, we asked Cursor to generate components straight from that design.
The outcomes? Exciting and full of potential — with just a bit of room to grow!
The Challenges
-
It quickly generates a TON of code:
For the UI screen, Cursor generated 8 components & around 1000 lines of code. This would be great if everything was perfect—but it invariably misses small things (like redundant icons or unnecessary props), making large generations buggy and incomplete. -
It doesn't reuse components:
Unless you explicitly tell it to, Cursor might create yet another version of a button or badge—even if you already have a perfect one in your codebase. -
Repetitive HTML Patterns:
Cursor can occasionally generate repetitive HTML across different components without identifying shared patterns. For example... it recreated similar markup for each card instead of abstracting them into reusable components. The result? Bloated, harder-to-maintain code. -
Styling often needs finesse:
Cursor gets about 80–85% of the way there. It sometimes missed exact spacing or color matching from Figma, but a second pass usually nailed it. -
It loves third-party libraries:
And sometimes you don't need them.
What Worked Well
-
Rapid prototyping:
Getting from design to working component in minutes rather than hours -
Context awareness:
Understanding existing codebase patterns and conventions -
Framework expertise:
Deep knowledge of React best practices and modern patterns -
Iteration speed:
Quick refinements and adjustments based on feedback
Beyond the Hype
Beyond the Hype: It's Not the Tool, It's the Technique
Anyone can download Cursor AI. The real advantage comes from good prompt engineering. After weeks of rigorous experimentation, our UI architects have developed proprietary libraries of instructions—our “secret sauce”—that guide Cursor to generate sophisticated, high-quality code that aligns with our production standards.
This isn’t just a folder of smart prompts; it’s a methodology powered by our spec-driven development processes. For us, it’s the engineering discipline that bridges the gap between human planning and AI execution.
These aren’t simple prompts. They are structured files that act as a non-negotiable contract for the AI.
By defining the user story, acceptance criteria, and edge cases before writing code, we force the AI to build with intent and architectural alignment.
For React development, this means we can:
-
Generate Entire Component Structures
Create new, complex React components complete with CSS modules, Storybook files, and unit tests from a single, expertly crafted /implement command. -
Execute Codebase-Aware Refactoring
Apply our specific performance and readability best practices across the entire application, ensuring consistency and reducing technical debt. -
Enforce Quality with Precision
Go beyond generic linting to document and enhance code with a deep understanding of the project's unique context.
This is really how we transform a great tool into a strategic asset.
Business Velocity
Turning AI Tools into Tangible Business Velocity
So… How Did We Make It Work? It’s about guiding the AI thoughtfully through a structured, developer-centric process. Here is our 6-step process, which adapts the IndexNine way into a standard practice for rapid UI generation:
- The Planning Phase: Clearly Defining the Blueprint
1. Start With a Solid Foundation
We began by ensuring a consistent, scalable starting point:
- React + TypeScript project scaffolding
- Storybook for isolated UI testing
- Rules set up in .cursor/rules/
- Predefined folder structure for clarity
2. Establish Project Rules and Component Registry
To make Cursor work the way we work, we set up a series of rule files that align with our development standards. Think of these as our AI style guides.
Component Registry Solution
To tackle the challenge of component reusability, we introduced a components_registry.json that keeps track of all existing shared components. Then, using our rule file, we ask Cursor to check this registry before generating anything new.
If the component already exists, Cursor reuses it.
3. Break Down the Design First
Instead of throwing the full Figma screen into Cursor, we manually identified layout vs. reusable components (e.g., separating Header, Sidebar, StatCard, etc.) and created base components first. This manual breakdown is a critical part of the /specify phase, creating a clear, granular plan for the AI to follow.
Our Prompt
“Analyze the attached design. Identify & list all the reusable & common components from that.”
- The Implementation Phase: Building with Precision
4. Build Bottom-Up
To keep our codebase clean, reusable, and easy to manage, we took a “small pieces first” approach. This mirrors the /task and /implement commands in SDD, which breaks a large plan into testable units of work.
-
Start Small
Feed Cursor isolated designs—a single card, chart, or stat block—one at a time. -
Go Generic, Stay Reusable
We instructed Cursor to keep these components generic and flexible. -
Test in Isolation with Storybook
Each component was tested independently using Storybook to spot visual bugs early. -
Assemble with Confidence
Once our smaller components were polished and tested, we stitched them together. -
Better Reviews, Better Code
Smaller pieces meant faster and more thorough code reviews.
Pro-Tip: Avoid Cursor for quick fixes. It doesn’t fully understand your app’s context… and can easily introduce new bugs.
- The Review Phase: Governing the Output
5. Refactor Before You Commit
Cursor is quick, but speed doesn’t always mean spotless code. We treated every Cursor-generated component like a first draft and made code reviews a non-negotiable part of the workflow. We looked out for:
- Redundant markup
- Overuse of inline styles
- Missed opportunities for abstraction
6. Treat AI Like a Junior Dev (Because It Kind of Is)
This is the core tenet of why we know AI needs Spec-Driven Development to power the processes: the AI is the Junior Developer, and you are the Senior Engineer responsible for the review. NEVER take its output at face value. You must give clear instructions and review every step. We always caught:
- Unnecessary library imports
- Style tweaks that were close, but not quite there
- Accessibility gaps, like missing aria labels
When we combined Cursor’s speed with our judgment, we shipped great code, faster.
What You'll Yield
Don’t make the mistake of allowing every developer to use AI tools in a vacuum. When you follow this structured approach:
Accelerated MVP Development
Get your product to market and secure feedback sooner
Reduced Onboarding Time
New developers can get up to speed on a complex codebase more quickly
Improved Code Quality
Enforce style guides, write tests, and reduce technical debt
Who This Is For
A Dual Approach for Two Types of Innovators
Our approach is deeply aligned with the best practices championed by the world’s leading cloud providers, who have built their own global-scale systems on these principles.
For the Startup Builder & Technical Founder
You want to build, and you want to do it fast. You see the potential of these tools and want to learn how to master them yourself. Our framework provides a direct path to this mastery… to accelerate your MVP and turn your vision into a reality faster than your competition.
For the Enterprise & Growth-Stage Leader
Your challenge is different. You need to modernize your tech stack, eliminate technical debt, and accelerate outcomes without disrupting your operations. For you, we offer our AI Pods and AI Enablement services.
Our Framework
The Indexnine AI Enablement Framework
We leverage a simple, four-step framework to help organizations successfully adopt AI-assisted development:
1. Assess
We start with an AI Assessment to understand your current development lifecycle, codebase complexity, and business goals.
2. Strategize
Your challenge is different. You need to modernize your tech stack, eliminate technical debt, and accelerate outcomes without disrupting your operations. For you, we offer our AI Pods and AI Enablement services.
3. Integrate
We manage the seamless integration of the tool into your workflow, including configuring it with your specific codebase and providing hands-on training.
4. Amplify
We provide ongoing support and advanced training to ensure your team is continuously discovering new ways to leverage the tool.
About the Author
This post was written by Abhijeet Thakur, a senior UI Architect and core member of the Indexnine team. He is leading the charge on experimenting with and productizing AI-assisted development techniques.
Frequently Asked Questions
Frequently Asked Questions
No. While Cursor uses models from OpenAI (like GPT-4) and Anthropic, its core value is its deep integration with the code editor. It indexes your entire local codebase, enabling it to provide context-aware answers, generate code based on your existing files, and perform actions across your project—capabilities that a standard web-based chatbot cannot offer.
Cursor offers a ‘Privacy Mode’ that does not store or train on your code snippets. For enterprise-level security, they recommend using your own API keys from providers like Azure OpenAI, which ensures your data is handled according to your organization’s security protocols. This is a key part of the integration strategy we define in our AI Roadmap service.
No. AI-assisted software engineering tools are designed to augment, not replace, developer expertise. They are powerful assistants that handle repetitive tasks and provide suggestions, but they still require the critical thinking, architectural vision, and oversight of experienced engineers to build robust and scalable applications. Their primary benefit is amplifying the productivity of your entire team.
Unlock Your Engineering Team's Potential
This is more than just a blog post. It’s an invitation to transform how your team builds software. Apply for a select number of one-on-one AI Enablement coaching sessions with our AI Studio.