← Open Source
zarazhangrui

beautiful-feishu-whiteboard

35 curated colour palette styles for building beautiful, editable Feishu / Lark (飞书) whiteboards. An agent skill.

AI EngineeringGive agent knowledgePrompt & ScaffoldShell
Open on GitHub
Momentum
+2stars in 24 hours+0.3%
760
Stars
50
Forks
+12
This week
1
Contributors
Created 2026-06-01 · Updated 2026-10-12 · #3939 today
Top developers
README

Beautiful Feishu Whiteboard

中文 README

A library of 35 curated colour palette styles for building gorgeous, editable Feishu / Lark (飞书) whiteboards.

See the Feishu doc version of this intro (with usage-scenario showcases).

This is an agent skill (for Claude Code and other agents that read SKILL.md). It is not an auto layout chart tool. Your agent composes the layout, and these templates give it a tasteful colour palette and mood plus the whiteboard medium's hard rendering rules. The result is a real, editable Feishu whiteboard inside a doc, not a screenshot.

Built from hard won, on board verified knowledge of what the Feishu SVG whiteboard renderer can and cannot do (native shapes only, no opacity, the text colour export quirk, and more), all captured in RULES.md.

Gallery

Every style renders the same content, the three stages of LLM training, so you can compare palettes directly. The 35 styles are grouped from restrained to bold. Click a name to open its template.

Restrained

Avocado Press
Avocado Press

Grove
Grove

Jade Lens
Jade Lens

Long Table
Long Table

Macchiato
Macchiato

Monochrome
Monochrome

Papier Bleu
Papier Bleu

Reading Room
Reading Room

Salmon Stamp
Salmon Stamp

Balanced

Apricot Arc
Apricot Arc

Berry Pop
Berry Pop

Bold Poster
Bold Poster

Checker Bloom
Checker Bloom

Cobalt Bloom
Cobalt Bloom

Coral
Coral

Cut Bloom
Cut Bloom

Editorial Forest
Editorial Forest

Lime Slab
Lime Slab

Linen Cut
Linen Cut

Pin & Paper
Pin & Paper

Raw Grid
Raw Grid

Riptide Cobalt
Riptide Cobalt

Soft Editorial
Soft Editorial

Violet Marker
Violet Marker

Bold

BlockFrame
BlockFrame

Burst Panel
Burst Panel

Confetti Wedge
Confetti Wedge

Court Press
Court Press

Crayon Stack
Crayon Stack

Grove Block
Grove Block

Mint Brut
Mint Brut

Neo-Grid Bold
Neo-Grid Bold

Riso Brut
Riso Brut

Specimen Bold
Specimen Bold

Stencil & Tablet
Stencil & Tablet


Install

Tell your agent (Claude Code, etc.):

"Install the beautiful-feishu-whiteboard skill from github.com/zarazhangrui/beautiful-feishu-whiteboard."

Or run the installer yourself:

# project level (./.claude/skills or your agent's skills dir)
npx skills add zarazhangrui/beautiful-feishu-whiteboard

# or globally (available in every project)
npx skills add zarazhangrui/beautiful-feishu-whiteboard -g

Or install manually (clone into your agent's skills folder):

git clone https://github.com/zarazhangrui/beautiful-feishu-whiteboard \
  ~/.claude/skills/beautiful-feishu-whiteboard

Requirements

  • Node.js 20 or newer
  • A Feishu / Lark account. Boards are written into your own tenant.
  • lark-cli (npm @larksuite/cli), installed and authenticated:
    npm install -g @larksuite/cli
    lark-cli config init     # first run: scan the QR code
    lark-cli auth login      # authorize your Feishu/Lark account
    
  • @larksuite/whiteboard-cli, used via npx, downloads automatically, no install needed.

Run the bundled check any time: bash scripts/preflight.sh

Use it

Once installed, just ask your agent in plain language. You can name a style or describe a vibe:

  • "Make a Feishu whiteboard explaining our onboarding flow, in the Riso Brut style."
  • "Turn this doc into a visual board in Feishu, minimal cobalt look."
  • "Draw the system architecture as a Feishu whiteboard, playful candy colours."
  • "Explain the 3 LLM training stages as a board."

Your agent will: ask what the board is for and what vibe you want, pick a fitting style from the catalogue, compose the diagram with native shapes, render it and self correct (overflow, margins, overlaps), write it into a Feishu doc as an editable whiteboard, then send you both the doc link and the image. You can switch to a different style any time.

How it works

  • SKILL.md: the agent entry point. When to use, the preflight, and the conversation flow (understand the board, ask the vibe, pick a style, build, deliver the link and image, offer to switch).
  • CATALOG.md: every style with its vibe, formality level, and what it is good for, so the agent can pick a style that fits the content.
  • RULES.md: the medium's hard limits (native shapes only, no opacity, no gradients or blur, the text colour export caveat) and the exact lark-cli and whiteboard-cli commands.
  • templates//design.md: one per style, just the palette and how to use its colours. The agent is free to lay out the content however reads best; the template only constrains colour and mood.

License

MIT (c) Zara Zhang (@zarazhangrui)

Built on Feishu/Lark's @larksuite/cli and @larksuite/whiteboard-cli.