Can AI Build a Juejin Clone? My Hands‑On Experience with Cursor

Initial Project

I captured a screenshot of the Juejin homepage (saved as screenshot.png) and asked Cursor: "I want to copy a site like Juejin; the screenshot is @screenshot.png. Please create a React+Vite project with the initial framework."

❝ I want to copy a site like Juejin; the screenshot is @screenshot.png. Please create a React+Vite project with the initial framework. ❞

Cursor quickly generated several files. I accepted all suggestions (the README and prompt files remained empty).

The project failed to start, so I asked Cursor for a start method.

❝ The project cannot start, please provide a way to launch it. ❞

Cursor responded by creating vite.config.ts and package.json and suggested the following commands:

# Install basic dependencies
npm install react react-dom react-router-dom

# Install development dependencies
npm install -D @types/react @types/react-dom @types/styled-components @vitejs/plugin-react vite typescript

# Install UI components and style dependencies
npm install antd @ant-design/icons styled-components

I ran npm run dev and opened http://localhost:5173/, but the browser reported "cannot find localhost". I prompted Cursor again.

❝ Opening http://localhost:5173 shows "cannot find localhost". ❞

Cursor adjusted the dependency versions in package.json and told me to reinstall:

# Delete old dependencies
rm -rf node_modules package-lock.json

# Reinstall dependencies
npm install

After reinstalling, the page still did not load. I asked for further help.

❝ VITE v5.4.14 ready in 87 ms → Local: http://localhost:8080/ … but I still cannot open the page. ❞

Cursor then created src/main.tsx and updated vite.config.ts. Running npm run dev finally started the project successfully.

I saved the code and asked Cursor to generate a .gitignore file.

Top Navigation Bar

Using the original screenshot as reference, I asked Cursor to build the top navigation bar with the following items: left‑side menu (Home, AI Coding, Boiling Point, Courses, Live, Events, AI Test, APP, Plugins), a search box with placeholder "搜索稀土掘金", a Creator Center dropdown, a Membership icon, a message bell showing 99 unread, and a user avatar.

❝ Help me complete the top navigation bar. The left menu items are: "首页" (selected), "AI Coding", "沸点", "课程", "直播", "活动", "AI 测题", "APP", "插件". Include a search box, Creator Center dropdown, Membership icon, message bell with 99 unread, and user avatar. ❞

Cursor modified the Header component, but the layout needed adjustments.

After a few more prompts to fix style issues, the navigation bar matched the original design.

Side Menu

I instructed Cursor to build the left‑side menu. The first item "关注" shows a red dot, the second "综合" is selected by default, and the remaining items are loaded from a mock API ( query_category_briefs.json) displaying the category_name. The last item is "排行榜". Hovering highlights the item in blue, and clicking changes the selected state.

❝ Build the left menu: "关注" with a red dot, "综合" selected, then load items from @query_category_briefs.json showing category_name , and end with "排行榜". Add hover blue highlight and click selection. ❞

Cursor generated the component and mock data, but the width and selected‑item background needed refinement. After two more rounds of prompts, the menu looked perfect.

Article List

The core part of the page is the article list, fetched from a mock recommend_all_feed.json. I asked Cursor to create two tabs – "推荐" (default) and "最新" – that refresh the list on click. Each article item shows title, brief, author, view count (formatted as 1.3k), digg count, tags, and an optional cover image. Infinite scrolling loads more items when reaching the bottom.

❝ Implement an article list with tabs "推荐" and "最新" (default "推荐"). Data comes from @recommend_all_feed.json via a mock API. Each item shows title, brief, author, view count (e.g., 1.3k), digg count, tags, and cover image if present. Add infinite scroll. ❞

After a single round of fixing a console error, the list rendered correctly with infinite loading.

Further tweaks fixed missing images, adjusted card height to 100 px, set tab height to 50 px, and added a blue underline under the selected tab.

Right Sidebar

The right sidebar (260 px wide) contains a sign‑in module, an article ranking list, and an advertisement image.

❝ Implement the right sidebar: fixed width 260 px, with a sign‑in module, article ranking, and an ad image (URL provided). ❞

Additional prompts refined the sign‑in component, the article ranking (showing top 5, with a "换一换" button to load the next batch), the author ranking, and a recommended topics widget that formats hot numbers (e.g., 14.4m, 230k).

Overall Layout Optimization

I adjusted the page dimensions: article list width 720 px, side menu 180 px, and 20 px gaps between sections. The top navigation font size was set to 14 px, selected items appear blue, and the "AI Coding" tab shows a red "NEW" badge.

Final Thoughts

The whole process took about five hours. AI was very effective at generating logic (e.g., infinite scroll, data formatting) but required detailed prompts for precise styling. When the AI struggled, restarting the conversation helped. The experience shows that AI coding assistants can rapidly prototype complex front‑end pages, though fine‑grained visual fidelity still needs human guidance.

Full source code is available at github.com/idonteatcoo… .