Visual Attraction

让 AI Agent 更有依据地设计和评审视觉作品：发现重点、理解价值、形成记忆，并把判断转成具体修改与验证。

适用于商品封面、3D 展示、视频缩略图、品牌视觉和 UI。主要指导语言为中文。

能做什么

• 视觉感知：焦点竞争、图底分离、构图、分组、层级与辨识度。
• 配色与排版：明度、彩度、颜色职责、中文排版、字体与留白。
• 交互设计：状态反馈、导航、错误恢复、键盘与触屏、适度动效。
• 商品展示：缩略图识别、3D 商品证据、最终输出、视频节奏与跨平台裁切。
• 评审与学习：按证据提出优先修改，比较方案，记录有范围的偏好与实验结果。

流程：观察 → 定方向 → 诊断 → 修改 → 实际输出复查。

黄金比例与颜色联想是候选参考；用户需求、实际作品和验证结果决定取舍。模型的注意力预测不等于眼动测量，也不据此承诺点击率或销售提升。

安装与调用

将本仓库放入 Codex 的技能目录，目录名为 visual-attraction。通常路径为 ~/.codex/skills/visual-attraction；自定义环境以实际技能目录为准。目标目录尚不存在时可以运行：

git clone https://github.com/Aliciawque/visual-attraction.git ~/.codex/skills/visual-attraction

在能够发现该技能的会话中显式调用：

使用 $visual-attraction 评审这张商品封面。
先检查实际缩略图中的商品识别与视觉焦点，给出三项优先修改及验证方法。

使用 $visual-attraction 改进这个界面的层级与操作反馈。
保留已有品牌配色，检查窄屏、键盘操作、加载和错误状态。

技能指导实际制作工具工作，不自带图像生成器、渲染器或浏览器。只有文字描述时给出带假设的建议，不声称已完成画面检查。

文件结构

SKILL.md
agents/openai.yaml
references/
  perception.md
  color-type.md
  interaction.md
  product-media.md
  critique-learning.md
  sources.md
scripts/contrast.py

主技能按任务选择参考文件，不要求一次加载全部资料。

颜色对比度工具

Python 3，无第三方依赖。在仓库根目录运行：

python scripts/contrast.py '#18181B' '#FFFFFF'
python scripts/contrast.py '#777777' '#FFFFFF' --role large-text
python scripts/contrast.py --palette pairs.json

批量输入示例：

[
  {"name":"body","foreground":"#18181B","background":"#FFFFFF","role":"text"},
  {"name":"focus","foreground":"#335CFF","background":"#FFFFFF","role":"nontext"}
]

支持不透明 sRGB #RGB / #RRGGBB。普通文字阈值为 4.5:1，大字和适用的非文本信息为 3:1；调用者负责确认适用范围。退出码：0 全部通过，1 存在不足，2 输入错误。

透明、渐变、宽色域和图像背景需要另外测量实际合成结果。该工具不代表完整可访问性审计或审美评价。

验证状态

首版的技能结构、引用、UTF-8 元数据和对比度计算已在本地验证。黑白得到 21:1，#777777 对白色约 4.478:1，按普通文字标准正确判为不通过。

尚未完成独立 Agent 行为评测、人类偏好实验或商业效果验证。行为回归情境和 A/B 记录方法见 评审与校准。

参考

参考了 Anthropic frontend-design、Impeccable、UI UX Pro Max、Vercel Web Interface Guidelines，并核查 W3C、NN/g 与相关感知研究。

本技能独立编写，未包含上述项目的运行器或数据集。具体阅读入口、采用范围与局限见 来源与取舍。