@lark-apaas/coding-miaoda-sandbox-skills 0.1.0-dev.b2f659e → 0.1.0-dev.c8cc2b5

package/miaoda/lark-design-prototype/SKILL.md

@@ -0,0 +1,85 @@
+---
+name: lark-design-prototype
+description: 面向飞书 / Lark 风格网页、演示、原型和产品界面的分析、生成、复刻、实现与评审任务，适用于自然语言页面生成、截图或 Figma 还原、Web demo、设计规范提炼和视觉质量检查。作为飞书 UD 页面任务的轻量主入口，稳定产品意图、核心视觉风格、UD 控件样式策略、媒体策略、案例参考权重和质量验证边界，帮助产出具有飞书原生体验的界面。
+---
+
+# Lark Design Prototype
+
+This is the lightweight design entry point for Feishu / Lark UI. It focuses on the parts that most affect style: surfaces, whitespace, radius, borders, typography, UD-style controls, media, and responsive quality. Page structure should be decided by the user goal, Figma / screenshot evidence, the primary product task, and the current composition.
+
+## Usage Principles
+
+1. Understand the source first. For natural-language tasks, write `scope_sketch`; for Figma / screenshot tasks, write `source_layout_evidence`, define `source_viewport_contract`, and do a brief scale calibration from stable source anchors before full implementation.
+2. Then write a lightweight `lark_style_recipe`: style keywords, surfaces, whitespace, radius, boundaries, typography, control style strategy, media strategy, visual restraint, and verification focus.
+3. When the user request is not specific enough, start with the minimum first-pass content set: product identity, primary task, one main visual or primary task area, one main content area, necessary primary actions, and a small set of realistic samples. The first screen usually keeps 2–3 visible content groups, table / list samples stay within 5–8 rows, and card samples stay within 4 items. Do not generate a KPI wall, long list, right-side insights, recent visits, multi-level navigation, or unrelated business modules all at once.
+4. Areas that can be identified as UD system controls must follow Universe Design visual language, interaction states, sizing, and accessibility semantics when generated in React. Button, Input, Select, Tabs, Table, Menu, Dropdown, Drawer, Dialog, Tag, Badge, Avatar, Empty, and similar controls must not degrade into unstyled ordinary `div` elements.
+5. Custom areas are mainly for the page shell, business composition containers, media slots, responsive grids, and one-off content structures. Custom areas should inherit the same UD visual language.
+6. Keep the main content area, sidebar, accent colors, font weights, gradients, surface nesting, base grid, and workspace width restrained. The page body / `main-content` / right content area should prefer white or nearly white `bg-body`. Light gray is only for side navigation, low-emphasis shells, or local backing surfaces. The sidebar background must be written directly as `#f9f9f9`, and the selected sidebar item background must be written directly as `#1f23290d`; during implementation, use these two hex values directly and do not remap them to color tokens, CSS variables, `side-nav-bg`, or `side-nav-item-selected`. Selected sidebar item text uses font weight 500. Layout spacing, padding, gaps, column widths, and container offsets must follow the 4px base grid, reuse page-level spacing variables, and avoid random values. Blue and other accent colors are only for primary actions, links, focus, current state, real status, and a small amount of brand identification. Body text, descriptions, table content, and card descriptions are not bold by default. Avoid multiple nested background fills in the same area. Page UI does not use gradients. The main workspace stretches responsively within the available space after the navigation shell; do not apply a fixed max width to the whole `main-workspace` / `main-content`.
+7. Recognize high-frequency frameworks by scene. When a page needs top navigation, sidebar, quick entry, or Hero, use the framework signatures in `DESIGN.md` to constrain its role, alignment, states, and style. Workspaces, home pages, launch pages, AI assistants, CRM summaries, empty states, and proposal first screens can actively introduce a Hero when the scene needs instant orientation. Do not add one when no signature is matched.
+8. When the page needs icons, use `references/icon-semantics.md` and query the catalog with `node scripts/icon-query.mjs`; page UI icons must be recalled from the catalog and then used in the implementation. Keep icon decisions traceable to catalog `name`, `hash`, family, visual type, and final URL. Catalog retrieval is not only for planning: selected catalog icons must be used in the actual implementation for functional UI icon slots. Do not replace catalog-recalled icons with text characters, emoji, CSS-only glyphs, hand-written SVG, third-party icon libraries, or generated bitmap icons, unless the area is explicitly icon-free or the catalog is unavailable and the fallback is recorded. Detailed rules for remote catalog retrieval, v2 priority, screenshot restoration, source outlined / filled / colorful matching, brand logos, area consistency, and lightweight checks live in `references/icon-semantics.md`.
+9. Media should appear only when needed, but it must not be fully replaced by outlined icons. For Hero, welcome areas, recommended content, product entries, empty states, workspace home pages, and business summaries that need first-glance intent, first decide whether a visual anchor is needed. After a match, first check `references/assets/card-illustration-library.md`, then check UD / product assets. `media_plan` must record `library_lookup`. Use generated imagery only when the library has no semantically suitable asset, the CDN is unavailable, or the slot needs a more specific asset; generation scope is limited to the current media slot.
+10. Case matching only provides inspiration. Cases can help identify mature structures and common risks, but they must not lock module order, page proportions, business content, or component count.
+11. Verification focuses on the user-visible result: whether it feels like a real Feishu product, whether it is readable, scannable, responsive, and operable, and whether it reduces meaningless borders, shadows, accent colors, bold text, and nested backgrounds.
+
+## Workflow
+
+Run helper commands from this skill's directory with Node.js. Explicit `node` invocation also works when package distribution removes executable permissions.
+
+1. **Classify The Task**
+   - Pure analysis / spec output: deliver design text only.
+   - Page generation / Web demo / Figma restoration: continue with React implementation and browser verification.
+   - Small local UI fragment: keep only the style and UD rules relevant to that fragment.
+
+2. **Read The Minimum References**
+   - Overall style: read `DESIGN.md`.
+   - Vague natural-language request: read `references/prompt-expansion.md` to narrow scope and content filling.
+   - Figma / screenshot restoration: read `references/layout-interaction.md` and `references/component-selection.md`; define `source_viewport_contract` and briefly calibrate scale from stable source anchors before implementation.
+   - Page-level visual brief: read `references/visual-brief.md`.
+   - Approval forms, settings forms, detail-edit pages, top bars, right helper rails, or feedback that says the page shell does not feel Feishu / Lark enough: read `references/form-shell-patterns.md`.
+   - Page includes icons: read `references/icon-semantics.md` and use `node scripts/icon-query.mjs --query "<intent keywords>" --limit 3`. The script fetches and verifies the versioned public catalog; `--catalog <catalog.json|url>` may override it. Do not print the full catalog.
+   - Fine-grained token lookup: use `node scripts/token-query.mjs --query "<token name or intent>"`; add `--source keys` only for palette-key auditing. The built-in P0 values in `DESIGN.md` remain the offline baseline.
+   - Case-based inspiration: only when the page type is clearly close, read `references/case-matching.md` and the matching `references/cases/*.md`.
+   - Media or generated imagery: read `references/assets/card-illustration-library.md` and `references/visual-style-prompts.md`.
+   - Pre-delivery check: read `references/design-quality-checklist.md`.
+
+3. **Form The Lightweight Contract**
+   Use the fields in `references/page-contract.md`. Keep only enough detail to drive implementation. Small tasks may omit irrelevant fields. When top navigation, form shells, or right helper rails affect quality, include `top_nav_policy`, `right_rail_policy`, and `emphasis_budget`.
+
+4. **Decide Components And Media**
+   - Write `ud_control_coverage`, recording which visible controls follow UD visual language, states, and semantics.
+   - Write `layout_signature_usage`, recording only matched frameworks such as top navigation, sidebar, quick entry, and Hero.
+   - Write `icon_plan`, recording area-level icon strategy and selected catalog `name`, `hash` / `darkHash`, family, visual type, color semantic, and final URL.
+   - Write `media_decision` and the necessary `media_plan`, explaining whether images are needed, their source, and fallback. Whenever `media_needed: true`, first write `library_lookup`, then decide whether to use `generated_bitmap`.
+
+5. **Implement And Verify**
+   - When controls are needed, generate them in React with UD-like sizing, typography, radius, borders, states, and interaction semantics. When icons are needed, use catalog `description`, `name`, and `hash` according to `references/icon-semantics.md` to generate CDN SVG URLs.
+   - Before opening a browser for simple static HTML deliverables, run `node scripts/verify-static-html.mjs <html-file>` plus any project-native static checks. Add `--sidebar` when the page contains navigation sidebars; content-only helper rails do not require it. Review shadow warnings against their context. Use Browser preview only when the task needs runnable interactions, high-fidelity visual validation, breakpoint proof, screenshot evidence, a local app server, or the user explicitly asks for browser verification.
+   - When Browser preview is needed, prefer compact DOM/layout summaries, resource checks, and console logs before screenshots. Take screenshots only when visual evidence is necessary. If screenshot capture times out once, stop retrying screenshots, keep DOM/resource verification, and report the residual visual risk.
+   - The final response should state the deliverable, verification result, tradeoffs, and remaining risks.
+
+## Lightweight Contract
+
+Contract fields are defined in `references/page-contract.md`. Small tasks keep only 5–8 key fields; page-level, Figma / screenshot, high-fidelity, and runnable demo tasks should add source evidence, UD-style control coverage, media plan, and verification plan.
+
+## Reference Map
+
+- `DESIGN.md`: Feishu style DNA, tokens, base control semantics, whitespace, borders, radius, shadows, media, and framework signatures.
+- `references/page-contract.md`: lightweight contract fields and writing style.
+- `references/component-selection.md`: UD-style control selection, control semantics, and custom fallback.
+- `references/layout-interaction.md`: conversion from Figma / screenshots into responsive product UI.
+- `references/visual-brief.md`: page-level visual goals, composition, and density.
+- `references/form-shell-patterns.md`: approval / settings / detail form shells, top navigation, right helper rails, and emphasis budgets; read only when these regions affect quality.
+- `references/prompt-expansion.md`: scope narrowing and content filling for vague natural-language requests.
+- `references/visual-style-prompts.md`: style prompt fragments and generated-image fallback style.
+- `references/assets/card-illustration-library.md`: asset index for available illustrations, avatars, product images, entry icons, and related media.
+- `scripts/icon-query.mjs`: token-light icon catalog query. Use this instead of printing the full icon catalog.
+- `scripts/token-query.mjs`: token-light semantic or palette token query against versioned public resources.
+- `scripts/verify-static-html.mjs`: token-light pre-browser checks for static HTML deliverables.
+- `references/case-matching.md`, `references/cases/*.md`: low-weight case-based inspiration.
+- `references/color-roles.md`, `references/token-semantics.md`, `references/icon-semantics.md`: read when finer token semantics, sidebar fixed-color exceptions, or icon decisions are needed.
+- `references/restoration-traps.md`: common high-fidelity restoration risks.
+- `references/design-quality-checklist.md`: pre-delivery quality check.
+
+## Delivery Voice
+
+Keep the final answer concise. Explain what you did, where the deliverable is, what you verified, and any remaining risks. Do not output the full long contract unless the user explicitly asks for it.

