4ad8e7cbec
- git init (分支 main) + remote origin → gitea comi-logic/vtubermini - 根级 .gitignore 排除 node_modules/dist/android-build/releases(APK)/日志/.codex-logs - .gitattributes 用 Git LFS 跟踪 *.png/*.mp4 等媒体(141 个文件) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
71 lines
2.4 KiB
Markdown
71 lines
2.4 KiB
Markdown
# Pencil MVP Design Prompt
|
|
|
|
Create a Pencil `.pen` design file for the VTuber Mini Android app MVP.
|
|
|
|
Use the attached `Product-Spec.md` and `Design-Brief.md` as the source of truth. Use the attached visual reference images from `C:/Users/59719/Desktop/assets` as style references.
|
|
|
|
## Output Scope
|
|
|
|
Create a well-organized Pencil canvas with these sections:
|
|
|
|
1. Design System
|
|
- Color tokens from `Design-Brief.md`
|
|
- Typography examples
|
|
- Core components: glass card, primary button, secondary button, asset pill, tab bar item, progress bar, badge, input, modal container, card thumbnail, product card, anniversary card
|
|
|
|
2. Mobile App Key Screens
|
|
- Login
|
|
- Home
|
|
- Pet Room
|
|
- Mini Game
|
|
- Gacha Pool
|
|
- Gacha Result Modal
|
|
- Card Album
|
|
- Diamond Shop
|
|
- Product Detail
|
|
- Order List
|
|
- Anniversary Page
|
|
- Anniversary Edit Modal
|
|
- My Page
|
|
|
|
3. Admin Workshop Skeleton
|
|
- Admin dashboard
|
|
- User/asset management
|
|
- Card pool management
|
|
- Shop/order management
|
|
- Anniversary configuration
|
|
|
|
## Visual Direction
|
|
|
|
Follow the user-provided assets:
|
|
|
|
- Home: deep blue immersive scene, glowing icons, character focus, particles, flower petals.
|
|
- Secondary pages: moon-white and crystal-blue glass UI, soft rose decoration, readable content containers.
|
|
- Components: glassmorphism, blue glow, rose-gold accents for VIP/SSR/anniversary.
|
|
- Keep text and key numbers readable. Do not place important text directly on low-contrast transparent areas.
|
|
- Use realistic Chinese content, not Lorem ipsum.
|
|
|
|
## Required Screen Size
|
|
|
|
Use Android mobile frames around 390 x 844 or 393 x 852 for app screens.
|
|
Use desktop frames around 1440 x 900 for admin workshop screens.
|
|
|
|
## Important Constraints
|
|
|
|
- Do not create payment/recharge UI.
|
|
- Do not create user trading/withdrawal UI.
|
|
- Gacha screens must show probability/rules entry, cost, pity progress, and duplicate card handling.
|
|
- Shop screens must show stock, diamond price, shipping rule, and after-sales/rules entry.
|
|
- Anniversary screens must distinguish system anniversaries from user custom anniversaries.
|
|
- Pet and mini-game screens must show daily points cap and remaining attempts.
|
|
|
|
## Deliverable Quality
|
|
|
|
The file should be useful for design review and later implementation:
|
|
|
|
- Clear frame names.
|
|
- Reusable component section.
|
|
- Page frames aligned in a grid.
|
|
- Consistent colors and typography.
|
|
- Include key empty/error/loading state callouts where space allows.
|