界面设计
Codex 前端设计技能与界面验收
要确定视觉方向，可从 OpenAI 的 frontend-skill 资料开始；要补组件规范或审查 UI，则根据现有技术栈和设计阶段选择资源。
本页内容
Codex
Vercel01OpenAI frontend-skill 与第三方设计包来自不同作者。
02使用 daisyUI 技能时，应用仍需有 daisyUI CSS。
03设计需求与 UI 审查清单服务于不同阶段。
先做一项可验证的任务
给 Codex 一个带现有组件的页面和具体的验收场景。核对生成的代码和窄屏表现，再把设计推广到其他页面。
从官方资料开始
OpenAI 前端文章明确提到 frontend-skill；当前界面工作流强调截图、仓库设计令牌和浏览器对照。可把文章作为入口，再确认当前会话实际可用的技能。
让资源匹配技术栈
daisyUI 资源提供 Tailwind 组件约定，但应用仍须有 daisyUI CSS；Vercel Web Design Guidelines 主要审查界面代码。生成设计的简报与审查清单对应不同阶段。
定义可验收的设计任务
提供现有页面、期望修改及响应式状态，复用项目组件，并对照参考检查键盘行为和视觉输出。明确验收清单有助于判断结果，技能名称本身不能证明质量。
你可能还想知道
叫“前端设计”的技能都是 OpenAI 官方的吗？
不是。应核对作者与来源链接，相似名称可能对应不同包。
添加技能会安装界面组件库吗？
通常不会。指令与应用依赖是两回事；daisyUI 示例明确要求应用已有相应 CSS。
资料出处
本文依据引用的文档与作者来源整理，vibeforthat 未对本文进行独立安装或端到端产品实测。
相关指南与作品
查看全部Codex 技能设置与项目作用范围
自己的重复任务可以做成本地技能，需要分发一组资源时再考虑插件。当前 Codex 发现机制围绕 .agents/skills，旧安装路径要重新核对。
继续阅读
Frontend Design 技能：设计简报与界面检查
Frontend Design 是 Anthropic 提供的界面设计指导，将字体、构图、颜色与交互的选择联系起来，在项目技术约束内形成清晰视觉方向。
继续阅读
UI UX Pro Max 技能：设计系统与界面选择
UI UX Pro Max 是面向设计的技能项目，包含设计系统工具与参考资料，为编码代理的视觉选择和可复用界面模式提供更有结构的起点。
继续阅读
Web Design Guidelines 技能：界面审查
Vercel 的 Web Design Guidelines 技能按持续维护的 Web Interface Guidelines 审查界面代码，针对所选文件返回关联代码位置的问题，适合改善已有 UI。
继续阅读