package/miaoda/lark-design-prototype/references/assets/card-illustration-library.md

@@ -0,0 +1,113 @@
+# Cloud Card Illustration Library Index
+
+This index is used for welcome banners, recommended content, business cards, product entries, empty states, avatars, product images, and important entry icons in workspaces, office home pages, collaboration workspaces, portal aggregation pages, CRM home pages, and sales dashboards. Whenever a page needs illustration or visual assets, match a cloud CDN image URL from this file first, then consider UD illustrations, UD icons, product screenshots, avatar assets, or generated-image capability.
+
+## Accessibility Judgment
+
+- Current images use versioned, content-hashed URLs on the public `lf3-static.bytednsdoc.com` CDN and require no intranet or VPN access.
+- Images can be referenced directly in `<img src="...">`, CSS `background-image`, or an `Image` component.
+- All 28 assets were verified after upload with `HTTP 200`, `content-type: image/png`, cross-origin access, and byte-for-byte SHA-256 matching.
+- For offline delivery or environments that block public network access, copy only the selected asset into the project and record that local fallback in `media_plan`.
+
+## Asset Source
+
+- Source type: cloud CDN URL.
+- Asset format: PNG.
+- Maintenance: no longer require maintaining built-in `assets/card-illustrations/` image files inside the skill, and no longer require copying assets into demo or project asset folders.
+- Usage: pages reference `asset_url` directly. During implementation, keep stable `alt` copy and record tags, URL, dimensions, slot, and semantic match reason in `media_plan`.
+- Protection rules: do not stretch or distort; do not use high-saturation filters or heavy shadows that damage the original feel.
+
+## Matching Flow
+
+1. First write `media_decision` and decide whether the current module needs a visual anchor. Hero, welcome areas, recommended content, product entries, empty states, workspace home pages, and business summaries that carry first-glance explanation should plan a visual anchor by default. Dense data pages, settings pages, audit pages, table-first flows, ordinary metric cards, and pure operation entries can use no image.
+2. When an image is needed, extract keywords from the module title, business object, user task, and media responsibility, then choose the semantically closest asset.
+3. When multiple assets are close, choose by visual expression, graphic ratio, and slot responsibility. Product-interface-like visuals suit business summaries and capability explanations. 3D characters, brand IP, or event atmosphere visuals suit brand banners, welcome areas, and lightweight entries.
+4. When the same area needs multiple illustrations, prefer assets with similar style and same or close ratios. Avoid mixing 3D characters, product screenshots, abstract graphics, and dark event images in one group, which creates visual jumps.
+5. Size and ratio are only adaptation conditions. If the semantics fit but the ratio is imperfect, first adjust the slot, `object-fit`, alignment, and whitespace.
+6. Record a minimal `media_plan`: `library_lookup`, `source_library`, `matched_asset`, `asset_url`, `semantic_match_reason`, `slot`, `handling`, and `fallback`.
+7. `library_lookup` contains at least `searched_keywords`, `candidate_assets`, `decision`, and `reject_reason`. If the library has a semantically close and accessible asset, use the library first and do not generate imagery just for novelty.
+8. Use `generated_bitmap` only when the library lacks a suitable asset, the CDN is inaccessible, or the current slot needs a more specific avatar, product image, data visual, or entry icon.
+
+## Generated-Image Fallback
+
+Generated-image prompts are assembled dynamically from the current slot: page topic, module position, module title / description, visual responsibility, content type, target ratio, and style fragment. Read `references/visual-style-prompts.md` for the style fragment.
+
+Generated content may only be the independent visual element for the current media slot. The theme must match the current module, such as data visual, workflow thumbnail, light illustration, avatar, product image, entry icon, empty-state graphic, or recommendation cover. The style should be polished, minimal, light, and related to Feishu / Lark enterprise products. It may become a local visual focus, but must not overpower the title, main content, or actions. Do not generate a full page UI, complete dashboard, navigation bar, sidebar, table page, button/form combination, or browser shell.
+
+## Slot Suggestions
+
+- `top-cover`: recommended content, news cards, template cards.
+- `left-cover` / `right-cover`: horizontal recommendation cards, business summary cards.
+- `hero-side`: welcome areas, first-screen summaries, AI / data side visuals.
+- `product-entry`: related apps, product entries, and lightweight tool cards.
+- `recommendation-card`: recommended content, templates, knowledge, project materials, and learning entries. Prefer this slot when cards only have title and description, to avoid an entire recommendation group becoming only outlined icons.
+
+Images may use `contain` or `cover`, but do not stretch, distort, crop out the subject, or only reveal a corner. Media slots keep rounded clipping consistent with nearby card structure.
+
+## Asset Catalog
+
+| Tags | Size | Applicable Scenarios | Recommended Role | URL |
+| --- | --- | --- | --- | --- |
+| welcome banner, home workspace, personal greeting, to-do reminder, avatar, female character, 3D cartoon, smiling expression, assistant image, Hi bubble, onboarding, task reminder | 332x200 | Home workspace, welcome area, personal greeting, onboarding, to-do reminder, assistant image | Lightweight visual anchor on the right side of a welcome banner, suitable for a small `hero-side` image placed to the right | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-01-02097d2d.png |
+| plan upgrade, capacity expansion, storage space, recommendation banner, dark background, rocket, file card, membership benefits, SaaS upsell | 720x404 | Plan upgrade, capacity expansion, membership benefits, SaaS upsell, dark recommendation banner | Dark recommendation card or banner visual; text must follow dark-card adaptation rules | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-02-45e578fb.png |
+| sales growth and forecast, sales data chart | 640x542 | CRM, sales dashboard, sales growth, forecast, opportunity value, data dashboard | CRM home first-screen visual, sales summary card, data-insight recommendation card, suitable for `hero-side` or business summary side visual | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-03-64ee2c23.png |
+| AI analysis, sentiment analysis, feedback record, user feedback, positive, neutral, negative, tag classification, comment insight, text analysis, lightweight card | 560x400 | AI analysis, comment insight, user feedback, sentiment analysis, tag classification, text analysis | AI insight card, feedback summary card, lightweight data-analysis card, suitable for `hero-side` or horizontal business card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-04-ef825ae6.png |
+| process analysis, process-driven, data insight, list view, filter sort, business analysis, multiple document types, pink background, lightweight data board | 542x300 | Process analysis, process-driven workflows, business analysis, multi-document summary, filter sort, data insight | Recommended content card, business analysis card, process insight card, suitable for `top-cover` or left/right cover | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-05-b052d37e.png |
+| approval, activity feed, timeline, member avatars, comment record, collaboration progress, workflow state, yellow background, information summary | 542x300 | Approval, activity feed, comment record, workflow state, collaboration progress, timeline | Approval entry card, collaboration progress card, workflow-state summary card, suitable for `top-cover` or left/right cover | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-06-c10ae25c.png |
+| news recommendation, activity location, map, positioning, route, lightweight card, blue background, workspace recommendation | 542x300 | News recommendation, activity location, map, positioning, route, workspace recommendation | Recommended content card, event recommendation card, location-related information card, suitable for `top-cover` or left/right cover | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-07-1b748e45.png |
+| project members, team collaboration, member avatars, project plan, progress planning, task assignment, collaboration space, pink background, team management | 542x300 | Project members, team collaboration, project plan, task assignment, progress planning, team management | Project collaboration card, team management card, task assignment entry, suitable for `top-cover` or left/right cover | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-08-4b79c828.png |
+| meeting summary, customer visit, attendees, avatar group, time reminder, dark card, schedule summary, meeting record | 448x320 | Meeting summary, customer visit, attendees, schedule summary, time reminder, meeting record | Meeting summary card, visit reminder card, dark meeting recommendation card, suitable for dark medium card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-09-b2a05a1c.png |
+| Lark Base, product brand, purple representation, circular orbit, smart tool, data management, business workflow, product onboarding | 336x150 | Base, data management, business workflow, smart tool, product entry | Brand visual for related apps, product entries, and tool cards, suitable for `product-entry` | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-10-b0a2bdf4.png |
+| Lark Projects, project management, IPD, OTD, ITR, process management, circular orbit, project collaboration, product entry | 672x300 | Lark Projects, project management, IPD, OTD, ITR, process management, project collaboration, product entry | Project management entry card, related app card, process-management recommendation card, suitable for `product-entry` or horizontal cover | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-11-0c5eec64.png |
+| Lark brand, open platform, AI capability, leaderboard, upload, app marketplace | pending browser confirmation | Open platform, app marketplace, AI capability entry, leaderboard, upload capability | Platform capability entry card, app marketplace recommendation card, product capability display | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-12-bc72c5b2.png |
+| ratio-4x3, Base, sales data, customer growth, data visualization, business analysis, radar chart, line chart, metric dashboard | 4:3 | Base, sales data, customer growth, business analysis, data visualization, metric dashboard | Data product first-screen side image, business analysis summary, sales dashboard cover, suitable for `hero-side` or business summary card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-13-e8f37c0f.png |
+| ratio-16x10, content analysis, data dashboard, hit-content monitoring, AI crawling, trend insight, chart statistics, operation growth, dashboard interface | 16:10 | Content operations, hit-content analysis, AI crawling, trend insight, data dashboard, growth analysis | Operations analysis tool cover, AI data insight card, content growth summary, suitable for `top-cover` or wide business card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-14-1a32918c.png |
+| ratio-2x1, Lark brand, enterprise AI, brand key visual, city nightscape, technology feel, promo banner, brand slogan | 2:1 | Lark brand, enterprise AI, brand promotion, urban technology, event banner, brand slogan | Brand key visual, enterprise AI promo banner, event page header image, suitable for `top-cover` or wide hero background | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-15-abddbc0b.png |
+| ratio-3x2, Lark Projects, project management, AI weekly report, AI workforce analysis, AI fields, project breakdown, progress summary | 3:2 | Lark Projects, project breakdown, AI weekly report, AI workforce analysis, AI fields, progress summary | Project management capability explanation, AI project weekly report cover, project summary side image, suitable for `hero-side` or business summary card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-16-53d86cf3.png |
+| ratio-4x3, project management, task branches, workflow breakdown, node relationship, light illustration, abstract graphic, collaboration flow | 4:3 | Project management, task branches, workflow breakdown, node relationship, collaboration flow, light illustration | Workflow entry, project empty state, task decomposition explanatory image, suitable for `product-entry`, `empty-state`, or lightweight card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-17-59982e20.png |
+| ratio-3x2, smart meeting notes, meeting summary, video meeting, key-point extraction, data insight, AI summary, meeting collaboration | 3:2 | Smart meeting notes, meeting summary, video meeting, key-point extraction, AI summary, data insight, meeting collaboration | Meeting-notes product introduction, meeting summary card, collaboration scene banner, suitable for `hero-side` or wide business card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-18-1ae872e2.png |
+| ratio-3x2, Aily agent, AI assistant, personal intelligent partner, Lark skills, message handling, meeting handling, schedule documents | 3:2 | Aily agent, AI assistant, personal intelligent partner, Lark skills, messages, meetings, schedules, documents | Agent welcome area, AI assistant capability display, personal productivity tool entry, suitable for `hero-side` or welcome banner | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-19-95bfcecb.png |
+| ratio-3x2, OpenClaw, agent platform, intelligent assistant, role agent, chat interface, team collaboration, cartoon character | 3:2 | OpenClaw, agent platform, role agent, intelligent assistant, chat interface, team collaboration | Agent platform introduction, role assistant entry, OpenClaw product capability page, suitable for `hero-side` or product entry combination | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-20-ffaad10d.png |
+| ratio-2x1, OpenClaw character, Lark brand, cartoon lobster, brand IP, relaxed lively, product mascot | 2:1 | OpenClaw character, Lark brand, cartoon IP, mascot, relaxed lively, brand display | Light brand banner, OpenClaw character introduction, event entry header image, suitable for `top-cover` or wide welcome area | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-21-9cd56c8f.png |
+| ratio-4x3, OpenClaw brand, cartoon lobster, Lark graphic, brand key visual, cloud technology, 3D illustration | 4:3 | OpenClaw brand, cartoon lobster, Lark graphic, cloud technology, 3D illustration, brand key visual | OpenClaw brand side image, cloud technology theme card, product entry visual, suitable for `hero-side` or `product-entry` | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-22-5da10b53.png |
+| ratio-16x10, hot-news push, enterprise magazine, content distribution, news aggregation, mobile sync, announcement notification, news list | 16:10 | Hot-news push, enterprise magazine, news aggregation, announcement notification, news list, mobile sync, content distribution | Portal news card, enterprise magazine recommendation, daily hot-topic entry, suitable for `top-cover` or recommended content card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-23-19c8e0f4.png |
+| ratio-4x3, Miaoda, low-code, app building, page generation, code generation, visual development, product icon | 4:3 | Miaoda, low-code, app building, page generation, code generation, visual development, product icon | Low-code tool entry, app-building recommendation card, Miaoda product introduction, suitable for `product-entry` or `hero-side` | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-24-00f110f4.png |
+| ratio-16x10, software R&D, requirement management, defect management, iteration management, R&D collaboration, work item management, engineering efficiency | 16:10 | Software R&D, requirement management, defect management, iteration management, R&D collaboration, work item management, engineering efficiency | R&D management system cover, requirement / defect management entry, engineering efficiency summary, suitable for `top-cover` or wide business card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-25-c6377703.png |
+| ratio-16x10, AI video generation, product video, template generation, marketing content, e-commerce assets, video production, AI creation | 16:10 | AI video generation, product video, template generation, marketing content, e-commerce assets, video production, AI creation | AI creation tool cover, product video generation entry, marketing asset production card, suitable for `top-cover` or wide tool card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-26-3ef5bcd5.png |
+| ratio-1x1, cloud docs, document creation, knowledge accumulation, content editing, office collaboration, glassmorphism, light illustration | 1:1 | Cloud docs, document creation, knowledge accumulation, content editing, office collaboration, glassmorphism | Document empty state, knowledge base entry, content creation recommendation, suitable for `empty-state`, `product-entry`, or square card | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-27-e52b52f4.png |
+| ratio-16x9, OpenClaw event banner, brand event, cartoon lobster, technology trend, 3D character, key visual banner | 16:9 | OpenClaw event banner, brand event, cartoon lobster, technology trend, 3D character, key visual Banner | Event key visual, OpenClaw brand banner, dark technology theme header, suitable for `top-cover` or hero background | https://lf3-static.bytednsdoc.com/obj/eden-cn/pshi/lark-design-prototype/1.0.4/illustrations/illustration-28-111453dd.png |
+
+## Usage Rules
+
+- This library only serves modules that need visual anchors. It does not require every business card to have an image.
+- Card theme, module title, and business action have priority over image color or size.
+- Control visual intensity when multiple illustrations appear on one screen, so every image does not become a visual center.
+- When combining multiple images in the same area, prefer unified ratio and expression type: product UI images for data groups, 3D characters or brand banners for brand groups, abstract graphics or product icons for lightweight entries.
+- Dark assets only enter dark banners or clearly dark cards.
+- For external delivery, replace internal CDN images with public URLs or project-local assets when the CDN is not accessible.
+
+## `media_plan` Mini Example
+
+```md
+media_plan:
+- source_library: card-illustration-library
+  library_lookup:
+    searched_keywords:
+    candidate_assets:
+    decision: use_library / reject_library
+    reject_reason:
+  matched_asset: asset tags closest to module semantics
+  asset_url:
+  semantic_match_reason:
+  slot: hero-side / top-cover / product-entry / empty-state
+  handling: contain / cover; preserve subject; keep rounded clipping
+  fallback: generated_bitmap or local asset if CDN unavailable
+```
+
+## Checklist
+
+- Image semantics match the module title and user task.
+- Image renders for real, with no gray box, blank color block, or temporary placeholder.
+- Image ratio is stable, with no stretching, squeezing, blur, or cropped-out key subject.
+- Before using `generated_bitmap`, `library_lookup` and the reason the library does not fit have been recorded.
+- When using `generated_bitmap`, the generated image only serves the current media slot.

