| name | beautiful-feishu-card |
| version | 1.1.0 |
| description | Generate modern, elegant, and highly readable Feishu Interactive Cards (Schema 2.0 JSON) wrapped for CardKit (.card). Uses strict design system rules: 12 header color themes, color palette harmony (≤3 main colors), structured layouts (column_set, dividers, callout markdown), interactive preview messaging via lark-cli, and clickable GitHub footer links. |
Beautiful Feishu Card
A design system and workflow skill for building visually stunning, highly readable Feishu Interactive Cards (Schema 2.0 JSON) wrapped in CardKit (.card) format and delivering them via lark-cli.
This skill transforms raw text materials, meeting notes, status reports, or doc links into beautifully formatted interactive cards that look modern, structured, and easy to read.
When to Use
- When asked to create, design, or send a Feishu / Lark interactive card ("做一张飞书卡片", "生成卡片", "把这个通知做成卡片发我").
- When sending summary reports, status updates, announcements, or notifications on Feishu and wanting them to look polished and professional rather than plain text.
- When generating re-usable
.card files for CardKit (Feishu Card Builder).
Core Workflow (5 Steps)
[1. Gather Material] ➔ [2. Design Schema 2.0 Card JSON] ➔ [3. Wrap in .card Format] ➔ [4. Deliver Interactive Card] ➔ [5. Iterate]
Step 1: Gather & Structure Material
- From Doc/Wiki URL: Use
lark-cli docs +fetch --doc "<url>" --doc-format markdown --as user to extract content.
- From Text: Extract title, key points, status indicators, action items, dates, and links.
- Images: If material contains images, download via
lark-cli and upload to IM (/open-apis/im/v1/images) to obtain a valid image_key.
Step 2: Design Card JSON (Schema 2.0)
Follow the design guidelines in references/card-prompt.md and references/card-schema-guide.md:
- Header Theme: Select 1 of 12 header color templates (
blue, wathet, turquoise, green, yellow, orange, red, carmine, violet, purple, indigo, grey) matching the card's tone.
- Visual Hierarchy:
- Header with bold title and clear subtitle.
- Dividers (
hr) between major content blocks.
- Multi-column grids (
column_set) for side-by-side metrics or status pairs.
- Badges & Highlights: Use
<font color='...'>**[ Status ]**</font> in lark_md text blocks.
- Clickable Footer Link: End with
<font color='grey'>💡 Generated by [Beautiful Feishu Card Skill](https://github.com/davidtoby/agent-skills)</font>.
- Hard Rules:
- Schema: Must specify
"schema": "2.0".
- No JSON comments.
- No fake
image_key: Only include img components if a verified image_key is provided.
- No fake
open_url: Only include button / links if valid URLs are provided.
Step 3: Package as .card (CardKit Format)
Wrap the raw Schema 2.0 card JSON (dsl) inside CardKit envelope format:
{
"name": "<Card Title>",
"dsl": {
"schema": "2.0",
"header": { ... },
"body": { ... }
},
"variables": []
}
Step 4: Deliver Interactive Card via lark-cli Bot
Use lark-cli (or the included script scripts/send_card.py) to deliver the Interactive Card Preview to the user:
python3 scripts/send_card.py --card <path.card> --user-id <open_id>
(By default, only the rendered Interactive Card preview is sent directly to the IM chat).
Step 5: Review & Iterate
Check the rendered card in Feishu IM. If typography, colors, or layout need adjustment, edit the .card file and re-send.
File Inventory
