在 Web 前端领域的模型评测与训练语料收集中，“非动效游戏类”的纯前端任务往往更贴近日常业务开发——状态管理、数据筛选、图表绘制、本地存储操作等。这类 Prompt 不仅考察对 HTML/CSS/JS 的掌握，也检验工程组织能力。以下分享 5 条精选的纯前端开发提示词（难度覆盖简单到复杂），均源自真实场景，可直接用于挑战或评测。
1. 个人作品集首页（简单）
Design a personal portfolio homepage: a header with navigation (Home, Projects, Contact), a three-column card grid for project showcases, and a footer. On card hover, only the border color changes to a brand color (#3b82f6) and the background fades to an extremely light gray (no translation, no rotation, no scale). The page must be responsive on mobile (stacked cards) and tablet (two columns). No JavaScript interactions required beyond hover CSS.
考察点：响应式布局（Flex/Grid）、纯 CSS 悬停效果、语义化 HTML。
2. 书籍收藏管理器（中等）
Build a book collection manager with the following features. Data is stored in localStorage. Each book has: title, author, status (unread / in-progress / read). Users can add a new book (form with validation: title and author not empty), delete a book, and filter books by status (radio buttons or dropdown). When adding or deleting, the book list updates immediately (no list animation, just direct DOM replacement). Support sorting by title alphabetically (optional button). Use vanilla HTML/CSS/JS (no frameworks). Hover effects allowed on buttons (only color change). Modal or inline form is acceptable; if modal, no transition animation.
考察点：localStorage 读写、数组 CRUD、状态筛选、无动画原则下的干净交互。
3. 门店销售分析看板（复杂）
Construct a "Store Sales Analysis Dashboard" with the following specifications.
Data source: Hardcode a salesData array in JavaScript containing 40 sales records. Fields: date (YYYY-MM format, from 2025-01 to 2025-06), province (Guangdong / Jiangsu / Zhejiang), city (two or three per province), salesAmount (number between 500 and 5000), storeType (A / B).
Charts (using Chart.js or ECharts, with all animations disabled):
- Bar chart: total sales amount per month (January to June).
- Pie chart: sales amount proportion by storeType (A vs B).
Filters:
- Dropdown for province (All / Guangdong / Jiangsu / Zhejiang).
- A second dropdown for city that updates based on the selected province (includes an "All" option). If province is "All", city dropdown shows "All" only.
- After filtering, both charts and a summary table update synchronously. Chart re-rendering must NOT play any animation.
Summary table: display filtered records as a list (columns: date, province, city, salesAmount, storeType). Support click-to-sort on the salesAmount column (ascending/descending).
Other: No backend, no file upload, no export. Layout clean and charts responsive. All in a single HTML/CSS/JS file.
考察点：多级联动筛选、静态图表数据更新（无动画）、表格排序、纯前端数据处理。
4. 标签页切换 + 本地待办清单（中等偏简单）
Create a to-do list app with tab switching. Use three tabs: "All", "Active", "Completed". Each task has a checkbox and text. Add tasks via an input field and "Add" button. Tasks are stored in localStorage. The tab switch simply hides/shows the corresponding task list via CSS display property (no transition or slide animation). Marking a task as completed moves it to the "Completed" tab view. Allow task deletion with a trash icon (no animation). Buttons can have background color change on hover. No drag-and-drop, no due dates.
考察点：任务状态管理、基于 CSS 的标签页切换（无动画）、localStorage 持久化。
5. 多级联动下拉 + 实时价格计算器（复杂）
Implement a product configuration calculator with three cascading dropdowns: Category → Subcategory → Model. Hardcode the following data:
- Electronics: Subcategories: Laptops, Phones.
- Laptops: Models: "Gamer X1" ($1200), "Ultrabook S2" ($950).
- Phones: Models: "Photo Pro" ($800), "Budget C" ($300).
- Furniture: Subcategories: Chairs, Desks.
- Chairs: Models: "ErgoMesh" ($250), "Basic Stool" ($80).
- Desks: Models: "Standing Desk" ($450), "Compact Table" ($120).
When the user selects a Model, display its price and a quantity input (1-10). Show the total price (price * quantity) in real time as quantity changes. Also display a summary line: "You selected [Model name] - [quantity] pcs = $[total]". No backend, no API, no animation (except button hover effect allowed). Use pure HTML/CSS/JS.
考察点：级联下拉数据联动、动态价格计算、无依赖的 DOM 操作。
以上 5 条 Prompt 均不依赖任何后端、私有 API 或第三方动画库，且完全符合“非 3D 动效游戏”的纯前端定位。你可以将其用于模型评测、个人练习或团队代码挑战。实际抓取时建议保持英文原样，以确保跨场景的通用性。
