INDEXNINE BLOG
Beyond Autocomplete: When AI Meets UI to Supercharge Software Engineering (about Cursor AI)
Developer productivity isn’t just a metric; it’s the engine of your company’s growth. Every hour saved on boilerplate code, context switching, and documentation 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 the demos that suggest 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. The productivity growth comes from moving beyond simple, stateless autocomplete and embracing AI-assisted software engineering as a holistic approach 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. Then we guide startups and enterprises to harness these powerful tools, avoid the common pitfalls, and create a force-multiplying effect on their engineering teams. This is where our AI Enablement services provide a strategic advantage. Enter Cursor AI, an AI-first code editor that is redefining what’s possible in UI development. But simply adopting a new tool is not a strategy.
The big questions we wanted to answer: Is Cursor ready to streamline UI development? How do we integrate it to create a measurable impact on velocity, quality, and innovation? Does it live up to all the hype?
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.This is where our
AI Enablement services provide a strategic advantage.
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
To put it to the test, we picked a moderately complex & common 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 Good, the Glitchy, and the Fixable
Here’s what we found:
- Quickly generate a lot of code. Reviewing multiple components simultaneously can be challenging, potentially leading to the oversight of unnecessary code. E.g., for the UI screen above, Cursor generated 8 components & around 1000 lines of code. This would be great if everything was taken care of—but it invariably misses small things (like a redundant icon or unnecessary prop), making large code 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, in the dashboard screen we worked on, it recreated similar markup for each card directly within the DashboardMain component instead of abstracting them into reusable components. The result? Bloated, harder-to-maintain code.
- Styling often 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.
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 standards11.
These aren’t simple prompts. They are curated instruction sets that teach the AI to understand our specific architectural patterns, coding styles, and testing methodologies. 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 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 proprietary knowledge is how we transform a great tool into a strategic asset.
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’s how we set ourselves up for success:
✅ Step 1: Start With a Solid Foundation
We began by ensuring a consistent, scalable starting point:
- React + TypeScript project scaffolding
- Storybook for isolated UI testing
- .mdc rules set up in .cursor/rules/ for enforcing standards
- Predefined folder structure, like src/components/common, for clarity and reusability
📌 We used a seed-generation prompt in Cursor to scaffold the project with common components like Button, Badge, and Icon.
🛠️ Step 2: Establish Project Rules and Component Registry
To make Cursor work the way we work, we set up a series of .mdc rule files that align with our development standards. Think of these as our AI style guides — each one with a focused role to ensure quality, consistency, and smart automation:
Find Out How?? Book a Training Consultation.
📘 To tackle the challenge of component reusability, we came up with a pretty clever approach. We introduced a components_registry.json — a simple json file that keeps track of all existing shared components. Then, using our component_registry.mdc rule file, we ask Cursor to check this registry before generating anything new. If the component already exists, Cursor reuses it. If it doesn’t, it creates the new component and logs it into the registry for future reference. We thought it was pretty slick
🧩 Step 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.)
- Created base components first (like Tag, Badge, and Icon) before tackling containers
📌 We used this prompt:
“Analyze the attached design. Identify & list all the reusable & common components from that.”
🧱 Step 4: Build Bottom-Up
To keep our codebase clean, reusable, and easy to manage, we took a “small pieces first” approach. Rather than dumping an entire screen design into Cursor, we broke it down into focused, manageable parts.
- Start Small: Feed Cursor isolated designs — a single card, a chart, a stat block — one at a time.
- Go Generic, Stay Reusable: We instructed Cursor to keep these components generic and flexible. That way, we could reuse them across different pages simply by passing props.
- Test in Isolation with Storybook: Each component was tested independently using Storybook. It helped us spot visual bugs early.
- Assemble with Confidence: Once our smaller components were polished and tested, we stitched them together to build something clean, modular, and easy to scale.
- Better Reviews, Better Code: Smaller pieces meant faster and more thorough code reviews.
- Avoid Cursor for Quick Fixes: When it comes to fixing small bugs leave Cursor out of it. It doesn’t fully understand your app’s context or workflows and can easily misinterpret the code and introduce new bugs.
✂️ Step 5: Refactor Before You Commit
Cursor is quick — no doubt about that. 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.
Here’s what we looked out for before merging any PR:
- Redundant markup that bloated the component unnecessarily
- Overuse of inline styles or overly complex class structures
- Missed opportunities for abstraction, where repeated patterns could become reusable components
📌 And before calling it “done,” we’d prompt Cursor with:
“Refactor the component to make it faster & more efficient.”
🚫 Step 6: Treat AI Like a Junior Dev (Because It Kind of Is)
NEVER take its output at face value. Every line of code was reviewed with a critical eye just like we would for a new developer on the team. But what did we catch?
- Unnecessary library imports, especially when existing solutions (like Tailwind) were already in play
- Style tweaks that were close, but not quite there in terms of spacing or visual alignment
- Accessibility gaps, like missing aria labels or improper HTML semantics
It’s not about mistrusting AI — it’s about collaborating with it thoughtfully. When we combined Cursor’s speed with our judgment, we shipped great code, faster.
This was the real secret sauce, building a strategic framework for Cursor use. Don’t make the mistake of allowing every developer to use AI tools in a vacuum. You’ll only cause yourself more pain. What you’ll yield?
Accelerated MVP Development: Your team can build and iterate on features faster, getting your product to market and securing feedback sooner.
- Reduced Onboarding Time: New developers can get up to speed on a complex codebase more quickly by using the AI to explain different parts of the application.
- Improved Code Quality & Consistency: By using the AI to enforce style guides, write tests, and refactor code, you can reduce technical debt and ensure a more maintainable product.
A Dual Approach for Two Types of Innovators
A 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. We teach you not just what the tool does, but how to develop your own “secret sauce” to accelerate your MVP, build with lean resources, 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. You may not have the time or technical foresight to experiment with AI tools yourself. For you, we offer our AI Pods and AI Enablement services. We become your R&D and innovation partner, embedding our expert teams and proven AI-driven frameworks directly into your organization to deliver tangible results and a clear ROI.
A Dual Approach for Two Types of Innovators
We leverage a simple, four-step framework:
Assess:
- We start with an AI Assessment to understand your current development lifecycle, codebase complexity, and business goals. We identify the highest-impact areas where AI tools can provide immediate value.
Strategize:
- We develop a tailored AI Roadmap that defines best practices, prompt engineering guidelines, and clear use cases for your team. This ensures everyone is using the tool consistently to solve the right problems.
Integrate:
- We manage the seamless integration of the tool into your workflow, including configuring it with your specific codebase and providing hands-on training for your developers.
Amplify:
- We provide ongoing support and advanced training to ensure your team is continuously discovering new ways to leverage the tool, turning initial productivity gains into a long-term competitive advantage.
About the Author
This post was written by one of our senior UI Architects, a core member of the Indexnine team since 2015. With nearly a decade of experience in building and scaling complex user interfaces, he has been at the forefront of our internal R&D, leading the charge on experimenting with and productizing AI-assisted development techniques
Unlock Your Engineering Potential: Apply for a Complimentary Coaching Session
This is more than just a blog post. It’s an invitation to our Innovation Studio. For a limited time, we are offering a select number of one-on-one AI Enablement coaching sessions with our author.
This is a no-strings-attached opportunity to receive expert, personalized guidance on how you can leverage tools like Cursor and build a framework for AI-assisted engineering in your organization. BUT seats are extremely limited as Abhijeet is also actively working on client projects.
Frequently Asked Questions (FAQ)
Ready to move beyond autocomplete and build a truly AI-assisted engineering team?
