KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #dsh #dsh-plugin #ai-agent #claude-code #codex #typescript #ai-agents #mcp #cli #rust #deepseek-harness

beautiful-feishu-whiteboard

★ 665 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Beautiful Feishu Whiteboard

[中文 README](./README.zh.md)

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

See the [Feishu doc version of this intro](https://bytedance.us.larkoffice.com/docx/AldcdypvjoEqQDxcSVeu37ixs0d) (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`](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

<table>
<tr>
<td width="50%"><a href="templates/avocado-press/"><img src="assets/styles/avocado-press.png" alt="Avocado Press"/></a> <a href="templates/avocado-press/">Avocado Press</a></td>
<td width="50%"><a href="templates/grove/"><img src="assets/styles/grove.png" alt="Grove"/></a> <a href="templates/grove/">Grove</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/jade-lens/"><img src="assets/styles/jade-lens.png" alt="Jade Lens"/></a> <a href="templates/jade-lens/">Jade Lens</a></td>
<td width="50%"><a href="templates/long-table/"><img src="assets/styles/long-table.png" alt="Long Table"/></a> <a href="templates/long-table/">Long Table</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/macchiato/"><img src="assets/styles/macchiato.png" alt="Macchiato"/></a> <a href="templates/macchiato/">Macchiato</a></td>
<td width="50%"><a href="templates/monochrome/"><img src="assets/styles/monochrome.png" alt="Monochrome"/></a> <a href="templates/monochrome/">Monochrome</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/papier-bleu/"><img src="assets/styles/papier-bleu.png" alt="Papier Bleu"/></a> <a href="templates/papier-bleu/">Papier Bleu</a></td>
<td width="50%"><a href="templates/reading-room/"><img src="assets/styles/reading-room.png" alt="Reading Room"/></a> <a href="templates/reading-room/">Reading Room</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/salmon-stamp/"><img src="assets/styles/salmon-stamp.png" alt="Salmon Stamp"/></a> <a href="templates/salmon-stamp/">Salmon Stamp</a></td>
</tr>
</table>

### Balanced

<table>
<tr>
<td width="50%"><a href="templates/apricot-arc/"><img src="assets/styles/apricot-arc.png" alt="Apricot Arc"/></a> <a href="templates/apricot-arc/">Apricot Arc</a></td>
<td width="50%"><a href="templates/berry-pop/"><img src="assets/styles/berry-pop.png" alt="Berry Pop"/></a> <a href="templates/berry-pop/">Berry Pop</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/bold-poster/"><img src="assets/styles/bold-poster.png" alt="Bold Poster"/></a> <a href="templates/bold-poster/">Bold Poster</a></td>
<td width="50%"><a href="templates/checker-bloom/"><img src="assets/styles/checker-bloom.png" alt="Checker Bloom"/></a> <a href="templates/checker-bloom/">Checker Bloom</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/cobalt-bloom/"><img src="assets/styles/cobalt-bloom.png" alt="Cobalt Bloom"/></a> <a href="templates/cobalt-bloom/">Cobalt Bloom</a></td>
<td width="50%"><a href="templates/coral/"><img src="assets/styles/coral.png" alt="Coral"/></a> <a href="templates/coral/">Coral</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/cut-bloom/"><img src="assets/styles/cut-bloom.png" alt="Cut Bloom"/></a> <a href="templates/cut-bloom/">Cut Bloom</a></td>
<td width="50%"><a href="templates/editorial-forest/"><img src="assets/styles/editorial-forest.png" alt="Editorial Forest"/></a> <a href="templates/editorial-forest/">Editorial Forest</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/lime-slab/"><img src="assets/styles/lime-slab.png" alt="Lime Slab"/></a> <a href="templates/lime-slab/">Lime Slab</a></td>
<td width="50%"><a href="templates/linen-cut/"><img src="assets/styles/linen-cut.png" alt="Linen Cut"/></a> <a href="templates/linen-cut/">Linen Cut</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/pin-and-paper/"><img src="assets/styles/pin-and-paper.png" alt="Pin & Paper"/></a> <a href="templates/pin-and-paper/">Pin & Paper</a></td>
<td width="50%"><a href="templates/raw-grid/"><img src="assets/styles/raw-grid.png" alt="Raw Grid"/></a> <a href="templates/raw-grid/">Raw Grid</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/riptide-cobalt/"><img src="assets/styles/riptide-cobalt.png" alt="Riptide Cobalt"/></a> <a href="templates/riptide-cobalt/">Riptide Cobalt</a></td>
<td width="50%"><a href="templates/soft-editorial/"><img src="assets/styles/soft-editorial.png" alt="Soft Editorial"/></a> <a href="templates/soft-editorial/">Soft Editorial</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/violet-marker/"><img src="assets/styles/violet-marker.png" alt="Violet Marker"/></a> <a href="templates/violet-marker/">Violet Marker</a></td>
</tr>
</table>

### Bold

<table>
<tr>
<td width="50%"><a href="templates/block-frame/"><img src="assets/styles/block-frame.png" alt="BlockFrame"/></a> <a href="templates/block-frame/">BlockFrame</a></td>
<td width="50%"><a href="templates/burst-panel/"><img src="assets/styles/burst-panel.png" alt="Burst Panel"/></a> <a href="templates/burst-panel/">Burst Panel</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/confetti-wedge/"><img src="assets/styles/confetti-wedge.png" alt="Confetti Wedge"/></a> <a href="templates/confetti-wedge/">Confetti Wedge</a></td>
<td width="50%"><a href="templates/court-press/"><img src="assets/styles/court-press.png" alt="Court Press"/></a> <a href="templates/court-press/">Court Press</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/crayon-stack/"><img src="assets/styles/crayon-stack.png" alt="Crayon Stack"/></a> <a href="templates/crayon-stack/">Crayon Stack</a></td>
<td width="50%"><a href="templates/grove-block/"><img src="assets/styles/grove-block.png" alt="Grove Block"/></a> <a href="templates/grove-block/">Grove Block</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/mint-brut/"><img src="assets/styles/mint-brut.png" alt="Mint Brut"/></a> <a href="templates/mint-brut/">Mint Brut</a></td>
<td width="50%"><a href="templates/neo-grid-bold/"><img src="assets/styles/neo-grid-bold.png" alt="Neo-Grid Bold"/></a> <a href="templates/neo-grid-bold/">Neo-Grid Bold</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/riso-brut/"><img src="assets/styles/riso-brut.png" alt="Riso Brut"/></a> <a href="templates/riso-brut/">Riso Brut</a></td>
<td width="50%"><a href="templates/specimen-bold/"><img src="assets/styles/specimen-bold.png" alt="Specimen Bold"/></a> <a href="templates/specimen-bold/">Specimen Bold</a></td>
</tr>
<tr>
<td width="50%"><a href="templates/stencil-tablet/"><img src="assets/styles/stencil-tablet.png" alt="Stencil & Tablet"/></a> <a href="templates/stencil-tablet/">Stencil & Tablet</a></td>
</tr>
</table>

---

## 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:

```bash
# 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):

```bash
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:
  ```bash
  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](CATALOG.md), 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/<slug>/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](LICENSE) (c) Zara Zhang ([@zarazhangrui](https://github.com/zarazhangrui))

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

beautiful-feishu-whiteboard

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README