跳到正文
cccskills
免费在 GitHub 公开

live-preview-canvas

A prototyping skill that generates a local HTML mock with a built-in feedback layer, allowing users to drop visual comments (red dots) for UI fixes.

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(4)

  • SKILL.md1.4 KB
  • examples/preview_interactive_dashboard.html20.1 KB
  • resources/template.html14.3 KB
  • scripts/base_template.html5.3 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

live-preview-canvas

live-preview-canvas is an AOS (BDB Agent OS) skill designed to bridge the gap between design and implementation feedback. It combines rapid local prototyping with direct visual feedback.

Workflow

  1. Generate Prototype: The agent uses the base_template.html to generate a local HTML mock of a UI component or page.
  2. Review & Comment: The user opens the HTML file in their browser. They can click anywhere on the UI to leave a visual comment (represented by a red dot) and enter text detailing what needs to be fixed or changed.
  3. Export Feedback: The user clicks the "Export Feedback" button to generate a JSON payload of all comments, including coordinates and text.
  4. Agent Action: The agent reads the exported feedback (either pasted back by the user or saved to a file) and correlates the visual comments with the UI structure to apply precise fixes.

Usage

When a user requests a UI prototype or a visual iteration, copy the contents of scripts/base_template.html and inject your HTML/CSS/JS for the prototype into the designated areas. Instruct the user to open the file, click to leave feedback, and share the exported JSON back for the next iteration.

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Use when manage multiple local CLI agents via tmux sessions (start/stop/monitor/assign) with cron-friendly scheduling.

中文简介正在准备中。当前显示原文说明。

hybridlabor-api/aos62026年10月16日 更新

Use when a hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).

中文简介正在准备中。当前显示原文说明。

hybridlabor-api/aos62026年10月16日 更新

Reference for how BDB structures autonomous software engineering work — the seven-node dispatcher graph (Architect, TechLead, UI/UX, Engineering, Media/EventTech, Reviewer, Shipping) that /startcycle-graph actually runs. Use when you need the high-level lifecycle framing without inventing your own process.

中文简介正在准备中。当前显示原文说明。

hybridlabor-api/aos62026年10月16日 更新

Tools are how AI agents interact with the world. A well-designed tool is the difference between an agent that works and one that hallucinates, fails silently, or costs 10x more tokens than necessary. This skill covers tool design from schema to error handling.

中文简介正在准备中。当前显示原文说明。

hybridlabor-api/aos62026年10月16日 更新

Harness patterns for coding agents — memory, permissions, context engineering, delegation, skills, hooks, bootstrap.

中文简介正在准备中。当前显示原文说明。

hybridlabor-api/aos62026年10月16日 更新

agenttrail: live map of a multi-agent build in the browser: which plan component is being worked on, by which agent or harness, what is done and what is stuck. Use when a multi-agent pipeline starts (/startcycle, /startcycle-graph, /teamwork-preview) or after a plan-canvas approve, when the user asks to see what the agents are doing ("live map", "build board", "who is running now"), or by yourself whenever a multi-agent run is under way — no user prompt needed.

中文简介正在准备中。当前显示原文说明。

hybridlabor-api/aos62026年10月16日 更新

查看 hybridlabor-api 的全部技能

报告此技能的问题