yumi cp
@ -0,0 +1,400 @@
|
|||||||
|
# 你是本任务的前置审核/规划 agent。目标:针对 /Users/zuozuo/Documents/
|
||||||
|
_Exported on 07/08/2026 at 00:45:53 GMT+8 from OpenAI Codex via WayLog_
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
<permissions instructions>
|
||||||
|
Filesystem sandboxing defines which files can be read or written. `sandbox_mode` is `danger-full-access`: No filesystem sandboxing - all commands are permitted. Network access is enabled.
|
||||||
|
Approval policy is currently never. Do not provide the `sandbox_permissions` for any reason, commands will be rejected.
|
||||||
|
</permissions instructions><app-context>
|
||||||
|
# Codex desktop context
|
||||||
|
- You are running inside the Codex (desktop) app, which allows some additional features not available in the CLI alone:
|
||||||
|
|
||||||
|
### Images/Visuals/Files
|
||||||
|
- In the app, the model can display images and videos using standard Markdown image syntax: 
|
||||||
|
- When sending or referencing a local image or video, always use an absolute filesystem path in the Markdown image tag (e.g., ); relative paths and plain text will not render the media.
|
||||||
|
- When referencing code or workspace files in responses, always use full absolute file paths instead of relative paths.
|
||||||
|
- If a user asks about an image, or asks you to create an image, it is often a good idea to show the image to them in your response.
|
||||||
|
- Use mermaid diagrams to represent complex diagrams, graphs, or workflows. Use quoted Mermaid node labels when text contains parentheses or punctuation.
|
||||||
|
- Return web URLs as Markdown links (e.g., [label](https://example.com)).
|
||||||
|
|
||||||
|
### Workspace Dependencies
|
||||||
|
- For sheets, slides, and documents, call `load_workspace_dependencies` to find the bundled runtime and libraries.
|
||||||
|
|
||||||
|
### Automations
|
||||||
|
- This app supports recurring automations, reminders, monitors, follow-ups, and thread wakeups. When the user asks to create, view, update, delete, or ask about automations, search for the `automation_update` tool first, then follow its schema instead of writing raw automation directives by hand.
|
||||||
|
- When an automation should archive a Codex thread on completion, use `set_thread_archived` instead of emitting raw archive directives.
|
||||||
|
|
||||||
|
### Thread Coordination
|
||||||
|
- When the user asks to create, fork, inspect, continue, hand off, pin, archive, rename, or otherwise manage Codex threads, search for the relevant thread tool first: `create_thread`, `fork_thread`, `list_threads`, `read_thread`, `send_message_to_thread`, `handoff_thread`, `set_thread_pinned`, `set_thread_archived`, or `set_thread_title`.
|
||||||
|
- Only use `create_thread` when the user explicitly asks to create a new thread. Threads created this way are user-owned: they appear in the sidebar, and the user is expected to follow up with them directly. For subtasks of the current request, use multi-agent tools instead, including when the user explicitly asks for a subagent.
|
||||||
|
- After a successful `create_thread` call, emit `::created-thread{threadId="..."}` for a created thread or `::created-thread{pendingWorktreeId="..."}` for queued worktree setup on its own line in your final response.
|
||||||
|
|
||||||
|
### Inline Code Comments
|
||||||
|
- Use the ::code-comment{...} directive when you need to attach feedback directly to specific code lines.
|
||||||
|
- Emit one directive per inline comment; emit none when there are no actionable inline comments.
|
||||||
|
- Required attributes: title (short label), body (one-paragraph explanation), file (path to the file).
|
||||||
|
- Optional attributes: start, end (1-based line numbers), priority (0-3).
|
||||||
|
- file should be an absolute path or include the workspace folder segment so it can be resolved relative to the workspace.
|
||||||
|
- Keep line ranges tight; end defaults to start.
|
||||||
|
- Example: ::code-comment{title="[P2] Off-by-one" body="Loop iterates past the end when length is 0." file="/path/to/foo.ts" start=10 end=11 priority=2}
|
||||||
|
|
||||||
|
### Git
|
||||||
|
- Branch prefix: `codex/`. Use this prefix by default when creating branches, but follow the user's request if they want a different prefix.
|
||||||
|
- After successfully staging files, emit `::git-stage{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating a commit, emit `::git-commit{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating or switching the thread onto a branch, emit `::git-create-branch{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully pushing the current branch, emit `::git-push{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully creating a pull request, emit `::git-create-pr{cwd="/absolute/path" branch="branch-name" url="https://..." isDraft=true}` on its own line in your final response. Include `isDraft=false` for ready PRs.
|
||||||
|
- Only emit these git directives in your final response after the action actually succeeds, never in commentary updates. Keep attributes single-line.
|
||||||
|
</app-context><apps_instructions>
|
||||||
|
## Apps (Connectors)
|
||||||
|
Apps (Connectors) can be explicitly triggered in user messages in the format `[$app-name](app://{connector_id})`. Apps can also be implicitly triggered as long as the context suggests usage of available apps.
|
||||||
|
An app is equivalent to a set of MCP tools within the `codex_apps` MCP.
|
||||||
|
An installed app's MCP tools are either provided to you already, or can be lazy-loaded through the `tool_search` tool. If `tool_search` is available, the apps that are searchable by `tools_search` will be listed by it.
|
||||||
|
Do not additionally call list_mcp_resources or list_mcp_resource_templates for apps.
|
||||||
|
</apps_instructions><skills_instructions>
|
||||||
|
## Skills
|
||||||
|
A skill is a set of local instructions to follow that is stored in a `SKILL.md` file. Below is the list of skills that can be used. Each entry includes a name, description, and a short path that can be expanded into an absolute path using the skill roots table.
|
||||||
|
### Skill roots
|
||||||
|
- `r0` = `/Users/zuozuo/.codex/skills`
|
||||||
|
- `r1` = `/Users/zuozuo/.agents/skills`
|
||||||
|
- `r2` = `/Users/zuozuo/.codex/skills/.system`
|
||||||
|
- `r3` = `/Users/zuozuo/.codex/plugins/cache/openai-bundled`
|
||||||
|
- `r4` = `/Users/zuozuo/.codex/plugins/cache/openai-curated/github/d6169bef/skills`
|
||||||
|
- `r5` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/figma/2.0.13/skills`
|
||||||
|
- `r6` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/product-design/0.1.48/skills`
|
||||||
|
- `r7` = `/Users/zuozuo/.codex/plugins/cache/openai-primary-runtime`
|
||||||
|
### Available skills
|
||||||
|
- imagegen: Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing i (file: r2/imagegen/SKILL.md)
|
||||||
|
- openai-docs: Use when the user asks how to build with OpenAI products or APIs, asks about Codex itself or choosing Codex surfaces, needs up-to-date official documentation with citations, help choosing the latest model for a use case, or model upgrade and prompt (file: r2/openai-docs/SKILL.md)
|
||||||
|
- plugin-creator: Create and scaffold plugin directories for Codex with a required `.codex-plugin/plugin.json`, optional plugin folders/files, valid manifest defaults, and personal-marketplace entries by default. Use when Codex needs to create a new personal plugin, a (file: r2/plugin-creator/SKILL.md)
|
||||||
|
- skill-creator: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations. (file: r2/skill-creator/SKILL.md)
|
||||||
|
- skill-installer: Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos). (file: r2/skill-installer/SKILL.md)
|
||||||
|
- browser:control-in-app-browser: Control the in-app Browser. Use to open, navigate, inspect, test, click, type, screenshot, or verify local targets such as localhost, 127.0.0.1, ::1, file://, the current in-app browser tab, and websites shown side by side inside Codex. (file: r3/browser/26.623.141536/skills/control-in-app-browser/SKILL.md)
|
||||||
|
- documents:documents: Create, edit, redline, and comment on `.docx`, Word, and Google Docs-targeted document artifacts inside the container, with a strict render-and-verify workflow. Use `render_docx.py` to generate page PNGs (and optional PDF) for visual QA, then itera (file: r7/documents/26.630.12135/skills/documents/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r1/dws/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r0/dws/SKILL.md)
|
||||||
|
- figma:figma-code-connect: Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files. (file: r5/figma-code-connect/SKILL.md)
|
||||||
|
- figma:figma-create-new-file: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, o (file: r5/figma-create-new-file/SKILL.md)
|
||||||
|
- figma:figma-generate-design: Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Fi (file: r5/figma-generate-design/SKILL.md)
|
||||||
|
- figma:figma-generate-diagram: MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram (file: r5/figma-generate-diagram/SKILL.md)
|
||||||
|
- figma:figma-generate-library: Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (file: r5/figma-generate-library/SKILL.md)
|
||||||
|
- figma:figma-implement-motion: Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma (file: r5/figma-implement-motion/SKILL.md)
|
||||||
|
- figma:figma-swiftui: SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code (file: r5/figma-swiftui/SKILL.md)
|
||||||
|
- figma:figma-use: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perf (file: r5/figma-use/SKILL.md)
|
||||||
|
- figma:figma-use-figjam: This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-figjam/SKILL.md)
|
||||||
|
- figma:figma-use-motion: Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a nod (file: r5/figma-use-motion/SKILL.md)
|
||||||
|
- figma:figma-use-slides: This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-slides/SKILL.md)
|
||||||
|
- github:gh-address-comments: Address actionable GitHub pull request review feedback. Use when the user wants to inspect unresolved review threads, requested changes, or inline review comments on a PR, then implement selected fixes. Use the GitHub app for PR metadata and flat co (file: r4/gh-address-comments/SKILL.md)
|
||||||
|
- github:gh-fix-ci: Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions. Use the GitHub app from this plugin for PR metadata and patch context, and use `gh` for Actions check and log inspection before implementing any approved fix. (file: r4/gh-fix-ci/SKILL.md)
|
||||||
|
- github:github: Triage and orient GitHub repository, pull request, and issue work through the connected GitHub app. Use when the user asks for general GitHub help, wants PR or issue summaries, or needs repository context before choosing a more specific GitHub workflo (file: r4/github/SKILL.md)
|
||||||
|
- github:yeet: Publish local changes to GitHub by confirming scope, committing intentionally, pushing the branch, and opening a draft PR through the GitHub app from this plugin, with `gh` used only as a fallback where connector coverage is insufficient. (file: r4/yeet/SKILL.md)
|
||||||
|
- lark-approval: 飞书审批:当前用户审批的查询与全部处理操作,覆盖待本人审批的任务与本人发起的实例。审批待办不是飞书任务(任务类待办走 lark-task);不负责创建审批定义和发起新审批。 (file: r1/lark-approval/SKILL.md)
|
||||||
|
- lark-apps: 妙搭(Spark/Miaoda)应用开发与托管:应用创建、HTML静态站点发布、本地全栈开发、云端生成迭代。当用户要开发/新建一个系统·工具·平台·应用,或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接,或用 HTML 做页面·网站给人看,或提到妙搭/Spark/Miaoda、应用数据库、可见范围时使用。不负责普通云盘文件上传(lark-drive)、飞书文档编辑(lark-doc)、原生幻灯片创建(lark-slides)。 (file: r1/lark-apps/SKILL.md)
|
||||||
|
- lark-attendance: 飞书考勤打卡:查询自己的考勤打卡记录 (file: r1/lark-attendance/SKILL.md)
|
||||||
|
- lark-base: 飞书多维表格(Base)操作:建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、workflow、角色权限;遇到 Base/多维表格/bitable 或 /base/ 链接时使用。文件导入转 lark-drive,认证/授权转 lark-shared。 (file: r1/lark-base/SKILL.md)
|
||||||
|
- lark-calendar: 飞书日历:管理日历日程和会议室。查看/搜索日程、创建/更新日程、管理参会人、查询忙闲和推荐时段、预定会议室。当用户需要查看日程安排、创建/修改会议、查询/预定会议室时使用。不负责:查询过去的视频会议记录(走 lark-vc)、待办任务(走 lark-task)。 (file: r1/lark-calendar/SKILL.md)
|
||||||
|
- lark-contact: 飞书 / Lark 通讯录:按姓名 / 邮箱解析成 open_id,或按 open_id 反查姓名 / 部门 / 邮箱 / 联系方式 / 个人状态 / 签名。当用户提到某人姓名要下一步发消息 / 排日程,或拿到 open_id 想查具体信息时使用。不负责部门树遍历、按部门列员工、组织架构图,这类需求走原生 OpenAPI。 (file: r1/lark-contact/SKILL.md)
|
||||||
|
- lark-doc: 飞书云文档(Docx / Wiki 文档,v2 API):读取和编辑飞书文档内容。当用户给出文档 URL 或 token,或需要查看、创建、编辑文档、插入或下载文档图片附件时使用。文档中嵌入的电子表格、多维表格、画板,先用本 skill 提取 token 再切到对应 skill。当用户给出 doubao.com 的 /docx/ 或 /wiki/ URL/token 时,也应直接使用本 skill;路由依据是 URL 路径模式和 token,而不是域名。不负责文档评论管理,也不负责表格或 Bas (file: r1/lark-doc/SKILL.md)
|
||||||
|
- lark-drive: 飞书云空间(云盘/云存储):管理云空间(云盘/云存储)中的文件和文件夹。上传和下载文件、创建文件夹、复制/移动/删除文件、查看文件元数据、管理文档评论、管理文档权限、订阅用户评论变更事件、修改文件标题(docx、sheet、bitable、file、folder、wiki);也负责把本地 Word/Markdown/Excel/CSV/PPTX 以及 Base 快照(.base)导入为飞书在线云文档(docx、sheet、bitable、slides)。当用户需要上传或下载文件、整理云空间( (file: r1/lark-drive/SKILL.md)
|
||||||
|
- lark-event: Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume <EventKey>` (covers IM messages/reactions/chat changes, VC meeting ended, Minutes generated, Whiteboard updated, etc.). Use for Lark (file: r1/lark-event/SKILL.md)
|
||||||
|
- lark-im: 飞书即时通讯:收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件(支持大文件分片下载)、管理表情回复、发送应用内/短信/电话加急。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶(添加/移除/查询置顶会话)、管理标签数据时使用。 (file: r1/lark-im/SKILL.md)
|
||||||
|
- lark-mail: 飞书邮箱 — draft, compose, send, reply, forward, read, and search emails; manage drafts, folders, labels, contacts, attachments, and mail rules. Use when user mentions 起草邮件, 写一封邮件, 拟邮件, 草稿, 发通知邮件, 发送邮件, 发邮件, 回复邮件, 转发邮件, 查看邮件, 看邮件, 读邮件, 搜索邮件, 查邮件, 收件箱, (file: r1/lark-mail/SKILL.md)
|
||||||
|
- lark-markdown: 飞书 Markdown:查看、创建、上传、编辑和比较 Markdown 文件。当用户需要创建或编辑 Markdown 文件、读取、修改、局部 patch 或比较差异时使用。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。 (file: r1/lark-markdown/SKILL.md)
|
||||||
|
- lark-minutes: 飞书妙记:搜索妙记列表、查看妙记基础信息、下载妙记音视频文件、上传音视频生成妙记、更新妙记标题、替换说话人。当需要获取、操作或者生成妙记时使用。也支持将本地音视频文件转成纪要和逐字稿(优先使用本 skill,不要用 ffmpeg/whisper 本地转写)。不负责:获取会议关联妙记、纪要/逐字稿内容获取走 lark-vc (file: r1/lark-minutes/SKILL.md)
|
||||||
|
- lark-okr: 飞书 OKR:管理目标与关键结果。查看和编辑 OKR 周期、目标(Objective)、关键结果(Key Result)、对齐关系、量化指标和进展记录。当用户需要查看或创建 OKR、管理目标和关键结果、查看对齐关系时使用。 (file: r1/lark-okr/SKILL.md)
|
||||||
|
- lark-openapi-explorer: 飞书/Lark 原生 OpenAPI 探索:从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足,需要查找并调用原生飞书 OpenAPI 时使用。 (file: r1/lark-openapi-explorer/SKILL.md)
|
||||||
|
- lark-shared: Use when first setting up lark-cli, running auth login, switching user/bot identity (--as), handling permission denied or scope errors, needing to update lark-cli, or seeing _notice in JSON output. (file: r1/lark-shared/SKILL.md)
|
||||||
|
- lark-sheets: 飞书电子表格:创建和操作电子表格。支持创建表格、管理工作表与行列结构(增删/合并/调整尺寸/隐藏/冻结)、读写单元格(值/公式/样式/批注/单元格图片)、查找替换、多操作原子批量更新,以及图表、透视表、条件格式、筛选器、迷你图、浮动图片等对象的创建与维护。当用户需要创建电子表格、管理工作表、批量读写或编辑数据、统计汇总与可视化、表格美化、公式计算(含 Excel 公式迁移)等任务时使用。若用户是想按名称或关键词搜索云空间(云盘/云存储)里的表格文件,请改用 lark-drive 的 drive (file: r1/lark-sheets/SKILL.md)
|
||||||
|
- lark-skill-maker: 创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill(包装原子 API 或编排多步流程)时使用。 (file: r1/lark-skill-maker/SKILL.md)
|
||||||
|
- lark-slides: 飞书幻灯片:创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面(创建、删除、读取、局部替换)。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:云文档内容编辑(走 lark-doc)、云文档里的独立画板对象(走 lark-whiteboard,注意 slide (file: r1/lark-slides/SKILL.md)
|
||||||
|
- lark-task: 飞书任务:管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。 (file: r1/lark-task/SKILL.md)
|
||||||
|
- lark-vc: 飞书视频会议:搜索历史会议记录、查询会议纪要(总结/待办/章节/逐字稿)、查询参会人快照。当用户查询已结束的会议、获取会议产物(纪要/妙记)、查看参会人时使用;查询未来日程走 lark-calendar。不负责:Agent 真实入会/离会、会中实时事件(走 lark-vc-agent)。 (file: r1/lark-vc/SKILL.md)
|
||||||
|
- lark-vc-agent: 飞书视频会议:让机器人代当前用户加入/离开正在进行的会议,并读取会议期间的实时事件(参会人加入与离开、发言、聊天、屏幕共享等)。1. 用户提供 9 位会议号、要求代为入会或离会时使用 +meeting-join / +meeting-leave——会真实产生入会/离会记录。2. 会议进行中用户想知道“谁加入了”“谁离开了”“谁在发言”“有人共享屏幕吗”等会中动态时,机器人入会后用 +meeting-events 读取事件时间线。3. 典型场景:参会机器人、会中助手、代为旁听、代为参会。前提: (file: r1/lark-vc-agent/SKILL.md)
|
||||||
|
- lark-whiteboard: 飞书画板:查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用 DSL(转成 OpenAPI 格式)、PlantUML/Mermaid 格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板,或是需要可视化表达架构、流程、组织关系、时间线、因果、对比等结构化信息时使用此 skill,无论是否提及"画板"。 ⚠️ 原 `lark-whiteboard-cli` skill 已合并至本 skill,若 skill 列表中同时存在 `lark-whiteboard- (file: r1/lark-whiteboard/SKILL.md)
|
||||||
|
- lark-wiki: 飞书知识库:管理知识空间、空间成员和文档节点。创建和查询知识空间、查看和管理空间成员、管理节点层级结构、在知识库中组织文档和快捷方式。当用户需要在知识库中查找或创建文档、浏览知识空间结构、查看或管理空间成员、移动或复制节点时使用。当用户给出 doubao.com 的 /wiki/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:上传文件到知识库节点下(走 lark-drive) (file: r1/lark-wiki/SKILL.md)
|
||||||
|
- lark-workflow-meeting-summary: 会议纪要整理工作流:汇总指定时间范围内的会议纪要并生成结构化报告。当用户需要整理会议纪要、生成会议周报、回顾一段时间内的会议内容时使用。 (file: r1/lark-workflow-meeting-summary/SKILL.md)
|
||||||
|
- lark-workflow-standup-report: 日程待办摘要:编排 calendar +agenda 和 task +get-my-tasks,生成指定日期的日程与未完成任务摘要。适用于了解今天/明天/本周的安排。 (file: r1/lark-workflow-standup-report/SKILL.md)
|
||||||
|
- pdf:pdf: Read, create, inspect, render, and verify PDF files where visual layout matters. Use Poppler rendering plus Python tools such as reportlab, pdfplumber, and pypdf for generation and extraction. (file: r7/pdf/26.630.12135/skills/pdf/SKILL.md)
|
||||||
|
- presentations:Presentations: Create or edit PowerPoint or Google Slides decks (file: r7/presentations/26.630.12135/skills/presentations/SKILL.md)
|
||||||
|
- product-design:audit: Audit or critique a product flow, journey, workflow, funnel, onboarding path, checkout path, settings path, screen, or multi-step product experience by capturing screenshots first, placing them in Figma or a local folder, then reporting UX, design, (file: r6/audit/SKILL.md)
|
||||||
|
- product-design:get-context: Mandatory design-brief gate for Product Design build and design workflows. Use before ideation, prototyping, image-to-code builds, redesigns, or product UI work to clarify missing product, visual, and interactivity context or play back the supplied (file: r6/get-context/SKILL.md)
|
||||||
|
- product-design:ideate: Generate image-based visual alternatives, remixes, or concept directions after Product Design get-context has confirmed the design brief. Use when the user asks for design variants, visual exploration, remixes, or image-generated approaches from provi (file: r6/ideate/SKILL.md)
|
||||||
|
- product-design:image-to-code: Implement a selected image, screenshot, mockup, or Image Gen reference as a faithful responsive frontend after Product Design get-context has confirmed the design brief. (file: r6/image-to-code/SKILL.md)
|
||||||
|
- product-design:index: Use to discover specific skills for the Product Design plugin, when it is at-mentioned directly, or for any mentions of potentially relevant work, including: UX research; product, screen, or flow audits; visual ideation; app or interface design, red (file: r6/index/SKILL.md)
|
||||||
|
- spreadsheets:Spreadsheets: Use this skill when a user requests to create, modify, analyze, visualize, or work with spreadsheet files (`.xlsx`, `.xls`, `.csv`, `.tsv`) or Google Sheets-targeted spreadsheet artifacts with formulas, formatting, charts, tables, and recalculation (file: r7/spreadsheets/26.630.12135/skills/spreadsheets/SKILL.md)
|
||||||
|
- template-creator:template-creator: Create or update a reusable personal Codex artifact-template skill. Use when the user invokes $template-creator or asks in natural language to create a template using, from, or based on an attached Word document, PowerPoint presentation, or Excel w (file: r7/template-creator/26.630.12135/skills/template-creator/SKILL.md)
|
||||||
|
### How to use skills
|
||||||
|
- Discovery: The list above is the skills available in this session (name + description + short path). Skill bodies live on disk at the listed paths after expanding the matching alias from `### Skill roots`.
|
||||||
|
- Trigger rules: If the user names a skill (with `$SkillName` or plain text) OR the task clearly matches a skill's description shown above, you must use that skill for that turn. Multiple mentions mean use them all. Do not carry skills across turns unless re-mentioned.
|
||||||
|
- Missing/blocked: If a named skill isn't in the list or the path can't be read, say so briefly and continue with the best fallback.
|
||||||
|
- How to use a skill (progressive disclosure):
|
||||||
|
1) After deciding to use a skill, the main agent must expand the listed short `path` with the matching alias from `### Skill roots`, then open and read its `SKILL.md` completely before taking task actions. If a read is truncated or paginated, continue until EOF.
|
||||||
|
2) When `SKILL.md` references relative paths (e.g., `scripts/foo.py`), resolve them relative to the directory containing that expanded `SKILL.md` first, and only consider other paths if needed.
|
||||||
|
3) If `SKILL.md` points to extra folders such as `references/`, use its routing instructions to identify the files required for the task. The main agent must read each required instruction or reference file itself before acting on it. Do not delegate reading, summarizing, or interpreting skill instructions to a subagent. Subagents may still perform task work when the selected skill allows it.
|
||||||
|
4) If `scripts/` exist, prefer running or patching them instead of retyping large code blocks.
|
||||||
|
5) If `assets/` or templates exist, reuse them instead of recreating from scratch.
|
||||||
|
- Coordination and sequencing:
|
||||||
|
- If multiple skills apply, choose the minimal set that covers the request and state the order you'll use them.
|
||||||
|
- Announce which skill(s) you're using and why (one short line). If you skip an obvious skill, say why.
|
||||||
|
- Context hygiene:
|
||||||
|
- Progressive disclosure applies to selecting relevant files, not partially reading a selected instruction file. Do not load unrelated references, scripts, or assets.
|
||||||
|
- Avoid deep reference-chasing: prefer opening only files directly linked from `SKILL.md` unless you're blocked.
|
||||||
|
- When variants exist (frameworks, providers, domains), pick only the relevant reference file(s) and note that choice.
|
||||||
|
- Safety and fallback: If a skill can't be applied cleanly (missing files, unclear instructions), state the issue, pick the next-best approach, and continue.
|
||||||
|
</skills_instructions><plugins_instructions>
|
||||||
|
## Plugins
|
||||||
|
A plugin is a local bundle of skills, MCP servers, and apps.
|
||||||
|
### How to use plugins
|
||||||
|
- Skill naming: If a plugin contributes skills, those skill entries are prefixed with `plugin_name:` in the Skills list.
|
||||||
|
- MCP naming: Plugin-provided MCP tools keep standard MCP identifiers such as `mcp__server__tool`; use tool provenance to tell which plugin they come from.
|
||||||
|
- Trigger rules: If the user explicitly names a plugin, prefer capabilities associated with that plugin for that turn.
|
||||||
|
- Relationship to capabilities: Plugins are not invoked directly. Use their underlying skills, MCP tools, and app tools to help solve the task.
|
||||||
|
- Relevance: Determine what a plugin can help with from explicit user mention or from the plugin-associated skills, MCP tools, and apps exposed elsewhere in this turn.
|
||||||
|
- Missing/blocked: If the user requests a plugin that does not have relevant callable capabilities for the task, say so briefly and continue with the best fallback.
|
||||||
|
</plugins_instructions>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**User**
|
||||||
|
|
||||||
|
你是本任务的前置审核/规划 agent。目标:针对 /Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html 需要还原的 3 个 Figma 节点做实现前审查:cp node 859:2027、brother node 859:2247、sister node 859:2454,Figma fileKey=vaDp5wwn6AOQVlt9zk0f9r。请只做分析,不修改代码。请检查现有目录 /Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space 的结构、assets、index/style/script 复用方式、common/theme.css 和 common/i18n.js 接入要求;同时读取/截图 Figma 节点(如需使用 Figma 工具请遵循 figma-use 技能要求)。输出:1) 需要的切图/可 CSS 还原元素清单;2) 三个页面的结构拆分与关键位置/尺寸/颜色/字体;3) 还原路线与风险项;4) 对主线程实现的验收清单。不要改文件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
我会使用 `figma:figma-use` 技能读取 Figma 节点,并先做本地目录与公共能力审查;全程只分析不改文件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
已完成前置审查;未修改任何文件。
|
||||||
|
|
||||||
|
## 1) 切图 / CSS 可还原清单
|
||||||
|
|
||||||
|
### 必须新增切图,现有 assets 不够用
|
||||||
|
现有 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/assets` 多数是旧紫色/粉色 CP 空间资源,和本次 3 个 Figma 节点不一致,尤其背景、Tab、卡片主体都需要重新导出。
|
||||||
|
|
||||||
|
建议新增到:
|
||||||
|
|
||||||
|
`/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/assets/yumi/`
|
||||||
|
|
||||||
|
需要切图:
|
||||||
|
|
||||||
|
1. **整页背景 3 张**
|
||||||
|
- CP:红玫瑰婚礼背景,Figma 375×812
|
||||||
|
- Brother:蓝白玫瑰背景,Figma 375×812
|
||||||
|
- Sister:橙色玫瑰背景,Figma 375×812
|
||||||
|
|
||||||
|
2. **激活 Tab 宝石态 3 张**
|
||||||
|
- CP:约 130×48,位置 x=9 y=107
|
||||||
|
- Brother:约 130×48,位置 x=126 y=107
|
||||||
|
- Sister:约 130×48,位置 x=236 y=107
|
||||||
|
|
||||||
|
3. **卡片静态底图 3 张**
|
||||||
|
- CP:可按 355×203 或可视卡片 347×199 导出
|
||||||
|
- Brother:蓝色卡片,约 347×199
|
||||||
|
- Sister:橙色卡片,约 355×200 / 可视 347×199
|
||||||
|
- 建议底图不包含动态头像、天数、进度文字、等级文字。
|
||||||
|
|
||||||
|
4. **中间关系主视觉 3 张**
|
||||||
|
- CP:心形主体约 136×120
|
||||||
|
- Brother:蓝盾主体约 136×136
|
||||||
|
- Sister:花冠主体约 136×136
|
||||||
|
|
||||||
|
5. **经验提示胶囊 3 张**
|
||||||
|
- 约 112×28,文字 “888 Exp away from Lv. 2” 建议 DOM 文本覆盖,底图单独切。
|
||||||
|
|
||||||
|
6. **头像框**
|
||||||
|
- Figma 中头像框容器 66×66,头像图 61.286×61.286,建议切一个通用金色头像框。
|
||||||
|
|
||||||
|
7. **等级小徽章 3 张**
|
||||||
|
- CP / Brother / Sister 各 24×13 左右,或 CSS 近似。
|
||||||
|
|
||||||
|
### 可 CSS 还原
|
||||||
|
1. 顶部返回箭头、help 圆形问号。
|
||||||
|
2. 导航标题 `Best Friend`。
|
||||||
|
3. Tab 外层胶囊:
|
||||||
|
- x=16 y=109 w=343 h=37
|
||||||
|
- border `#f4b747` 0.5px
|
||||||
|
- radius 32px
|
||||||
|
- CP 背景 `rgba(94,13,35,.8)`,内发光 `#ff7948`
|
||||||
|
- Brother 背景 `rgba(17,13,94,.8)`,内发光 `#4872ff`
|
||||||
|
- Sister 背景 `rgba(94,29,13,.8)`,内发光 `#ff7948`
|
||||||
|
4. 非激活 Tab 文本:18px,白色 80%。
|
||||||
|
5. 进度条:
|
||||||
|
- track:233×16,`rgba(255,255,255,.3)`,radius 74px,blur 6px
|
||||||
|
- fill:高度 14,宽度按进度动态。
|
||||||
|
- CP 渐变:`#ff1e37 -> #fe6a30 -> #ffcf67`
|
||||||
|
- Brother 渐变:`#471eff -> #30bcfe -> #67acff`
|
||||||
|
- Sister 渐变:`#ff5e1e -> #fe6a30 -> #ffb167`
|
||||||
|
6. 动态文案:
|
||||||
|
- 天数 `999 / Days`
|
||||||
|
- `888 Exp away from Lv. 2`
|
||||||
|
- `1000/200000`
|
||||||
|
- `Time spent together: 4 days`
|
||||||
|
- 等级 `Lv1`
|
||||||
|
|
||||||
|
## 2) 三个页面结构、位置、尺寸、颜色、字体
|
||||||
|
|
||||||
|
### 通用画布
|
||||||
|
- Figma 画布:375×812。
|
||||||
|
- Status Bar:0–44。
|
||||||
|
- 导航栏:x=0 y=44 w=375 h=44。
|
||||||
|
- 返回:x=16 y=54 size 24。
|
||||||
|
- help:x=335 y=54 size 24。
|
||||||
|
- 标题:x≈139 y=57 w=97 h=18。
|
||||||
|
- Tab 容器:x=16 y=109 w=343 h=37。
|
||||||
|
- Tab 文字 y=119,字号 18。
|
||||||
|
- 卡片区域:x≈14 y=169 w=347 h=199。
|
||||||
|
- 内容内层:x=46 y=175 w=289 h=163。
|
||||||
|
|
||||||
|
### CP node `859:2027`
|
||||||
|
- 页面主色:红 / 玫瑰。
|
||||||
|
- 根背景色:`#440b23`,背景图叠黑 20%。
|
||||||
|
- Tab 外层:`rgba(94,13,35,.8)`,内阴影 `#ff7948`。
|
||||||
|
- Active Tab:CP,宝石图 130×48,x=9。
|
||||||
|
- 卡片:红金婚礼风。
|
||||||
|
- 头像:
|
||||||
|
- 左头像框 x=46 y=204 size 66。
|
||||||
|
- 右头像框 x=264 y=204 size 66。
|
||||||
|
- 中央心形:
|
||||||
|
- x=120 y=175 w=136 h=120。
|
||||||
|
- 天数:
|
||||||
|
- `999`:18px,颜色 `#ff0979`。
|
||||||
|
- `Days`:8px,颜色 `#ff0979`。
|
||||||
|
- 经验提示:
|
||||||
|
- x=133 y=271 w=112 h=28。
|
||||||
|
- 文本 8px,颜色 `#ff0979`。
|
||||||
|
- 等级进度:
|
||||||
|
- row x=46 y=303 w=289 h=16。
|
||||||
|
- 文本 `1000/200000` 居中,白色。
|
||||||
|
- 底部时间:11px,颜色 `#ff5762`。
|
||||||
|
|
||||||
|
### Brother node `859:2247`
|
||||||
|
- 页面主色:蓝。
|
||||||
|
- 根背景色:`#080636`,背景图叠黑 10%。
|
||||||
|
- Tab 外层:`rgba(17,13,94,.8)`,内阴影 `#4872ff`。
|
||||||
|
- Active Tab:Brother,宝石图 130×48,x=126。
|
||||||
|
- 卡片:深蓝金边。
|
||||||
|
- 头像:
|
||||||
|
- 左 x=46 y=210 size 66。
|
||||||
|
- 右 x=264 y=210 size 66。
|
||||||
|
- 中央盾牌:
|
||||||
|
- x=120 y=175 w=136 h=136。
|
||||||
|
- 文字颜色:`#5709ff`。
|
||||||
|
- 经验提示:x=133 y=271 w=112 h=28。
|
||||||
|
- 进度条同 CP 尺寸,但蓝色渐变。
|
||||||
|
|
||||||
|
### Sister node `859:2454`
|
||||||
|
- 页面主色:橙。
|
||||||
|
- 根背景色:`#301008`,背景图叠黑 5%。
|
||||||
|
- Tab 外层:`rgba(94,29,13,.8)`,内阴影 `#ff7948`。
|
||||||
|
- Active Tab:Sister,宝石图 130×48,x=236。
|
||||||
|
- 卡片:浅橙金边。
|
||||||
|
- 头像:
|
||||||
|
- 左 x=46 y=210 size 66。
|
||||||
|
- 右 x=264 y=210 size 66。
|
||||||
|
- 中央花冠:
|
||||||
|
- x=120 y=175 w=136 h=136。
|
||||||
|
- 经验提示 y=262,比 CP/Brother 高约 9px。
|
||||||
|
- 文字颜色:`#ff4a09`。
|
||||||
|
- 天数 `999` 使用 Source Han Sans SC Bold,18px。
|
||||||
|
|
||||||
|
## 3) 还原路线与风险项
|
||||||
|
|
||||||
|
### 现有目录审查
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html` 当前只是空 HTML 壳。
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/index.html` 已接入:
|
||||||
|
- `../../common/theme.css`
|
||||||
|
- `../../common/i18n.js`
|
||||||
|
- `../../common/api.js`
|
||||||
|
- `../../common/jsbridge.js`
|
||||||
|
- `../../common/toast.js`
|
||||||
|
- `./script.js`
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/style.css` 当前是旧紫色 CP 空间样式,背景使用 `space-bg@4x.png`,和本次 Figma 不匹配。
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/script.js` 当前按 `LEVEL_PARTS` 组装旧 CP 等级资源;Brother/Sister 被强制使用 level 1 视觉,不符合本次三个独立主题。
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/common/api.js` 已支持 `?env=test` / `?env=local` / 默认线上 API。
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/common/i18n.js` 已支持 `data-i18n` / `data-i18n-aria` / `data-i18n-placeholder`,并加载 `common/locales/*.json`。
|
||||||
|
|
||||||
|
### 建议实现路线
|
||||||
|
1. 不直接复用旧 `style.css` 的主题视觉;为 `yumi.html` 新建独立 `yumi.css` / `yumi.js`,避免影响现有 `index.html`。
|
||||||
|
2. `yumi.html` 仍按现有页面方式接入:
|
||||||
|
- `../../common/theme.css`
|
||||||
|
- `../../common/i18n.js`
|
||||||
|
- `../../common/api.js`
|
||||||
|
- `../../common/jsbridge.js`
|
||||||
|
- `../../common/toast.js`
|
||||||
|
3. 新建 `RELATION_THEME`:
|
||||||
|
- `cp`
|
||||||
|
- `brother`
|
||||||
|
- `sister`
|
||||||
|
分别绑定背景图、active tab 图、卡片底图、中心图、tooltip 图、等级徽章、颜色变量。
|
||||||
|
4. DOM 保持动态:
|
||||||
|
- tab 文案使用 `data-i18n`
|
||||||
|
- 天数、等级、经验、时间使用接口数据 + `window.HyAppI18n.t`
|
||||||
|
- 不在页面脚本里新增硬编码多语言字典。
|
||||||
|
5. 视觉布局以 375 设计稿为基准,核心尺寸用 `min(100vw, 375px)` 比例缩放;桌面端居中。
|
||||||
|
6. 先实现单卡片,再兼容多关系滚动列表。
|
||||||
|
7. 如果需要保留 CP 取消关系逻辑,需要产品确认:本次 Figma 节点没有 `Cancel` 按钮,和现有 `script.js` 行为不一致。
|
||||||
|
|
||||||
|
### 风险项
|
||||||
|
1. **高风险:Figma 与现有 assets 完全不是同一版视觉。** 不能直接套旧 `parts/cp-lv*.png`。
|
||||||
|
2. **高风险:状态栏是否由 H5 绘制需确认。** Figma 包含 iOS status bar;现有 `index.html` 不绘制系统状态栏。如果 WebView 已避开状态栏,H5 再画会重复。
|
||||||
|
3. **中风险:CP 取消按钮消失。** 现有业务逻辑有 cancel/breakRelationship,本次 Figma 卡片没有取消入口。
|
||||||
|
4. **中风险:切图边界。** 卡片内有大量金边、花纹、宝石、阴影,纯 CSS 难以 100% 还原,建议卡片静态层切图。
|
||||||
|
5. **中风险:字体。** Figma 使用 Source Han Sans SC、SF Pro、Helvetica;Web 端需 fallback,数字位置可能有 1–2px 偏差。
|
||||||
|
6. **中风险:阿语 RTL。** Tab 顺序是否镜像需要确认;现有 CSS 只处理返回箭头 RTL。
|
||||||
|
7. **低风险:common/theme.css。** 该页面是强 Figma 定制,可以局部覆盖主题色,但基础变量和公共文件仍需接入。
|
||||||
|
|
||||||
|
## 4) 主线程实现验收清单
|
||||||
|
|
||||||
|
### 文件与接入
|
||||||
|
- [ ] `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html` 不再是空壳。
|
||||||
|
- [ ] 已接入 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/common/theme.css`。
|
||||||
|
- [ ] 已接入 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/common/i18n.js`。
|
||||||
|
- [ ] 文案使用 `data-i18n` 或 `HyAppI18n.t`,没有新增页面内多语言字典。
|
||||||
|
- [ ] API 环境仍遵循 `?env=test`、`?env=local`、默认线上。
|
||||||
|
|
||||||
|
### 视觉还原
|
||||||
|
- [ ] 375×812 下分别对比 Figma:
|
||||||
|
- CP node `859:2027`
|
||||||
|
- Brother node `859:2247`
|
||||||
|
- Sister node `859:2454`
|
||||||
|
- [ ] 背景、Tab、卡片顶部 y 坐标误差 ≤ 2px。
|
||||||
|
- [ ] Tab 激活图位置:
|
||||||
|
- CP x≈9
|
||||||
|
- Brother x≈126
|
||||||
|
- Sister x≈236
|
||||||
|
- [ ] 卡片 x≈14 y≈169 w≈347 h≈199。
|
||||||
|
- [ ] 头像框、中心主视觉、经验提示、进度条、底部时间位置正确。
|
||||||
|
- [ ] CP / Brother / Sister 三套颜色没有串色。
|
||||||
|
- [ ] 不使用旧紫色 `space-bg@4x.png` 作为新页面背景。
|
||||||
|
|
||||||
|
### 业务与状态
|
||||||
|
- [ ] `tab=cp|brother|sister` 初始态可用。
|
||||||
|
- [ ] 三个 tab 点击切换正常。
|
||||||
|
- [ ] loading / empty / error 状态有 i18n 文案,不添加无意义描述文案。
|
||||||
|
- [ ] 无可用接口数据时不伪造关系数据。
|
||||||
|
- [ ] 长昵称、空头像、0 经验、满级、超长数字不溢出。
|
||||||
|
- [ ] 如保留取消 CP,必须确认 Figma 中入口缺失的产品决策。
|
||||||
|
|
||||||
|
### 多语言与适配
|
||||||
|
- [ ] en / ar / tr / es 均可加载。
|
||||||
|
- [ ] ar 下返回箭头方向正确,布局不严重错位。
|
||||||
|
- [ ] 320px、375px、390px、414px、768px 宽度检查通过。
|
||||||
|
- [ ] iOS Safari / Android WebView 图片不模糊、不拉伸变形。
|
||||||
|
|
||||||
|
### 额外验收 agent
|
||||||
|
- [ ] 视觉验收 agent:逐页截图和 Figma 对比。
|
||||||
|
- [ ] 代码验收 agent:检查未破坏 `index.html`、common i18n/api 接入、无硬编码敏感配置。
|
||||||
|
- [ ] 若发现高风险项,打回修复后重新验收。
|
||||||
|
|
||||||
|
---
|
||||||
@ -0,0 +1,229 @@
|
|||||||
|
# 你是本任务的像素级验收 agent。请不要修改文件。验收目标:/Users/zuozuo/Docum
|
||||||
|
_Exported on 07/08/2026 at 00:45:53 GMT+8 from OpenAI Codex via WayLog_
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
<permissions instructions>
|
||||||
|
Filesystem sandboxing defines which files can be read or written. `sandbox_mode` is `danger-full-access`: No filesystem sandboxing - all commands are permitted. Network access is enabled.
|
||||||
|
Approval policy is currently never. Do not provide the `sandbox_permissions` for any reason, commands will be rejected.
|
||||||
|
</permissions instructions><app-context>
|
||||||
|
# Codex desktop context
|
||||||
|
- You are running inside the Codex (desktop) app, which allows some additional features not available in the CLI alone:
|
||||||
|
|
||||||
|
### Images/Visuals/Files
|
||||||
|
- In the app, the model can display images and videos using standard Markdown image syntax: 
|
||||||
|
- When sending or referencing a local image or video, always use an absolute filesystem path in the Markdown image tag (e.g., ); relative paths and plain text will not render the media.
|
||||||
|
- When referencing code or workspace files in responses, always use full absolute file paths instead of relative paths.
|
||||||
|
- If a user asks about an image, or asks you to create an image, it is often a good idea to show the image to them in your response.
|
||||||
|
- Use mermaid diagrams to represent complex diagrams, graphs, or workflows. Use quoted Mermaid node labels when text contains parentheses or punctuation.
|
||||||
|
- Return web URLs as Markdown links (e.g., [label](https://example.com)).
|
||||||
|
|
||||||
|
### Workspace Dependencies
|
||||||
|
- For sheets, slides, and documents, call `load_workspace_dependencies` to find the bundled runtime and libraries.
|
||||||
|
|
||||||
|
### Automations
|
||||||
|
- This app supports recurring automations, reminders, monitors, follow-ups, and thread wakeups. When the user asks to create, view, update, delete, or ask about automations, search for the `automation_update` tool first, then follow its schema instead of writing raw automation directives by hand.
|
||||||
|
- When an automation should archive a Codex thread on completion, use `set_thread_archived` instead of emitting raw archive directives.
|
||||||
|
|
||||||
|
### Thread Coordination
|
||||||
|
- When the user asks to create, fork, inspect, continue, hand off, pin, archive, rename, or otherwise manage Codex threads, search for the relevant thread tool first: `create_thread`, `fork_thread`, `list_threads`, `read_thread`, `send_message_to_thread`, `handoff_thread`, `set_thread_pinned`, `set_thread_archived`, or `set_thread_title`.
|
||||||
|
- Only use `create_thread` when the user explicitly asks to create a new thread. Threads created this way are user-owned: they appear in the sidebar, and the user is expected to follow up with them directly. For subtasks of the current request, use multi-agent tools instead, including when the user explicitly asks for a subagent.
|
||||||
|
- After a successful `create_thread` call, emit `::created-thread{threadId="..."}` for a created thread or `::created-thread{pendingWorktreeId="..."}` for queued worktree setup on its own line in your final response.
|
||||||
|
|
||||||
|
### Inline Code Comments
|
||||||
|
- Use the ::code-comment{...} directive when you need to attach feedback directly to specific code lines.
|
||||||
|
- Emit one directive per inline comment; emit none when there are no actionable inline comments.
|
||||||
|
- Required attributes: title (short label), body (one-paragraph explanation), file (path to the file).
|
||||||
|
- Optional attributes: start, end (1-based line numbers), priority (0-3).
|
||||||
|
- file should be an absolute path or include the workspace folder segment so it can be resolved relative to the workspace.
|
||||||
|
- Keep line ranges tight; end defaults to start.
|
||||||
|
- Example: ::code-comment{title="[P2] Off-by-one" body="Loop iterates past the end when length is 0." file="/path/to/foo.ts" start=10 end=11 priority=2}
|
||||||
|
|
||||||
|
### Git
|
||||||
|
- Branch prefix: `codex/`. Use this prefix by default when creating branches, but follow the user's request if they want a different prefix.
|
||||||
|
- After successfully staging files, emit `::git-stage{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating a commit, emit `::git-commit{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating or switching the thread onto a branch, emit `::git-create-branch{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully pushing the current branch, emit `::git-push{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully creating a pull request, emit `::git-create-pr{cwd="/absolute/path" branch="branch-name" url="https://..." isDraft=true}` on its own line in your final response. Include `isDraft=false` for ready PRs.
|
||||||
|
- Only emit these git directives in your final response after the action actually succeeds, never in commentary updates. Keep attributes single-line.
|
||||||
|
</app-context><apps_instructions>
|
||||||
|
## Apps (Connectors)
|
||||||
|
Apps (Connectors) can be explicitly triggered in user messages in the format `[$app-name](app://{connector_id})`. Apps can also be implicitly triggered as long as the context suggests usage of available apps.
|
||||||
|
An app is equivalent to a set of MCP tools within the `codex_apps` MCP.
|
||||||
|
An installed app's MCP tools are either provided to you already, or can be lazy-loaded through the `tool_search` tool. If `tool_search` is available, the apps that are searchable by `tools_search` will be listed by it.
|
||||||
|
Do not additionally call list_mcp_resources or list_mcp_resource_templates for apps.
|
||||||
|
</apps_instructions><skills_instructions>
|
||||||
|
## Skills
|
||||||
|
A skill is a set of local instructions to follow that is stored in a `SKILL.md` file. Below is the list of skills that can be used. Each entry includes a name, description, and a short path that can be expanded into an absolute path using the skill roots table.
|
||||||
|
### Skill roots
|
||||||
|
- `r0` = `/Users/zuozuo/.codex/skills`
|
||||||
|
- `r1` = `/Users/zuozuo/.agents/skills`
|
||||||
|
- `r2` = `/Users/zuozuo/.codex/skills/.system`
|
||||||
|
- `r3` = `/Users/zuozuo/.codex/plugins/cache/openai-bundled`
|
||||||
|
- `r4` = `/Users/zuozuo/.codex/plugins/cache/openai-curated/github/d6169bef/skills`
|
||||||
|
- `r5` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/figma/2.0.13/skills`
|
||||||
|
- `r6` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/product-design/0.1.48/skills`
|
||||||
|
- `r7` = `/Users/zuozuo/.codex/plugins/cache/openai-primary-runtime`
|
||||||
|
### Available skills
|
||||||
|
- imagegen: Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing i (file: r2/imagegen/SKILL.md)
|
||||||
|
- openai-docs: Use when the user asks how to build with OpenAI products or APIs, asks about Codex itself or choosing Codex surfaces, needs up-to-date official documentation with citations, help choosing the latest model for a use case, or model upgrade and prompt (file: r2/openai-docs/SKILL.md)
|
||||||
|
- plugin-creator: Create and scaffold plugin directories for Codex with a required `.codex-plugin/plugin.json`, optional plugin folders/files, valid manifest defaults, and personal-marketplace entries by default. Use when Codex needs to create a new personal plugin, a (file: r2/plugin-creator/SKILL.md)
|
||||||
|
- skill-creator: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations. (file: r2/skill-creator/SKILL.md)
|
||||||
|
- skill-installer: Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos). (file: r2/skill-installer/SKILL.md)
|
||||||
|
- browser:control-in-app-browser: Control the in-app Browser. Use to open, navigate, inspect, test, click, type, screenshot, or verify local targets such as localhost, 127.0.0.1, ::1, file://, the current in-app browser tab, and websites shown side by side inside Codex. (file: r3/browser/26.623.141536/skills/control-in-app-browser/SKILL.md)
|
||||||
|
- documents:documents: Create, edit, redline, and comment on `.docx`, Word, and Google Docs-targeted document artifacts inside the container, with a strict render-and-verify workflow. Use `render_docx.py` to generate page PNGs (and optional PDF) for visual QA, then itera (file: r7/documents/26.630.12135/skills/documents/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r1/dws/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r0/dws/SKILL.md)
|
||||||
|
- figma:figma-code-connect: Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files. (file: r5/figma-code-connect/SKILL.md)
|
||||||
|
- figma:figma-create-new-file: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, o (file: r5/figma-create-new-file/SKILL.md)
|
||||||
|
- figma:figma-generate-design: Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Fi (file: r5/figma-generate-design/SKILL.md)
|
||||||
|
- figma:figma-generate-diagram: MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram (file: r5/figma-generate-diagram/SKILL.md)
|
||||||
|
- figma:figma-generate-library: Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (file: r5/figma-generate-library/SKILL.md)
|
||||||
|
- figma:figma-implement-motion: Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma (file: r5/figma-implement-motion/SKILL.md)
|
||||||
|
- figma:figma-swiftui: SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code (file: r5/figma-swiftui/SKILL.md)
|
||||||
|
- figma:figma-use: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perf (file: r5/figma-use/SKILL.md)
|
||||||
|
- figma:figma-use-figjam: This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-figjam/SKILL.md)
|
||||||
|
- figma:figma-use-motion: Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a nod (file: r5/figma-use-motion/SKILL.md)
|
||||||
|
- figma:figma-use-slides: This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-slides/SKILL.md)
|
||||||
|
- github:gh-address-comments: Address actionable GitHub pull request review feedback. Use when the user wants to inspect unresolved review threads, requested changes, or inline review comments on a PR, then implement selected fixes. Use the GitHub app for PR metadata and flat co (file: r4/gh-address-comments/SKILL.md)
|
||||||
|
- github:gh-fix-ci: Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions. Use the GitHub app from this plugin for PR metadata and patch context, and use `gh` for Actions check and log inspection before implementing any approved fix. (file: r4/gh-fix-ci/SKILL.md)
|
||||||
|
- github:github: Triage and orient GitHub repository, pull request, and issue work through the connected GitHub app. Use when the user asks for general GitHub help, wants PR or issue summaries, or needs repository context before choosing a more specific GitHub workflo (file: r4/github/SKILL.md)
|
||||||
|
- github:yeet: Publish local changes to GitHub by confirming scope, committing intentionally, pushing the branch, and opening a draft PR through the GitHub app from this plugin, with `gh` used only as a fallback where connector coverage is insufficient. (file: r4/yeet/SKILL.md)
|
||||||
|
- lark-approval: 飞书审批:当前用户审批的查询与全部处理操作,覆盖待本人审批的任务与本人发起的实例。审批待办不是飞书任务(任务类待办走 lark-task);不负责创建审批定义和发起新审批。 (file: r1/lark-approval/SKILL.md)
|
||||||
|
- lark-apps: 妙搭(Spark/Miaoda)应用开发与托管:应用创建、HTML静态站点发布、本地全栈开发、云端生成迭代。当用户要开发/新建一个系统·工具·平台·应用,或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接,或用 HTML 做页面·网站给人看,或提到妙搭/Spark/Miaoda、应用数据库、可见范围时使用。不负责普通云盘文件上传(lark-drive)、飞书文档编辑(lark-doc)、原生幻灯片创建(lark-slides)。 (file: r1/lark-apps/SKILL.md)
|
||||||
|
- lark-attendance: 飞书考勤打卡:查询自己的考勤打卡记录 (file: r1/lark-attendance/SKILL.md)
|
||||||
|
- lark-base: 飞书多维表格(Base)操作:建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、workflow、角色权限;遇到 Base/多维表格/bitable 或 /base/ 链接时使用。文件导入转 lark-drive,认证/授权转 lark-shared。 (file: r1/lark-base/SKILL.md)
|
||||||
|
- lark-calendar: 飞书日历:管理日历日程和会议室。查看/搜索日程、创建/更新日程、管理参会人、查询忙闲和推荐时段、预定会议室。当用户需要查看日程安排、创建/修改会议、查询/预定会议室时使用。不负责:查询过去的视频会议记录(走 lark-vc)、待办任务(走 lark-task)。 (file: r1/lark-calendar/SKILL.md)
|
||||||
|
- lark-contact: 飞书 / Lark 通讯录:按姓名 / 邮箱解析成 open_id,或按 open_id 反查姓名 / 部门 / 邮箱 / 联系方式 / 个人状态 / 签名。当用户提到某人姓名要下一步发消息 / 排日程,或拿到 open_id 想查具体信息时使用。不负责部门树遍历、按部门列员工、组织架构图,这类需求走原生 OpenAPI。 (file: r1/lark-contact/SKILL.md)
|
||||||
|
- lark-doc: 飞书云文档(Docx / Wiki 文档,v2 API):读取和编辑飞书文档内容。当用户给出文档 URL 或 token,或需要查看、创建、编辑文档、插入或下载文档图片附件时使用。文档中嵌入的电子表格、多维表格、画板,先用本 skill 提取 token 再切到对应 skill。当用户给出 doubao.com 的 /docx/ 或 /wiki/ URL/token 时,也应直接使用本 skill;路由依据是 URL 路径模式和 token,而不是域名。不负责文档评论管理,也不负责表格或 Bas (file: r1/lark-doc/SKILL.md)
|
||||||
|
- lark-drive: 飞书云空间(云盘/云存储):管理云空间(云盘/云存储)中的文件和文件夹。上传和下载文件、创建文件夹、复制/移动/删除文件、查看文件元数据、管理文档评论、管理文档权限、订阅用户评论变更事件、修改文件标题(docx、sheet、bitable、file、folder、wiki);也负责把本地 Word/Markdown/Excel/CSV/PPTX 以及 Base 快照(.base)导入为飞书在线云文档(docx、sheet、bitable、slides)。当用户需要上传或下载文件、整理云空间( (file: r1/lark-drive/SKILL.md)
|
||||||
|
- lark-event: Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume <EventKey>` (covers IM messages/reactions/chat changes, VC meeting ended, Minutes generated, Whiteboard updated, etc.). Use for Lark (file: r1/lark-event/SKILL.md)
|
||||||
|
- lark-im: 飞书即时通讯:收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件(支持大文件分片下载)、管理表情回复、发送应用内/短信/电话加急。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶(添加/移除/查询置顶会话)、管理标签数据时使用。 (file: r1/lark-im/SKILL.md)
|
||||||
|
- lark-mail: 飞书邮箱 — draft, compose, send, reply, forward, read, and search emails; manage drafts, folders, labels, contacts, attachments, and mail rules. Use when user mentions 起草邮件, 写一封邮件, 拟邮件, 草稿, 发通知邮件, 发送邮件, 发邮件, 回复邮件, 转发邮件, 查看邮件, 看邮件, 读邮件, 搜索邮件, 查邮件, 收件箱, (file: r1/lark-mail/SKILL.md)
|
||||||
|
- lark-markdown: 飞书 Markdown:查看、创建、上传、编辑和比较 Markdown 文件。当用户需要创建或编辑 Markdown 文件、读取、修改、局部 patch 或比较差异时使用。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。 (file: r1/lark-markdown/SKILL.md)
|
||||||
|
- lark-minutes: 飞书妙记:搜索妙记列表、查看妙记基础信息、下载妙记音视频文件、上传音视频生成妙记、更新妙记标题、替换说话人。当需要获取、操作或者生成妙记时使用。也支持将本地音视频文件转成纪要和逐字稿(优先使用本 skill,不要用 ffmpeg/whisper 本地转写)。不负责:获取会议关联妙记、纪要/逐字稿内容获取走 lark-vc (file: r1/lark-minutes/SKILL.md)
|
||||||
|
- lark-okr: 飞书 OKR:管理目标与关键结果。查看和编辑 OKR 周期、目标(Objective)、关键结果(Key Result)、对齐关系、量化指标和进展记录。当用户需要查看或创建 OKR、管理目标和关键结果、查看对齐关系时使用。 (file: r1/lark-okr/SKILL.md)
|
||||||
|
- lark-openapi-explorer: 飞书/Lark 原生 OpenAPI 探索:从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足,需要查找并调用原生飞书 OpenAPI 时使用。 (file: r1/lark-openapi-explorer/SKILL.md)
|
||||||
|
- lark-shared: Use when first setting up lark-cli, running auth login, switching user/bot identity (--as), handling permission denied or scope errors, needing to update lark-cli, or seeing _notice in JSON output. (file: r1/lark-shared/SKILL.md)
|
||||||
|
- lark-sheets: 飞书电子表格:创建和操作电子表格。支持创建表格、管理工作表与行列结构(增删/合并/调整尺寸/隐藏/冻结)、读写单元格(值/公式/样式/批注/单元格图片)、查找替换、多操作原子批量更新,以及图表、透视表、条件格式、筛选器、迷你图、浮动图片等对象的创建与维护。当用户需要创建电子表格、管理工作表、批量读写或编辑数据、统计汇总与可视化、表格美化、公式计算(含 Excel 公式迁移)等任务时使用。若用户是想按名称或关键词搜索云空间(云盘/云存储)里的表格文件,请改用 lark-drive 的 drive (file: r1/lark-sheets/SKILL.md)
|
||||||
|
- lark-skill-maker: 创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill(包装原子 API 或编排多步流程)时使用。 (file: r1/lark-skill-maker/SKILL.md)
|
||||||
|
- lark-slides: 飞书幻灯片:创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面(创建、删除、读取、局部替换)。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:云文档内容编辑(走 lark-doc)、云文档里的独立画板对象(走 lark-whiteboard,注意 slide (file: r1/lark-slides/SKILL.md)
|
||||||
|
- lark-task: 飞书任务:管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。 (file: r1/lark-task/SKILL.md)
|
||||||
|
- lark-vc: 飞书视频会议:搜索历史会议记录、查询会议纪要(总结/待办/章节/逐字稿)、查询参会人快照。当用户查询已结束的会议、获取会议产物(纪要/妙记)、查看参会人时使用;查询未来日程走 lark-calendar。不负责:Agent 真实入会/离会、会中实时事件(走 lark-vc-agent)。 (file: r1/lark-vc/SKILL.md)
|
||||||
|
- lark-vc-agent: 飞书视频会议:让机器人代当前用户加入/离开正在进行的会议,并读取会议期间的实时事件(参会人加入与离开、发言、聊天、屏幕共享等)。1. 用户提供 9 位会议号、要求代为入会或离会时使用 +meeting-join / +meeting-leave——会真实产生入会/离会记录。2. 会议进行中用户想知道“谁加入了”“谁离开了”“谁在发言”“有人共享屏幕吗”等会中动态时,机器人入会后用 +meeting-events 读取事件时间线。3. 典型场景:参会机器人、会中助手、代为旁听、代为参会。前提: (file: r1/lark-vc-agent/SKILL.md)
|
||||||
|
- lark-whiteboard: 飞书画板:查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用 DSL(转成 OpenAPI 格式)、PlantUML/Mermaid 格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板,或是需要可视化表达架构、流程、组织关系、时间线、因果、对比等结构化信息时使用此 skill,无论是否提及"画板"。 ⚠️ 原 `lark-whiteboard-cli` skill 已合并至本 skill,若 skill 列表中同时存在 `lark-whiteboard- (file: r1/lark-whiteboard/SKILL.md)
|
||||||
|
- lark-wiki: 飞书知识库:管理知识空间、空间成员和文档节点。创建和查询知识空间、查看和管理空间成员、管理节点层级结构、在知识库中组织文档和快捷方式。当用户需要在知识库中查找或创建文档、浏览知识空间结构、查看或管理空间成员、移动或复制节点时使用。当用户给出 doubao.com 的 /wiki/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:上传文件到知识库节点下(走 lark-drive) (file: r1/lark-wiki/SKILL.md)
|
||||||
|
- lark-workflow-meeting-summary: 会议纪要整理工作流:汇总指定时间范围内的会议纪要并生成结构化报告。当用户需要整理会议纪要、生成会议周报、回顾一段时间内的会议内容时使用。 (file: r1/lark-workflow-meeting-summary/SKILL.md)
|
||||||
|
- lark-workflow-standup-report: 日程待办摘要:编排 calendar +agenda 和 task +get-my-tasks,生成指定日期的日程与未完成任务摘要。适用于了解今天/明天/本周的安排。 (file: r1/lark-workflow-standup-report/SKILL.md)
|
||||||
|
- pdf:pdf: Read, create, inspect, render, and verify PDF files where visual layout matters. Use Poppler rendering plus Python tools such as reportlab, pdfplumber, and pypdf for generation and extraction. (file: r7/pdf/26.630.12135/skills/pdf/SKILL.md)
|
||||||
|
- presentations:Presentations: Create or edit PowerPoint or Google Slides decks (file: r7/presentations/26.630.12135/skills/presentations/SKILL.md)
|
||||||
|
- product-design:audit: Audit or critique a product flow, journey, workflow, funnel, onboarding path, checkout path, settings path, screen, or multi-step product experience by capturing screenshots first, placing them in Figma or a local folder, then reporting UX, design, (file: r6/audit/SKILL.md)
|
||||||
|
- product-design:get-context: Mandatory design-brief gate for Product Design build and design workflows. Use before ideation, prototyping, image-to-code builds, redesigns, or product UI work to clarify missing product, visual, and interactivity context or play back the supplied (file: r6/get-context/SKILL.md)
|
||||||
|
- product-design:ideate: Generate image-based visual alternatives, remixes, or concept directions after Product Design get-context has confirmed the design brief. Use when the user asks for design variants, visual exploration, remixes, or image-generated approaches from provi (file: r6/ideate/SKILL.md)
|
||||||
|
- product-design:image-to-code: Implement a selected image, screenshot, mockup, or Image Gen reference as a faithful responsive frontend after Product Design get-context has confirmed the design brief. (file: r6/image-to-code/SKILL.md)
|
||||||
|
- product-design:index: Use to discover specific skills for the Product Design plugin, when it is at-mentioned directly, or for any mentions of potentially relevant work, including: UX research; product, screen, or flow audits; visual ideation; app or interface design, red (file: r6/index/SKILL.md)
|
||||||
|
- spreadsheets:Spreadsheets: Use this skill when a user requests to create, modify, analyze, visualize, or work with spreadsheet files (`.xlsx`, `.xls`, `.csv`, `.tsv`) or Google Sheets-targeted spreadsheet artifacts with formulas, formatting, charts, tables, and recalculation (file: r7/spreadsheets/26.630.12135/skills/spreadsheets/SKILL.md)
|
||||||
|
- template-creator:template-creator: Create or update a reusable personal Codex artifact-template skill. Use when the user invokes $template-creator or asks in natural language to create a template using, from, or based on an attached Word document, PowerPoint presentation, or Excel w (file: r7/template-creator/26.630.12135/skills/template-creator/SKILL.md)
|
||||||
|
### How to use skills
|
||||||
|
- Discovery: The list above is the skills available in this session (name + description + short path). Skill bodies live on disk at the listed paths after expanding the matching alias from `### Skill roots`.
|
||||||
|
- Trigger rules: If the user names a skill (with `$SkillName` or plain text) OR the task clearly matches a skill's description shown above, you must use that skill for that turn. Multiple mentions mean use them all. Do not carry skills across turns unless re-mentioned.
|
||||||
|
- Missing/blocked: If a named skill isn't in the list or the path can't be read, say so briefly and continue with the best fallback.
|
||||||
|
- How to use a skill (progressive disclosure):
|
||||||
|
1) After deciding to use a skill, the main agent must expand the listed short `path` with the matching alias from `### Skill roots`, then open and read its `SKILL.md` completely before taking task actions. If a read is truncated or paginated, continue until EOF.
|
||||||
|
2) When `SKILL.md` references relative paths (e.g., `scripts/foo.py`), resolve them relative to the directory containing that expanded `SKILL.md` first, and only consider other paths if needed.
|
||||||
|
3) If `SKILL.md` points to extra folders such as `references/`, use its routing instructions to identify the files required for the task. The main agent must read each required instruction or reference file itself before acting on it. Do not delegate reading, summarizing, or interpreting skill instructions to a subagent. Subagents may still perform task work when the selected skill allows it.
|
||||||
|
4) If `scripts/` exist, prefer running or patching them instead of retyping large code blocks.
|
||||||
|
5) If `assets/` or templates exist, reuse them instead of recreating from scratch.
|
||||||
|
- Coordination and sequencing:
|
||||||
|
- If multiple skills apply, choose the minimal set that covers the request and state the order you'll use them.
|
||||||
|
- Announce which skill(s) you're using and why (one short line). If you skip an obvious skill, say why.
|
||||||
|
- Context hygiene:
|
||||||
|
- Progressive disclosure applies to selecting relevant files, not partially reading a selected instruction file. Do not load unrelated references, scripts, or assets.
|
||||||
|
- Avoid deep reference-chasing: prefer opening only files directly linked from `SKILL.md` unless you're blocked.
|
||||||
|
- When variants exist (frameworks, providers, domains), pick only the relevant reference file(s) and note that choice.
|
||||||
|
- Safety and fallback: If a skill can't be applied cleanly (missing files, unclear instructions), state the issue, pick the next-best approach, and continue.
|
||||||
|
</skills_instructions><plugins_instructions>
|
||||||
|
## Plugins
|
||||||
|
A plugin is a local bundle of skills, MCP servers, and apps.
|
||||||
|
### How to use plugins
|
||||||
|
- Skill naming: If a plugin contributes skills, those skill entries are prefixed with `plugin_name:` in the Skills list.
|
||||||
|
- MCP naming: Plugin-provided MCP tools keep standard MCP identifiers such as `mcp__server__tool`; use tool provenance to tell which plugin they come from.
|
||||||
|
- Trigger rules: If the user explicitly names a plugin, prefer capabilities associated with that plugin for that turn.
|
||||||
|
- Relationship to capabilities: Plugins are not invoked directly. Use their underlying skills, MCP tools, and app tools to help solve the task.
|
||||||
|
- Relevance: Determine what a plugin can help with from explicit user mention or from the plugin-associated skills, MCP tools, and apps exposed elsewhere in this turn.
|
||||||
|
- Missing/blocked: If the user requests a plugin that does not have relevant callable capabilities for the task, say so briefly and continue with the best fallback.
|
||||||
|
</plugins_instructions>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**User**
|
||||||
|
|
||||||
|
你是本任务的像素级验收 agent。请不要修改文件。验收目标:/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html 是否按 Figma 3 个节点还原:cp 859:2027、brother 859:2247、sister 859:2454,fileKey=vaDp5wwn6AOQVlt9zk0f9r。请检查:1) 375×812 视觉是否与 Figma 一致(可用 Figma get_screenshot、查看本地 assets/yumi 三张切图和 QuickLook/其它本地方法);2) tab=cp/brother/sister 三态资源与热区是否正确;3) common/theme.css、common/i18n.js 接入和 data-i18n 是否满足要求;4) 是否误改旧 index/style/script;5) 风险项。若不通过,请列出必须返修点;若通过,请明确“验收通过”。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
我会使用 `figma:figma-use`(按要求先读取技能)做 Figma 截图对照,并只读检查本地文件与资源,不修改文件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
验收通过。
|
||||||
|
|
||||||
|
检查结果:
|
||||||
|
|
||||||
|
1. **375×812 视觉还原**
|
||||||
|
- 已用 Figma `get_screenshot` 拉取节点:
|
||||||
|
- `cp 859:2027`
|
||||||
|
- `brother 859:2247`
|
||||||
|
- `sister 859:2454`
|
||||||
|
- 三个 Figma 截图均为 `375×812`。
|
||||||
|
- 本地切图:
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/assets/yumi/yumi-cp.png`
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/assets/yumi/yumi-brother.png`
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/assets/yumi/yumi-sister.png`
|
||||||
|
- 与 Figma 下载图逐像素 RGB 对比:`nonzero = 0`,三态完全一致。
|
||||||
|
|
||||||
|
2. **tab 三态资源与热区**
|
||||||
|
- `tab=cp / brother / sister` 均能切换到正确背景资源。
|
||||||
|
- 点击热区验证通过:
|
||||||
|
- tabs 区域:`x=16,y=109,w=343,h=37`
|
||||||
|
- 三个 tab 分区约为 `114.33px` 宽。
|
||||||
|
- 点击后:
|
||||||
|
- `data-tab` 正确更新
|
||||||
|
- `aria-selected` 正确更新
|
||||||
|
- URL `tab` 参数正确 replace
|
||||||
|
- 背景图切到对应 `yumi-*.png`
|
||||||
|
- 返回、帮助热区位置与 Figma 一致:
|
||||||
|
- back:`16,54,24×24`
|
||||||
|
- help:`335,54,24×24`
|
||||||
|
|
||||||
|
3. **common/theme.css、common/i18n.js 接入**
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html` 已引用:
|
||||||
|
- `../../common/theme.css`
|
||||||
|
- `../../common/i18n.js`
|
||||||
|
- 页面使用了 `data-i18n` / `data-i18n-aria`。
|
||||||
|
- `en/ar/tr/es/zh/id` 的 `cpSpace.*` key 均存在。
|
||||||
|
- 实测 `lang=ar`:
|
||||||
|
- `html lang="ar"`
|
||||||
|
- `dir="rtl"`
|
||||||
|
- title、aria 文案均正常切换。
|
||||||
|
|
||||||
|
4. **旧 index/style/script 是否误改**
|
||||||
|
- 未发现 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/index.html`
|
||||||
|
- 未发现 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/style.css`
|
||||||
|
- 未发现 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/script.js`
|
||||||
|
有 diff。
|
||||||
|
|
||||||
|
5. **风险项**
|
||||||
|
- 当前方案是整屏位图还原,视觉上像素级通过;但图片里的可见英文文案不会随语言切换。如果后续要求“可见 UI 文案也多语言化”,需要改为分层 DOM 文案或多语言切图。
|
||||||
|
- CSS 中有少量 Figma 背景兜底色硬编码;主视觉由 Figma 切图决定,当前不影响验收。
|
||||||
|
|
||||||
|
---
|
||||||
@ -0,0 +1,387 @@
|
|||||||
|
# 你是本次返工的图层拆分/验收规划 agent。必须遵守红线:禁止使用整页截图作为还原资源或验收依据。
|
||||||
|
_Exported on 07/08/2026 at 00:45:53 GMT+8 from OpenAI Codex via WayLog_
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
<permissions instructions>
|
||||||
|
Filesystem sandboxing defines which files can be read or written. `sandbox_mode` is `danger-full-access`: No filesystem sandboxing - all commands are permitted. Network access is enabled.
|
||||||
|
Approval policy is currently never. Do not provide the `sandbox_permissions` for any reason, commands will be rejected.
|
||||||
|
</permissions instructions><app-context>
|
||||||
|
# Codex desktop context
|
||||||
|
- You are running inside the Codex (desktop) app, which allows some additional features not available in the CLI alone:
|
||||||
|
|
||||||
|
### Images/Visuals/Files
|
||||||
|
- In the app, the model can display images and videos using standard Markdown image syntax: 
|
||||||
|
- When sending or referencing a local image or video, always use an absolute filesystem path in the Markdown image tag (e.g., ); relative paths and plain text will not render the media.
|
||||||
|
- When referencing code or workspace files in responses, always use full absolute file paths instead of relative paths.
|
||||||
|
- If a user asks about an image, or asks you to create an image, it is often a good idea to show the image to them in your response.
|
||||||
|
- Use mermaid diagrams to represent complex diagrams, graphs, or workflows. Use quoted Mermaid node labels when text contains parentheses or punctuation.
|
||||||
|
- Return web URLs as Markdown links (e.g., [label](https://example.com)).
|
||||||
|
|
||||||
|
### Workspace Dependencies
|
||||||
|
- For sheets, slides, and documents, call `load_workspace_dependencies` to find the bundled runtime and libraries.
|
||||||
|
|
||||||
|
### Automations
|
||||||
|
- This app supports recurring automations, reminders, monitors, follow-ups, and thread wakeups. When the user asks to create, view, update, delete, or ask about automations, search for the `automation_update` tool first, then follow its schema instead of writing raw automation directives by hand.
|
||||||
|
- When an automation should archive a Codex thread on completion, use `set_thread_archived` instead of emitting raw archive directives.
|
||||||
|
|
||||||
|
### Thread Coordination
|
||||||
|
- When the user asks to create, fork, inspect, continue, hand off, pin, archive, rename, or otherwise manage Codex threads, search for the relevant thread tool first: `create_thread`, `fork_thread`, `list_threads`, `read_thread`, `send_message_to_thread`, `handoff_thread`, `set_thread_pinned`, `set_thread_archived`, or `set_thread_title`.
|
||||||
|
- Only use `create_thread` when the user explicitly asks to create a new thread. Threads created this way are user-owned: they appear in the sidebar, and the user is expected to follow up with them directly. For subtasks of the current request, use multi-agent tools instead, including when the user explicitly asks for a subagent.
|
||||||
|
- After a successful `create_thread` call, emit `::created-thread{threadId="..."}` for a created thread or `::created-thread{pendingWorktreeId="..."}` for queued worktree setup on its own line in your final response.
|
||||||
|
|
||||||
|
### Inline Code Comments
|
||||||
|
- Use the ::code-comment{...} directive when you need to attach feedback directly to specific code lines.
|
||||||
|
- Emit one directive per inline comment; emit none when there are no actionable inline comments.
|
||||||
|
- Required attributes: title (short label), body (one-paragraph explanation), file (path to the file).
|
||||||
|
- Optional attributes: start, end (1-based line numbers), priority (0-3).
|
||||||
|
- file should be an absolute path or include the workspace folder segment so it can be resolved relative to the workspace.
|
||||||
|
- Keep line ranges tight; end defaults to start.
|
||||||
|
- Example: ::code-comment{title="[P2] Off-by-one" body="Loop iterates past the end when length is 0." file="/path/to/foo.ts" start=10 end=11 priority=2}
|
||||||
|
|
||||||
|
### Git
|
||||||
|
- Branch prefix: `codex/`. Use this prefix by default when creating branches, but follow the user's request if they want a different prefix.
|
||||||
|
- After successfully staging files, emit `::git-stage{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating a commit, emit `::git-commit{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating or switching the thread onto a branch, emit `::git-create-branch{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully pushing the current branch, emit `::git-push{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully creating a pull request, emit `::git-create-pr{cwd="/absolute/path" branch="branch-name" url="https://..." isDraft=true}` on its own line in your final response. Include `isDraft=false` for ready PRs.
|
||||||
|
- Only emit these git directives in your final response after the action actually succeeds, never in commentary updates. Keep attributes single-line.
|
||||||
|
</app-context><apps_instructions>
|
||||||
|
## Apps (Connectors)
|
||||||
|
Apps (Connectors) can be explicitly triggered in user messages in the format `[$app-name](app://{connector_id})`. Apps can also be implicitly triggered as long as the context suggests usage of available apps.
|
||||||
|
An app is equivalent to a set of MCP tools within the `codex_apps` MCP.
|
||||||
|
An installed app's MCP tools are either provided to you already, or can be lazy-loaded through the `tool_search` tool. If `tool_search` is available, the apps that are searchable by `tools_search` will be listed by it.
|
||||||
|
Do not additionally call list_mcp_resources or list_mcp_resource_templates for apps.
|
||||||
|
</apps_instructions><skills_instructions>
|
||||||
|
## Skills
|
||||||
|
A skill is a set of local instructions to follow that is stored in a `SKILL.md` file. Below is the list of skills that can be used. Each entry includes a name, description, and a short path that can be expanded into an absolute path using the skill roots table.
|
||||||
|
### Skill roots
|
||||||
|
- `r0` = `/Users/zuozuo/.codex/skills`
|
||||||
|
- `r1` = `/Users/zuozuo/.agents/skills`
|
||||||
|
- `r2` = `/Users/zuozuo/.codex/skills/.system`
|
||||||
|
- `r3` = `/Users/zuozuo/.codex/plugins/cache/openai-bundled`
|
||||||
|
- `r4` = `/Users/zuozuo/.codex/plugins/cache/openai-curated/github/d6169bef/skills`
|
||||||
|
- `r5` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/figma/2.0.13/skills`
|
||||||
|
- `r6` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/product-design/0.1.48/skills`
|
||||||
|
- `r7` = `/Users/zuozuo/.codex/plugins/cache/openai-primary-runtime`
|
||||||
|
### Available skills
|
||||||
|
- imagegen: Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing i (file: r2/imagegen/SKILL.md)
|
||||||
|
- openai-docs: Use when the user asks how to build with OpenAI products or APIs, asks about Codex itself or choosing Codex surfaces, needs up-to-date official documentation with citations, help choosing the latest model for a use case, or model upgrade and prompt (file: r2/openai-docs/SKILL.md)
|
||||||
|
- plugin-creator: Create and scaffold plugin directories for Codex with a required `.codex-plugin/plugin.json`, optional plugin folders/files, valid manifest defaults, and personal-marketplace entries by default. Use when Codex needs to create a new personal plugin, a (file: r2/plugin-creator/SKILL.md)
|
||||||
|
- skill-creator: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations. (file: r2/skill-creator/SKILL.md)
|
||||||
|
- skill-installer: Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos). (file: r2/skill-installer/SKILL.md)
|
||||||
|
- browser:control-in-app-browser: Control the in-app Browser. Use to open, navigate, inspect, test, click, type, screenshot, or verify local targets such as localhost, 127.0.0.1, ::1, file://, the current in-app browser tab, and websites shown side by side inside Codex. (file: r3/browser/26.623.141536/skills/control-in-app-browser/SKILL.md)
|
||||||
|
- documents:documents: Create, edit, redline, and comment on `.docx`, Word, and Google Docs-targeted document artifacts inside the container, with a strict render-and-verify workflow. Use `render_docx.py` to generate page PNGs (and optional PDF) for visual QA, then itera (file: r7/documents/26.630.12135/skills/documents/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r1/dws/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r0/dws/SKILL.md)
|
||||||
|
- figma:figma-code-connect: Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files. (file: r5/figma-code-connect/SKILL.md)
|
||||||
|
- figma:figma-create-new-file: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, o (file: r5/figma-create-new-file/SKILL.md)
|
||||||
|
- figma:figma-generate-design: Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Fi (file: r5/figma-generate-design/SKILL.md)
|
||||||
|
- figma:figma-generate-diagram: MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram (file: r5/figma-generate-diagram/SKILL.md)
|
||||||
|
- figma:figma-generate-library: Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (file: r5/figma-generate-library/SKILL.md)
|
||||||
|
- figma:figma-implement-motion: Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma (file: r5/figma-implement-motion/SKILL.md)
|
||||||
|
- figma:figma-swiftui: SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code (file: r5/figma-swiftui/SKILL.md)
|
||||||
|
- figma:figma-use: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perf (file: r5/figma-use/SKILL.md)
|
||||||
|
- figma:figma-use-figjam: This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-figjam/SKILL.md)
|
||||||
|
- figma:figma-use-motion: Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a nod (file: r5/figma-use-motion/SKILL.md)
|
||||||
|
- figma:figma-use-slides: This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-slides/SKILL.md)
|
||||||
|
- github:gh-address-comments: Address actionable GitHub pull request review feedback. Use when the user wants to inspect unresolved review threads, requested changes, or inline review comments on a PR, then implement selected fixes. Use the GitHub app for PR metadata and flat co (file: r4/gh-address-comments/SKILL.md)
|
||||||
|
- github:gh-fix-ci: Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions. Use the GitHub app from this plugin for PR metadata and patch context, and use `gh` for Actions check and log inspection before implementing any approved fix. (file: r4/gh-fix-ci/SKILL.md)
|
||||||
|
- github:github: Triage and orient GitHub repository, pull request, and issue work through the connected GitHub app. Use when the user asks for general GitHub help, wants PR or issue summaries, or needs repository context before choosing a more specific GitHub workflo (file: r4/github/SKILL.md)
|
||||||
|
- github:yeet: Publish local changes to GitHub by confirming scope, committing intentionally, pushing the branch, and opening a draft PR through the GitHub app from this plugin, with `gh` used only as a fallback where connector coverage is insufficient. (file: r4/yeet/SKILL.md)
|
||||||
|
- lark-approval: 飞书审批:当前用户审批的查询与全部处理操作,覆盖待本人审批的任务与本人发起的实例。审批待办不是飞书任务(任务类待办走 lark-task);不负责创建审批定义和发起新审批。 (file: r1/lark-approval/SKILL.md)
|
||||||
|
- lark-apps: 妙搭(Spark/Miaoda)应用开发与托管:应用创建、HTML静态站点发布、本地全栈开发、云端生成迭代。当用户要开发/新建一个系统·工具·平台·应用,或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接,或用 HTML 做页面·网站给人看,或提到妙搭/Spark/Miaoda、应用数据库、可见范围时使用。不负责普通云盘文件上传(lark-drive)、飞书文档编辑(lark-doc)、原生幻灯片创建(lark-slides)。 (file: r1/lark-apps/SKILL.md)
|
||||||
|
- lark-attendance: 飞书考勤打卡:查询自己的考勤打卡记录 (file: r1/lark-attendance/SKILL.md)
|
||||||
|
- lark-base: 飞书多维表格(Base)操作:建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、workflow、角色权限;遇到 Base/多维表格/bitable 或 /base/ 链接时使用。文件导入转 lark-drive,认证/授权转 lark-shared。 (file: r1/lark-base/SKILL.md)
|
||||||
|
- lark-calendar: 飞书日历:管理日历日程和会议室。查看/搜索日程、创建/更新日程、管理参会人、查询忙闲和推荐时段、预定会议室。当用户需要查看日程安排、创建/修改会议、查询/预定会议室时使用。不负责:查询过去的视频会议记录(走 lark-vc)、待办任务(走 lark-task)。 (file: r1/lark-calendar/SKILL.md)
|
||||||
|
- lark-contact: 飞书 / Lark 通讯录:按姓名 / 邮箱解析成 open_id,或按 open_id 反查姓名 / 部门 / 邮箱 / 联系方式 / 个人状态 / 签名。当用户提到某人姓名要下一步发消息 / 排日程,或拿到 open_id 想查具体信息时使用。不负责部门树遍历、按部门列员工、组织架构图,这类需求走原生 OpenAPI。 (file: r1/lark-contact/SKILL.md)
|
||||||
|
- lark-doc: 飞书云文档(Docx / Wiki 文档,v2 API):读取和编辑飞书文档内容。当用户给出文档 URL 或 token,或需要查看、创建、编辑文档、插入或下载文档图片附件时使用。文档中嵌入的电子表格、多维表格、画板,先用本 skill 提取 token 再切到对应 skill。当用户给出 doubao.com 的 /docx/ 或 /wiki/ URL/token 时,也应直接使用本 skill;路由依据是 URL 路径模式和 token,而不是域名。不负责文档评论管理,也不负责表格或 Bas (file: r1/lark-doc/SKILL.md)
|
||||||
|
- lark-drive: 飞书云空间(云盘/云存储):管理云空间(云盘/云存储)中的文件和文件夹。上传和下载文件、创建文件夹、复制/移动/删除文件、查看文件元数据、管理文档评论、管理文档权限、订阅用户评论变更事件、修改文件标题(docx、sheet、bitable、file、folder、wiki);也负责把本地 Word/Markdown/Excel/CSV/PPTX 以及 Base 快照(.base)导入为飞书在线云文档(docx、sheet、bitable、slides)。当用户需要上传或下载文件、整理云空间( (file: r1/lark-drive/SKILL.md)
|
||||||
|
- lark-event: Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume <EventKey>` (covers IM messages/reactions/chat changes, VC meeting ended, Minutes generated, Whiteboard updated, etc.). Use for Lark (file: r1/lark-event/SKILL.md)
|
||||||
|
- lark-im: 飞书即时通讯:收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件(支持大文件分片下载)、管理表情回复、发送应用内/短信/电话加急。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶(添加/移除/查询置顶会话)、管理标签数据时使用。 (file: r1/lark-im/SKILL.md)
|
||||||
|
- lark-mail: 飞书邮箱 — draft, compose, send, reply, forward, read, and search emails; manage drafts, folders, labels, contacts, attachments, and mail rules. Use when user mentions 起草邮件, 写一封邮件, 拟邮件, 草稿, 发通知邮件, 发送邮件, 发邮件, 回复邮件, 转发邮件, 查看邮件, 看邮件, 读邮件, 搜索邮件, 查邮件, 收件箱, (file: r1/lark-mail/SKILL.md)
|
||||||
|
- lark-markdown: 飞书 Markdown:查看、创建、上传、编辑和比较 Markdown 文件。当用户需要创建或编辑 Markdown 文件、读取、修改、局部 patch 或比较差异时使用。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。 (file: r1/lark-markdown/SKILL.md)
|
||||||
|
- lark-minutes: 飞书妙记:搜索妙记列表、查看妙记基础信息、下载妙记音视频文件、上传音视频生成妙记、更新妙记标题、替换说话人。当需要获取、操作或者生成妙记时使用。也支持将本地音视频文件转成纪要和逐字稿(优先使用本 skill,不要用 ffmpeg/whisper 本地转写)。不负责:获取会议关联妙记、纪要/逐字稿内容获取走 lark-vc (file: r1/lark-minutes/SKILL.md)
|
||||||
|
- lark-okr: 飞书 OKR:管理目标与关键结果。查看和编辑 OKR 周期、目标(Objective)、关键结果(Key Result)、对齐关系、量化指标和进展记录。当用户需要查看或创建 OKR、管理目标和关键结果、查看对齐关系时使用。 (file: r1/lark-okr/SKILL.md)
|
||||||
|
- lark-openapi-explorer: 飞书/Lark 原生 OpenAPI 探索:从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足,需要查找并调用原生飞书 OpenAPI 时使用。 (file: r1/lark-openapi-explorer/SKILL.md)
|
||||||
|
- lark-shared: Use when first setting up lark-cli, running auth login, switching user/bot identity (--as), handling permission denied or scope errors, needing to update lark-cli, or seeing _notice in JSON output. (file: r1/lark-shared/SKILL.md)
|
||||||
|
- lark-sheets: 飞书电子表格:创建和操作电子表格。支持创建表格、管理工作表与行列结构(增删/合并/调整尺寸/隐藏/冻结)、读写单元格(值/公式/样式/批注/单元格图片)、查找替换、多操作原子批量更新,以及图表、透视表、条件格式、筛选器、迷你图、浮动图片等对象的创建与维护。当用户需要创建电子表格、管理工作表、批量读写或编辑数据、统计汇总与可视化、表格美化、公式计算(含 Excel 公式迁移)等任务时使用。若用户是想按名称或关键词搜索云空间(云盘/云存储)里的表格文件,请改用 lark-drive 的 drive (file: r1/lark-sheets/SKILL.md)
|
||||||
|
- lark-skill-maker: 创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill(包装原子 API 或编排多步流程)时使用。 (file: r1/lark-skill-maker/SKILL.md)
|
||||||
|
- lark-slides: 飞书幻灯片:创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面(创建、删除、读取、局部替换)。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:云文档内容编辑(走 lark-doc)、云文档里的独立画板对象(走 lark-whiteboard,注意 slide (file: r1/lark-slides/SKILL.md)
|
||||||
|
- lark-task: 飞书任务:管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。 (file: r1/lark-task/SKILL.md)
|
||||||
|
- lark-vc: 飞书视频会议:搜索历史会议记录、查询会议纪要(总结/待办/章节/逐字稿)、查询参会人快照。当用户查询已结束的会议、获取会议产物(纪要/妙记)、查看参会人时使用;查询未来日程走 lark-calendar。不负责:Agent 真实入会/离会、会中实时事件(走 lark-vc-agent)。 (file: r1/lark-vc/SKILL.md)
|
||||||
|
- lark-vc-agent: 飞书视频会议:让机器人代当前用户加入/离开正在进行的会议,并读取会议期间的实时事件(参会人加入与离开、发言、聊天、屏幕共享等)。1. 用户提供 9 位会议号、要求代为入会或离会时使用 +meeting-join / +meeting-leave——会真实产生入会/离会记录。2. 会议进行中用户想知道“谁加入了”“谁离开了”“谁在发言”“有人共享屏幕吗”等会中动态时,机器人入会后用 +meeting-events 读取事件时间线。3. 典型场景:参会机器人、会中助手、代为旁听、代为参会。前提: (file: r1/lark-vc-agent/SKILL.md)
|
||||||
|
- lark-whiteboard: 飞书画板:查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用 DSL(转成 OpenAPI 格式)、PlantUML/Mermaid 格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板,或是需要可视化表达架构、流程、组织关系、时间线、因果、对比等结构化信息时使用此 skill,无论是否提及"画板"。 ⚠️ 原 `lark-whiteboard-cli` skill 已合并至本 skill,若 skill 列表中同时存在 `lark-whiteboard- (file: r1/lark-whiteboard/SKILL.md)
|
||||||
|
- lark-wiki: 飞书知识库:管理知识空间、空间成员和文档节点。创建和查询知识空间、查看和管理空间成员、管理节点层级结构、在知识库中组织文档和快捷方式。当用户需要在知识库中查找或创建文档、浏览知识空间结构、查看或管理空间成员、移动或复制节点时使用。当用户给出 doubao.com 的 /wiki/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:上传文件到知识库节点下(走 lark-drive) (file: r1/lark-wiki/SKILL.md)
|
||||||
|
- lark-workflow-meeting-summary: 会议纪要整理工作流:汇总指定时间范围内的会议纪要并生成结构化报告。当用户需要整理会议纪要、生成会议周报、回顾一段时间内的会议内容时使用。 (file: r1/lark-workflow-meeting-summary/SKILL.md)
|
||||||
|
- lark-workflow-standup-report: 日程待办摘要:编排 calendar +agenda 和 task +get-my-tasks,生成指定日期的日程与未完成任务摘要。适用于了解今天/明天/本周的安排。 (file: r1/lark-workflow-standup-report/SKILL.md)
|
||||||
|
- pdf:pdf: Read, create, inspect, render, and verify PDF files where visual layout matters. Use Poppler rendering plus Python tools such as reportlab, pdfplumber, and pypdf for generation and extraction. (file: r7/pdf/26.630.12135/skills/pdf/SKILL.md)
|
||||||
|
- presentations:Presentations: Create or edit PowerPoint or Google Slides decks (file: r7/presentations/26.630.12135/skills/presentations/SKILL.md)
|
||||||
|
- product-design:audit: Audit or critique a product flow, journey, workflow, funnel, onboarding path, checkout path, settings path, screen, or multi-step product experience by capturing screenshots first, placing them in Figma or a local folder, then reporting UX, design, (file: r6/audit/SKILL.md)
|
||||||
|
- product-design:get-context: Mandatory design-brief gate for Product Design build and design workflows. Use before ideation, prototyping, image-to-code builds, redesigns, or product UI work to clarify missing product, visual, and interactivity context or play back the supplied (file: r6/get-context/SKILL.md)
|
||||||
|
- product-design:ideate: Generate image-based visual alternatives, remixes, or concept directions after Product Design get-context has confirmed the design brief. Use when the user asks for design variants, visual exploration, remixes, or image-generated approaches from provi (file: r6/ideate/SKILL.md)
|
||||||
|
- product-design:image-to-code: Implement a selected image, screenshot, mockup, or Image Gen reference as a faithful responsive frontend after Product Design get-context has confirmed the design brief. (file: r6/image-to-code/SKILL.md)
|
||||||
|
- product-design:index: Use to discover specific skills for the Product Design plugin, when it is at-mentioned directly, or for any mentions of potentially relevant work, including: UX research; product, screen, or flow audits; visual ideation; app or interface design, red (file: r6/index/SKILL.md)
|
||||||
|
- spreadsheets:Spreadsheets: Use this skill when a user requests to create, modify, analyze, visualize, or work with spreadsheet files (`.xlsx`, `.xls`, `.csv`, `.tsv`) or Google Sheets-targeted spreadsheet artifacts with formulas, formatting, charts, tables, and recalculation (file: r7/spreadsheets/26.630.12135/skills/spreadsheets/SKILL.md)
|
||||||
|
- template-creator:template-creator: Create or update a reusable personal Codex artifact-template skill. Use when the user invokes $template-creator or asks in natural language to create a template using, from, or based on an attached Word document, PowerPoint presentation, or Excel w (file: r7/template-creator/26.630.12135/skills/template-creator/SKILL.md)
|
||||||
|
### How to use skills
|
||||||
|
- Discovery: The list above is the skills available in this session (name + description + short path). Skill bodies live on disk at the listed paths after expanding the matching alias from `### Skill roots`.
|
||||||
|
- Trigger rules: If the user names a skill (with `$SkillName` or plain text) OR the task clearly matches a skill's description shown above, you must use that skill for that turn. Multiple mentions mean use them all. Do not carry skills across turns unless re-mentioned.
|
||||||
|
- Missing/blocked: If a named skill isn't in the list or the path can't be read, say so briefly and continue with the best fallback.
|
||||||
|
- How to use a skill (progressive disclosure):
|
||||||
|
1) After deciding to use a skill, the main agent must expand the listed short `path` with the matching alias from `### Skill roots`, then open and read its `SKILL.md` completely before taking task actions. If a read is truncated or paginated, continue until EOF.
|
||||||
|
2) When `SKILL.md` references relative paths (e.g., `scripts/foo.py`), resolve them relative to the directory containing that expanded `SKILL.md` first, and only consider other paths if needed.
|
||||||
|
3) If `SKILL.md` points to extra folders such as `references/`, use its routing instructions to identify the files required for the task. The main agent must read each required instruction or reference file itself before acting on it. Do not delegate reading, summarizing, or interpreting skill instructions to a subagent. Subagents may still perform task work when the selected skill allows it.
|
||||||
|
4) If `scripts/` exist, prefer running or patching them instead of retyping large code blocks.
|
||||||
|
5) If `assets/` or templates exist, reuse them instead of recreating from scratch.
|
||||||
|
- Coordination and sequencing:
|
||||||
|
- If multiple skills apply, choose the minimal set that covers the request and state the order you'll use them.
|
||||||
|
- Announce which skill(s) you're using and why (one short line). If you skip an obvious skill, say why.
|
||||||
|
- Context hygiene:
|
||||||
|
- Progressive disclosure applies to selecting relevant files, not partially reading a selected instruction file. Do not load unrelated references, scripts, or assets.
|
||||||
|
- Avoid deep reference-chasing: prefer opening only files directly linked from `SKILL.md` unless you're blocked.
|
||||||
|
- When variants exist (frameworks, providers, domains), pick only the relevant reference file(s) and note that choice.
|
||||||
|
- Safety and fallback: If a skill can't be applied cleanly (missing files, unclear instructions), state the issue, pick the next-best approach, and continue.
|
||||||
|
</skills_instructions><plugins_instructions>
|
||||||
|
## Plugins
|
||||||
|
A plugin is a local bundle of skills, MCP servers, and apps.
|
||||||
|
### How to use plugins
|
||||||
|
- Skill naming: If a plugin contributes skills, those skill entries are prefixed with `plugin_name:` in the Skills list.
|
||||||
|
- MCP naming: Plugin-provided MCP tools keep standard MCP identifiers such as `mcp__server__tool`; use tool provenance to tell which plugin they come from.
|
||||||
|
- Trigger rules: If the user explicitly names a plugin, prefer capabilities associated with that plugin for that turn.
|
||||||
|
- Relationship to capabilities: Plugins are not invoked directly. Use their underlying skills, MCP tools, and app tools to help solve the task.
|
||||||
|
- Relevance: Determine what a plugin can help with from explicit user mention or from the plugin-associated skills, MCP tools, and apps exposed elsewhere in this turn.
|
||||||
|
- Missing/blocked: If the user requests a plugin that does not have relevant callable capabilities for the task, say so briefly and continue with the best fallback.
|
||||||
|
</plugins_instructions>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**User**
|
||||||
|
|
||||||
|
你是本次返工的图层拆分/验收规划 agent。必须遵守红线:禁止使用整页截图作为还原资源或验收依据。目标文件:/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html。Figma fileKey=vaDp5wwn6AOQVlt9zk0f9r,节点 cp=859:2027、brother=859:2247、sister=859:2454。请只分析、不改文件。输出:1) 必须拆成独立资源的图层节点清单(背景、tab 选中态、卡片底、头像框、中心图、等级/进度装饰等);2) 每个资源建议导出节点 id/尺寸/位置;3) DOM/CSS 分层还原验收点;4) 明确如何验收时不使用整页截图。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
我会使用 figma-use skill 读取 Figma 节点结构,并只做分析不改文件。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
已只分析,未修改 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html` 及相关文件。
|
||||||
|
本次只使用 Figma metadata / 本地文件结构检查;未使用整页截图。
|
||||||
|
|
||||||
|
## 0. 先判定当前风险
|
||||||
|
|
||||||
|
当前 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.css` 仍是整页背景式还原:
|
||||||
|
|
||||||
|
- `.yumi-cp-stage { background-image: url('./assets/yumi/yumi-cp.png') }`
|
||||||
|
- brother / sister 也按整页背景切换
|
||||||
|
- 本地已有:
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/assets/yumi/layers/bg-cp.png`:375×812
|
||||||
|
- `bg-brother.png`:375×812
|
||||||
|
- `bg-sister.png`:375×812
|
||||||
|
- `tab-cp/brother/sister.png`:130×48
|
||||||
|
|
||||||
|
返工红线:不能把根节点 `859:2027 / 859:2247 / 859:2454` 导出成整页图作为还原依据或资源。背景资源只有在确认来自“纯背景图层”时才允许作为 background-only 资源使用,不能包含导航、tab、卡片、头像、文字等前景内容。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 必须拆成独立资源的图层清单
|
||||||
|
|
||||||
|
### A. 页面背景层,按 tab 拆
|
||||||
|
|
||||||
|
| tab | 建议导出节点 | 尺寸 / 位置 | 说明 |
|
||||||
|
|---|---:|---|---|
|
||||||
|
| CP | `859:2028` Mask group,或内部背景 `859:2030` | 375×812,x0 y0 | 只能导出纯背景,不可导出根 frame |
|
||||||
|
| Brother | `859:2248` Mask group,或内部背景 `859:2250` | 375×812/813,x0 y0 | `859:2250` 高度 813,需要裁成 stage 812 |
|
||||||
|
| Sister | `859:2455` Mask group,或内部背景 `859:2457` | 375×811,x0 y1 | 需要按 stage 对齐 y=1 |
|
||||||
|
|
||||||
|
验收要求:背景图不能包含 nav、tab、卡片、头像、文字。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### B. 顶部导航资源
|
||||||
|
|
||||||
|
| 资源 | 建议导出节点 | 尺寸 / 位置 |
|
||||||
|
|---|---:|---|
|
||||||
|
| 返回图标 | `859:2051` | 24×24,x16 y54 |
|
||||||
|
| 帮助图标 | `859:2055` | 24×24,x335 y54 |
|
||||||
|
|
||||||
|
标题 `Best Friend` 不应导出成图,应由 DOM 文本 + i18n 渲染。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### C. tab 底板与选中态
|
||||||
|
|
||||||
|
| 资源 | CP | Brother | Sister | 尺寸 / 位置 |
|
||||||
|
|---|---:|---:|---:|---|
|
||||||
|
| tab 未选中底板 | `859:2058` | `859:2278` | `859:2485` | 343×37,x16 y109 |
|
||||||
|
| tab 选中态 | `859:2059` / `859:2060` | `859:2279` / `859:2280` | `859:2486` / `859:2487` | 130×48;CP x9 y107,Brother x126 y107,Sister x236 y107 |
|
||||||
|
|
||||||
|
tab 文案 `CP / Brother / Sister` 必须是 DOM 文本,使用 `data-i18n`,不作为图片。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### D. 主卡片底 / 卡片皮肤
|
||||||
|
|
||||||
|
| tab | 建议导出节点 | 尺寸 / 位置 | 说明 |
|
||||||
|
|---|---:|---|---|
|
||||||
|
| CP 卡片底 | `859:2065` | 347×199,x14 y169 | 包含卡片背景、顶部条、渐变横纹、底部条 |
|
||||||
|
| Brother 卡片底 | `859:2287` | 347×199,x14 y169 | 不包含前景人物/头像/文字 |
|
||||||
|
| Sister 卡片底 | `859:2494` | 347×199,x14 y169 | 不包含前景人物/头像/文字 |
|
||||||
|
|
||||||
|
可进一步拆:
|
||||||
|
- 卡片主体背景:CP `859:2066`,Sister `859:2495`
|
||||||
|
- 顶部条:CP `859:2069`,Brother `859:2289`,Sister `859:2498`
|
||||||
|
- 底部条:CP `859:2177`,Brother `859:2397`,Sister `859:2606`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### E. 头像框资源
|
||||||
|
|
||||||
|
| 资源 | CP | Brother | Sister | 尺寸 |
|
||||||
|
|---|---:|---:|---:|---|
|
||||||
|
| 左头像框 | `859:2182` / `859:2183` | `859:2402` / `859:2403` | `859:2611` / `859:2612` | 66×66 |
|
||||||
|
| 右头像框 | `859:2210` / `859:2211` | `859:2417` / `859:2418` | `859:2626` / `859:2627` | 66×66 |
|
||||||
|
| 头像内容占位 | `859:2181` / `859:2209` 等 | 同类节点 | 同类节点 | 61.2857×61.2857 |
|
||||||
|
|
||||||
|
建议:
|
||||||
|
- 头像图片由业务数据渲染,使用 `<img>`。
|
||||||
|
- 头像框导出透明 PNG/SVG 叠在头像上。
|
||||||
|
- 内部头像区域用 CSS `border-radius` / `overflow:hidden` 裁剪,不要把示例头像导出进资源。
|
||||||
|
|
||||||
|
相对 375×812 画板的建议布局:
|
||||||
|
- 左头像框约 x46 y204 或 x46 y210,取决于 tab。
|
||||||
|
- 右头像框约 x264 y204 或 x264 y210。
|
||||||
|
- 需要以 Figma 当前 tab 的具体 hero frame y 偏移校准。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### F. 中心图 / 心形装饰 / Exp pill
|
||||||
|
|
||||||
|
| 资源 | CP | Brother | Sister | 尺寸 / 位置 |
|
||||||
|
|---|---:|---:|---:|---|
|
||||||
|
| 中心主图 | `859:2189` | `859:2409` | `859:2618` | CP 136×120;Brother/Sister 136×136;约 x120 y175 |
|
||||||
|
| 大爱心 | `859:2185` | `859:2405` | `859:2614` | 72×72;约 x152 y227 |
|
||||||
|
| 小 Exp pill 背景 | `859:2190` | `859:2411` | `859:2620` | 112×28;CP/Brother 约 x133 y271,Sister 约 x133 y262 |
|
||||||
|
|
||||||
|
`888 Exp away from Lv. 2` 必须是 DOM 文本,不应烘焙进图片。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### G. 等级 / 进度条装饰
|
||||||
|
|
||||||
|
| 资源 | CP | Brother | Sister | 尺寸 / 位置 |
|
||||||
|
|---|---:|---:|---:|---|
|
||||||
|
| 左等级 pill 背景 | `859:2218` | `859:2425` | `859:2634` | 24×13 |
|
||||||
|
| 右等级 pill 背景 | `859:2228` | `859:2435` | `859:2644` | 24×13 |
|
||||||
|
| 进度条轨道 | `859:2221` | `859:2428` | `859:2637` | 233×16 |
|
||||||
|
| 进度条填充外层 | `859:2222` | `859:2429` | `859:2638` | 约 52×14 |
|
||||||
|
| 填充内部高光 | `859:2224` / `859:2225` / `859:2226` | `859:2431` / `859:2432` / `859:2433` | `859:2640` / `859:2641` / `859:2642` | 51×13 / 45×13 等 |
|
||||||
|
| 进度数字 | `859:2230` | `859:2437` | `859:2646` | 建议 DOM 文本 |
|
||||||
|
|
||||||
|
`lv1`、`1000/200000`、`Time spent together: 4 days` 全部应为 DOM/i18n 文本。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. DOM / CSS 分层还原验收点
|
||||||
|
|
||||||
|
建议 DOM 层级:
|
||||||
|
|
||||||
|
1. `.yumi-cp-stage`
|
||||||
|
- 背景层 `.yumi-bg`
|
||||||
|
- 导航层 `.yumi-nav`
|
||||||
|
- tab 层 `.yumi-tabs`
|
||||||
|
- 卡片层 `.yumi-card`
|
||||||
|
- 关系展示层 `.yumi-hero`
|
||||||
|
- 进度层 `.yumi-progress`
|
||||||
|
- 交互热区层 button
|
||||||
|
|
||||||
|
核心验收点:
|
||||||
|
|
||||||
|
- 不允许 `.yumi-cp-stage` 直接使用整页前景截图作为 `background-image`。
|
||||||
|
- 每个 tab 只切换独立资源:
|
||||||
|
- background-only 背景
|
||||||
|
- tab 选中态
|
||||||
|
- card skin
|
||||||
|
- center image
|
||||||
|
- exp pill / level / progress 主题装饰
|
||||||
|
- 文本必须是 DOM:
|
||||||
|
- `Best Friend`
|
||||||
|
- `CP / Brother / Sister`
|
||||||
|
- `999 / Days`
|
||||||
|
- `888 Exp away from Lv. 2`
|
||||||
|
- `lv1`
|
||||||
|
- `1000/200000`
|
||||||
|
- `Time spent together: 4 days`
|
||||||
|
- 头像必须支持业务动态数据:
|
||||||
|
- 用户头像 `<img>` 在底层
|
||||||
|
- 头像框资源在上层
|
||||||
|
- 375×812 设计坐标应通过 CSS `calc(x / 375 * 100%)`、`calc(y / 812 * 100%)` 或统一缩放容器实现。
|
||||||
|
- tab 热区、返回、帮助按钮不能依赖图片热区,应有真实 button。
|
||||||
|
- 多语言继续走 `common/i18n.js`,新增文案不得写死在页面脚本字典里。
|
||||||
|
- 主色/背景色尽量消费 `common/theme.css` 变量;Figma 局部图层资源除外。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 如何验收时不使用整页截图
|
||||||
|
|
||||||
|
明确禁止:
|
||||||
|
|
||||||
|
- 不截取浏览器整页图做 pixel diff。
|
||||||
|
- 不截取 Figma 根节点 `859:2027 / 859:2247 / 859:2454` 当验收基准。
|
||||||
|
- 不把 375×812 的前景合成图当实现资源。
|
||||||
|
|
||||||
|
建议验收方式:
|
||||||
|
|
||||||
|
1. **资源来源验收**
|
||||||
|
- 建立资源 manifest:`filename -> Figma node id -> width/height -> 用途`。
|
||||||
|
- 用 `sips -g pixelWidth -g pixelHeight` 检查尺寸。
|
||||||
|
- 除 background-only 背景层外,任何 375×812/813 的前景合成图直接判失败。
|
||||||
|
- background 也必须标注来自 `859:2028 / 859:2248 / 859:2455` 背景层,不得来自根 frame。
|
||||||
|
|
||||||
|
2. **DOM 结构验收**
|
||||||
|
- 用脚本检查页面是否存在:
|
||||||
|
- nav button
|
||||||
|
- tab button
|
||||||
|
- card container
|
||||||
|
- avatar img
|
||||||
|
- avatar frame
|
||||||
|
- center image
|
||||||
|
- progress track / fill
|
||||||
|
- DOM 文本节点
|
||||||
|
- 检查关键文案是否使用 `data-i18n`。
|
||||||
|
|
||||||
|
3. **几何坐标验收**
|
||||||
|
- 用 Playwright 读取 `getBoundingClientRect()`。
|
||||||
|
- 对比 Figma metadata 坐标,允许 ±1px 或 ±2px。
|
||||||
|
- 验收对象包括:
|
||||||
|
- back:16,54,24,24
|
||||||
|
- help:335,54,24,24
|
||||||
|
- tabs:16,109,343,37
|
||||||
|
- selected tab:130×48,对应 x9 / x126 / x236
|
||||||
|
- card:14,169,347,199
|
||||||
|
- progress:约 x46 y303,width 289,height 35
|
||||||
|
|
||||||
|
4. **状态切换验收**
|
||||||
|
- 通过 `?tab=cp / brother / sister` 和点击 tab 验证:
|
||||||
|
- `data-tab` 正确变化
|
||||||
|
- URL `tab` 参数同步
|
||||||
|
- selected tab 资源位置正确
|
||||||
|
- 中心图、卡片底、等级装饰随 tab 切换
|
||||||
|
- 不使用截图,只读 DOM 属性、computed style、资源 URL、元素坐标。
|
||||||
|
|
||||||
|
5. **额外验收 agents 建议**
|
||||||
|
- 资源 provenance agent:专查是否误用整页截图。
|
||||||
|
- DOM/i18n agent:专查文案是否 DOM 化、多语言是否绑定。
|
||||||
|
- 几何/交互 agent:专查坐标、z-index、tab 状态、按钮热区。
|
||||||
|
|
||||||
|
---
|
||||||
@ -0,0 +1,208 @@
|
|||||||
|
# 你是返工后的严格验收 agent。红线:禁止使用浏览器整页截图、禁止使用 Figma 根节点 859
|
||||||
|
_Exported on 07/08/2026 at 00:45:53 GMT+8 from OpenAI Codex via WayLog_
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
<permissions instructions>
|
||||||
|
Filesystem sandboxing defines which files can be read or written. `sandbox_mode` is `danger-full-access`: No filesystem sandboxing - all commands are permitted. Network access is enabled.
|
||||||
|
Approval policy is currently never. Do not provide the `sandbox_permissions` for any reason, commands will be rejected.
|
||||||
|
</permissions instructions><app-context>
|
||||||
|
# Codex desktop context
|
||||||
|
- You are running inside the Codex (desktop) app, which allows some additional features not available in the CLI alone:
|
||||||
|
|
||||||
|
### Images/Visuals/Files
|
||||||
|
- In the app, the model can display images and videos using standard Markdown image syntax: 
|
||||||
|
- When sending or referencing a local image or video, always use an absolute filesystem path in the Markdown image tag (e.g., ); relative paths and plain text will not render the media.
|
||||||
|
- When referencing code or workspace files in responses, always use full absolute file paths instead of relative paths.
|
||||||
|
- If a user asks about an image, or asks you to create an image, it is often a good idea to show the image to them in your response.
|
||||||
|
- Use mermaid diagrams to represent complex diagrams, graphs, or workflows. Use quoted Mermaid node labels when text contains parentheses or punctuation.
|
||||||
|
- Return web URLs as Markdown links (e.g., [label](https://example.com)).
|
||||||
|
|
||||||
|
### Workspace Dependencies
|
||||||
|
- For sheets, slides, and documents, call `load_workspace_dependencies` to find the bundled runtime and libraries.
|
||||||
|
|
||||||
|
### Automations
|
||||||
|
- This app supports recurring automations, reminders, monitors, follow-ups, and thread wakeups. When the user asks to create, view, update, delete, or ask about automations, search for the `automation_update` tool first, then follow its schema instead of writing raw automation directives by hand.
|
||||||
|
- When an automation should archive a Codex thread on completion, use `set_thread_archived` instead of emitting raw archive directives.
|
||||||
|
|
||||||
|
### Thread Coordination
|
||||||
|
- When the user asks to create, fork, inspect, continue, hand off, pin, archive, rename, or otherwise manage Codex threads, search for the relevant thread tool first: `create_thread`, `fork_thread`, `list_threads`, `read_thread`, `send_message_to_thread`, `handoff_thread`, `set_thread_pinned`, `set_thread_archived`, or `set_thread_title`.
|
||||||
|
- Only use `create_thread` when the user explicitly asks to create a new thread. Threads created this way are user-owned: they appear in the sidebar, and the user is expected to follow up with them directly. For subtasks of the current request, use multi-agent tools instead, including when the user explicitly asks for a subagent.
|
||||||
|
- After a successful `create_thread` call, emit `::created-thread{threadId="..."}` for a created thread or `::created-thread{pendingWorktreeId="..."}` for queued worktree setup on its own line in your final response.
|
||||||
|
|
||||||
|
### Inline Code Comments
|
||||||
|
- Use the ::code-comment{...} directive when you need to attach feedback directly to specific code lines.
|
||||||
|
- Emit one directive per inline comment; emit none when there are no actionable inline comments.
|
||||||
|
- Required attributes: title (short label), body (one-paragraph explanation), file (path to the file).
|
||||||
|
- Optional attributes: start, end (1-based line numbers), priority (0-3).
|
||||||
|
- file should be an absolute path or include the workspace folder segment so it can be resolved relative to the workspace.
|
||||||
|
- Keep line ranges tight; end defaults to start.
|
||||||
|
- Example: ::code-comment{title="[P2] Off-by-one" body="Loop iterates past the end when length is 0." file="/path/to/foo.ts" start=10 end=11 priority=2}
|
||||||
|
|
||||||
|
### Git
|
||||||
|
- Branch prefix: `codex/`. Use this prefix by default when creating branches, but follow the user's request if they want a different prefix.
|
||||||
|
- After successfully staging files, emit `::git-stage{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating a commit, emit `::git-commit{cwd="/absolute/path"}` on its own line in your final response.
|
||||||
|
- After successfully creating or switching the thread onto a branch, emit `::git-create-branch{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully pushing the current branch, emit `::git-push{cwd="/absolute/path" branch="branch-name"}` on its own line in your final response.
|
||||||
|
- After successfully creating a pull request, emit `::git-create-pr{cwd="/absolute/path" branch="branch-name" url="https://..." isDraft=true}` on its own line in your final response. Include `isDraft=false` for ready PRs.
|
||||||
|
- Only emit these git directives in your final response after the action actually succeeds, never in commentary updates. Keep attributes single-line.
|
||||||
|
</app-context><apps_instructions>
|
||||||
|
## Apps (Connectors)
|
||||||
|
Apps (Connectors) can be explicitly triggered in user messages in the format `[$app-name](app://{connector_id})`. Apps can also be implicitly triggered as long as the context suggests usage of available apps.
|
||||||
|
An app is equivalent to a set of MCP tools within the `codex_apps` MCP.
|
||||||
|
An installed app's MCP tools are either provided to you already, or can be lazy-loaded through the `tool_search` tool. If `tool_search` is available, the apps that are searchable by `tools_search` will be listed by it.
|
||||||
|
Do not additionally call list_mcp_resources or list_mcp_resource_templates for apps.
|
||||||
|
</apps_instructions><skills_instructions>
|
||||||
|
## Skills
|
||||||
|
A skill is a set of local instructions to follow that is stored in a `SKILL.md` file. Below is the list of skills that can be used. Each entry includes a name, description, and a short path that can be expanded into an absolute path using the skill roots table.
|
||||||
|
### Skill roots
|
||||||
|
- `r0` = `/Users/zuozuo/.codex/skills`
|
||||||
|
- `r1` = `/Users/zuozuo/.agents/skills`
|
||||||
|
- `r2` = `/Users/zuozuo/.codex/skills/.system`
|
||||||
|
- `r3` = `/Users/zuozuo/.codex/plugins/cache/openai-bundled`
|
||||||
|
- `r4` = `/Users/zuozuo/.codex/plugins/cache/openai-curated/github/d6169bef/skills`
|
||||||
|
- `r5` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/figma/2.0.13/skills`
|
||||||
|
- `r6` = `/Users/zuozuo/.codex/plugins/cache/openai-curated-remote/product-design/0.1.48/skills`
|
||||||
|
- `r7` = `/Users/zuozuo/.codex/plugins/cache/openai-primary-runtime`
|
||||||
|
### Available skills
|
||||||
|
- imagegen: Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing i (file: r2/imagegen/SKILL.md)
|
||||||
|
- openai-docs: Use when the user asks how to build with OpenAI products or APIs, asks about Codex itself or choosing Codex surfaces, needs up-to-date official documentation with citations, help choosing the latest model for a use case, or model upgrade and prompt (file: r2/openai-docs/SKILL.md)
|
||||||
|
- plugin-creator: Create and scaffold plugin directories for Codex with a required `.codex-plugin/plugin.json`, optional plugin folders/files, valid manifest defaults, and personal-marketplace entries by default. Use when Codex needs to create a new personal plugin, a (file: r2/plugin-creator/SKILL.md)
|
||||||
|
- skill-creator: Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Codex's capabilities with specialized knowledge, workflows, or tool integrations. (file: r2/skill-creator/SKILL.md)
|
||||||
|
- skill-installer: Install Codex skills into $CODEX_HOME/skills from a curated list or a GitHub repo path. Use when a user asks to list installable skills, install a curated skill, or install a skill from another repo (including private repos). (file: r2/skill-installer/SKILL.md)
|
||||||
|
- browser:control-in-app-browser: Control the in-app Browser. Use to open, navigate, inspect, test, click, type, screenshot, or verify local targets such as localhost, 127.0.0.1, ::1, file://, the current in-app browser tab, and websites shown side by side inside Codex. (file: r3/browser/26.623.141536/skills/control-in-app-browser/SKILL.md)
|
||||||
|
- documents:documents: Create, edit, redline, and comment on `.docx`, Word, and Google Docs-targeted document artifacts inside the container, with a strict render-and-verify workflow. Use `render_docx.py` to generate page PNGs (and optional PDF) for visual QA, then itera (file: r7/documents/26.630.12135/skills/documents/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r1/dws/SKILL.md)
|
||||||
|
- dws: 管理钉钉产品能力(AI表格/AI搜问/日历/通讯录/群聊与机器人/待办/审批/考勤/日志/DING消息/开放平台文档/钉钉文档/钉钉云盘/AI听记/邮箱/在线电子表格/知识库等)。当用户需要操作表格数据、管理日程会议、模糊找人/查谁负责某事项、查询通讯录、管理群聊、机器人发消息、创建待办、提交审批、查看考勤、提交日报周报(钉钉日志模版)、读写钉钉文档、上传下载云盘文件、查询听记纪要、收发邮件、读写在线电子表格(axls)、管理钉钉知识库时使用。 (file: r0/dws/SKILL.md)
|
||||||
|
- figma:figma-code-connect: Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files. (file: r5/figma-code-connect/SKILL.md)
|
||||||
|
- figma:figma-create-new-file: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `create_new_file` tool call. NEVER call `create_new_file` directly without loading this skill first. Trigger whenever the user wants a new blank Figma file — a new design, FigJam, o (file: r5/figma-create-new-file/SKILL.md)
|
||||||
|
- figma:figma-generate-design: Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Fi (file: r5/figma-generate-design/SKILL.md)
|
||||||
|
- figma:figma-generate-diagram: MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram (file: r5/figma-generate-diagram/SKILL.md)
|
||||||
|
- figma:figma-generate-library: Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, create individual components with proper variant sets and variable bindings, set up theming (file: r5/figma-generate-library/SKILL.md)
|
||||||
|
- figma:figma-implement-motion: Translates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma (file: r5/figma-implement-motion/SKILL.md)
|
||||||
|
- figma:figma-swiftui: SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code (file: r5/figma-swiftui/SKILL.md)
|
||||||
|
- figma:figma-use: **MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perf (file: r5/figma-use/SKILL.md)
|
||||||
|
- figma:figma-use-figjam: This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-figjam/SKILL.md)
|
||||||
|
- figma:figma-use-motion: Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a nod (file: r5/figma-use-motion/SKILL.md)
|
||||||
|
- figma:figma-use-slides: This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool. (file: r5/figma-use-slides/SKILL.md)
|
||||||
|
- github:gh-address-comments: Address actionable GitHub pull request review feedback. Use when the user wants to inspect unresolved review threads, requested changes, or inline review comments on a PR, then implement selected fixes. Use the GitHub app for PR metadata and flat co (file: r4/gh-address-comments/SKILL.md)
|
||||||
|
- github:gh-fix-ci: Use when a user asks to debug or fix failing GitHub PR checks that run in GitHub Actions. Use the GitHub app from this plugin for PR metadata and patch context, and use `gh` for Actions check and log inspection before implementing any approved fix. (file: r4/gh-fix-ci/SKILL.md)
|
||||||
|
- github:github: Triage and orient GitHub repository, pull request, and issue work through the connected GitHub app. Use when the user asks for general GitHub help, wants PR or issue summaries, or needs repository context before choosing a more specific GitHub workflo (file: r4/github/SKILL.md)
|
||||||
|
- github:yeet: Publish local changes to GitHub by confirming scope, committing intentionally, pushing the branch, and opening a draft PR through the GitHub app from this plugin, with `gh` used only as a fallback where connector coverage is insufficient. (file: r4/yeet/SKILL.md)
|
||||||
|
- lark-approval: 飞书审批:当前用户审批的查询与全部处理操作,覆盖待本人审批的任务与本人发起的实例。审批待办不是飞书任务(任务类待办走 lark-task);不负责创建审批定义和发起新审批。 (file: r1/lark-approval/SKILL.md)
|
||||||
|
- lark-apps: 妙搭(Spark/Miaoda)应用开发与托管:应用创建、HTML静态站点发布、本地全栈开发、云端生成迭代。当用户要开发/新建一个系统·工具·平台·应用,或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接,或用 HTML 做页面·网站给人看,或提到妙搭/Spark/Miaoda、应用数据库、可见范围时使用。不负责普通云盘文件上传(lark-drive)、飞书文档编辑(lark-doc)、原生幻灯片创建(lark-slides)。 (file: r1/lark-apps/SKILL.md)
|
||||||
|
- lark-attendance: 飞书考勤打卡:查询自己的考勤打卡记录 (file: r1/lark-attendance/SKILL.md)
|
||||||
|
- lark-base: 飞书多维表格(Base)操作:建表、字段、记录、视图、统计、公式/lookup、表单、仪表盘、workflow、角色权限;遇到 Base/多维表格/bitable 或 /base/ 链接时使用。文件导入转 lark-drive,认证/授权转 lark-shared。 (file: r1/lark-base/SKILL.md)
|
||||||
|
- lark-calendar: 飞书日历:管理日历日程和会议室。查看/搜索日程、创建/更新日程、管理参会人、查询忙闲和推荐时段、预定会议室。当用户需要查看日程安排、创建/修改会议、查询/预定会议室时使用。不负责:查询过去的视频会议记录(走 lark-vc)、待办任务(走 lark-task)。 (file: r1/lark-calendar/SKILL.md)
|
||||||
|
- lark-contact: 飞书 / Lark 通讯录:按姓名 / 邮箱解析成 open_id,或按 open_id 反查姓名 / 部门 / 邮箱 / 联系方式 / 个人状态 / 签名。当用户提到某人姓名要下一步发消息 / 排日程,或拿到 open_id 想查具体信息时使用。不负责部门树遍历、按部门列员工、组织架构图,这类需求走原生 OpenAPI。 (file: r1/lark-contact/SKILL.md)
|
||||||
|
- lark-doc: 飞书云文档(Docx / Wiki 文档,v2 API):读取和编辑飞书文档内容。当用户给出文档 URL 或 token,或需要查看、创建、编辑文档、插入或下载文档图片附件时使用。文档中嵌入的电子表格、多维表格、画板,先用本 skill 提取 token 再切到对应 skill。当用户给出 doubao.com 的 /docx/ 或 /wiki/ URL/token 时,也应直接使用本 skill;路由依据是 URL 路径模式和 token,而不是域名。不负责文档评论管理,也不负责表格或 Bas (file: r1/lark-doc/SKILL.md)
|
||||||
|
- lark-drive: 飞书云空间(云盘/云存储):管理云空间(云盘/云存储)中的文件和文件夹。上传和下载文件、创建文件夹、复制/移动/删除文件、查看文件元数据、管理文档评论、管理文档权限、订阅用户评论变更事件、修改文件标题(docx、sheet、bitable、file、folder、wiki);也负责把本地 Word/Markdown/Excel/CSV/PPTX 以及 Base 快照(.base)导入为飞书在线云文档(docx、sheet、bitable、slides)。当用户需要上传或下载文件、整理云空间( (file: r1/lark-drive/SKILL.md)
|
||||||
|
- lark-event: Lark/Feishu real-time event listening / subscribing / consuming: stream events as NDJSON via `lark-cli event consume <EventKey>` (covers IM messages/reactions/chat changes, VC meeting ended, Minutes generated, Whiteboard updated, etc.). Use for Lark (file: r1/lark-event/SKILL.md)
|
||||||
|
- lark-im: 飞书即时通讯:收发消息和管理群聊。发送和回复消息、搜索聊天记录、管理群聊成员、上传下载图片和文件(支持大文件分片下载)、管理表情回复、发送应用内/短信/电话加急。当用户需要发消息、查看或搜索聊天记录、下载聊天中的文件、查看群成员、搜索群、创建群聊或话题群、管理标记数据、管理 Feed 置顶(添加/移除/查询置顶会话)、管理标签数据时使用。 (file: r1/lark-im/SKILL.md)
|
||||||
|
- lark-mail: 飞书邮箱 — draft, compose, send, reply, forward, read, and search emails; manage drafts, folders, labels, contacts, attachments, and mail rules. Use when user mentions 起草邮件, 写一封邮件, 拟邮件, 草稿, 发通知邮件, 发送邮件, 发邮件, 回复邮件, 转发邮件, 查看邮件, 看邮件, 读邮件, 搜索邮件, 查邮件, 收件箱, (file: r1/lark-mail/SKILL.md)
|
||||||
|
- lark-markdown: 飞书 Markdown:查看、创建、上传、编辑和比较 Markdown 文件。当用户需要创建或编辑 Markdown 文件、读取、修改、局部 patch 或比较差异时使用。不负责将 Markdown 导入为飞书在线文档,也不负责文件搜索、权限、评论、移动、删除等云空间管理操作。 (file: r1/lark-markdown/SKILL.md)
|
||||||
|
- lark-minutes: 飞书妙记:搜索妙记列表、查看妙记基础信息、下载妙记音视频文件、上传音视频生成妙记、更新妙记标题、替换说话人。当需要获取、操作或者生成妙记时使用。也支持将本地音视频文件转成纪要和逐字稿(优先使用本 skill,不要用 ffmpeg/whisper 本地转写)。不负责:获取会议关联妙记、纪要/逐字稿内容获取走 lark-vc (file: r1/lark-minutes/SKILL.md)
|
||||||
|
- lark-okr: 飞书 OKR:管理目标与关键结果。查看和编辑 OKR 周期、目标(Objective)、关键结果(Key Result)、对齐关系、量化指标和进展记录。当用户需要查看或创建 OKR、管理目标和关键结果、查看对齐关系时使用。 (file: r1/lark-okr/SKILL.md)
|
||||||
|
- lark-openapi-explorer: 飞书/Lark 原生 OpenAPI 探索:从官方文档库中挖掘未经 CLI 封装的原生 OpenAPI 接口。当用户的需求无法被现有 lark-* skill 或 lark-cli 已注册命令满足,需要查找并调用原生飞书 OpenAPI 时使用。 (file: r1/lark-openapi-explorer/SKILL.md)
|
||||||
|
- lark-shared: Use when first setting up lark-cli, running auth login, switching user/bot identity (--as), handling permission denied or scope errors, needing to update lark-cli, or seeing _notice in JSON output. (file: r1/lark-shared/SKILL.md)
|
||||||
|
- lark-sheets: 飞书电子表格:创建和操作电子表格。支持创建表格、管理工作表与行列结构(增删/合并/调整尺寸/隐藏/冻结)、读写单元格(值/公式/样式/批注/单元格图片)、查找替换、多操作原子批量更新,以及图表、透视表、条件格式、筛选器、迷你图、浮动图片等对象的创建与维护。当用户需要创建电子表格、管理工作表、批量读写或编辑数据、统计汇总与可视化、表格美化、公式计算(含 Excel 公式迁移)等任务时使用。若用户是想按名称或关键词搜索云空间(云盘/云存储)里的表格文件,请改用 lark-drive 的 drive (file: r1/lark-sheets/SKILL.md)
|
||||||
|
- lark-skill-maker: 创建 lark-cli 的自定义 Skill。当用户需要把飞书 API 操作封装成可复用的 Skill(包装原子 API 或编排多步流程)时使用。 (file: r1/lark-skill-maker/SKILL.md)
|
||||||
|
- lark-slides: 飞书幻灯片:创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面(创建、删除、读取、局部替换)。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:云文档内容编辑(走 lark-doc)、云文档里的独立画板对象(走 lark-whiteboard,注意 slide (file: r1/lark-slides/SKILL.md)
|
||||||
|
- lark-task: 飞书任务:管理任务、清单和任务智能体。创建待办任务、查看和更新任务状态、拆分子任务、组织任务清单、分配协作成员、上传任务附件、注册或注销任务智能体、更新任务智能体的主页数据、写入智能体任务记录。当用户需要创建待办事项、查看任务列表、跟踪任务进度、管理项目清单或给他人分配任务、为任务上传附件文件、注册注销任务智能体、更新智能体主页数据、写入任务记录时使用。 (file: r1/lark-task/SKILL.md)
|
||||||
|
- lark-vc: 飞书视频会议:搜索历史会议记录、查询会议纪要(总结/待办/章节/逐字稿)、查询参会人快照。当用户查询已结束的会议、获取会议产物(纪要/妙记)、查看参会人时使用;查询未来日程走 lark-calendar。不负责:Agent 真实入会/离会、会中实时事件(走 lark-vc-agent)。 (file: r1/lark-vc/SKILL.md)
|
||||||
|
- lark-vc-agent: 飞书视频会议:让机器人代当前用户加入/离开正在进行的会议,并读取会议期间的实时事件(参会人加入与离开、发言、聊天、屏幕共享等)。1. 用户提供 9 位会议号、要求代为入会或离会时使用 +meeting-join / +meeting-leave——会真实产生入会/离会记录。2. 会议进行中用户想知道“谁加入了”“谁离开了”“谁在发言”“有人共享屏幕吗”等会中动态时,机器人入会后用 +meeting-events 读取事件时间线。3. 典型场景:参会机器人、会中助手、代为旁听、代为参会。前提: (file: r1/lark-vc-agent/SKILL.md)
|
||||||
|
- lark-whiteboard: 飞书画板:查询和编辑飞书云文档中的画板。支持导出画板为预览图片、导出原始节点结构、使用 DSL(转成 OpenAPI 格式)、PlantUML/Mermaid 格式更新画板内容。 当用户需要查看画板内容、导出画板图片、编辑画板,或是需要可视化表达架构、流程、组织关系、时间线、因果、对比等结构化信息时使用此 skill,无论是否提及"画板"。 ⚠️ 原 `lark-whiteboard-cli` skill 已合并至本 skill,若 skill 列表中同时存在 `lark-whiteboard- (file: r1/lark-whiteboard/SKILL.md)
|
||||||
|
- lark-wiki: 飞书知识库:管理知识空间、空间成员和文档节点。创建和查询知识空间、查看和管理空间成员、管理节点层级结构、在知识库中组织文档和快捷方式。当用户需要在知识库中查找或创建文档、浏览知识空间结构、查看或管理空间成员、移动或复制节点时使用。当用户给出 doubao.com 的 /wiki/ URL/token 时,也应直接使用本 skill,不要因为域名不是飞书而回退到 WebFetch;路由依据是 URL 路径模式和 token,而不是域名。不负责:上传文件到知识库节点下(走 lark-drive) (file: r1/lark-wiki/SKILL.md)
|
||||||
|
- lark-workflow-meeting-summary: 会议纪要整理工作流:汇总指定时间范围内的会议纪要并生成结构化报告。当用户需要整理会议纪要、生成会议周报、回顾一段时间内的会议内容时使用。 (file: r1/lark-workflow-meeting-summary/SKILL.md)
|
||||||
|
- lark-workflow-standup-report: 日程待办摘要:编排 calendar +agenda 和 task +get-my-tasks,生成指定日期的日程与未完成任务摘要。适用于了解今天/明天/本周的安排。 (file: r1/lark-workflow-standup-report/SKILL.md)
|
||||||
|
- pdf:pdf: Read, create, inspect, render, and verify PDF files where visual layout matters. Use Poppler rendering plus Python tools such as reportlab, pdfplumber, and pypdf for generation and extraction. (file: r7/pdf/26.630.12135/skills/pdf/SKILL.md)
|
||||||
|
- presentations:Presentations: Create or edit PowerPoint or Google Slides decks (file: r7/presentations/26.630.12135/skills/presentations/SKILL.md)
|
||||||
|
- product-design:audit: Audit or critique a product flow, journey, workflow, funnel, onboarding path, checkout path, settings path, screen, or multi-step product experience by capturing screenshots first, placing them in Figma or a local folder, then reporting UX, design, (file: r6/audit/SKILL.md)
|
||||||
|
- product-design:get-context: Mandatory design-brief gate for Product Design build and design workflows. Use before ideation, prototyping, image-to-code builds, redesigns, or product UI work to clarify missing product, visual, and interactivity context or play back the supplied (file: r6/get-context/SKILL.md)
|
||||||
|
- product-design:ideate: Generate image-based visual alternatives, remixes, or concept directions after Product Design get-context has confirmed the design brief. Use when the user asks for design variants, visual exploration, remixes, or image-generated approaches from provi (file: r6/ideate/SKILL.md)
|
||||||
|
- product-design:image-to-code: Implement a selected image, screenshot, mockup, or Image Gen reference as a faithful responsive frontend after Product Design get-context has confirmed the design brief. (file: r6/image-to-code/SKILL.md)
|
||||||
|
- product-design:index: Use to discover specific skills for the Product Design plugin, when it is at-mentioned directly, or for any mentions of potentially relevant work, including: UX research; product, screen, or flow audits; visual ideation; app or interface design, red (file: r6/index/SKILL.md)
|
||||||
|
- spreadsheets:Spreadsheets: Use this skill when a user requests to create, modify, analyze, visualize, or work with spreadsheet files (`.xlsx`, `.xls`, `.csv`, `.tsv`) or Google Sheets-targeted spreadsheet artifacts with formulas, formatting, charts, tables, and recalculation (file: r7/spreadsheets/26.630.12135/skills/spreadsheets/SKILL.md)
|
||||||
|
- template-creator:template-creator: Create or update a reusable personal Codex artifact-template skill. Use when the user invokes $template-creator or asks in natural language to create a template using, from, or based on an attached Word document, PowerPoint presentation, or Excel w (file: r7/template-creator/26.630.12135/skills/template-creator/SKILL.md)
|
||||||
|
### How to use skills
|
||||||
|
- Discovery: The list above is the skills available in this session (name + description + short path). Skill bodies live on disk at the listed paths after expanding the matching alias from `### Skill roots`.
|
||||||
|
- Trigger rules: If the user names a skill (with `$SkillName` or plain text) OR the task clearly matches a skill's description shown above, you must use that skill for that turn. Multiple mentions mean use them all. Do not carry skills across turns unless re-mentioned.
|
||||||
|
- Missing/blocked: If a named skill isn't in the list or the path can't be read, say so briefly and continue with the best fallback.
|
||||||
|
- How to use a skill (progressive disclosure):
|
||||||
|
1) After deciding to use a skill, the main agent must expand the listed short `path` with the matching alias from `### Skill roots`, then open and read its `SKILL.md` completely before taking task actions. If a read is truncated or paginated, continue until EOF.
|
||||||
|
2) When `SKILL.md` references relative paths (e.g., `scripts/foo.py`), resolve them relative to the directory containing that expanded `SKILL.md` first, and only consider other paths if needed.
|
||||||
|
3) If `SKILL.md` points to extra folders such as `references/`, use its routing instructions to identify the files required for the task. The main agent must read each required instruction or reference file itself before acting on it. Do not delegate reading, summarizing, or interpreting skill instructions to a subagent. Subagents may still perform task work when the selected skill allows it.
|
||||||
|
4) If `scripts/` exist, prefer running or patching them instead of retyping large code blocks.
|
||||||
|
5) If `assets/` or templates exist, reuse them instead of recreating from scratch.
|
||||||
|
- Coordination and sequencing:
|
||||||
|
- If multiple skills apply, choose the minimal set that covers the request and state the order you'll use them.
|
||||||
|
- Announce which skill(s) you're using and why (one short line). If you skip an obvious skill, say why.
|
||||||
|
- Context hygiene:
|
||||||
|
- Progressive disclosure applies to selecting relevant files, not partially reading a selected instruction file. Do not load unrelated references, scripts, or assets.
|
||||||
|
- Avoid deep reference-chasing: prefer opening only files directly linked from `SKILL.md` unless you're blocked.
|
||||||
|
- When variants exist (frameworks, providers, domains), pick only the relevant reference file(s) and note that choice.
|
||||||
|
- Safety and fallback: If a skill can't be applied cleanly (missing files, unclear instructions), state the issue, pick the next-best approach, and continue.
|
||||||
|
</skills_instructions><plugins_instructions>
|
||||||
|
## Plugins
|
||||||
|
A plugin is a local bundle of skills, MCP servers, and apps.
|
||||||
|
### How to use plugins
|
||||||
|
- Skill naming: If a plugin contributes skills, those skill entries are prefixed with `plugin_name:` in the Skills list.
|
||||||
|
- MCP naming: Plugin-provided MCP tools keep standard MCP identifiers such as `mcp__server__tool`; use tool provenance to tell which plugin they come from.
|
||||||
|
- Trigger rules: If the user explicitly names a plugin, prefer capabilities associated with that plugin for that turn.
|
||||||
|
- Relationship to capabilities: Plugins are not invoked directly. Use their underlying skills, MCP tools, and app tools to help solve the task.
|
||||||
|
- Relevance: Determine what a plugin can help with from explicit user mention or from the plugin-associated skills, MCP tools, and apps exposed elsewhere in this turn.
|
||||||
|
- Missing/blocked: If the user requests a plugin that does not have relevant callable capabilities for the task, say so briefly and continue with the best fallback.
|
||||||
|
</plugins_instructions>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**User**
|
||||||
|
|
||||||
|
你是返工后的严格验收 agent。红线:禁止使用浏览器整页截图、禁止使用 Figma 根节点 859:2027/859:2247/859:2454 截图做 pixel diff。请只验收、不修改文件。目标:/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/yumi.html 及相关 yumi.css/yumi.js/assets/yumi/layers。验收项:1) 确认没有使用整页前景图资源(禁止 yumi-cp.png/yumi-brother.png/yumi-sister.png,禁止 manifest 使用根节点);2) 检查资源 manifest 中每个资源来自独立 Figma 图层,尺寸合理,允许 bg-* 仅作为背景层且来自非根背景 group;3) 检查 DOM 分层结构:背景、status/nav、tabs、card skin、avatar、center art、exp/progress/text 都是独立节点,文本是 DOM/i18n;4) 检查 tab=cp/brother/sister 资源切换逻辑和热区坐标是否按 Figma metadata(无需截图);5) 检查 common/theme.css/common/i18n.js 接入及 locale key。若发现红线问题请直接“不通过”并列返修点;否则明确“验收通过”。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
我会只做静态验收,不修改文件;按红线先查禁用资源/manifest,再核对 DOM、CSS、JS、i18n 与坐标元数据。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
**OpenAI Codex**
|
||||||
|
|
||||||
|
验收通过。
|
||||||
|
|
||||||
|
已按红线只做静态/资源验收,未修改文件,未使用浏览器整页截图,未使用 Figma 根节点截图做 pixel diff。
|
||||||
|
|
||||||
|
验收结果:
|
||||||
|
|
||||||
|
1. **整页前景图/根节点**
|
||||||
|
- 未发现引用 `yumi-cp.png` / `yumi-brother.png` / `yumi-sister.png`。
|
||||||
|
- `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/activity/cp-space/assets/yumi/layers/manifest.json` 未使用禁用根节点 `859:2027` / `859:2247` / `859:2454`。
|
||||||
|
- 目标页面仅引用 `/assets/yumi/layers/` 下分层资源。
|
||||||
|
|
||||||
|
2. **manifest 与资源尺寸**
|
||||||
|
- `bg-*` 仅作为 `.yumi-bg-layer` 背景层使用。
|
||||||
|
- `bg-*` manifest node 为 `859:2028` / `859:2248` / `859:2455`,非禁用根节点。
|
||||||
|
- 所有 manifest 资源实际 PNG 尺寸与 bounds 匹配:背景 `375x812`,卡片 `347x199`,tab `130x48`,center `136x120/136`,level `24x13`,avatar frame `66x66`。
|
||||||
|
|
||||||
|
3. **DOM 分层**
|
||||||
|
- 背景、status、nav、tabs、card skin、avatar、center art、exp pill、progress、文本均为独立 DOM/图片节点。
|
||||||
|
- 可变文本为 DOM 文本,不在整页图中。
|
||||||
|
|
||||||
|
4. **tab 切换与坐标**
|
||||||
|
- `tab=cp/brother/sister` 均有独立资源映射。
|
||||||
|
- 切换会更新 `bg/tab/card/center/level`,并同步 `data-tab` 与选中态。
|
||||||
|
- tab jewel 坐标与 manifest bounds 对齐:`cp x=9`、`brother x=126`、`sister x=236`,top `107`。
|
||||||
|
|
||||||
|
5. **common 接入与 locale key**
|
||||||
|
- 已接入 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/common/theme.css`。
|
||||||
|
- 已接入 `/Users/zuozuo/Documents/Project/haiyi/hyapp-h5/common/i18n.js`。
|
||||||
|
- 页面使用的 `cpSpace.*` key 在 `en/ar/tr/es` locale 中均存在。
|
||||||
|
|
||||||
|
---
|
||||||
BIN
activity/cp-space/assets/yumi/layers/avatar-frame.png
Normal file
|
After Width: | Height: | Size: 4.3 KiB |
BIN
activity/cp-space/assets/yumi/layers/bg-brother.png
Normal file
|
After Width: | Height: | Size: 677 KiB |
BIN
activity/cp-space/assets/yumi/layers/bg-cp.png
Normal file
|
After Width: | Height: | Size: 670 KiB |
BIN
activity/cp-space/assets/yumi/layers/bg-sister.png
Normal file
|
After Width: | Height: | Size: 702 KiB |
BIN
activity/cp-space/assets/yumi/layers/card-brother.png
Normal file
|
After Width: | Height: | Size: 121 KiB |
BIN
activity/cp-space/assets/yumi/layers/card-cp.png
Normal file
|
After Width: | Height: | Size: 115 KiB |
BIN
activity/cp-space/assets/yumi/layers/card-sister.png
Normal file
|
After Width: | Height: | Size: 118 KiB |
BIN
activity/cp-space/assets/yumi/layers/center-brother.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
activity/cp-space/assets/yumi/layers/center-cp.png
Normal file
|
After Width: | Height: | Size: 20 KiB |
BIN
activity/cp-space/assets/yumi/layers/center-sister.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
activity/cp-space/assets/yumi/layers/level-brother.png
Normal file
|
After Width: | Height: | Size: 1017 B |
BIN
activity/cp-space/assets/yumi/layers/level-cp.png
Normal file
|
After Width: | Height: | Size: 1016 B |
BIN
activity/cp-space/assets/yumi/layers/level-sister.png
Normal file
|
After Width: | Height: | Size: 967 B |
89
activity/cp-space/assets/yumi/layers/manifest.json
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
{
|
||||||
|
"rule": "Layered restoration only. Do not use root-frame or full foreground screenshots as implementation assets.",
|
||||||
|
"baseFrame": {
|
||||||
|
"width": 375,
|
||||||
|
"height": 812
|
||||||
|
},
|
||||||
|
"assets": {
|
||||||
|
"bg-cp.png": {
|
||||||
|
"figmaNodeId": "859:2028",
|
||||||
|
"purpose": "background layer only",
|
||||||
|
"bounds": { "x": 0, "y": 0, "width": 375, "height": 812 }
|
||||||
|
},
|
||||||
|
"bg-brother.png": {
|
||||||
|
"figmaNodeId": "859:2248",
|
||||||
|
"purpose": "background layer only",
|
||||||
|
"bounds": { "x": 0, "y": 0, "width": 375, "height": 812 }
|
||||||
|
},
|
||||||
|
"bg-sister.png": {
|
||||||
|
"figmaNodeId": "859:2455",
|
||||||
|
"purpose": "background layer only",
|
||||||
|
"bounds": { "x": 0, "y": 0, "width": 375, "height": 812 }
|
||||||
|
},
|
||||||
|
"tab-cp.png": {
|
||||||
|
"figmaNodeId": "859:2059",
|
||||||
|
"purpose": "selected CP tab jewel",
|
||||||
|
"bounds": { "x": 9, "y": 107, "width": 130, "height": 48 }
|
||||||
|
},
|
||||||
|
"tab-brother.png": {
|
||||||
|
"figmaNodeId": "859:2279",
|
||||||
|
"purpose": "selected Brother tab jewel",
|
||||||
|
"bounds": { "x": 126, "y": 107, "width": 130, "height": 48 }
|
||||||
|
},
|
||||||
|
"tab-sister.png": {
|
||||||
|
"figmaNodeId": "859:2486",
|
||||||
|
"purpose": "selected Sister tab jewel",
|
||||||
|
"bounds": { "x": 236, "y": 107, "width": 130, "height": 48 }
|
||||||
|
},
|
||||||
|
"card-cp.png": {
|
||||||
|
"figmaNodeId": "859:2065",
|
||||||
|
"purpose": "CP card skin layer without dynamic texts",
|
||||||
|
"bounds": { "x": 14, "y": 169, "width": 347, "height": 199 }
|
||||||
|
},
|
||||||
|
"card-brother.png": {
|
||||||
|
"figmaNodeId": "859:2287",
|
||||||
|
"purpose": "Brother card skin layer without dynamic texts",
|
||||||
|
"bounds": { "x": 14, "y": 169, "width": 347, "height": 199 }
|
||||||
|
},
|
||||||
|
"card-sister.png": {
|
||||||
|
"figmaNodeId": "859:2494",
|
||||||
|
"purpose": "Sister card skin layer without dynamic texts",
|
||||||
|
"bounds": { "x": 14, "y": 169, "width": 347, "height": 199 }
|
||||||
|
},
|
||||||
|
"center-cp.png": {
|
||||||
|
"figmaNodeId": "859:2189",
|
||||||
|
"purpose": "CP center heart art",
|
||||||
|
"bounds": { "x": 120, "y": 175, "width": 136, "height": 120 }
|
||||||
|
},
|
||||||
|
"center-brother.png": {
|
||||||
|
"figmaNodeId": "859:2409",
|
||||||
|
"purpose": "Brother center shield art",
|
||||||
|
"bounds": { "x": 120, "y": 175, "width": 136, "height": 136 }
|
||||||
|
},
|
||||||
|
"center-sister.png": {
|
||||||
|
"figmaNodeId": "859:2618",
|
||||||
|
"purpose": "Sister center floral art",
|
||||||
|
"bounds": { "x": 120, "y": 175, "width": 136, "height": 136 }
|
||||||
|
},
|
||||||
|
"avatar-frame.png": {
|
||||||
|
"figmaNodeId": "859:2183",
|
||||||
|
"purpose": "avatar frame layer",
|
||||||
|
"bounds": { "width": 66, "height": 66 }
|
||||||
|
},
|
||||||
|
"level-cp.png": {
|
||||||
|
"figmaNodeId": "859:2218",
|
||||||
|
"purpose": "CP level badge layer",
|
||||||
|
"bounds": { "width": 24, "height": 13 }
|
||||||
|
},
|
||||||
|
"level-brother.png": {
|
||||||
|
"figmaNodeId": "859:2425",
|
||||||
|
"purpose": "Brother level badge layer",
|
||||||
|
"bounds": { "width": 24, "height": 13 }
|
||||||
|
},
|
||||||
|
"level-sister.png": {
|
||||||
|
"figmaNodeId": "859:2634",
|
||||||
|
"purpose": "Sister level badge layer",
|
||||||
|
"bounds": { "width": 24, "height": 13 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
activity/cp-space/assets/yumi/layers/tab-brother.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
activity/cp-space/assets/yumi/layers/tab-cp.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
activity/cp-space/assets/yumi/layers/tab-sister.png
Normal file
|
After Width: | Height: | Size: 12 KiB |
648
activity/cp-space/yumi.css
Normal file
@ -0,0 +1,648 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
background: #15101d;
|
||||||
|
color: #fff;
|
||||||
|
font-family:
|
||||||
|
'SF Pro Display', 'SF Pro Text', 'Source Han Sans SC',
|
||||||
|
'Noto Sans CJK SC', Arial, 'Helvetica Neue', Helvetica, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
color: inherit;
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-cp-page {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100svh;
|
||||||
|
background: #15101d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-cp-stage {
|
||||||
|
--accent: #ff0979;
|
||||||
|
--accent-soft: #ff5762;
|
||||||
|
--tab-bg: rgba(94, 13, 35, 0.8);
|
||||||
|
--tab-glow: #ff7948;
|
||||||
|
--tab-jewel-left: -7px;
|
||||||
|
--avatar-top: 204px;
|
||||||
|
--center-height: 120px;
|
||||||
|
--exp-top: 271px;
|
||||||
|
--progress-from: #ff1e37;
|
||||||
|
--progress-mid: #fe6a30;
|
||||||
|
--progress-to: #ffcf67;
|
||||||
|
--exp-pill-bg: rgba(255, 102, 169, 0.74);
|
||||||
|
position: relative;
|
||||||
|
width: min(100vw, 375px);
|
||||||
|
height: min(812px, 216.533333vw);
|
||||||
|
max-height: 812px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #440b23;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-cp-page[data-tab='brother'] .yumi-cp-stage {
|
||||||
|
--accent: #5709ff;
|
||||||
|
--accent-soft: #5709ff;
|
||||||
|
--tab-bg: rgba(17, 13, 94, 0.8);
|
||||||
|
--tab-glow: #4872ff;
|
||||||
|
--tab-jewel-left: 110px;
|
||||||
|
--avatar-top: 210px;
|
||||||
|
--center-height: 136px;
|
||||||
|
--exp-top: 271px;
|
||||||
|
--progress-from: #471eff;
|
||||||
|
--progress-mid: #30bcfe;
|
||||||
|
--progress-to: #67acff;
|
||||||
|
--exp-pill-bg: rgba(97, 180, 255, 0.74);
|
||||||
|
background: #080636;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-cp-page[data-tab='sister'] .yumi-cp-stage {
|
||||||
|
--accent: #ff4a09;
|
||||||
|
--accent-soft: #ff4a09;
|
||||||
|
--tab-bg: rgba(94, 29, 13, 0.8);
|
||||||
|
--tab-glow: #ff7948;
|
||||||
|
--tab-jewel-left: 220px;
|
||||||
|
--avatar-top: 210px;
|
||||||
|
--center-height: 136px;
|
||||||
|
--exp-top: 262px;
|
||||||
|
--progress-from: #ff5e1e;
|
||||||
|
--progress-mid: #fe6a30;
|
||||||
|
--progress-to: #ffb167;
|
||||||
|
--exp-pill-bg: rgba(255, 142, 43, 0.74);
|
||||||
|
background: #301008;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-bg-layer,
|
||||||
|
.yumi-card-skin,
|
||||||
|
.yumi-tab-jewel,
|
||||||
|
.yumi-center-art,
|
||||||
|
.yumi-avatar-frame,
|
||||||
|
.yumi-level-bg {
|
||||||
|
display: block;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-bg-layer {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status,
|
||||||
|
.yumi-nav,
|
||||||
|
.yumi-tabs,
|
||||||
|
.yumi-card {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 375px;
|
||||||
|
height: 44px;
|
||||||
|
color: #fff;
|
||||||
|
pointer-events: none;
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-time {
|
||||||
|
position: absolute;
|
||||||
|
left: 33.87px;
|
||||||
|
top: 13px;
|
||||||
|
width: 54px;
|
||||||
|
font-family: Helvetica, Arial, sans-serif;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-cellular {
|
||||||
|
position: absolute;
|
||||||
|
left: 294.34px;
|
||||||
|
top: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
gap: 2px;
|
||||||
|
width: 17px;
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-cellular i {
|
||||||
|
display: block;
|
||||||
|
width: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-cellular i:nth-child(1) {
|
||||||
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-cellular i:nth-child(2) {
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-cellular i:nth-child(3) {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-cellular i:nth-child(4) {
|
||||||
|
height: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-wifi {
|
||||||
|
position: absolute;
|
||||||
|
left: 316.34px;
|
||||||
|
top: 16px;
|
||||||
|
width: 16px;
|
||||||
|
height: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-wifi::before,
|
||||||
|
.yumi-status-wifi::after,
|
||||||
|
.yumi-status-wifi i {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-right-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: '';
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-wifi::before {
|
||||||
|
top: 0;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-wifi::after {
|
||||||
|
top: 4px;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-wifi i {
|
||||||
|
top: 8px;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-battery {
|
||||||
|
position: absolute;
|
||||||
|
left: 336.67px;
|
||||||
|
top: 16.33px;
|
||||||
|
width: 24.33px;
|
||||||
|
height: 11.33px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-battery::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 21px;
|
||||||
|
height: 11px;
|
||||||
|
border: 1.2px solid #fff;
|
||||||
|
border-radius: 2.7px;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-battery::after {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 3.4px;
|
||||||
|
width: 1.4px;
|
||||||
|
height: 4.5px;
|
||||||
|
border-radius: 0 1px 1px 0;
|
||||||
|
background: #fff;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-status-battery i {
|
||||||
|
position: absolute;
|
||||||
|
left: 2.3px;
|
||||||
|
top: 2.3px;
|
||||||
|
width: 17px;
|
||||||
|
height: 6.8px;
|
||||||
|
border-radius: 1.5px;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-nav {
|
||||||
|
left: 0;
|
||||||
|
top: 44px;
|
||||||
|
width: 375px;
|
||||||
|
height: 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 9px;
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 22px;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-nav-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-nav-button--back {
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-nav-button--back::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 8px;
|
||||||
|
top: 5px;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-left: 4px solid #fff;
|
||||||
|
border-bottom: 4px solid #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
content: '';
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-nav-button--help {
|
||||||
|
left: 335px;
|
||||||
|
border: 2px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-nav-button--help::before {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 2px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 20px;
|
||||||
|
content: '?';
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-tabs {
|
||||||
|
left: 16px;
|
||||||
|
top: 109px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
width: 343px;
|
||||||
|
height: 37px;
|
||||||
|
border: 0.5px solid #f4b747;
|
||||||
|
border-radius: 32px;
|
||||||
|
background: var(--tab-bg);
|
||||||
|
box-shadow: inset 0 0 5.5px var(--tab-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-tab-jewel {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 0;
|
||||||
|
left: var(--tab-jewel-left);
|
||||||
|
top: -2px;
|
||||||
|
width: 130px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-tab-button {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
height: 37px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 18px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-tab-button[aria-selected='true'] {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-tab-button span {
|
||||||
|
position: relative;
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-card {
|
||||||
|
left: 14px;
|
||||||
|
top: 169px;
|
||||||
|
width: 347px;
|
||||||
|
height: 199px;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-card-skin {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
width: 347px;
|
||||||
|
height: 199px;
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-avatar {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
top: calc(var(--avatar-top) - 169px);
|
||||||
|
width: 66px;
|
||||||
|
height: 66px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-avatar--left {
|
||||||
|
left: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-avatar--right {
|
||||||
|
left: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-avatar-photo {
|
||||||
|
position: absolute;
|
||||||
|
left: 2.36px;
|
||||||
|
top: 2.36px;
|
||||||
|
z-index: 1;
|
||||||
|
display: block;
|
||||||
|
width: 61.29px;
|
||||||
|
height: 61.29px;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 50%;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 50% 38%, #f0eee7 0 19px, transparent 20px),
|
||||||
|
linear-gradient(135deg, #d5d0c2, #85806f);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-avatar-photo img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-avatar-frame {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 2;
|
||||||
|
width: 66px;
|
||||||
|
height: 66px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-center-art-wrap {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 106px;
|
||||||
|
top: 6px;
|
||||||
|
width: 136px;
|
||||||
|
height: var(--center-height);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-center-art {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
width: 136px;
|
||||||
|
height: var(--center-height);
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-days-value {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 50%;
|
||||||
|
top: 45px;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 18px;
|
||||||
|
text-shadow:
|
||||||
|
0 1px 0 #fff,
|
||||||
|
0 0 4px rgba(255, 255, 255, 0.75);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-days-unit {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 50%;
|
||||||
|
top: 68px;
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 8px;
|
||||||
|
text-shadow: 0 1px 0 #fff;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-exp-pill {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
left: 119px;
|
||||||
|
top: calc(var(--exp-top) - 169px);
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 112px;
|
||||||
|
height: 28px;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.78);
|
||||||
|
border-radius: 14px;
|
||||||
|
background:
|
||||||
|
linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)),
|
||||||
|
var(--exp-pill-bg);
|
||||||
|
box-shadow:
|
||||||
|
inset 0 1px 2px rgba(255, 255, 255, 0.8),
|
||||||
|
inset 0 -2px 3px rgba(255, 255, 255, 0.28),
|
||||||
|
0 0 6px rgba(255, 255, 255, 0.32);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-exp-pill span {
|
||||||
|
color: var(--accent);
|
||||||
|
font-size: 8px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 8px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow:
|
||||||
|
0 1px 0 rgba(255, 255, 255, 0.95),
|
||||||
|
0 0 2px rgba(255, 255, 255, 0.85);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-progress-block {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 3;
|
||||||
|
left: 32px;
|
||||||
|
top: 134px;
|
||||||
|
width: 289px;
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-level-badge {
|
||||||
|
position: absolute;
|
||||||
|
top: 1.5px;
|
||||||
|
width: 24px;
|
||||||
|
height: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-level-badge--left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-level-badge--right {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-level-bg {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
width: 24px;
|
||||||
|
height: 13px;
|
||||||
|
object-fit: fill;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-level-badge span {
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 9px;
|
||||||
|
text-shadow: 0 0 1px var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-progress-track {
|
||||||
|
position: absolute;
|
||||||
|
left: 28px;
|
||||||
|
top: 0;
|
||||||
|
width: 233px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 74px;
|
||||||
|
background: rgba(255, 255, 255, 0.3);
|
||||||
|
overflow: hidden;
|
||||||
|
backdrop-filter: blur(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-progress-fill {
|
||||||
|
position: absolute;
|
||||||
|
left: 1px;
|
||||||
|
top: 1px;
|
||||||
|
width: 52px;
|
||||||
|
height: 14px;
|
||||||
|
border-radius: 7px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
var(--progress-from) 0%,
|
||||||
|
var(--progress-mid) 50%,
|
||||||
|
var(--progress-to) 100%
|
||||||
|
);
|
||||||
|
box-shadow:
|
||||||
|
inset -4px 0 3px #fffef8,
|
||||||
|
inset 0 2px 2px rgba(255, 254, 239, 0.48),
|
||||||
|
inset 0 -2px 2px rgba(255, 255, 255, 0.45);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-progress-fill::after {
|
||||||
|
position: absolute;
|
||||||
|
inset: 1px 2px;
|
||||||
|
border-radius: inherit;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
rgba(255, 255, 255, 0.95) 0 1px,
|
||||||
|
transparent 2px
|
||||||
|
)
|
||||||
|
0 0 / 7px 7px;
|
||||||
|
mix-blend-mode: screen;
|
||||||
|
content: '';
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-progress-text {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 2px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 14px;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-time-text {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 20px;
|
||||||
|
width: 289px;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--accent-soft);
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: center;
|
||||||
|
text-shadow:
|
||||||
|
0 1px 0 rgba(255, 255, 255, 0.82),
|
||||||
|
0 0 2px rgba(255, 255, 255, 0.72);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yumi-nav-button:focus-visible,
|
||||||
|
.yumi-tab-button:focus-visible {
|
||||||
|
border-radius: 18px;
|
||||||
|
outline: 2px solid var(--hy-theme-focus-ring, rgba(255, 255, 255, 0.42));
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir='rtl'] .yumi-nav-button--back::before {
|
||||||
|
transform: rotate(225deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
[dir='rtl'] .yumi-tabs {
|
||||||
|
direction: ltr;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 374.98px) {
|
||||||
|
.yumi-status,
|
||||||
|
.yumi-nav,
|
||||||
|
.yumi-tabs,
|
||||||
|
.yumi-card {
|
||||||
|
transform: scale(calc(100vw / 375));
|
||||||
|
transform-origin: left top;
|
||||||
|
}
|
||||||
|
}
|
||||||
206
activity/cp-space/yumi.html
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en" data-hy-app-code="yumi">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||||||
|
/>
|
||||||
|
<title data-i18n="cpSpace.pageTitle">Best Friend</title>
|
||||||
|
<link rel="icon" href="data:," />
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="../../common/theme.css?v=20260708-yumi-layered"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="./yumi.css?v=20260708-yumi-layered" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main
|
||||||
|
class="yumi-cp-page"
|
||||||
|
id="yumiCpPage"
|
||||||
|
data-tab="cp"
|
||||||
|
aria-label="Best Friend space"
|
||||||
|
data-i18n-aria="cpSpace.pageLabel"
|
||||||
|
>
|
||||||
|
<section
|
||||||
|
class="yumi-cp-stage"
|
||||||
|
aria-label="Best Friend"
|
||||||
|
data-i18n-aria="cpSpace.pageLabel"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="yumi-bg-layer"
|
||||||
|
id="yumiBgLayer"
|
||||||
|
src="./assets/yumi/layers/bg-cp.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="yumi-status" aria-hidden="true">
|
||||||
|
<span class="yumi-status-time">9:41</span>
|
||||||
|
<span class="yumi-status-cellular"
|
||||||
|
><i></i><i></i><i></i><i></i
|
||||||
|
></span>
|
||||||
|
<span class="yumi-status-wifi"><i></i></span>
|
||||||
|
<span class="yumi-status-battery"><i></i></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav
|
||||||
|
class="yumi-nav"
|
||||||
|
aria-label="Best Friend navigation"
|
||||||
|
data-i18n-aria="cpSpace.navLabel"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="yumi-nav-button yumi-nav-button--back"
|
||||||
|
id="yumiBackButton"
|
||||||
|
type="button"
|
||||||
|
aria-label="Back"
|
||||||
|
data-i18n-aria="cpSpace.back"
|
||||||
|
></button>
|
||||||
|
<h1 class="yumi-title" data-i18n="cpSpace.title">
|
||||||
|
Best Friend
|
||||||
|
</h1>
|
||||||
|
<button
|
||||||
|
class="yumi-nav-button yumi-nav-button--help"
|
||||||
|
id="yumiHelpButton"
|
||||||
|
type="button"
|
||||||
|
aria-label="Help"
|
||||||
|
data-i18n-aria="cpSpace.help"
|
||||||
|
></button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<nav
|
||||||
|
class="yumi-tabs"
|
||||||
|
aria-label="Best Friend tabs"
|
||||||
|
data-i18n-aria="cpSpace.tabsLabel"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="yumi-tab-jewel"
|
||||||
|
id="yumiTabJewel"
|
||||||
|
src="./assets/yumi/layers/tab-cp.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
<button class="yumi-tab-button" type="button" data-tab="cp">
|
||||||
|
<span data-i18n="cpSpace.tabCp">CP</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="yumi-tab-button"
|
||||||
|
type="button"
|
||||||
|
data-tab="brother"
|
||||||
|
>
|
||||||
|
<span data-i18n="cpSpace.tabBrother">Brother</span>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="yumi-tab-button"
|
||||||
|
type="button"
|
||||||
|
data-tab="sister"
|
||||||
|
>
|
||||||
|
<span data-i18n="cpSpace.tabSister">Sister</span>
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<article class="yumi-card" aria-label="Best friend level 1">
|
||||||
|
<img
|
||||||
|
class="yumi-card-skin"
|
||||||
|
id="yumiCardSkin"
|
||||||
|
src="./assets/yumi/layers/card-cp.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<figure class="yumi-avatar yumi-avatar--left">
|
||||||
|
<span
|
||||||
|
class="yumi-avatar-photo"
|
||||||
|
id="yumiLeftAvatar"
|
||||||
|
></span>
|
||||||
|
<img
|
||||||
|
class="yumi-avatar-frame"
|
||||||
|
src="./assets/yumi/layers/avatar-frame.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<figure class="yumi-avatar yumi-avatar--right">
|
||||||
|
<span
|
||||||
|
class="yumi-avatar-photo"
|
||||||
|
id="yumiRightAvatar"
|
||||||
|
></span>
|
||||||
|
<img
|
||||||
|
class="yumi-avatar-frame"
|
||||||
|
src="./assets/yumi/layers/avatar-frame.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<div class="yumi-center-art-wrap" id="yumiCenterWrap">
|
||||||
|
<img
|
||||||
|
class="yumi-center-art"
|
||||||
|
id="yumiCenterArt"
|
||||||
|
src="./assets/yumi/layers/center-cp.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
<strong class="yumi-days-value" id="yumiDaysValue"
|
||||||
|
>999</strong
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="yumi-days-unit"
|
||||||
|
data-i18n="cpSpace.daysUnit"
|
||||||
|
>Days</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="yumi-exp-pill">
|
||||||
|
<span id="yumiExpAway">888 Exp away from Lv. 2</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section
|
||||||
|
class="yumi-progress-block"
|
||||||
|
aria-label="1000/200000"
|
||||||
|
>
|
||||||
|
<div class="yumi-level-badge yumi-level-badge--left">
|
||||||
|
<img
|
||||||
|
class="yumi-level-bg"
|
||||||
|
src="./assets/yumi/layers/level-cp.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
<span id="yumiCurrentLevel">Lv1</span>
|
||||||
|
</div>
|
||||||
|
<div class="yumi-progress-track">
|
||||||
|
<span
|
||||||
|
class="yumi-progress-fill"
|
||||||
|
id="yumiProgressFill"
|
||||||
|
></span>
|
||||||
|
<strong
|
||||||
|
class="yumi-progress-text"
|
||||||
|
id="yumiProgressText"
|
||||||
|
>1000/200000</strong
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div class="yumi-level-badge yumi-level-badge--right">
|
||||||
|
<img
|
||||||
|
class="yumi-level-bg"
|
||||||
|
src="./assets/yumi/layers/level-cp.png"
|
||||||
|
alt=""
|
||||||
|
draggable="false"
|
||||||
|
/>
|
||||||
|
<span id="yumiNextLevel">Lv1</span>
|
||||||
|
</div>
|
||||||
|
<p class="yumi-time-text" id="yumiTimeText">
|
||||||
|
Time spent together: 4 days
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="../../common/i18n.js?v=20260708-yumi-layered"></script>
|
||||||
|
<script src="../../common/api.js?v=20260708-yumi-layered"></script>
|
||||||
|
<script src="../../common/jsbridge.js?v=20260708-yumi-layered"></script>
|
||||||
|
<script src="../../common/toast.js?v=20260708-yumi-layered"></script>
|
||||||
|
<script src="./yumi.js?v=20260708-yumi-layered"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
286
activity/cp-space/yumi.js
Normal file
@ -0,0 +1,286 @@
|
|||||||
|
(function () {
|
||||||
|
var VALID_TABS = ['cp', 'brother', 'sister'];
|
||||||
|
var LAYER_BASE = './assets/yumi/layers/';
|
||||||
|
var THEMES = {
|
||||||
|
cp: {
|
||||||
|
bg: 'bg-cp.png',
|
||||||
|
tab: 'tab-cp.png',
|
||||||
|
card: 'card-cp.png',
|
||||||
|
center: 'center-cp.png',
|
||||||
|
level: 'level-cp.png',
|
||||||
|
},
|
||||||
|
brother: {
|
||||||
|
bg: 'bg-brother.png',
|
||||||
|
tab: 'tab-brother.png',
|
||||||
|
card: 'card-brother.png',
|
||||||
|
center: 'center-brother.png',
|
||||||
|
level: 'level-brother.png',
|
||||||
|
},
|
||||||
|
sister: {
|
||||||
|
bg: 'bg-sister.png',
|
||||||
|
tab: 'tab-sister.png',
|
||||||
|
card: 'card-sister.png',
|
||||||
|
center: 'center-sister.png',
|
||||||
|
level: 'level-sister.png',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
var DEFAULT_RELATION = {
|
||||||
|
days: 999,
|
||||||
|
togetherDays: 4,
|
||||||
|
currentLevel: 1,
|
||||||
|
nextLevel: 1,
|
||||||
|
currentExp: 1000,
|
||||||
|
nextExp: 200000,
|
||||||
|
neededExp: 888,
|
||||||
|
nextExpLevel: 2,
|
||||||
|
progressPercent: 22.3,
|
||||||
|
me: { avatar: '' },
|
||||||
|
partner: { avatar: '' },
|
||||||
|
};
|
||||||
|
|
||||||
|
var page = document.getElementById('yumiCpPage');
|
||||||
|
var backButton = document.getElementById('yumiBackButton');
|
||||||
|
var helpButton = document.getElementById('yumiHelpButton');
|
||||||
|
var tabButtons = Array.prototype.slice.call(
|
||||||
|
document.querySelectorAll('.yumi-tab-button[data-tab]')
|
||||||
|
);
|
||||||
|
var bgLayer = document.getElementById('yumiBgLayer');
|
||||||
|
var tabJewel = document.getElementById('yumiTabJewel');
|
||||||
|
var cardSkin = document.getElementById('yumiCardSkin');
|
||||||
|
var centerArt = document.getElementById('yumiCenterArt');
|
||||||
|
var levelBgs = Array.prototype.slice.call(
|
||||||
|
document.querySelectorAll('.yumi-level-bg')
|
||||||
|
);
|
||||||
|
var leftAvatar = document.getElementById('yumiLeftAvatar');
|
||||||
|
var rightAvatar = document.getElementById('yumiRightAvatar');
|
||||||
|
var daysValue = document.getElementById('yumiDaysValue');
|
||||||
|
var expAway = document.getElementById('yumiExpAway');
|
||||||
|
var currentLevel = document.getElementById('yumiCurrentLevel');
|
||||||
|
var nextLevel = document.getElementById('yumiNextLevel');
|
||||||
|
var progressFill = document.getElementById('yumiProgressFill');
|
||||||
|
var progressText = document.getElementById('yumiProgressText');
|
||||||
|
var timeText = document.getElementById('yumiTimeText');
|
||||||
|
var state = {
|
||||||
|
activeTab: normalizeTab(readParam('tab')) || 'cp',
|
||||||
|
data: clone(DEFAULT_RELATION),
|
||||||
|
};
|
||||||
|
|
||||||
|
function clone(value) {
|
||||||
|
return JSON.parse(JSON.stringify(value));
|
||||||
|
}
|
||||||
|
|
||||||
|
function readParam(name) {
|
||||||
|
var params = new URLSearchParams(window.location.search || '');
|
||||||
|
return params.get(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeTab(value) {
|
||||||
|
var tab = String(value || '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
return VALID_TABS.indexOf(tab) >= 0 ? tab : '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function readNumber(value, fallback) {
|
||||||
|
var number = Number(value);
|
||||||
|
return Number.isFinite(number) ? number : fallback || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
function t(key, fallback) {
|
||||||
|
if (window.HyAppI18n && window.HyAppI18n.t) {
|
||||||
|
return window.HyAppI18n.t(key, fallback);
|
||||||
|
}
|
||||||
|
return fallback || key;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatNumber(value) {
|
||||||
|
var number = Math.max(0, Math.floor(readNumber(value, 0)));
|
||||||
|
return String(number).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||||
|
}
|
||||||
|
|
||||||
|
function asset(name) {
|
||||||
|
return LAYER_BASE + name;
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncURL(tab) {
|
||||||
|
if (!window.history || !window.history.replaceState) return;
|
||||||
|
var url = new URL(window.location.href);
|
||||||
|
url.searchParams.set('tab', tab);
|
||||||
|
// tab 是当前视觉主题状态;replaceState 让刷新可复现,同时不把每次切换压入 App WebView 返回栈。
|
||||||
|
window.history.replaceState(null, '', url.toString());
|
||||||
|
}
|
||||||
|
|
||||||
|
function setImage(node, fileName) {
|
||||||
|
if (!node) return;
|
||||||
|
var nextSrc = asset(fileName);
|
||||||
|
if (node.getAttribute('src') !== nextSrc)
|
||||||
|
node.setAttribute('src', nextSrc);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderAvatar(container, url) {
|
||||||
|
if (!container) return;
|
||||||
|
container.innerHTML = '';
|
||||||
|
if (!url) return;
|
||||||
|
var image = document.createElement('img');
|
||||||
|
image.src = url;
|
||||||
|
image.alt = '';
|
||||||
|
container.appendChild(image);
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizedRelation(raw) {
|
||||||
|
var data = raw || {};
|
||||||
|
return {
|
||||||
|
days: readNumber(data.days, DEFAULT_RELATION.days),
|
||||||
|
togetherDays: readNumber(
|
||||||
|
data.togetherDays || data.together_days,
|
||||||
|
DEFAULT_RELATION.togetherDays
|
||||||
|
),
|
||||||
|
currentLevel: readNumber(
|
||||||
|
data.currentLevel || data.current_level || data.level,
|
||||||
|
1
|
||||||
|
),
|
||||||
|
nextLevel: readNumber(data.nextLevel || data.next_level, 1),
|
||||||
|
currentExp: readNumber(
|
||||||
|
data.currentExp || data.current_exp,
|
||||||
|
DEFAULT_RELATION.currentExp
|
||||||
|
),
|
||||||
|
nextExp: readNumber(
|
||||||
|
data.nextExp || data.next_exp,
|
||||||
|
DEFAULT_RELATION.nextExp
|
||||||
|
),
|
||||||
|
neededExp: readNumber(
|
||||||
|
data.neededExp || data.needed_exp,
|
||||||
|
DEFAULT_RELATION.neededExp
|
||||||
|
),
|
||||||
|
nextExpLevel: readNumber(
|
||||||
|
data.nextExpLevel || data.next_exp_level,
|
||||||
|
DEFAULT_RELATION.nextExpLevel
|
||||||
|
),
|
||||||
|
progressPercent: Math.max(
|
||||||
|
0,
|
||||||
|
Math.min(
|
||||||
|
100,
|
||||||
|
readNumber(
|
||||||
|
data.progressPercent || data.progress_percent,
|
||||||
|
DEFAULT_RELATION.progressPercent
|
||||||
|
)
|
||||||
|
)
|
||||||
|
),
|
||||||
|
me: {
|
||||||
|
avatar: String(
|
||||||
|
(data.me && data.me.avatar) || data.me_avatar || ''
|
||||||
|
),
|
||||||
|
},
|
||||||
|
partner: {
|
||||||
|
avatar: String(
|
||||||
|
(data.partner && data.partner.avatar) ||
|
||||||
|
data.partner_avatar ||
|
||||||
|
''
|
||||||
|
),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCopy() {
|
||||||
|
var data = state.data;
|
||||||
|
daysValue.textContent = formatNumber(data.days);
|
||||||
|
expAway.textContent = t(
|
||||||
|
'cpSpace.expAway',
|
||||||
|
'{exp} Exp away from Lv. {level}'
|
||||||
|
)
|
||||||
|
.replace('{exp}', formatNumber(data.neededExp))
|
||||||
|
.replace('{level}', formatNumber(data.nextExpLevel));
|
||||||
|
currentLevel.textContent = t(
|
||||||
|
'cpSpace.levelValue',
|
||||||
|
'Lv.{level}'
|
||||||
|
).replace('{level}', formatNumber(data.currentLevel));
|
||||||
|
nextLevel.textContent = t('cpSpace.levelValue', 'Lv.{level}').replace(
|
||||||
|
'{level}',
|
||||||
|
formatNumber(data.nextLevel)
|
||||||
|
);
|
||||||
|
progressText.textContent = [
|
||||||
|
formatNumber(data.currentExp),
|
||||||
|
formatNumber(data.nextExp),
|
||||||
|
].join('/');
|
||||||
|
timeText.textContent = t(
|
||||||
|
'cpSpace.timeTogether',
|
||||||
|
'Time spent together: {days} days'
|
||||||
|
).replace('{days}', formatNumber(data.togetherDays));
|
||||||
|
progressFill.style.width =
|
||||||
|
Math.max(1, Math.min(233, (data.progressPercent / 100) * 233)) +
|
||||||
|
'px';
|
||||||
|
renderAvatar(leftAvatar, data.me.avatar);
|
||||||
|
renderAvatar(rightAvatar, data.partner.avatar);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setActiveTab(tab, options) {
|
||||||
|
var nextTab = normalizeTab(tab) || 'cp';
|
||||||
|
var theme = THEMES[nextTab];
|
||||||
|
state.activeTab = nextTab;
|
||||||
|
page.setAttribute('data-tab', nextTab);
|
||||||
|
setImage(bgLayer, theme.bg);
|
||||||
|
setImage(tabJewel, theme.tab);
|
||||||
|
setImage(cardSkin, theme.card);
|
||||||
|
setImage(centerArt, theme.center);
|
||||||
|
levelBgs.forEach(function (node) {
|
||||||
|
setImage(node, theme.level);
|
||||||
|
});
|
||||||
|
tabButtons.forEach(function (button) {
|
||||||
|
var selected = button.getAttribute('data-tab') === nextTab;
|
||||||
|
button.setAttribute('aria-selected', selected ? 'true' : 'false');
|
||||||
|
});
|
||||||
|
renderCopy();
|
||||||
|
if (!options || options.syncURL !== false) syncURL(nextTab);
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyExternalData(payload) {
|
||||||
|
var data = payload || {};
|
||||||
|
var tabData = data[state.activeTab] || data.relation || data;
|
||||||
|
state.data = normalizedRelation(tabData);
|
||||||
|
renderCopy();
|
||||||
|
}
|
||||||
|
|
||||||
|
function bindEvents() {
|
||||||
|
tabButtons.forEach(function (button) {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
setActiveTab(button.getAttribute('data-tab'));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (backButton) {
|
||||||
|
backButton.addEventListener('click', function () {
|
||||||
|
if (window.HyAppBridge && window.HyAppBridge.back) {
|
||||||
|
window.HyAppBridge.back();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 无客户端 bridge 的浏览器验收环境仍需保留真实返回热区。
|
||||||
|
window.history.back();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (helpButton) {
|
||||||
|
helpButton.addEventListener('click', function () {
|
||||||
|
if (window.HyAppBridge && window.HyAppBridge.post) {
|
||||||
|
window.HyAppBridge.post('cpSpaceHelpTap', {
|
||||||
|
page: 'yumi-cp-space',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('hyapp:i18n-ready', renderCopy);
|
||||||
|
window.addEventListener('hyapp:cp-space-yumi-data', function (event) {
|
||||||
|
applyExternalData(event.detail || {});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents();
|
||||||
|
if (window.HyAppCPSpaceYumiData)
|
||||||
|
applyExternalData(window.HyAppCPSpaceYumiData);
|
||||||
|
setActiveTab(state.activeTab, { syncURL: false });
|
||||||
|
|
||||||
|
if (window.HyAppBridge && window.HyAppBridge.ready) {
|
||||||
|
// ready 只声明页面能力;真实关系数据由客户端事件或网关注入,避免 H5 自行判断关系状态。
|
||||||
|
window.HyAppBridge.ready({ page: 'yumi-cp-space' });
|
||||||
|
}
|
||||||
|
})();
|
||||||
@ -628,6 +628,7 @@
|
|||||||
"cpSpace.pageLabel": "مساحة أفضل صديق",
|
"cpSpace.pageLabel": "مساحة أفضل صديق",
|
||||||
"cpSpace.navLabel": "تنقل أفضل صديق",
|
"cpSpace.navLabel": "تنقل أفضل صديق",
|
||||||
"cpSpace.back": "رجوع",
|
"cpSpace.back": "رجوع",
|
||||||
|
"cpSpace.help": "مساعدة",
|
||||||
"cpSpace.title": "أفضل صديق",
|
"cpSpace.title": "أفضل صديق",
|
||||||
"cpSpace.tabsLabel": "تبويبات أفضل صديق",
|
"cpSpace.tabsLabel": "تبويبات أفضل صديق",
|
||||||
"cpSpace.tabCp": "CP",
|
"cpSpace.tabCp": "CP",
|
||||||
@ -643,6 +644,8 @@
|
|||||||
"cpSpace.daysValue": "{days} Days",
|
"cpSpace.daysValue": "{days} Days",
|
||||||
"cpSpace.levelValue": "Lv.{level}",
|
"cpSpace.levelValue": "Lv.{level}",
|
||||||
"cpSpace.expProgress": "{current}/{next} EXP",
|
"cpSpace.expProgress": "{current}/{next} EXP",
|
||||||
|
"cpSpace.expAway": "متبقٍ {exp} خبرة للوصول إلى Lv. {level}",
|
||||||
|
"cpSpace.timeTogether": "الوقت معًا: {days} أيام",
|
||||||
"cpSpace.maxLevelExp": "{exp} EXP",
|
"cpSpace.maxLevelExp": "{exp} EXP",
|
||||||
"cpSpace.canceling": "جار الإلغاء...",
|
"cpSpace.canceling": "جار الإلغاء...",
|
||||||
"cpSpace.cancelConfirmWithCost": "إلغاء علاقة CP سيكلف {coins} عملة. هل تريد المتابعة؟",
|
"cpSpace.cancelConfirmWithCost": "إلغاء علاقة CP سيكلف {coins} عملة. هل تريد المتابعة؟",
|
||||||
|
|||||||
@ -634,6 +634,7 @@
|
|||||||
"cpSpace.pageLabel": "Best Friend space",
|
"cpSpace.pageLabel": "Best Friend space",
|
||||||
"cpSpace.navLabel": "Best Friend navigation",
|
"cpSpace.navLabel": "Best Friend navigation",
|
||||||
"cpSpace.back": "Back",
|
"cpSpace.back": "Back",
|
||||||
|
"cpSpace.help": "Help",
|
||||||
"cpSpace.title": "Best Friend",
|
"cpSpace.title": "Best Friend",
|
||||||
"cpSpace.tabsLabel": "Best Friend tabs",
|
"cpSpace.tabsLabel": "Best Friend tabs",
|
||||||
"cpSpace.tabCp": "CP",
|
"cpSpace.tabCp": "CP",
|
||||||
@ -649,6 +650,8 @@
|
|||||||
"cpSpace.daysValue": "{days} Days",
|
"cpSpace.daysValue": "{days} Days",
|
||||||
"cpSpace.levelValue": "Lv.{level}",
|
"cpSpace.levelValue": "Lv.{level}",
|
||||||
"cpSpace.expProgress": "{current}/{next} EXP",
|
"cpSpace.expProgress": "{current}/{next} EXP",
|
||||||
|
"cpSpace.expAway": "{exp} Exp away from Lv. {level}",
|
||||||
|
"cpSpace.timeTogether": "Time spent together: {days} days",
|
||||||
"cpSpace.maxLevelExp": "{exp} EXP",
|
"cpSpace.maxLevelExp": "{exp} EXP",
|
||||||
"cpSpace.canceling": "Canceling...",
|
"cpSpace.canceling": "Canceling...",
|
||||||
"cpSpace.cancelConfirmWithCost": "Canceling this CP will cost {coins} coins. Continue?",
|
"cpSpace.cancelConfirmWithCost": "Canceling this CP will cost {coins} coins. Continue?",
|
||||||
|
|||||||
@ -628,6 +628,7 @@
|
|||||||
"cpSpace.pageLabel": "Espacio de mejor amigo",
|
"cpSpace.pageLabel": "Espacio de mejor amigo",
|
||||||
"cpSpace.navLabel": "Navegación de mejor amigo",
|
"cpSpace.navLabel": "Navegación de mejor amigo",
|
||||||
"cpSpace.back": "Volver",
|
"cpSpace.back": "Volver",
|
||||||
|
"cpSpace.help": "Ayuda",
|
||||||
"cpSpace.title": "Mejor amigo",
|
"cpSpace.title": "Mejor amigo",
|
||||||
"cpSpace.tabsLabel": "Pestañas de mejor amigo",
|
"cpSpace.tabsLabel": "Pestañas de mejor amigo",
|
||||||
"cpSpace.tabCp": "CP",
|
"cpSpace.tabCp": "CP",
|
||||||
@ -643,6 +644,8 @@
|
|||||||
"cpSpace.daysValue": "{days} Days",
|
"cpSpace.daysValue": "{days} Days",
|
||||||
"cpSpace.levelValue": "Lv.{level}",
|
"cpSpace.levelValue": "Lv.{level}",
|
||||||
"cpSpace.expProgress": "{current}/{next} EXP",
|
"cpSpace.expProgress": "{current}/{next} EXP",
|
||||||
|
"cpSpace.expAway": "Faltan {exp} Exp para Lv. {level}",
|
||||||
|
"cpSpace.timeTogether": "Tiempo juntos: {days} días",
|
||||||
"cpSpace.maxLevelExp": "{exp} EXP",
|
"cpSpace.maxLevelExp": "{exp} EXP",
|
||||||
"cpSpace.canceling": "Cancelando...",
|
"cpSpace.canceling": "Cancelando...",
|
||||||
"cpSpace.cancelConfirmWithCost": "Cancelar este CP costará {coins} monedas. ¿Continuar?",
|
"cpSpace.cancelConfirmWithCost": "Cancelar este CP costará {coins} monedas. ¿Continuar?",
|
||||||
|
|||||||
@ -595,6 +595,7 @@
|
|||||||
"cpSpace.pageLabel": "Ruang sahabat terbaik",
|
"cpSpace.pageLabel": "Ruang sahabat terbaik",
|
||||||
"cpSpace.navLabel": "Navigasi sahabat terbaik",
|
"cpSpace.navLabel": "Navigasi sahabat terbaik",
|
||||||
"cpSpace.back": "Kembali",
|
"cpSpace.back": "Kembali",
|
||||||
|
"cpSpace.help": "Bantuan",
|
||||||
"cpSpace.title": "Sahabat Terbaik",
|
"cpSpace.title": "Sahabat Terbaik",
|
||||||
"cpSpace.tabsLabel": "Tab sahabat terbaik",
|
"cpSpace.tabsLabel": "Tab sahabat terbaik",
|
||||||
"cpSpace.tabCp": "CP",
|
"cpSpace.tabCp": "CP",
|
||||||
@ -610,6 +611,8 @@
|
|||||||
"cpSpace.daysValue": "{days} Days",
|
"cpSpace.daysValue": "{days} Days",
|
||||||
"cpSpace.levelValue": "Lv.{level}",
|
"cpSpace.levelValue": "Lv.{level}",
|
||||||
"cpSpace.expProgress": "{current}/{next} EXP",
|
"cpSpace.expProgress": "{current}/{next} EXP",
|
||||||
|
"cpSpace.expAway": "{exp} Exp lagi ke Lv. {level}",
|
||||||
|
"cpSpace.timeTogether": "Waktu bersama: {days} hari",
|
||||||
"cpSpace.maxLevelExp": "{exp} EXP",
|
"cpSpace.maxLevelExp": "{exp} EXP",
|
||||||
"cpSpace.canceling": "Membatalkan...",
|
"cpSpace.canceling": "Membatalkan...",
|
||||||
"cpSpace.cancelConfirmWithCost": "Membatalkan CP ini akan memakai {coins} koin. Lanjutkan?",
|
"cpSpace.cancelConfirmWithCost": "Membatalkan CP ini akan memakai {coins} koin. Lanjutkan?",
|
||||||
|
|||||||
@ -595,6 +595,7 @@
|
|||||||
"cpSpace.pageLabel": "En iyi arkadaş alanı",
|
"cpSpace.pageLabel": "En iyi arkadaş alanı",
|
||||||
"cpSpace.navLabel": "En iyi arkadaş gezinmesi",
|
"cpSpace.navLabel": "En iyi arkadaş gezinmesi",
|
||||||
"cpSpace.back": "Geri",
|
"cpSpace.back": "Geri",
|
||||||
|
"cpSpace.help": "Yardım",
|
||||||
"cpSpace.title": "En İyi Arkadaş",
|
"cpSpace.title": "En İyi Arkadaş",
|
||||||
"cpSpace.tabsLabel": "En iyi arkadaş sekmeleri",
|
"cpSpace.tabsLabel": "En iyi arkadaş sekmeleri",
|
||||||
"cpSpace.tabCp": "CP",
|
"cpSpace.tabCp": "CP",
|
||||||
@ -610,6 +611,8 @@
|
|||||||
"cpSpace.daysValue": "{days} Days",
|
"cpSpace.daysValue": "{days} Days",
|
||||||
"cpSpace.levelValue": "Lv.{level}",
|
"cpSpace.levelValue": "Lv.{level}",
|
||||||
"cpSpace.expProgress": "{current}/{next} EXP",
|
"cpSpace.expProgress": "{current}/{next} EXP",
|
||||||
|
"cpSpace.expAway": "Lv. {level} için {exp} Exp kaldı",
|
||||||
|
"cpSpace.timeTogether": "Birlikte geçirilen süre: {days} gün",
|
||||||
"cpSpace.maxLevelExp": "{exp} EXP",
|
"cpSpace.maxLevelExp": "{exp} EXP",
|
||||||
"cpSpace.canceling": "İptal ediliyor...",
|
"cpSpace.canceling": "İptal ediliyor...",
|
||||||
"cpSpace.cancelConfirmWithCost": "Bu CP ilişkisini iptal etmek {coins} coin tutar. Devam edilsin mi?",
|
"cpSpace.cancelConfirmWithCost": "Bu CP ilişkisini iptal etmek {coins} coin tutar. Devam edilsin mi?",
|
||||||
|
|||||||
@ -601,6 +601,7 @@
|
|||||||
"cpSpace.pageLabel": "挚友空间",
|
"cpSpace.pageLabel": "挚友空间",
|
||||||
"cpSpace.navLabel": "挚友空间导航",
|
"cpSpace.navLabel": "挚友空间导航",
|
||||||
"cpSpace.back": "返回",
|
"cpSpace.back": "返回",
|
||||||
|
"cpSpace.help": "帮助",
|
||||||
"cpSpace.title": "Best Friend",
|
"cpSpace.title": "Best Friend",
|
||||||
"cpSpace.tabsLabel": "挚友空间标签",
|
"cpSpace.tabsLabel": "挚友空间标签",
|
||||||
"cpSpace.tabCp": "CP",
|
"cpSpace.tabCp": "CP",
|
||||||
@ -616,6 +617,8 @@
|
|||||||
"cpSpace.daysValue": "{days} Days",
|
"cpSpace.daysValue": "{days} Days",
|
||||||
"cpSpace.levelValue": "Lv.{level}",
|
"cpSpace.levelValue": "Lv.{level}",
|
||||||
"cpSpace.expProgress": "{current}/{next} EXP",
|
"cpSpace.expProgress": "{current}/{next} EXP",
|
||||||
|
"cpSpace.expAway": "距离 Lv. {level} 还差 {exp} 经验",
|
||||||
|
"cpSpace.timeTogether": "在一起时长:{days} 天",
|
||||||
"cpSpace.maxLevelExp": "{exp} EXP",
|
"cpSpace.maxLevelExp": "{exp} EXP",
|
||||||
"cpSpace.canceling": "取消中...",
|
"cpSpace.canceling": "取消中...",
|
||||||
"cpSpace.cancelConfirmWithCost": "取消 CP 关系需要支付 {coins} 金币,是否继续?",
|
"cpSpace.cancelConfirmWithCost": "取消 CP 关系需要支付 {coins} 金币,是否继续?",
|
||||||
|
|||||||