package/miaoda/lark-design-prototype/references/case-matching.md

@@ -0,0 +1,53 @@
+# Case Matching
+
+Case matching retrieves inspiration and common risks from mature pages. Case weight is always lower than user input, Figma / screenshot evidence, the primary product task, and the current reasonable composition.
+
+## When To Use
+
+For page-level tasks, full-page Figma, full-page screenshots, full-page visual drafts, or natural-language full-page generation, case matching may be used. Small local UI fragments, single floating layers, single form items, and small style adjustments usually do not need it.
+
+## Matching Method
+
+Extract these tags:
+
+- `product_surface`: workspace, CRM, data, AI, official, settings, and similar surfaces.
+- `page_type`: home, portal, table, chat, landing, detail, settings, and similar types.
+- `intent_tags`: quick entry, recommended content, recent visits, table directory, conversational input, solution categories, and similar intents.
+- `risk_tags`: wall of cards, heavy gray background, no visual anchor, mixed icons, loose scale, gradient, fixed main width, and similar risks.
+
+Choose the closest 1 primary case and at most 1 auxiliary case. When there is no clear match, write `case_reference: none`.
+
+## Case Index
+
+- `cases/workspace-home.md`: workspace, portal, collaboration home, CRM tool home.
+- `cases/data-table.md`: Base, data directory, table view.
+- `cases/conversational-ai-home.md`: AI assistant, conversational tool, knowledge Q&A.
+- `cases/official-home.md`: official home page, solution center, product introduction page.
+
+## Usage Rules
+
+- Borrow only structural experience, information density, visual rhythm, and reverse risks.
+- Do not copy module order, business content, exact size, image ratio, or component count.
+- Do not add a module to the current page just because the case has it.
+- In Figma / screenshot tasks, cases must not rewrite source region order or primary / secondary relationships.
+- A newer model's reasonable composition can take priority as long as it fits Feishu style and the user goal.
+
+## Contract Pattern
+
+```md
+case_reference:
+  case_id: workspace-home-001
+  weight: low
+  borrowed: light welcome area, vertical main spine, fewer dividers, left-aligned entry cards, recommended content needs visual anchor
+  avoided: wall of cards, heavy gray background, excessive borders, mixed icons
+  free_to_change: module order, business content, column count, visual-anchor type, and component composition
+```
+
+## Evaluation
+
+After a case is matched, check only two things:
+
+- whether mature experience suitable for the current task has been absorbed;
+- whether common risks from the case have been avoided.
+
+If the case conflicts with the current task, the current task takes priority.

