feat(baoyu-article-illustrator): add macaron style with soft pastel color blocks
This commit is contained in:
Jim Liu 宝玉
parent
94eab2de63
commit
15508eae43
|
|
@ -512,6 +512,7 @@ Smart article illustration skill with Type × Style two-dimension approach. Anal
|
|||
| `watercolor` | Soft artistic with natural warmth | Lifestyle, travel, creative |
|
||||
| `editorial` | Magazine-style infographic | Tech explainers, journalism |
|
||||
| `scientific` | Academic precise diagrams | Biology, chemistry, technical |
|
||||
| `macaron` | Soft macaron pastel blocks on warm cream | Educational, knowledge, tutorials |
|
||||
|
||||
**Style Previews**:
|
||||
|
||||
|
|
|
|||
|
|
@ -512,6 +512,7 @@ clawhub install baoyu-markdown-to-html
|
|||
| `watercolor` | 柔和艺术感、自然温暖 | 生活方式、旅行、创意 |
|
||||
| `editorial` | 杂志风格信息图 | 科技解说、新闻 |
|
||||
| `scientific` | 学术精确图表 | 生物、化学、技术 |
|
||||
| `macaron` | 马卡龙柔和色块、暖白底色 | 教育、知识分享、教程 |
|
||||
|
||||
**风格预览**：
|
||||
|
||||
|
|
|
|||
|
|
@ -264,6 +264,37 @@ STYLE: [style characteristics]
|
|||
ASPECT: 16:9
|
||||
```
|
||||
|
||||
### Macaron Style Instructions
|
||||
|
||||
When `style: macaron`, add these style instructions:
|
||||
|
||||
```
|
||||
Educational infographic with soft macaron pastel color blocks on warm cream paper.
|
||||
COLORS: Warm Cream background (#F5F0E8), Macaron Blue (#A8D8EA), Macaron Mint (#B5E5CF),
|
||||
Macaron Lavender (#D5C6E0), Macaron Peach (#FFD5C2), Coral Red (#E8655A) for emphasis,
|
||||
Deep Charcoal (#2D2D2D) text, Warm Gray (#6B6B6B) annotations
|
||||
CONTAINERS: Rounded cards, bubbles, dashed-box frames with pastel fills to separate info zones
|
||||
TYPOGRAPHY: Bold large title, bold keywords, smaller muted annotations
|
||||
STRUCTURE: Auto-select best layout for content (flow→arrows, compare→columns, cycle→ring, cards→grid)
|
||||
BOTTOM: Bold summary quote at bottom capturing core insight
|
||||
```
|
||||
|
||||
**Infographic + macaron**:
|
||||
```
|
||||
Educational infographic on warm cream paper (#F5F0E8). Soft macaron pastel blocks as info zones.
|
||||
COLORS: Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2),
|
||||
Coral Red (#E8655A) for key data, Deep Charcoal (#2D2D2D) text
|
||||
ELEMENTS: Rounded-corner cards with pastel fills, clear labels, bold title, summary quote at bottom
|
||||
```
|
||||
|
||||
**Flowchart + macaron**:
|
||||
```
|
||||
Process flow on warm cream paper (#F5F0E8). Each step in a macaron pastel card.
|
||||
COLORS: Steps alternate Macaron Blue (#A8D8EA), Mint (#B5E5CF), Lavender (#D5C6E0), Peach (#FFD5C2),
|
||||
Coral Red (#E8655A) for decision points, Deep Charcoal (#2D2D2D) outlines
|
||||
ELEMENTS: Rounded step containers, soft arrow connectors, bold step labels
|
||||
```
|
||||
|
||||
### Screen-Print Style Override
|
||||
|
||||
When `style: screen-print`, replace standard style instructions with:
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
| `tutorial` | `flowchart` | `vector-illustration` | Step-by-step tutorials, setup guides |
|
||||
| `process-flow` | `flowchart` | `notion` | Workflow documentation, onboarding flows |
|
||||
| `warm-knowledge` | `infographic` | `vector-illustration` (warm palette) | Product showcases, team intros, feature cards, brand content |
|
||||
| `edu-visual` | `infographic` | `macaron` | Knowledge summaries, concept explainers, educational articles |
|
||||
|
||||
### Data & Analysis
|
||||
|
||||
|
|
@ -55,14 +56,14 @@ Use this table during Step 3 to recommend presets based on Step 2 content analys
|
|||
| Content Type (Step 2) | Primary Preset | Alternatives |
|
||||
|------------------------|----------------|--------------|
|
||||
| Technical | `tech-explainer` | `system-design`, `architecture` |
|
||||
| Tutorial | `tutorial` | `process-flow`, `knowledge-base` |
|
||||
| Tutorial | `tutorial` | `process-flow`, `knowledge-base`, `edu-visual` |
|
||||
| Methodology / Framework | `system-design` | `architecture`, `process-flow` |
|
||||
| Data / Metrics | `data-report` | `versus`, `tech-explainer` |
|
||||
| Comparison / Review | `versus` | `business-compare`, `editorial-poster` |
|
||||
| Narrative / Personal | `storytelling` | `lifestyle`, `evolution` |
|
||||
| Opinion / Editorial | `opinion-piece` | `cinematic`, `editorial-poster` |
|
||||
| Historical / Timeline | `history` | `evolution` |
|
||||
| Academic / Research | `science-paper` | `tech-explainer`, `data-report` |
|
||||
| Academic / Research | `science-paper` | `tech-explainer`, `data-report`, `edu-visual` |
|
||||
| SaaS / Product | `saas-guide` | `knowledge-base`, `process-flow`, `warm-knowledge` |
|
||||
|
||||
## Override Examples
|
||||
|
|
|
|||
|
|
@ -43,20 +43,21 @@ Use Core Styles for most cases. See full Style Gallery below for granular contro
|
|||
| `sketch` | Raw pencil notebook style | Brainstorming, creative exploration |
|
||||
| `screen-print` | Bold poster art, halftone textures, limited colors | Opinion, editorial, cultural, cinematic |
|
||||
| `sketch-notes` | Soft hand-drawn warm notes | Educational, warm notes |
|
||||
| `macaron` | Soft macaron pastel blocks on warm cream, clean educational layouts | Educational, knowledge, tutorials, concept explainers |
|
||||
| `vintage` | Aged parchment historical | Historical, heritage |
|
||||
|
||||
Full specifications: `references/styles/<style>.md`
|
||||
|
||||
## Type × Style Compatibility Matrix
|
||||
|
||||
| | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ |
|
||||
| scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ |
|
||||
| flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ |
|
||||
| comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ |
|
||||
| timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ |
|
||||
| | vector-illustration | notion | warm | minimal | blueprint | watercolor | elegant | editorial | scientific | screen-print | macaron |
|
||||
|---|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|
|
||||
| infographic | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓✓ |
|
||||
| scene | ✓ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ | ✓ | ✓ | ✗ | ✓✓ | ✓ |
|
||||
| flowchart | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✗ | ✓ | ✓✓ | ✓ | ✗ | ✓✓ |
|
||||
| comparison | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓✓ |
|
||||
| framework | ✓✓ | ✓✓ | ✓ | ✓✓ | ✓✓ | ✗ | ✓✓ | ✓ | ✓✓ | ✓ | ✓✓ |
|
||||
| timeline | ✓ | ✓✓ | ✓ | ✓ | ✓ | ✓✓ | ✓✓ | ✓✓ | ✓ | ✓ | ✓ |
|
||||
|
||||
✓✓ = highly recommended | ✓ = compatible | ✗ = not recommended
|
||||
|
||||
|
|
@ -76,7 +77,7 @@ Full specifications: `references/styles/<style>.md`
|
|||
| Content Signals | Recommended Type | Recommended Style |
|
||||
|-----------------|------------------|-------------------|
|
||||
| API, metrics, data, comparison, numbers | infographic | blueprint, vector-illustration |
|
||||
| Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion |
|
||||
| Knowledge, concept, tutorial, learning, guide | infographic | vector-illustration, notion, macaron |
|
||||
| Tech, AI, programming, development, code | infographic | vector-illustration, blueprint |
|
||||
| How-to, steps, workflow, process, tutorial | flowchart | vector-illustration, notion |
|
||||
| Framework, model, architecture, principles | framework | blueprint, vector-illustration |
|
||||
|
|
@ -200,3 +201,28 @@ Full specifications: `references/styles/<style>.md`
|
|||
- Limited color coding (one color per concept level)
|
||||
- Clean silhouette-based iconography
|
||||
- Poster-style hierarchy with bold typography
|
||||
|
||||
### infographic + macaron
|
||||
- Soft pastel color blocks (blue, mint, lavender, peach) as info zone backgrounds
|
||||
- Warm cream base with clear typography hierarchy
|
||||
- Rounded-corner cards and bubble containers
|
||||
- Coral Red accents for key data and emphasis
|
||||
- Bold summary quote at bottom
|
||||
|
||||
### flowchart + macaron
|
||||
- Each step in a distinct macaron pastel card
|
||||
- Arrow chains connecting pastel containers
|
||||
- Clear progression with color-coded stages
|
||||
- Generous spacing between steps
|
||||
|
||||
### comparison + macaron
|
||||
- Split columns with different pastel fills per side
|
||||
- Soft visual separation, not harsh dividers
|
||||
- Coral Red highlights for key differentiators
|
||||
- Bottom summary capturing the comparison insight
|
||||
|
||||
### framework + macaron
|
||||
- Nodes as rounded pastel-filled cards
|
||||
- Hierarchical or network layout with soft connectors
|
||||
- Each concept level in a different macaron color
|
||||
- Clean labels with bold keywords
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
# macaron
|
||||
|
||||
Soft macaron pastel color blocks on warm cream, clean and readable educational layouts
|
||||
|
||||
## Design Aesthetic
|
||||
|
||||
Clean, approachable infographic style built around soft macaron pastel color blocks as information containers. Each content zone sits on a distinct pastel fill — blue, mint, lavender, or peach — against a warm cream paper background. Emphasis on clarity, information hierarchy, and moderate density. Pairs well with hand-drawn line treatment (optional) or clean flat vector rendering.
|
||||
|
||||
## Background
|
||||
|
||||
- Color: Warm Cream (#F5F0E8)
|
||||
- Texture: Subtle warm paper grain
|
||||
|
||||
## Color Palette
|
||||
|
||||
| Role | Color | Hex | Usage |
|
||||
|------|-------|-----|-------|
|
||||
| Background | Warm Cream | #F5F0E8 | Primary background |
|
||||
| Primary Text | Deep Charcoal | #2D2D2D | Headlines, main text, outlines |
|
||||
| Macaron Blue | Sky Blue | #A8D8EA | Info block fill, cool-toned zones |
|
||||
| Macaron Mint | Mint Green | #B5E5CF | Info block fill, growth/positive zones |
|
||||
| Macaron Lavender | Lavender | #D5C6E0 | Info block fill, abstract/concept zones |
|
||||
| Macaron Peach | Peach | #FFD5C2 | Info block fill, warm-toned zones |
|
||||
| Accent | Coral Red | #E8655A | Key data, warnings, emphasis highlights |
|
||||
| Muted Text | Warm Gray | #6B6B6B | Secondary annotations, small labels |
|
||||
|
||||
## Visual Elements
|
||||
|
||||
- Rounded-corner cards, speech bubbles, and dashed-box frames as content containers
|
||||
- Each container filled with a distinct macaron pastel color
|
||||
- Clear typography hierarchy: bold large title → bold keywords → smaller muted annotations
|
||||
- Bold summary quote at the bottom of the image capturing the core insight
|
||||
- Auto-selected visual structure based on content: flow → arrow chains, compare → split columns, cycle → ring layout, composition → parallel cards, hierarchy → nested containers
|
||||
- Generous whitespace between zones, moderate information density
|
||||
|
||||
## Optional Hand-Drawn Mode
|
||||
|
||||
Can be combined with hand-drawn rendering for a warmer feel:
|
||||
- Slight wobble on lines and shape edges (not perfectly straight)
|
||||
- Simple stick-figure cartoon characters or hand-drawn icons
|
||||
- Color fills that don't completely fill outlines (hand-painted feel)
|
||||
- Doodle decorations: small stars, underlines, arrows
|
||||
|
||||
When not using hand-drawn mode, renders as clean flat shapes with smooth edges.
|
||||
|
||||
## Style Rules
|
||||
|
||||
### Do
|
||||
|
||||
- Use pastel color blocks to visually separate information zones
|
||||
- Maintain clear information hierarchy through typography weight and size
|
||||
- Include a bold summary quote at the bottom
|
||||
- Choose the best visual structure for the content (don't force one layout)
|
||||
- Keep generous whitespace and moderate density
|
||||
- Use Coral Red sparingly for emphasis on key data or warnings
|
||||
|
||||
### Don't
|
||||
|
||||
- Use pure white backgrounds
|
||||
- Overcrowd with too many elements or decorations
|
||||
- Mix too many accent colors beyond the macaron palette
|
||||
- Create dark or moody compositions
|
||||
- Use tiny text that's hard to read
|
||||
|
||||
## Best For
|
||||
|
||||
Educational content, knowledge sharing, concept explainers, tutorials, tech summaries, onboarding materials, visual study notes
|
||||
Loading…
Reference in New Issue