ui-articulation-skill 是做什么的？
Codex技能，用于将模糊的UI反馈转化为精确的设计语言和HTML视觉对比。
概述
该技能帮助你从用户或利益相关者的模糊UI反馈中提取明确的设计意图。例如，当有人说“这个按钮看起来不协调”，技能会将其转化为“按钮颜色与背景对比不足（当前#4A90D9 vs #FFFFFF，建议提高饱和度或调整色相）”并结合并排HTML对比。
使用方法
- 将模糊的UI反馈粘贴到对话中。
- 调用技能，它将自动生成：
- 设计语言描述（包括颜色、间距、排版、对齐等参数）
- 一个包含原始版本和修改版本的HTML视觉对比文件
- 输出结果可以直接用于开发修复或与设计师沟通。
支持平台
- Codex
- 其他兼容OpenAI函数的AI助手
示例
输入："搜索框太窄了，而且旁边的图标太大。"
输出：
- 设计语言调整：
- 搜索框宽度从200px增加至320px
- 图标尺寸从32px缩小至24px
- 间距调整：图标与搜索框之间添加8px间距
- HTML对比：
<!DOCTYPE html>
<html>
<head><title>视觉对比: 搜索框调整</title></head>
<body>
<div style="display: flex; gap: 40px;">
<div>
<h3>原始版本</h3>
<div style="display: flex; align-items: center;">
<input type="text" placeholder="搜索..." style="width: 200px;" />
<span style="font-size: 32px;">🔍</span>
</div>
</div>
<div>
<h3>修改版本</h3>
<div style="display: flex; align-items: center; gap: 8px;">
<input type="text" placeholder="搜索..." style="width: 320px;" />
<span style="font-size: 24px;">🔍</span>
</div>
</div>
</div>
</body>
</html>
注意事项
- 确保输入反馈包含足够的上下文（如屏幕截图描述或页面区域）。
- 如果反馈过于宽泛，技能可能会要求提供更多细节。
- 生成的HTML是独立的，可直接在浏览器中打开查看。