package/miaoda/lark-design-prototype/references/cases/conversational-ai-home.md

@@ -0,0 +1,27 @@
+# Conversational AI Home Case Inspiration
+
+case_id: conversational-ai-home-001
+reference_weight: low
+
+Applies to: AI assistant home pages, conversational tools, knowledge Q&A, and agent entries.
+
+## Borrowable
+
+- The main anchor is the input area, assistant identity, recommended questions, or recent conversations.
+- Sidebar may carry agents, history, favorites, and settings.
+- AI visuals may use slight blue-purple, avatar, halo, or dynamic icon treatment, but stay restrained.
+- Recommended questions are specific and scenario-based, not vague prompts.
+- Input area keeps real interaction capability and tool entries.
+
+## Risk Reminders
+
+- Page UI uses gradients;
+- Input area is over-decorated;
+- AI visual steals focus from the primary task;
+- Recommended questions have no specific content;
+- Sidebar buttons and navigation items are centered as a whole;
+- Input, buttons, menus, and floating layers are rendered as unstyled ordinary `div` elements.
+
+## Free To Change
+
+Whether a sidebar is needed, recommended question count, assistant identity expression, tool entries, history, and visual anchor are decided by the current task.

package/miaoda/lark-design-prototype/references/cases/data-table.md

@@ -0,0 +1,30 @@
+# Data Table / Directory Case Inspiration
+
+case_id: data-table-001
+reference_weight: low
+
+Applies to: Base, data directories, table views, file directories, and data workspaces.
+
+## Borrowable
+
+- The primary path is carried by a table, list, directory grid, or view switch.
+- The title area contains clear object identity, search, filters, view switch, and primary action.
+- Data content stays scannable. Table headers, rows, status tags, avatars, and row actions align, and field count stays restrained.
+- Table body cells stay one-line and 400 weight. Long text uses ellipsis or detail handling, not stacked primary / secondary lines.
+- Directory cards can use thumbnails, file-type icons, recent modification, and permission / status metadata to feel real.
+- Complex filters can collapse into a dropdown, drawer, or filter panel.
+
+## Risk Reminders
+
+- Replacing the table primary path with large dashboard cards;
+- Heavy table lines, making it feel like a traditional admin system;
+- Table section title wrapped inside the table frame;
+- Bold table body, or customer name, amount, owner, and similar fields using 500 / 600 in bulk;
+- Two-line information stacked in cells, raising row height and reducing scan efficiency;
+- Directory cards only have titles and no metadata;
+- Filter tools compress titles, making long text display character by character;
+- Recognizable table, filters, tabs, and pagination are hand-written as static blocks.
+
+## Free To Change
+
+Table columns, view type, directory card density, whether a right detail panel exists, toolbar button count, and empty-state content are decided by the current task.

