Design

Source of truth

Status: Active
Last refreshed: 2026-06-09
Primary product surfaces:
- image-video.html
- src/pages/image-video/ImageVideoPage.vue
Evidence reviewed:
- src/pages/image-video/ImageVideoPage.vue
- src/styles/main.css
- src/styles/tokens.css
- src/components/layout/PageShell.vue
- ../yaoyaoAI/aiclientpureui/src/styles/main.css
- ../yaoyaoAI/aiclientpureui/src/components/dashboard/DashboardCard.vue
- ../yaoyaoAI/aiclientpureui/src/components/workflow/Step02AudioVideo.vue
- ../yaoyaoAI/aiclientpureui/src/components/workflow/Step03VideoEdit.vue

Personality:
- Quiet, tool-oriented, high-density AI workflow workspace
- Dark professional console rather than marketing landing page
Trust signals:
- Structured step cards
- Stable layout grid
- Clear state summaries and output preview areas
Avoid:
- Light hero-page styling
- Decorative floating cards wrapped inside larger cards
- Tailwind or PrimeVue-specific visual copies that do not fit Element Plus

Goals:
- Add a real 带货视频 module inside frontend-vue
- Put 视频复刻 and 图生视频 on one page with tab switching
- Match the visual tone of aiclientpureui
- Extract reusable workflow components for future media modules
Non-goals:
- Backend API integration in this phase
- Rebuilding the entire aiclientpureui navigation shell
Success signals:
- The page is screenshot-ready
- Form sections are organized and legible at desktop widths
- Shared components are reusable beyond this one page

Primary personas:
- Internal operators creating or editing commerce videos
- Content operations staff iterating scripts, scenes, and avatars quickly
User jobs:
- Upload source material
- Configure video generation parameters
- Adjust scene, face, script, and product settings
- Review an output summary before starting generation
Key contexts of use:
- Desktop-heavy internal tool usage
- Repeated daily workflows with dense settings

Primary navigation:
- Keep a lightweight page header with module switch and back link
Core routes/screens:
- image-video.html as the image/video workspace entry
Content hierarchy:
- Page header and module switch
- Delivery-video tabs
- Step-oriented configuration grid
- Preview and submission area

Principle 1:
- Reuse structure, not framework-specific implementation. Port the dashboard/card language from aiclientpureui into Element Plus-native components.
Principle 2:
- Keep the screen directly operable. The first viewport should show the active workflow, not a placeholder entrance.
Tradeoffs:
- Prefer a compact dark console layout over a literal flowchart reconstruction from the requirement images.

Color:
- Deep neutral background with restrained blue-indigo highlights
- High-contrast text, low-contrast secondary copy
Typography:
- Existing sans-serif stack from tokens.css
- Compact section headings and dense form labels
Spacing/layout rhythm:
- 20px to 24px outer spacing
- 16px card padding
- Multi-column grid with stable min widths
Shape/radius/elevation:
- 14px to 18px radii
- Soft border glow, minimal shadow depth
Motion:
- Short hover and focus transitions only
Imagery/iconography:
- Use media preview boxes and upload placeholders
- Avoid decorative illustrations

Existing components to reuse:
- src/components/layout/PageShell.vue
New/changed components:
- Shared dark workflow shell
- Shared module switch
- Shared section card
- Shared choice-pill selector
- Shared asset dropzone / preview block
Variants and states:
- Active/inactive tabs
- Active/inactive pills
- Empty vs selected asset states
- Hover/focus for cards and action buttons
Token/component ownership:
- Theme tokens in src/styles/tokens.css
- Global workflow styles in src/styles/main.css
- Shared components under src/shared/components/ai-workflow/

Target standard:
- Practical keyboard and screen-readable form semantics for internal desktop usage
Keyboard/focus behavior:
- Visible focus ring on pills, buttons, upload areas, and tabs
Contrast/readability:
- Maintain strong foreground/background contrast in dark mode
Screen-reader semantics:
- Preserve labels for upload regions and tab panels
Reduced motion and sensory considerations:
- No large-scale animation

Supported breakpoints/devices:
- Primary target desktop >= 1280px
- Secondary support tablet widths >= 768px
Layout adaptations:
- Collapse multi-column workspace into two columns, then one column
- Preview area stops being sticky on narrow screens
Touch/hover differences:
- Controls remain usable without hover-only affordances

Loading:
- Reserved for future backend integration
Empty:
- Show upload placeholders and muted guidance text
Error:
- Use Element Plus messaging if upload type or action constraints fail
Success:
- Local draft actions can confirm save/export interactions
Disabled:
- Non-active modules appear disabled but visible
Offline/slow network, if applicable:
- Not applicable in the current local-only draft

Tone:
- Direct and operational
Terminology:
- Prefer commerce-video workflow language: 素材, 场景, 人脸, 话术, 产品, 输出
Microcopy rules:
- Short labels
- Guidance belongs in helper text, not long paragraphs

Framework/styling system:
- Vue 3 + TypeScript + Element Plus
Design-token constraints:
- Extend current CSS variables instead of introducing Tailwind
Performance constraints:
- Keep the page static and local-first until API wiring is required
Compatibility constraints:
- Must work within the existing Vite multi-page build
Test/screenshot expectations:
- Build must pass
- Local dev server should render a screenshot-ready page at image-video.html