feat: add chalkboard style and xhs-images previews

- Add chalkboard style to baoyu-xhs-images and baoyu-comic
- Update chalkboard style for article-illustrator, cover-image, infographic
- Remove tech style from baoyu-xhs-images
- Add style and layout preview screenshots for xhs-images
- Bump version to 1.9.0

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Jim Liu 宝玉
2026-01-20 21:46:28 -06:00
parent b30dcca67e
commit 3ea311dfed
27 changed files with 322 additions and 82 deletions
@@ -1,56 +1,60 @@
# chalkboard
Classic classroom chalkboard style for educational content
Black chalkboard background with colorful chalk drawing style
## Design Aesthetic
Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines. Colorful chalk creates visual hierarchy while maintaining authentic chalkboard warmth.
Classic classroom chalkboard aesthetic with hand-drawn chalk illustrations. Nostalgic educational feel with imperfect, sketchy lines that capture the warmth of traditional teaching. Colorful chalk creates visual hierarchy while maintaining the authentic chalkboard experience.
## Background
- Color: Chalkboard Black (#1A1A1A) or Dark Green-Black (#1C2B1C)
- Texture: Realistic chalkboard texture with dust and eraser marks
- Texture: Realistic chalkboard texture with subtle scratches, dust particles, and faint eraser marks
## Typography
Hand-drawn chalk lettering style with visible chalk texture. Imperfect baseline adds authenticity. White or bright colored chalk for emphasis.
## Color Palette
| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Background | Chalkboard Black | #1A1A1A | Primary background |
| Alt Background | Green-Black | #1C2B1C | Traditional green |
| Primary | Chalk White | #F5F5F5 | Main elements |
| Accent 1 | Chalk Yellow | #FFE566 | Highlights |
| Alt Background | Green-Black | #1C2B1C | Traditional green board |
| Primary Text | Chalk White | #F5F5F5 | Main text, outlines |
| Accent 1 | Chalk Yellow | #FFE566 | Highlights, emphasis |
| Accent 2 | Chalk Pink | #FF9999 | Secondary highlights |
| Accent 3 | Chalk Blue | #66B3FF | Diagrams, links |
| Accent 4 | Chalk Green | #90EE90 | Success, growth |
| Accent 4 | Chalk Green | #90EE90 | Success, nature |
| Accent 5 | Chalk Orange | #FFB366 | Warnings, energy |
## Visual Elements
- Hand-drawn chalk illustrations
- Chalk dust effects
- Doodles: stars, arrows, underlines
- Mathematical formulas
- Eraser smudges and chalk residue
- Stick figures and icons
- Connection lines with hand feel
- Checkmarks and annotations
- Hand-drawn chalk illustrations with sketchy, imperfect lines
- Chalk dust effects around text and key elements
- Doodles: stars, arrows, underlines, circles, checkmarks
- Mathematical formulas and simple diagrams
- Eraser smudges and chalk residue textures
- Wooden frame border optional
- Stick figures and simple icons
- Connection lines with hand-drawn feel
## Style Rules
### Do
- Maintain chalk texture on all elements
- Use imperfect hand-drawn quality
- Add chalk dust and smudge effects
- Create hierarchy with color
- Include playful annotations
- Maintain authentic chalk texture on all elements
- Use imperfect, hand-drawn quality throughout
- Add subtle chalk dust and smudge effects
- Create visual hierarchy with color variety
- Include playful doodles and annotations
### Don't
- Use perfect geometric shapes
- Create clean digital lines
- Create clean digital-looking lines
- Add photorealistic elements
- Use gradients or gloss
- Use gradients or glossy effects
- Make it look computerized
## Best For