package/miaoda/lark-design-prototype/references/cases/official-home.md

@@ -0,0 +1,26 @@
+# Official Site / Solution Center Case Inspiration
+
+case_id: official-home-001
+reference_weight: low
+
+Applies to: official home pages, solution centers, product introduction pages, and marketing-oriented product home pages.
+
+## Borrowable
+
+- The first screen directly expresses the brand, product, or solution theme.
+- Keep one primary CTA and a clear cue for the next content.
+- Media prefers product UI images, solution graphics, real business thumbnails, or light illustrations.
+- Lower sections can use solution categories, feature cards, customer trust, and product capability sections.
+- Expression can be more relaxed than in-product pages, while still staying clean, trustworthy, and Feishu-like.
+
+## Risk Reminders
+
+- Purely decorative hero with no product signal;
+- Multiple CTAs competing for the center;
+- Strong tech look, dark cyber feel, high-saturation large color blocks, or page UI gradients;
+- Cards lack concrete product visuals or business graphics;
+- Font size, illustration, and whitespace are all enlarged, causing an empty feel.
+
+## Free To Change
+
+First-screen structure, product media form, section count, CTA copy, customer trust, and feature-card form are decided by the current task.

package/miaoda/lark-design-prototype/references/cases/workspace-home.md

@@ -0,0 +1,34 @@
+# Workspace / Portal Case Inspiration
+
+case_id: workspace-home-001
+reference_weight: low
+
+Applies to: office home pages, workspaces, collaboration entries, portal aggregation pages, CRM tool home pages.
+
+## Borrowable
+
+- Organize content around a vertical main spine, with left-right columns only carrying clear auxiliary information.
+- Side navigation, top tools, welcome area, quick entries, recommended content, and recent visits may appear only when needed.
+- Large workspaces keep white or very light surfaces, use few dividers, and separate modules through whitespace and section titles.
+- Use about 40px breathing space between content groups and a clean 16–24px rhythm inside groups.
+- Quick entries, app entries, and recommendation entries default to left alignment.
+- When recommendations, welcome areas, empty states, or product entries need visual anchors, prefer the illustration library, UD illustrations, or product assets.
+- Quick entries use equal height within the same row, with row height determined by the tallest card in that row. Icon containers may use low-opacity blue light fill. When recommended content only has title and description, prefer adding a responsible thumbnail, light illustration, or product image.
+- Recent visits, tasks, customers, and approvals prefer lists or tables, keep only necessary fields, and avoid information stacking.
+
+## Risk Reminders
+
+- Full-page wall of cards;
+- Heavy gray background;
+- Shadows on ordinary cards;
+- Every module has a full frame;
+- Missing module titles, or titles wrapped inside bordered containers;
+- Quick entries use outline Buttons or are centered as a whole;
+- Quick entries in the same row have uneven heights or are stretched by fixed large heights;
+- Recommended content lacks a visual anchor and becomes pure text plus outlined icons;
+- Mixed icon styles;
+- Modules added only because the case has them, although the current task does not need them.
+
+## Free To Change
+
+Module order, module count, whether a right rail exists, whether a welcome area exists, illustration form, entry count, list fields, and business names are all decided by the current task.

