web-design-engineer 是做什麼的？
使用 HTML/CSS/JavaScript/React 建構精美的視覺化網頁成品：頁面、儀表板、原型、簡報、動畫、UI 模型與資料視覺化。當使用者需要瀏覽器渲染、互動式或展示性的前端成品時使用。不適用於後端、命令列或非視覺化編碼任務。
使用 HTML/CSS/JavaScript/React 建構精美的視覺化網頁成品：頁面、儀表板、原型、簡報、動畫、UI 模型與資料視覺化。當使用者需要瀏覽器渲染、互動式或展示性的前端成品時使用。不適用於後端、命令列或非視覺化編碼任務。
此技能專注於利用前端技術（HTML、CSS、JavaScript、React）來建立視覺上吸引人且以瀏覽器為基礎的成品。它針對需要互動式或展示性前端產品的使用案例，例如建立登陸頁面、資料儀表板、互動原型、動畫簡報、UI 模型與圖表。此技能的核心設計理念是將開發者的意圖轉化為精緻、可直接在瀏覽器中運行的視覺產出。它支援多種主要開發平台，包括 Claude Code、Cursor 與 CMD，並透過 GitHub 上的 `conardli/web-design-engineer` 倉庫進行存取。該技能透過提供一套標準化的提示與工作流程來運作，確保成品不僅功能完整，還具備高度的視覺美學與使用者體驗，特別適合前端開發者、設計師與產品經理快速迭代視覺概念。
npx skills add https://github.com/conardli/garden-skills/tree/main/skills/web-design-engineer使用 HTML/CSS/JavaScript/React 建構精美的視覺化網頁成品：頁面、儀表板、原型、簡報、動畫、UI 模型與資料視覺化。當使用者需要瀏覽器渲染、互動式或展示性的前端成品時使用。不適用於後端、命令列或非視覺化編碼任務。
This repo contains 3 individual skills — each has its own dedicated page.
面向 GPT Image 2 的图像生成 / 编辑技能。可在 3 种环境下使用：(A) Garden 本地模式，通过 OpenAI 兼容接口直接出图并落盘；(B) Host-Native 模式，把本 Skill 当作提示词工程指引，把渲染好的 prompt 交给宿主 Agent 自带的图像工具出图；(C) Advisor 模式，宿主无任何图像工具时退化为高质量 prompt 顾问。涵盖 18 大类、80+ 个结构化模板，覆盖海报 / UI / 产品 / 信息图 / 学术图 / 技术架构图 / 漫画 / 头像 / 流程板 / 电影分镜 / IP 周边 / 编辑工作流等场景。
面向本地知识库目录的检索和问答助手。核心流程：(1)分层索引导航 (2)遇到PDF/Excel时必须先读取references学习处理方法 (3)处理文件后再检索。按文件类型组合使用 grep、Read、pdfplumber、pandas 进行渐进式检索，避免整文件加载。用户问题涉及"从知识库目录回答问题/检索信息/查资料"时使用。
把一篇文章或口播稿，做成"看起来像视频"的点击驱动 16:9 网页演示，可选合成口播音频。流程：原始文章 → **一次产出**口播稿 + outline 开发计划 → 用户**一次对齐** 5 件事（稿子 / outline / 主题 / 素材 / 开发模式）→ 网页开发（逐章 / 顺序 / 并行）→ 可选音频合成（provider-agnostic：内置 MiniMax mmx-cli + OpenAI TTS，可换 ElevenLabs / edge-tts / Azure / 自带 TTS）。**outline 只规划节奏与信息密度，不规划动画** —— 动画由章节开发时按 PRINCIPLES + ANTI-AI 法则即时设计。每次点击推进口播稿的一个节拍，每一步独占整屏，进度条平时隐藏只在悬浮时出现。适用场景：用网页做视频（动态 PPT 但不像 PPT）、把口播稿 / 文章变成可交互的解说、为 B 站 / YouTube / 视频号录屏教程、做有电影感的产品 / talk demo。本 Skill 沉淀的是设计方法论 + 协作流程 —— 不绑定任何特定样式 / 字体 / 颜色 —— 因此能复用到任意主题与美学。
Extract frames or short clips from videos using ffmpeg.
Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.
Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.
Obra superpowers agent skills.
See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...
End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.