Communitygithub.com

设计工程师：根据任务选择合适的设计技能

负责前端与设计工程工作的编排器。当任务涉及 UI 设计、设计系统、视觉润色、AI 内容审查、图表、视频与宣传素材、3D（Three.js 或 Blender）、Penpot/Figma 文件时，优先阅读此技能。它会将任务路由到正确的专业技能（impeccable、ui-ux-pro-max、diagram-design、hyperframes、remotion、video-shotcraft、lemo-opuscar、img2threejs、blender-mcp、penpot），并在多步骤工作中将它们串联起来，确保每个技能都使用最新的上游版本。

设计工程师：根据任务选择合适的设计技能 是什么？

设计工程师（Design Engineer）是一个编排器技能，用于前端和设计工程工作。其主要功能是根据任务类型（如 UI 设计、设计系统、视觉润色、AI 内容审查、图表、视频、3D 建模或设计文件操作）自动分配和调用最适合的专业子技能（如 impeccable、ui-ux-pro-max、diagram-design、hyperframes、remotion 等），并通过统一的 `upstream.sh` 脚本确保这些子技能始终从上游仓库更新至最新版本。该技能支持 Claude Code、IDE 以及命令行环境，特别适合处理需要多技能协同的复杂设计任务，例如从设计系统创建到最终 UI 审查的完整流水线。

兼容平台✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/suryxnshsingh/design-engineering-skills/tree/main/design-engineer
查看原文→浏览所有技能

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

文档

design-engineer：根据任务选择合适的设计技能

~/.claude/skills/ 下的所有专业技能都是指向上游实时仓库的轻量指针。这些指针本身不包含技能副本，而是告诉你在执行任务前如何获取最新版本。统一的获取脚本是：

bash ~/.claude/skills/design-engineer/scripts/upstream.sh <名称>   # 克隆或更新，打印 PATH=<目录>

可用技能名称：impeccable ui-ux-pro-max blender-mcp img2threejs video-shotcraft hyperframes penpot remotion lemo-opuscar diagram-design。如果需要离线工作，请添加 --no-update 参数。

路由表

用户需求技能选择理由
新项目或页面的风格方向、调色板、字体、完整设计系统ui-ux-pro-max搜索 79 种风格 / 192 种产品类型并生成设计系统
改进、审查、润色、去 AI 味、让现有 UI 更大胆/更柔和impeccable提供 24 个操控/审查/完成命令 + 62 条检测规则
在发布任何 UI 更改前检测 AI 内容impeccable detect确定性检测，无需 LLM
架构、流程图、时序图、ER 图、甘特图、组织结构图等任何图表diagram-design生成单一品牌的 HTML+SVG 文件，支持 45 种类型
产品 UI 中的图表（非独立图表）dataviz（内置）后跟 impeccabledataviz 负责图表系统，impeccable 负责周围 UI
实际网站或应用的产品宣传视频video-shotcraft捕获真实页面、镜头卡片、通过 Remotion 渲染
从 HTML/CSS 制作视频，从 Figma 获取品牌令牌，逆向现有视频，幻灯片hyperframesHTML 转 MP4，450 个区块，包含 /figma 子技能
在 React 中处理视频，或处理现有 Remotion 仓库remotion官方 Remotion 技能
叙事式短片/解说片（绘画风格或纪录片风格），无需实拍素材lemo-opuscar60+ 种纯代码电影风格，带配乐 + TTS
参考图片转纯代码 Three.js 模型img2threejs程序化生成，动画就绪
实际 3D 建模、场景、材质、渲染、资产导入blender-mcp通过 MCP 驱动实时 Blender
读取或编辑 Penpot 设计文件penpot官方 Penpot MCP
读取 UI 工作的 Figma 文件（令牌、画板、组件）官方 Figma MCP（claude mcp add figma -t http https://mcp.figma.com/mcp）不属于本技能集；HyperFrames 的 figma 子技能仅限视频
将 Figma 品牌资产导入视频hyperframes figma 子技能仅读取 Figma 以构建 HyperFrames 动效