package/miaoda/lark-design-prototype/references/color-roles.md

@@ -0,0 +1,163 @@
+# Color Roles
+
+Use this reference when assigning `token_roles` in the Lark Design Prototype Contract or converting screenshot / Figma color evidence into Feishu semantic tokens.
+
+## Core Rules
+
+Choose colors by responsibility, not hue preference. When you see blue, red, green, or gray, first decide whether it serves action, status, link, surface, border, icon, or text emphasis.
+
+`DESIGN.md` provides built-in P0 token values. Use `node scripts/token-query.mjs` for verified, on-demand lookup of the full public semantic token source. If a semantic token exists, avoid using palette keys or raw hex values as the first implementation token.
+
+Sidebar background and selected sidebar item are explicit exceptions: the sidebar background must be written directly as `#f9f9f9`, and the selected sidebar item background directly as `#1f23290d`. During implementation, use the hex values directly. Do not look them up or remap them to color tokens, CSS variables, or theme variables.
+
+## Surface Roles
+
+Understand color through surface depth:
+
+- Page root: app or page background;
+- Content surface: primary work area;
+- Nested content surface: secondary grouping inside the work area;
+- Floating surface: popover, dropdown, dialog, drawer, menu;
+- Mask: modal blocking or dimmed background.
+
+Common mapping:
+
+- Large pages and workspaces (body / app-root / main-workspace / main-content / right content area): prefer white or nearly white `bg-body`;
+- Low-emphasis app shell or backing surface: use `bg-base`;
+- Secondary content surface on the main work surface: use `bg-body-overlay`;
+- Navigation background: sidebar background must be written directly as `#f9f9f9`; do not remap it to `bg-sub-navigation` or `side-nav-bg`;
+- Main side-navigation current item background must be written directly as `#1f23290d`, with 500 text weight and neutral body color. Do not use light-blue fill or brand-blue text by default;
+- An auxiliary sidebar under `top-nav-primary` also uses `#f9f9f9` and `#1f23290d` if it functions as navigation; if it only supports content, it usually uses `bg-body`;
+- Floating panels: use `bg-float`;
+- Nested surfaces inside floating panels: use `bg-float-overlay`;
+- Modal mask: use `bg-mask`.
+
+Keep one surface family on the same page. Only mix multiple page backgrounds when the design source clearly expresses a floating layer or nested workspace. One area usually keeps at most page base and content surface. Do not create hierarchy with gray backing plus white cards, white cards plus gray blocks, or gray blocks plus smaller cards.
+
+`bg-content-base` is only for especially deep hierarchy when `bg-body`, `bg-base`, and component surfaces cannot distinguish shell, workspace, and nested content. Do not use it as the default page background for regular Web product pages.
+
+## Text Roles
+
+Text color follows emphasis hierarchy:
+
+- Primary reading text, page titles, section titles, strong labels: `text-title`;
+- Secondary copy, metadata, descriptions, auxiliary text: `text-caption`;
+- Placeholder and low-emphasis hints: `text-placeholder`;
+- Disabled text: `text-disabled`;
+- Links: `text-link-normal`, with hover, pressed, and disabled link states when needed.
+
+Ordinary body text must not use the brand primary token. Brand blue should express actions, links, selected state, or product emphasis, not default reading text.
+
+Blue and other accent colors have a budget: only primary actions, links, focus, current state, real status, and a small amount of brand identification. Do not use accent colors for ordinary card backgrounds, decorative lines, icon matrices, category tags, large KPI emphasis, or entries without state meaning.
+
+The first-screen accent-color budget usually contains only one primary filled button, one current state, and necessary real-status feedback. Avatars, icon backgrounds, entry cards, ordinary tags, KPI containers, auxiliary descriptions, and decorative areas prefer neutral or low-saturation schemes.
+
+Icon containers in quick entries, app entries, and recommended content may use low-saturation, low-opacity blue fills such as `rgba(20, 86, 240, 0.06–0.10)`. This fill only provides light support and must not act as status color, category color, or large-area background. Keep one fill strategy within the same entry group.
+
+## Action Roles
+
+Use primary action colors sparingly.
+
+- Primary filled action: `primary-fill-default`;
+- Content on primary action: `primary-on-primary-fill`;
+- Primary action hover / pressed: `primary-fill-hover`, `primary-fill-pressed`;
+- Low-emphasis primary-color text, linear icon, border, or selected label: `primary-content-default`;
+- Primary-color content hover / pressed: `primary-content-hover`, `primary-content-pressed`.
+
+A local task area usually has only one primary filled action. Auxiliary actions use neutral buttons, text buttons, dropdowns, or menus.
+
+## Border And Divider Roles
+
+Use borders structurally:
+
+- Card, table, list, and content-area boundaries / strokes: `line-border-card`;
+- Interactive control boundaries, including input, checkbox, radio, and selector surfaces: `line-border-component`;
+- Separation between sibling rows or areas: `line-divider-default`.
+
+Do not use strong accent borders as generic decoration. Colored borders should usually express validation, status, selected state, or focus interaction.
+
+## Fill And Selection Roles
+
+Neutral fills handle most lightweight interactions.
+
+- Row, icon button, and neutral text button hover: `fill-hover`;
+- Neutral pressed state: `fill-pressed`;
+- Active state: `fill-active`;
+- Selected state: `fill-selected`;
+- Disabled fill: `fill-disabled`.
+
+Selected and active fills explain state. Do not use them as arbitrary background decoration.
+
+## Status Roles
+
+Functional colors only express real semantic states.
+
+- Destructive, failed, blocked, rejected: `function-danger-fill-*`;
+- Successful, completed, approved, healthy: `function-success-fill-*`;
+- Warning, risky, needs attention: `function-warning-fill-*`;
+- Informational state: `function-info-fill-*`.
+
+If a tag is only a category, do not use functional colors. Prefer neutral or component-provided tag colors.
+
+## Icon Roles
+
+Icon color follows nearby semantics:
+
+- High-emphasis icon: `icon-n1`;
+- Secondary icon: `icon-n2`;
+- Tertiary or low-emphasis icon: `icon-n3`;
+- Disabled icon: `icon-disabled`;
+- Primary action icon on a filled primary button: `primary-on-primary-fill`;
+- Blue action icon on a neutral surface: `primary-content-default`.
+
+Icons should reinforce actions, statuses, source restoration, brand identity, or file-type semantics. Do not use colorful icons to decorate dense product UI. Regular page UI icons use catalog `outlined`, preferably v2 when semantically suitable, defaulting to `icon-n2`; current or high-emphasis uses `icon-n1`; low-emphasis uses `icon-n3`; disabled uses `icon-disabled`; only primary actions, links, focus, current state, destructive actions, and real statuses use the corresponding semantic colors. Screenshot and Figma restoration preserve source visual type: outlined, filled, or colorful. File v2 colorful must keep the same type and shape within the same area / module.
+
+## Gradients
+
+Page UI does not use gradients. Backgrounds, Hero backing, cards, buttons, tags, icon backgrounds, borders, dividers, masks, and decorative blocks do not use `linear-gradient`, `radial-gradient`, `conic-gradient`, gradient image masks, or gradient borders.
+
+Hierarchy is expressed through whitespace, real surface relationships, 0.5px light borders, typography hierarchy, hover / selected states, and necessary media.
+
+## Dark Mode
+
+Light and dark modes use the same token names. The theme system should resolve dark values from `DESIGN.md` or UD CSS variables.
+
+Unless the source system explicitly requires it, do not create new semantic names only for dark mode. If a token role is correct in light mode, it usually keeps the same role in dark mode.
+
+## Figma And Screenshot Conversion
+
+When reading visual sources:
+
+1. Identify role first: surface, text, border, fill, action, status, icon.
+2. Determine emphasis or state: primary, secondary, disabled, hover, selected, danger, warning, success, info.
+3. Map to Feishu semantic tokens.
+4. Record the role in the Lark Design Prototype Contract.
+5. Leave exact values to `DESIGN.md`, verified results from `node scripts/token-query.mjs`, or UD CSS variables.
+
+Example:
+
+```md
+token_roles:
+- body / app-root / main-workspace / main-content: bg-body
+- low-emphasis app shell backing: bg-base
+- working surface: bg-body
+- filter controls: line-border-component + bg-body
+- table boundary: line-border-card
+- row hover: fill-hover
+- selected row: fill-selected
+- primary CTA: primary-fill-default + primary-on-primary-fill
+- secondary metadata: text-caption
+- destructive status: function-danger-fill-default
+```
+
+## Review Traps
+
+- Using raw hex colors from screenshot or Figma as implementation tokens;
+- Using brand blue for default body text;
+- Using danger, success, or warning colors for non-status categories;
+- Mixing too many surface roles in a page without real depth relationships;
+- Using decorative colored borders or any gradients in enterprise product UI;
+- Overusing blue or accent colors in ordinary cards, icon matrices, category tags, and KPIs;
+- Icon colors lack action, status, current, disabled, emphasis, or File v2 file-type semantics, making ordinary entries and categories default to high-saturation colors;
+- Creating hierarchy with multiple nested surfaces such as gray backing with white cards or white cards with gray blocks;
+- Renaming token roles for dark mode instead of letting the theme resolve values.