I Rebuilt and Redesigned My Rails App’s UI in My Spare Time Using Cursor AI

What used to take months with a team, I knocked out in my free time using AI on a side project

I recently undertook the ambitious task of redesigning a Ruby on Rails application — HiEnergy Rocket — using vanilla ERB templates, Hotwire, Stimulus, and Bootstrap. Remarkably, the entire process took just a few days, whereas typically, such an overhaul might involve months of collaboration between product managers, designers, and frontend engineers. Cursor AI was instrumental in this rapid transformation. Over the past year, the application had accumulated several issues, including inconsistent use of headers, accessibility shortcomings, and design inconsistencies. While these weren’t urgent, due to my workload, I’d been postponing addressing them. Cursor AI made tackling these long-standing issues not only feasible — but fast.

Here’s how Cursor AI dramatically accelerated my Rails application redesign:

Step 1: Build Shared Components First

I began by using Cursor AI to build a set of reusable shared components, including the navbar, alert banners, breadcrumbs, and header. Creating these components as Rails partials ensured consistent structure and styling across the application. It also provided a solid foundation to quickly implement changes across multiple pages, dramatically reducing both complexity and duplication.

Websites look so much better with consistent breadcrumbs and h1 tags

Step 2: Page-by-Page Integration of Shared Components

After building out the shared components, I went through the application page-by-page, using Cursor AI to integrate the navbar, alerts, breadcrumbs, and header where appropriate. This ensured a consistent look and feel across the app. Taking it one page at a time also made it easier to catch edge cases and maintain a high standard of quality throughout the interface. Cursor completed this otherwise cumbersome and repetitive task swiftly, freeing me to focus on further refinements.

Step 3: Comprehensive Bootstrap Refactoring

The most transformative step was instructing Cursor AI to refactor every view exclusively using Bootstrap classes. This not only simplified the HTML structure but also ensured a clean, minimalistic, and cohesive user interface that was fully responsive and easy to maintain.

Rails-Specific Enhancements Achieved with Cursor AI

Cursor AI offered additional Rails-specific benefits, including:

Partial Optimization: Cursor effortlessly identified and consolidated repetitive view code into Rails partials, enhancing readability and maintainability.

Enhanced Rails Helpers: By prompting Cursor AI to use built-in Rails helpers (link_to, form_with, image_tag), the amount of inline HTML was significantly reduced, producing cleaner, more idiomatic Rails code.

Asset Pipeline Integration: Cursor effectively managed the integration of Bootstrap assets within Rails’ asset pipeline, ensuring smooth asset compilation and deployment.

ERB Template Clarity: Cursor streamlined embedded Ruby (ERB) templates, improving readability, simplifying conditional logic, and ensuring better long-term maintainability.

Hotwire and Stimulus Integration: Cursor AI smoothly integrated Hotwire and Stimulus, providing dynamic frontend interactions without complicating the Rails stack.

Tips for Maximizing Cursor AI Effectiveness

Throughout this redesign, I discovered several strategies to make the most out of Cursor AI:

Use Existing Designs as Templates: When satisfied with an existing design, instruct Cursor AI to replicate it across similar views. This ensures consistency and accelerates the development process.

Provide Clear, Specific Instructions: Instead of asking for broad changes, give Cursor targeted instructions like, “move pagination into a shared Rails partial.” This yields precise, manageable results.

Prompt Reuse of Existing Helpers and Partials: Cursor may create unnecessary components if not guided explicitly. Encourage the reuse of existing Rails helpers and partials to prevent redundant code.

Explicitly Specify Rails Best Practices: Clearly instruct Cursor AI to follow Rails conventions, such as using built-in helpers, partials, and the asset pipeline, to maintain code quality.

Thoroughly Review AI-generated Output: Cursor AI can occasionally create random stylesheets or duplicate helpers unintentionally. Reviewing its changes thoroughly is essential. Going file-by-file and creating small, focused pull requests helps manage this effectively and has the added benefit of keeping your context window small, resulting in better AI output.

Try it out, tell me how I did

Key Advantages of Using Cursor AI

Cursor AI excels particularly in frontend refactoring tasks common to Rails applications:

• Efficient Refactoring: Cursor handles repetitive tasks efficiently, significantly cutting manual labor.
• Accessibility Improvements: It quickly identifies and addresses accessibility issues, automatically incorporating necessary attributes such as aria-labels.
• Responsive Design Optimization: Cursor adeptly optimizes views for various device breakpoints, streamlining the traditionally labor-intensive responsive design process.

Common Challenges and Solutions

While powerful, Cursor AI occasionally presented challenges, including:

• Overuse of Decorative Styling: Cursor may add unnecessary styles like borders or shadows. Providing clear instructions to avoid these elements preserves design simplicity.
• Duplication Issues: Cursor sometimes duplicates CSS or components. Regular review and explicit direction to reuse existing code are crucial to minimize duplication.
• Redundant Component Creation: Cursor might overlook existing partials or helpers, creating redundant elements. Explicit guidance to utilize existing components significantly helps maintain a clean codebase.

Final Thoughts

Redesigning my Ruby on Rails application using Bootstrap, vanilla ERB templates, Hotwire, and Stimulus with Cursor AI was a remarkably efficient and successful experience. The results underscored the transformative potential AI has for individual developers and small teams. If you’re considering a similar project, embracing Cursor AI could dramatically reduce both time and effort, making substantial site improvements more accessible than ever.

If you’re managing affiliate programs across multiple networks, try our app — HiEnergy Rocket — to streamline your affiliate marketing efforts within a single, intuitive platform.