决策规则

  1. 现有 UI vs 新 UI。 现有 UI：首先在狭窄目标上使用 impeccable critique。没有设计系统的新 UI：先使用 ui-ux-pro-max，将结果持久化到 DESIGN.md，构建，然后使用 impeccable 审查。对于已发布的 UI，切勿跳过审查步骤。
  2. 视频：根据源材料选择。
    • 实际产品页面 → video-shotcraft。
    • HTML/CSS 技能、品牌资产或 Figma → hyperframes。
    • 团队使用 React 编码/仓库已使用 Remotion → remotion。
    • 用代码绘制故事或主题电影 → lemo-opuscar。 除非是移植（HyperFrames 提供了 remotion-to-hyperframes），否则不要在同一个项目中混用两个视频框架。
  3. 3D：代码还是 DCC。 输出必须是代码构建的 Web 资产 → img2threejs。任何需要真实建模工具、渲染或下载资产的情况 → blender-mcp。两者都需要用户确认主机设置（安装程序或 Blender 插件）；告知用户必须执行的操作。
  4. 图表不是图。 系统图表 → diagram-design。应用内的数据图 → dataviz。视频中的图 → 视频技能的图表区块。
  5. 设计文件。 Penpot → penpot。用于 UI 的 Figma → 官方 Figma MCP；用于视频的 Figma → hyperframes figma 子技能。提取令牌一次并将其写入 DESIGN.md，以便其他所有技能重复使用。
  6. 基于 MCP 的技能（blender-mcp、penpot）需要运行中的主机应用。首先检查 claude mcp list；如果缺失，向用户提供安装和连接步骤，并在用户确认前停止。

常见工作链

  • 新着陆页：ui-ux-pro-max（设计系统）→ 构建 → impeccable detect + critique → polish。
  • 发布套件：ui-ux-pro-max 令牌 → 网站 → video-shotcraft 宣传片 → diagram-design 架构图用于文档，所有步骤使用相同令牌。
  • 设计交接：penpot 令牌/画板 → DESIGN.md → 构建 → impeccable audit。
  • 带有图表的解说片：diagram-design 静态图 → hyperframes 或 lemo-opuscar 动效。
  • 英雄 3D 对象：从产品照片使用 img2threejs → 嵌入 → impeccable overdrive 用于交互。

开始任何设计任务之前

  1. 从表格中选择技能。如果两个技能都适用，请遵循决策规则；如果仍然不清楚，问一个问题。
  2. 使用 upstream.sh <名称> 获取最新版本，并阅读技能指定的入口文件。只读取当前步骤需要的内容。
  3. 查找项目中已有的 DESIGN.md、PRODUCT.md、.diagram-design 或令牌文件并重复使用。
  4. 用一句话说明你选择了哪个技能及其原因，然后开始工作。

维护

  • upstream.sh 在 ~/.cache/design-skills/ 中为每个技能维护一个浅克隆。删除该文件夹即可重置。
  • 要添加技能：在 scripts/upstream.sh 中添加一个分支，编写一个指针 SKILL.md，并在上方添加一行。
  • 当上游提供了插件或 npx skills add 路径时，在实际项目中优先使用这些方式；指针技能始终是可用的后备方案。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

suryxnshsingh/hyperframes

Write HTML/CSS and render deterministic MP4 with HeyGen's HyperFrames; ~450 ready blocks (transitions, kinetic type, captions, charts, maps, 3D), a /figma sub-skill that pulls brand tokens and frames into video, reverse-any-video, slideshow/present mode, and Remotion-to-HyperFrames porting. Use for launch films, explainers, social clips, title cards, or when the user wants video from HTML rather than React.

suryxnshsingh/video-shotcraft

Make cinematic product promo videos of a real web app in Remotion: captures the real pages, picks from ~124-150 shot recipe cards, offers the Ink Press template, beat sync and Freesound sound design. Use for "make a promo/launch video of my site/app", single shot-card effects, or finding/aligning SFX for an existing product video. Always fetches latest.

相关技能

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community