mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-08-03 23:49:48 +08:00
feat(baoyu-infographic): add retro popup pop style
This commit is contained in:
@@ -39,7 +39,7 @@ Approach content analysis as a **world-class instructional designer**:
|
||||
| **System/Structure** | Components, architecture, anatomy | structural-breakdown, bento-grid | technical-schematic, ikea-manual |
|
||||
| **Journey/Narrative** | Stories, user flows, milestones | winding-roadmap, story-mountain | storybook-watercolor, comic-strip |
|
||||
| **Overview/Summary** | Multiple topics, feature highlights | bento-grid, periodic-table, dense-modules | chalkboard, bold-graphic |
|
||||
| **Product/Buying Guide** | Multi-dimension comparisons, specs, pitfalls | dense-modules | morandi-journal, pop-laboratory, retro-pop-grid |
|
||||
| **Product/Buying Guide** | Multi-dimension comparisons, specs, pitfalls | dense-modules | morandi-journal, pop-laboratory, retro-pop-grid, retro-popup-pop |
|
||||
|
||||
### 2. Learning Objective Identification
|
||||
|
||||
|
||||
@@ -68,5 +68,6 @@ High-density modular layout with 6-7 typed information modules packed with concr
|
||||
- `pop-laboratory`: Technical precision with coordinate markers and blueprint grid
|
||||
- `morandi-journal`: Hand-drawn warmth with doodle illustrations and organic frames
|
||||
- `retro-pop-grid`: 1970s pop art with strict grid cells and bold contrast
|
||||
- `retro-popup-pop`: Vintage desktop popups with chunky pixel UI for retro-tech dense guides
|
||||
- `corporate-memphis`: Clean business feel for product comparisons
|
||||
- `technical-schematic`: Engineering precision for technical product guides
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
# retro-popup-pop
|
||||
|
||||
Retro pixel popup × pop-art collage — content rendered as a stack of 80/90s desktop dialog windows with thick black outlines, flat color fills, and bright cyan or vintage cream backgrounds.
|
||||
|
||||
## Color Palette
|
||||
|
||||
- Background: Bright cyan (#12B8DE) primary canvas, vintage cream (#F5F0E6) alternate
|
||||
- Window fills: Vintage cream (#F5F0E6) and pure white (#FFFFFF)
|
||||
- Primary text and outlines: Pure black (#000000)
|
||||
- Reverse text: Pure white on solid black title bars
|
||||
- Accent fills (small areas only): Salmon pink, sky blue, mustard yellow, mint green — muted retro tones
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- 80s/90s desktop popup windows with title bars, close buttons (×), and chunky borders
|
||||
- Multiple windows tiled or lightly overlapping with offset solid-black drop shadows for depth
|
||||
- ERROR / ALERT / WARNING dialogs to highlight misconceptions, common pitfalls, risks
|
||||
- File-window vignettes labeled with retro filenames (PROBLEMS.EXE, METHOD.PNG, BURNOUT.PSD, FOCUS_SCAN, SYSTEM_ALERT, IDEAS_MISSING)
|
||||
- Progress bars for completion, difficulty, conversion rate, or trend
|
||||
- Pixel-style chunky icons: folders, magnifiers, gears, exclamation marks, floppy disks, hourglasses
|
||||
- Action buttons with thick black borders and short pop-style copy: OK, CANCEL, FIX IT, SCAN, PLAY, RETRY, SAVE
|
||||
- Comparison data rendered as windowed lists or small tabular dialogs
|
||||
- Uniform thick black outlines on every window, button, icon, and divider
|
||||
- Pure 2D flat color fills throughout — no gradients, no glow, no glass
|
||||
|
||||
## Typography
|
||||
|
||||
- Headers: Pixel / dot-matrix / chunky bitmap display fonts, large and high-contrast
|
||||
- Body: Retro monospace or system-style sans-serif, high legibility
|
||||
- Title bars: Reverse white on solid black, all-caps preferred
|
||||
- Decorative all-caps English allowed for filenames, status strings, button labels (PROBLEMS.EXE, OK, CANCEL); body content text remains in the confirmed output language
|
||||
|
||||
## Style Enforcement
|
||||
|
||||
- Every information chunk must live inside a window, dialog, button, or progress bar — no floating elements
|
||||
- Uniform thick black outlines everywhere; offset solid-black drop shadows for stacked-window depth
|
||||
- Limit accent palette to ~4 colors per composition; let cyan or cream dominate the canvas
|
||||
- Maintain low-fi pixel/popup feel; humorous popup copy welcome, polished modern UI prohibited
|
||||
|
||||
## Avoid
|
||||
|
||||
- Modern UI styles: glassmorphism, neumorphism, soft shadows, blurs, gradients
|
||||
- 3D rendering, photorealism, ray-traced shadows
|
||||
- Hand-drawn wobble, watercolor washes, or sketch textures
|
||||
- Smooth anti-aliased curves on icons (prefer chunky pixel/stair-step edges)
|
||||
- Pure black backgrounds — keep cyan or cream as the canvas
|
||||
|
||||
## Best For
|
||||
|
||||
High-density "干货" knowledge guides, common-pitfall and debunking posts, knowledge-pop content for design-savvy or developer audiences, Xiaohongshu-style retro-tech posts, dense-modules portrait infographics.
|
||||
Reference in New Issue
Block a user