tiammomo

Implement or review accessible interactive UI patterns such as dialogs, tabs, comboboxes, disclosures, keyboard navigation, and focus management. Use when the user asks for modal, tab, dropdown, command menu, searchable select, accordion, or accessibility fixes in frontend components.

Redesign dashboards, admin panels, workbenches, analytics screens, sidebars, result panels, or multi-column product pages. Use when the user asks to 重做 dashboard, 改版工作台, 优化后台视觉, 做更高级的仪表盘, 重构结果面板, or wants a more polished product UI before full feature work.

Design or refactor dense product UI such as dashboards, tables, result panels, sidebars, filter bars, watchlists, compare views, or multi-panel workbenches. Use when the user asks for dashboard/table/workbench/result-panel/watchlist/filter UX, or when a page has too much data and needs clearer scanability and hierarchy.

Audit or define a design system for a frontend codebase. Use when the user asks to梳理设计系统, 统一组件风格, 做 UI audit, 收敛 token, 规范 typography/spacing/color, 盘点组件变体, or wants a concrete report on visual inconsistency and design debt.

Redesign or polish frontend UI in this repo. Use when the user asks to beautify pages/components, redesign dashboards or workbenches, improve layout/hierarchy/visual polish/motion/branding, or says "改好看", "重设计", "优化界面", "做一个 landing page / dashboard / 工作台". Ground decisions in the bundled online design-pattern references instead of generic AI styling.

Verify frontend behavior locally with browser-based checks. Use when the user asks to test pages, reproduce UI bugs, verify interactions, inspect screenshots, check responsive regressions, or validate flows after frontend changes in this repo.

Create visually strong marketing or landing pages, hero sections, pricing pages, feature pages, launch pages, or concept mockups. Use when the user asks for 落地页, 官网首页, hero 区, 定价页, 产品介绍页, 宣传页, 视觉稿, 高保真页面, or wants a page that feels more branded and memorable than a standard SaaS layout.

Build frontend features in this repo's stack: Next.js App Router, TypeScript, Tailwind, React Query, and Zustand. Use when the user asks to add pages/components/hooks/stores/API wiring, refactor frontend structure, or implement interactions in the current frontend folder.

Use when designing, implementing, or improving ecommerce AI image-generation workflows for product main images, lifestyle scenes, detail-page images, campaign posters, batch variants, task queues, review flows, exports, or generation-state UX. Especially relevant for this project using gpt-image-2, Next.js 16, and FastAPI.

Use when designing ecommerce image-generation UI, prompt templates, visual review rules, platform-ready product images, campaign creatives, detail-page visuals, or quality checks for generated ecommerce images. Focuses on commercial visual standards, trust, product fidelity, and conversion-oriented design.

Use when implementing this project's frontend/backend product UI architecture for ecommerce image generation, especially Next.js 16 frontend pages/components, FastAPI APIs, generation task UX, image galleries, uploads, polling, typed API clients, and integration boundaries.

Use when creating or refining structured prompts, prompt templates, variables, negative constraints, or prompt-building backend logic for ecommerce product image generation with gpt-image-2. Especially for converting product data, assets, image type, visual style, and platform requirements into safe reproducible prompts.