v1.0.0
This commit is contained in:
simple321vip
@@ -0,0 +1,41 @@
|
||||
# bento-grid
|
||||
|
||||
Modular grid layout with varied cell sizes, like a bento box.
|
||||
|
||||
## Structure
|
||||
|
||||
- Grid of rectangular cells
|
||||
- Mixed cell sizes (1x1, 2x1, 1x2, 2x2)
|
||||
- No strict symmetry required
|
||||
- Hero cell for main point
|
||||
- Supporting cells around it
|
||||
|
||||
## Best For
|
||||
|
||||
- Multiple topic overview
|
||||
- Feature highlights
|
||||
- Dashboard summaries
|
||||
- Portfolio displays
|
||||
- Mixed content types
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Clear cell boundaries
|
||||
- Varied cell backgrounds
|
||||
- Icons or illustrations per cell
|
||||
- Consistent padding/margins
|
||||
- Visual hierarchy through size
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Main title at top
|
||||
- Cell titles within each cell
|
||||
- Brief content per cell
|
||||
- Minimal text, maximum visual
|
||||
- CTA or summary in prominent cell
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `craft-handmade`: Friendly overviews (default)
|
||||
- `corporate-memphis`: Business summaries
|
||||
- `pixel-art`: Retro feature grids
|
||||
@@ -0,0 +1,48 @@
|
||||
# binary-comparison
|
||||
|
||||
Side-by-side comparison of two items, states, or concepts.
|
||||
|
||||
## Structure
|
||||
|
||||
- Vertical divider splitting image in half
|
||||
- Left side: Item A / Before / Pro
|
||||
- Right side: Item B / After / Con
|
||||
- Mirrored layout for easy comparison
|
||||
- Clear visual distinction between sides
|
||||
|
||||
## Variants
|
||||
|
||||
| Variant | Focus | Visual Emphasis |
|
||||
|---------|-------|-----------------|
|
||||
| **Before-After** | Transformation over time | Temporal change, improvement |
|
||||
| **A vs B** | Feature comparison | Direct contrast, differences |
|
||||
| **Pro-Con** | Advantages/disadvantages | Balanced evaluation |
|
||||
|
||||
## Best For
|
||||
|
||||
- Before/after transformations
|
||||
- Product or option comparisons
|
||||
- Pros and cons analysis
|
||||
- Old vs new comparisons
|
||||
- Two perspectives on a topic
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Strong vertical dividing line or gradient
|
||||
- Contrasting colors per side
|
||||
- Matching element positions for comparison
|
||||
- VS symbol or divider decoration
|
||||
- Transformation arrow for before-after
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Main title centered at top
|
||||
- Side labels (A/B, Before/After)
|
||||
- Corresponding points aligned horizontally
|
||||
- Summary at bottom if needed
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `corporate-memphis`: Business comparisons
|
||||
- `bold-graphic`: High-contrast dramatic comparisons
|
||||
- `craft-handmade`: Friendly explainers
|
||||
@@ -0,0 +1,41 @@
|
||||
# bridge
|
||||
|
||||
Gap-crossing structure connecting problem to solution or current to future state.
|
||||
|
||||
## Structure
|
||||
|
||||
- Left side: current state/problem
|
||||
- Right side: desired state/solution
|
||||
- Bridge element spanning the gap
|
||||
- Gap representing challenge/obstacle
|
||||
- Bridge elements as steps/methods
|
||||
|
||||
## Best For
|
||||
|
||||
- Problem to solution journeys
|
||||
- Current vs future state
|
||||
- Gap analysis
|
||||
- Transformation bridges
|
||||
- Strategic initiatives
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Two distinct platforms/sides
|
||||
- Visible gap or chasm
|
||||
- Bridge structure with supports
|
||||
- Icons representing each side
|
||||
- Stepping stones or bridge planks
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Left label (From/Problem/Current)
|
||||
- Right label (To/Solution/Future)
|
||||
- Bridge elements labeled
|
||||
- Gap description below
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly journeys
|
||||
- `corporate-memphis`: Business transformations
|
||||
- `isometric-3d`: Technical transitions
|
||||
@@ -0,0 +1,41 @@
|
||||
# circular-flow
|
||||
|
||||
Cyclic process showing continuous or recurring steps.
|
||||
|
||||
## Structure
|
||||
|
||||
- Circular arrangement
|
||||
- Steps around the circle
|
||||
- Arrows showing direction
|
||||
- No clear start/end (continuous)
|
||||
- Center can hold main concept
|
||||
|
||||
## Best For
|
||||
|
||||
- Recurring processes
|
||||
- Feedback loops
|
||||
- Lifecycle stages
|
||||
- Continuous improvement
|
||||
- Natural cycles
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Circle or ring shape
|
||||
- Directional arrows
|
||||
- Step nodes evenly spaced
|
||||
- Icons per step
|
||||
- Optional center element
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Step labels at each node
|
||||
- Brief descriptions near nodes
|
||||
- Center concept if applicable
|
||||
- Cycle name
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly cycles
|
||||
- `corporate-memphis`: Business processes
|
||||
- `subway-map`: Transit-style cycles
|
||||
@@ -0,0 +1,41 @@
|
||||
# comic-strip
|
||||
|
||||
Sequential narrative panels telling a story or explaining a concept.
|
||||
|
||||
## Structure
|
||||
|
||||
- Multiple panels in sequence
|
||||
- Left-to-right, top-to-bottom reading
|
||||
- Characters or subjects in scenes
|
||||
- Speech/thought bubbles
|
||||
- Panel borders clearly defined
|
||||
|
||||
## Best For
|
||||
|
||||
- Storytelling explanations
|
||||
- User journey narratives
|
||||
- Scenario illustrations
|
||||
- Step sequences with context
|
||||
- Before/during/after stories
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Panel frames
|
||||
- Speech and thought bubbles
|
||||
- Sound effects (optional)
|
||||
- Characters with expressions
|
||||
- Scene backgrounds
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Dialogue in speech bubbles
|
||||
- Narration in caption boxes
|
||||
- Sound effects integrated
|
||||
- Panel numbers if needed
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `graphic-novel`: Dramatic narratives
|
||||
- `kawaii`: Cute character stories
|
||||
- `cartoon-hand-drawn`: Friendly explanations
|
||||
@@ -0,0 +1,41 @@
|
||||
# comparison-matrix
|
||||
|
||||
Grid-based multi-factor comparison across multiple items.
|
||||
|
||||
## Structure
|
||||
|
||||
- Table/grid layout
|
||||
- Rows: items being compared
|
||||
- Columns: comparison criteria
|
||||
- Cells: scores, checks, or values
|
||||
- Header row and column clearly marked
|
||||
|
||||
## Best For
|
||||
|
||||
- Product feature comparisons
|
||||
- Tool/software evaluations
|
||||
- Multi-criteria decisions
|
||||
- Specification sheets
|
||||
- Rating comparisons
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Clear grid lines or cell boundaries
|
||||
- Checkmarks, X marks, or scores in cells
|
||||
- Color coding for quick scanning
|
||||
- Icons for criteria categories
|
||||
- Highlight for recommended option
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Item names in first column
|
||||
- Criteria in header row
|
||||
- Brief values in cells
|
||||
- Legend if using symbols
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `corporate-memphis`: Business tool comparisons
|
||||
- `ui-wireframe`: Technical feature matrices
|
||||
- `blueprint`: Specification comparisons
|
||||
@@ -0,0 +1,41 @@
|
||||
# dashboard
|
||||
|
||||
Multi-metric display with charts, numbers, and KPI indicators.
|
||||
|
||||
## Structure
|
||||
|
||||
- Multiple data widgets
|
||||
- Charts, graphs, numbers
|
||||
- Grid or modular layout
|
||||
- Key metrics prominent
|
||||
- Status indicators
|
||||
|
||||
## Best For
|
||||
|
||||
- KPI summaries
|
||||
- Performance metrics
|
||||
- Analytics overviews
|
||||
- Status reports
|
||||
- Data snapshots
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Chart types (bar, line, pie, gauge)
|
||||
- Big numbers for KPIs
|
||||
- Trend arrows (up/down)
|
||||
- Color-coded status (green/red)
|
||||
- Clean data visualization
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Widget titles above each section
|
||||
- Metric labels and values
|
||||
- Units clearly shown
|
||||
- Time period indicated
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `corporate-memphis`: Business dashboards
|
||||
- `ui-wireframe`: Technical dashboards
|
||||
- `cyberpunk-neon`: Futuristic displays
|
||||
@@ -0,0 +1,72 @@
|
||||
# dense-modules
|
||||
|
||||
High-density modular layout with 6-7 typed information modules packed with concrete data.
|
||||
|
||||
## Structure
|
||||
|
||||
- 6-7 distinct modules per image, each serving a specific information function
|
||||
- Every module contains concrete data: brand names, numbers, percentages, parameters
|
||||
- Minimal whitespace—compact spacing prioritized over breathing room
|
||||
- Smaller text acceptable to maximize information density
|
||||
- Each module identified by coordinate label or section marker (e.g., MOD-1, SEC-A)
|
||||
|
||||
## Module Archetypes
|
||||
|
||||
| Module | Purpose | Content Requirements |
|
||||
|--------|---------|---------------------|
|
||||
| **Brand/Selection Array** | Grid of options with recommendations | 4-8 items with icons, names, brief descriptions; highlight "best choice" |
|
||||
| **Specification Scale** | Quality/measurement gauge | 3-5 levels with precise numerical increments, quality indicators (emoji faces, checkmarks) |
|
||||
| **Deep Dive/Detail** | Technical breakdown of key item | Zoom-in callouts, internal components, cross-section or exploded view |
|
||||
| **Scenario Comparison** | Side-by-side use cases | 3-6 scenarios with specific recommendations and data per scenario |
|
||||
| **Identification Tips** | How-to checklist | 3-5 inspection methods: look/test/check/ask format |
|
||||
| **Warning/Pitfall Zone** | Critical mistakes to avoid | 3-5 pitfalls with consequences, 1-2 correct approaches; high visual contrast |
|
||||
| **Quick Reference** | Compact summary | Dense table, one-line summaries, decision flowchart, or key takeaways |
|
||||
|
||||
## Variants
|
||||
|
||||
| Variant | Focus | Visual Emphasis |
|
||||
|---------|-------|-----------------|
|
||||
| **Coordinate-labeled** | Precision and systematicity | Each module has alphanumeric coordinate (A-01, B-05, C-12), ruler/axis markers |
|
||||
| **Grid-cell** | Order and structure | Modules in strict rectangular cells divided by thick lines, Swiss grid feel |
|
||||
| **Free-flowing** | Organic density | Magazine-style layout with dotted frames, varying module sizes, connected by arrows |
|
||||
|
||||
## Best For
|
||||
|
||||
- Product selection guides and buying guides
|
||||
- Multi-dimensional comparison content
|
||||
- Data-rich educational materials
|
||||
- "Avoid pitfalls" / "complete guide" formats
|
||||
- Content targeting platforms like Xiaohongshu with high-density visual requirements
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Module boundary markers (thick lines, dotted frames, or coordinate grids)
|
||||
- Quality indicators per module (emoji faces, checkmarks, crosses, crowns)
|
||||
- Data callout boxes with highlighted numbers
|
||||
- Comparison arrows and progression indicators
|
||||
- Warning/alert visual markers for pitfall modules
|
||||
- Metadata in corners (page numbers, timestamps, small barcodes)
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Main title at top, prominent and impactful
|
||||
- Subtitle with module count ("X大维度全面解析...")
|
||||
- Module headers inside colored badges or labeled frames
|
||||
- Body text compact, multiple columns within modules
|
||||
- Numbers highlighted with accent colors, slightly larger than body text
|
||||
|
||||
## Information Density Rules
|
||||
|
||||
- Every corner should contain useful information or metadata
|
||||
- No decorative-only empty space
|
||||
- Text size may be reduced to fit more content—information over font size
|
||||
- Each module must have specific data points, not generic descriptions
|
||||
- Balance between density and readability: dense but organized
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `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
|
||||
- `corporate-memphis`: Clean business feel for product comparisons
|
||||
- `technical-schematic`: Engineering precision for technical product guides
|
||||
@@ -0,0 +1,41 @@
|
||||
# funnel
|
||||
|
||||
Narrowing stages showing conversion, filtering, or refinement process.
|
||||
|
||||
## Structure
|
||||
|
||||
- Wide top (input/start)
|
||||
- Narrow bottom (output/result)
|
||||
- Horizontal layers for stages
|
||||
- Progressive narrowing
|
||||
- 3-6 stages typically
|
||||
|
||||
## Best For
|
||||
|
||||
- Sales/marketing funnels
|
||||
- Conversion processes
|
||||
- Filtering/selection
|
||||
- Recruitment pipelines
|
||||
- Decision processes
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Funnel shape clearly defined
|
||||
- Distinct colors per stage
|
||||
- Width indicates volume/quantity
|
||||
- Stage icons or symbols
|
||||
- Numbers/percentages per stage
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Stage names inside or beside
|
||||
- Metrics/numbers per stage
|
||||
- Input label at top
|
||||
- Output label at bottom
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `corporate-memphis`: Marketing funnels
|
||||
- `isometric-3d`: Technical pipelines
|
||||
- `cartoon-hand-drawn`: Educational funnels
|
||||
@@ -0,0 +1,48 @@
|
||||
# hierarchical-layers
|
||||
|
||||
Nested layers showing levels of importance, influence, or proximity.
|
||||
|
||||
## Structure
|
||||
|
||||
- Multiple layers from core to periphery
|
||||
- Core/top: most important/central
|
||||
- Outer/bottom: decreasing importance
|
||||
- 3-7 levels typically
|
||||
- Clear boundaries between levels
|
||||
|
||||
## Variants
|
||||
|
||||
| Variant | Shape | Visual Emphasis |
|
||||
|---------|-------|-----------------|
|
||||
| **Pyramid** | Triangle, vertical | Top-down hierarchy, quantity |
|
||||
| **Concentric** | Rings, radial | Center-out influence, proximity |
|
||||
|
||||
## Best For
|
||||
|
||||
- Maslow's hierarchy style concepts
|
||||
- Priority and importance levels
|
||||
- Spheres of influence
|
||||
- Organizational structures
|
||||
- Stakeholder analysis
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Distinct color per level
|
||||
- Icons or illustrations per tier
|
||||
- Size indicates importance/quantity
|
||||
- Labels inside or beside layers
|
||||
- Decorative apex/center element
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top or side
|
||||
- Level names inside each tier
|
||||
- Brief descriptions outside
|
||||
- Quantities or percentages if relevant
|
||||
- Legend for color meanings
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `craft-handmade`: Playful layered concepts
|
||||
- `corporate-memphis`: Business hierarchies
|
||||
- `technical-schematic`: Technical 3D pyramids
|
||||
@@ -0,0 +1,41 @@
|
||||
# hub-spoke
|
||||
|
||||
Central concept with radiating connections to related items.
|
||||
|
||||
## Structure
|
||||
|
||||
- Central hub (main concept)
|
||||
- Spokes radiating outward
|
||||
- Nodes at spoke ends (related concepts)
|
||||
- Even or weighted distribution
|
||||
- Optional secondary connections
|
||||
|
||||
## Best For
|
||||
|
||||
- Central theme with components
|
||||
- Product features around core
|
||||
- Team roles around project
|
||||
- Ecosystem mapping
|
||||
- Mind maps
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Prominent central hub
|
||||
- Clear spoke lines
|
||||
- Consistent node styling
|
||||
- Icons representing each spoke item
|
||||
- Optional grouping colors
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Core concept in center hub
|
||||
- Spoke item labels at nodes
|
||||
- Brief descriptions near nodes
|
||||
- Connection labels on spokes if needed
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly concept maps
|
||||
- `corporate-memphis`: Business ecosystems
|
||||
- `subway-map`: Network-style connections
|
||||
@@ -0,0 +1,41 @@
|
||||
# iceberg
|
||||
|
||||
Surface vs hidden depths, visible vs underlying factors.
|
||||
|
||||
## Structure
|
||||
|
||||
- Waterline dividing visible/hidden
|
||||
- Tip above water (obvious/surface)
|
||||
- Larger mass below (hidden/deep)
|
||||
- Proportional to emphasize hidden depth
|
||||
- Optional layers within underwater section
|
||||
|
||||
## Best For
|
||||
|
||||
- Surface vs root causes
|
||||
- Visible vs invisible work
|
||||
- Symptoms vs underlying issues
|
||||
- Public vs private aspects
|
||||
- Known vs unknown factors
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Clear water/surface line
|
||||
- Above: smaller, brighter
|
||||
- Below: larger, darker/deeper
|
||||
- Wave or water texture
|
||||
- Gradient showing depth
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Surface items above waterline
|
||||
- Hidden items below, larger
|
||||
- Waterline label optional
|
||||
- Depth indicators for layers
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly metaphor
|
||||
- `storybook-watercolor`: Artistic depth
|
||||
- `graphic-novel`: Dramatic revelation
|
||||
@@ -0,0 +1,41 @@
|
||||
# isometric-map
|
||||
|
||||
3D-style spatial layout showing locations, relationships, or journey through space.
|
||||
|
||||
## Structure
|
||||
|
||||
- Isometric 3D perspective
|
||||
- Locations as buildings/landmarks
|
||||
- Paths connecting locations
|
||||
- Spatial relationships visible
|
||||
- Bird's eye view angle
|
||||
|
||||
## Best For
|
||||
|
||||
- Office/campus layouts
|
||||
- City/ecosystem maps
|
||||
- User journey maps
|
||||
- System architecture
|
||||
- Process landscapes
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Consistent isometric angle (30°)
|
||||
- 3D buildings or objects
|
||||
- Pathways and roads
|
||||
- Labels floating above
|
||||
- Mini scenes at locations
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top corner
|
||||
- Location labels above objects
|
||||
- Path labels along routes
|
||||
- Legend for symbols
|
||||
- Scale indicator if relevant
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `isometric-3d`: Clean technical maps
|
||||
- `pixel-art`: Retro game-style maps
|
||||
- `lego-brick`: Playful location maps
|
||||
@@ -0,0 +1,41 @@
|
||||
# jigsaw
|
||||
|
||||
Interlocking puzzle pieces showing how parts fit together.
|
||||
|
||||
## Structure
|
||||
|
||||
- Puzzle pieces that interlock
|
||||
- Each piece represents a component
|
||||
- Connections show relationships
|
||||
- Can be assembled or exploded view
|
||||
- Missing piece highlights gaps
|
||||
|
||||
## Best For
|
||||
|
||||
- Component relationships
|
||||
- Team/skill fit
|
||||
- Strategy pieces
|
||||
- Integration concepts
|
||||
- Completeness assessments
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Classic puzzle piece shapes
|
||||
- Distinct colors per piece
|
||||
- Interlocking edges visible
|
||||
- Icons or labels per piece
|
||||
- Optional missing piece
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Piece labels inside or beside
|
||||
- Connection descriptions
|
||||
- Missing piece explanation
|
||||
- Assembly context
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly integration concepts
|
||||
- `paper-cutout`: Tactile puzzle feel
|
||||
- `corporate-memphis`: Business strategy pieces
|
||||
@@ -0,0 +1,48 @@
|
||||
# linear-progression
|
||||
|
||||
Sequential progression showing steps, timeline, or chronological events.
|
||||
|
||||
## Structure
|
||||
|
||||
- Linear arrangement (horizontal or vertical)
|
||||
- Nodes/markers at key points
|
||||
- Connecting line or path between nodes
|
||||
- Clear start and end points
|
||||
- Directional flow indicators
|
||||
|
||||
## Variants
|
||||
|
||||
| Variant | Focus | Visual Emphasis |
|
||||
|---------|-------|-----------------|
|
||||
| **Timeline** | Chronological events, dates | Time markers, period labels |
|
||||
| **Process** | Action steps, numbered sequence | Step numbers, action icons |
|
||||
|
||||
## Best For
|
||||
|
||||
- Step-by-step tutorials and how-tos
|
||||
- Historical timelines and evolution
|
||||
- Project milestones and roadmaps
|
||||
- Workflow documentation
|
||||
- Onboarding processes
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Numbered steps or date markers
|
||||
- Arrows or connectors showing direction
|
||||
- Icons representing each step/event
|
||||
- Consistent node spacing
|
||||
- Progress indicators optional
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Step/event titles at each node
|
||||
- Brief descriptions below nodes
|
||||
- Dates or numbers clearly visible
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `craft-handmade`: Friendly tutorials and timelines
|
||||
- `ikea-manual`: Clean assembly instructions
|
||||
- `corporate-memphis`: Business process flows
|
||||
- `aged-academia`: Historical discoveries
|
||||
@@ -0,0 +1,41 @@
|
||||
# periodic-table
|
||||
|
||||
Grid of categorized elements with consistent cell formatting.
|
||||
|
||||
## Structure
|
||||
|
||||
- Rectangular grid
|
||||
- Each cell is one element
|
||||
- Color-coded categories
|
||||
- Consistent cell format
|
||||
- Optional grouping gaps
|
||||
|
||||
## Best For
|
||||
|
||||
- Categorized collections
|
||||
- Tool/resource catalogs
|
||||
- Skill matrices
|
||||
- Element collections
|
||||
- Reference guides
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Uniform cell sizes
|
||||
- Category colors
|
||||
- Symbol/abbreviation prominent
|
||||
- Small icon per cell
|
||||
- Category legend
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Cell: symbol, name, brief info
|
||||
- Category names in legend
|
||||
- Optional row/column headers
|
||||
- Footnotes for special cases
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `pop-art`: Vibrant element grids
|
||||
- `pixel-art`: Retro collection displays
|
||||
- `corporate-memphis`: Business tool catalogs
|
||||
@@ -0,0 +1,41 @@
|
||||
# story-mountain
|
||||
|
||||
Plot structure visualization showing rising action, climax, and resolution.
|
||||
|
||||
## Structure
|
||||
|
||||
- Mountain/arc shape
|
||||
- Rising slope (build-up)
|
||||
- Peak (climax)
|
||||
- Falling slope (resolution)
|
||||
- Start and end at base level
|
||||
|
||||
## Best For
|
||||
|
||||
- Narrative structures
|
||||
- Project lifecycles
|
||||
- Tension/release patterns
|
||||
- Emotional journeys
|
||||
- Campaign arcs
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Mountain or arc curve
|
||||
- Points along the path
|
||||
- Climax visually emphasized
|
||||
- Slope steepness meaningful
|
||||
- Base camps or milestones
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Stage labels along path
|
||||
- Climax prominently labeled
|
||||
- Brief descriptions at points
|
||||
- Start/end clearly marked
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `storybook-watercolor`: Narrative journeys
|
||||
- `cartoon-hand-drawn`: Educational plot diagrams
|
||||
- `graphic-novel`: Dramatic story arcs
|
||||
@@ -0,0 +1,48 @@
|
||||
# structural-breakdown
|
||||
|
||||
Internal structure visualization with labeled parts or layers.
|
||||
|
||||
## Structure
|
||||
|
||||
- Central subject (object, system, body)
|
||||
- Parts or layers clearly shown
|
||||
- Labels with callout lines
|
||||
- Exploded or cutaway view
|
||||
- Optional zoomed detail sections
|
||||
|
||||
## Variants
|
||||
|
||||
| Variant | View Type | Visual Emphasis |
|
||||
|---------|-----------|-----------------|
|
||||
| **Exploded** | Parts separated outward | Component relationships |
|
||||
| **Cross-section** | Sliced/cutaway view | Internal layers, composition |
|
||||
|
||||
## Best For
|
||||
|
||||
- Product part breakdowns
|
||||
- Anatomy explanations
|
||||
- System components
|
||||
- Device teardowns
|
||||
- Material composition
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Main subject clearly rendered
|
||||
- Callout lines with dots/arrows
|
||||
- Label boxes at endpoints
|
||||
- Numbered parts optionally
|
||||
- Layer boundaries or separation
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Part/layer labels at callouts
|
||||
- Brief descriptions in boxes
|
||||
- Legend for numbered systems
|
||||
- Depth/thickness if relevant
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `technical-schematic`: Technical schematics
|
||||
- `aged-academia`: Classic anatomical style
|
||||
- `craft-handmade`: Friendly breakdowns
|
||||
@@ -0,0 +1,41 @@
|
||||
# tree-branching
|
||||
|
||||
Hierarchical structure branching from root to leaves, showing categories and subcategories.
|
||||
|
||||
## Structure
|
||||
|
||||
- Root/trunk at top or left
|
||||
- Branches splitting into sub-branches
|
||||
- Leaves as terminal nodes
|
||||
- Clear parent-child relationships
|
||||
- Balanced or organic branching
|
||||
|
||||
## Best For
|
||||
|
||||
- Taxonomies and classifications
|
||||
- Decision trees
|
||||
- Organizational charts
|
||||
- File/folder structures
|
||||
- Family trees
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Connecting lines showing relationships
|
||||
- Nodes at branch points
|
||||
- Icons or labels at each node
|
||||
- Color coding by branch
|
||||
- Visual weight decreasing toward leaves
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Root concept prominently labeled
|
||||
- Branch and leaf labels
|
||||
- Optional descriptions at key nodes
|
||||
- Legend for categories
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly taxonomies
|
||||
- `da-vinci-notebook`: Scientific classifications
|
||||
- `origami`: Geometric tree structures
|
||||
@@ -0,0 +1,41 @@
|
||||
# venn-diagram
|
||||
|
||||
Overlapping circles showing relationships, commonalities, and differences.
|
||||
|
||||
## Structure
|
||||
|
||||
- 2-3 overlapping circles
|
||||
- Each circle is a category/concept
|
||||
- Overlaps show shared elements
|
||||
- Center shows common to all
|
||||
- Unique areas for exclusives
|
||||
|
||||
## Best For
|
||||
|
||||
- Concept relationships
|
||||
- Skill overlaps
|
||||
- Market segments
|
||||
- Comparative analysis
|
||||
- Finding common ground
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Translucent circle fills
|
||||
- Clear overlap regions
|
||||
- Distinct colors per circle
|
||||
- Icons in regions
|
||||
- Boundary labels
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Circle labels outside or on edge
|
||||
- Items in appropriate regions
|
||||
- Overlap region labels
|
||||
- Legend if needed
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `cartoon-hand-drawn`: Friendly concept overlaps
|
||||
- `corporate-memphis`: Business segment analysis
|
||||
- `pop-art`: High-contrast comparisons
|
||||
@@ -0,0 +1,41 @@
|
||||
# winding-roadmap
|
||||
|
||||
Curved path showing journey with milestones and checkpoints.
|
||||
|
||||
## Structure
|
||||
|
||||
- S-curve or winding path
|
||||
- Milestones along the path
|
||||
- Start and destination points
|
||||
- Side elements (obstacles, helpers)
|
||||
- Progress indicators
|
||||
|
||||
## Best For
|
||||
|
||||
- Project roadmaps
|
||||
- Career paths
|
||||
- Customer journeys
|
||||
- Learning paths
|
||||
- Strategy timelines
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Curving road or river
|
||||
- Milestone markers/flags
|
||||
- Scene elements along path
|
||||
- Vehicle/character on journey
|
||||
- Destination landmark
|
||||
|
||||
## Text Placement
|
||||
|
||||
- Title at top
|
||||
- Milestone labels at each point
|
||||
- Path section names
|
||||
- Destination description
|
||||
- Optional timeline indicators
|
||||
|
||||
## Recommended Pairings
|
||||
|
||||
- `storybook-watercolor`: Whimsical journeys
|
||||
- `cartoon-hand-drawn`: Friendly roadmaps
|
||||
- `isometric-3d`: Technical project paths
|
||||
Reference in New Issue
Block a user