How AI‑Powered Cursor Delivered a Full‑Stack Frontend Feature for Red‑Packet Sign‑In

Background

The AI coding assistant Cursor was used to deliver the front‑end of a “single‑product rebate” feature on a red‑packet sign‑in page. The server side was out of scope; the focus was on UI, animation, feed insertion, and state handling.

Requirement

Show a POP on the homepage with a pre‑animation, transition to the POP, and a closing animation that folds the POP into the second‑row product slot.

Display single‑product and multi‑product cards in the homepage Feeds, with de‑duplication between the POP and Feeds.

Step 1 – Requirement Clarification

From the PRD and design drafts the team extracted the exact functional points and identified the affected front‑end repositories: hbqd5 (legacy homepage), qd (new homepage), and order-withdraw-feeds (sub‑feature). When the codebase was unfamiliar, Cursor was asked to summarise the project structure.

Step 2 – AI‑Generated Execution Plan

Using Cursor’s plan mode, the clarified requirements were fed to generate a step‑by‑step implementation plan. The plan was iteratively reviewed and refined with the developers to ensure feasibility before coding.

Step 3 – AI‑Driven Code Generation

Cursor produced the initial framework:

A Popup component that embeds a Lottie animation.

A fly‑in animation that moves the POP into the second‑row product slot after the user closes it.

Feeds insertion logic that supports both single‑product and multi‑product cards and performs de‑duplication with the POP.

Step 4 – Testing, Styling, and Interaction Refinement

Visual testing revealed three categories of bugs:

Pre‑load logic did not match the actual behaviour, causing delayed feed loading.

Animation z-index conflicts blocked click events on underlying components.

Component state was lost on navigation‑triggered remounts, leading to duplicate network requests.

Fixes applied:

Set explicit z-index values for the Lottie animation ( z-index:1) and POP ( z-index: higher) to ensure clickability.

Lifted the feed request state to a parent component so that it persists across navigation.

Consolidated loading flags into a single state variable (e.g., feedsLoaded) and triggered the second‑page request only after the first page completed.

Step 5 – Visual Acceptance and Logging

After visual QA, screenshots were compared with design mock‑ups. The product designer supplied logging requirements; Cursor added the corresponding analytics calls (e.g., logEvent('popup_show'), logEvent('feed_loaded')) and the logs were verified on the analytics platform.

Key Technical Insights

AI can rapidly scaffold components (POP, Lottie integration, fly‑in animation) but developers must verify assumptions about the existing UI stack (CSS positioning, state management).

When using animations that overlay other elements, always define clear stacking contexts to avoid event‑blocking.

For feeds that depend on dynamic de‑duplication, keep the exposure list in a shared parent state and pass it down as props.

Pre‑load logic should wait for the first page request to finish before issuing the second‑page request; otherwise, CSR environments may skip the pre‑load.