mcpField
V
visual-content-director

visual-content-director

github.com/sergekostenchuk设计与 UI3250 次安装18 周前更新
代码仓库

关于 visual-content-director

visual-content-director 是用于规划和审查 UI 项目视觉素材的技能，面向设计与实施团队，覆盖素材需求到交接，并区分真实证据与生成视觉内容。

主要功能

  1. 01规划视觉素材
  2. 02制定首屏媒体方向
  3. 03编写生成视觉提示词
  4. 04检查素材相关性与安全性
  5. 05向设计和代码工具交接素材

适用场景

  1. 01规划 UI 项目所需媒体
  2. 02定义主视觉构图
  3. 03审查素材的可读性和相关性
  4. 04为实施准备媒体需求

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/sergekostenchuk/ui-ux-agent-skill-system --skill visual-content-director

安装后在 Claude Code 中输入/visual-content-director确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
visual-content-plan.template.md
evals/
evals.json
references/
visual-content-contract.md

详细介绍

视觉内容总监

此技能负责视觉内容层：确定需要哪些图像、视频、生成视觉素材和资产处理方式，才能让 UI 显得可信、便于查看且符合品牌风格。它不负责最终的 UX 策略或 SEO 结构。

操作模式

  • asset-plan：定义所需的图像、视频、图标、地图、图表和证明材料。
  • hero-media：指定首屏媒体和构图规则。
  • generation-brief：为生成视觉素材编写提示词，不编造事实性声明。
  • asset-qa：检查资产是否相关、清晰易读、风格统一且可安全使用。
  • handoff：为 Stitch、Pencil、Figma 或实现团队整理并交付资产。

必需工作流

  1. 阅读 references/visual-content-contract.md。
  2. 确认项目类型、目标受众、用户承诺和品牌限制。
  3. 确定所需的内容媒体：
    • 真实产品／地点／人物／物品的证明材料；
    • 生成或插画辅助素材；
    • 地图、图表、图标、前后对比、图库、视频。
  4. 使用 assets/visual-content-plan.template.md 进行规划。
  5. 区分真实证据资产与生成的氛围素材或占位素材。
  6. 将具体的媒体需求交接给 Stitch、Pencil、Figma 或代码负责人。

安全规则

  • 不得编造真实地点、人物、评价、房产信息、奖项、认证或法律声明。
  • 未经批准，不得对外使用私人图像。
  • 如果生成视觉素材并非真实来源证据，应标记为已生成／计划生成。
  • 对于揭示效果、前后对比或分层媒体，应将对齐检查交由 image-layer-alignment-validator 处理。
  • 公共网站必须将重要事实以文本形式呈现，不得只嵌入图像中。

交接格式

Visual mode:
Asset roles:
Real evidence assets:
Generated/planned assets:
Hero media direction:
Forbidden visuals:
Accessibility notes:
SEO/LLM text preservation:
Next owner:
Checks:

验证

编辑此技能时，运行：

python3 $CODEX_HOME/skills/.system/skill-creator/scripts/quick_validate.py $CODEX_HOME/skills/visual-content-director
python3 $CODEX_HOME/skills/senior-skill-architect/scripts/lint_production_skill.py $CODEX_HOME/skills/visual-content-director
python3 -m json.tool $CODEX_HOME/skills/visual-content-director/evals/evals.json >/dev/null

评论

支持 Markdown