用途：当 Codex 需要设计、构建、打磨或大幅重做前端 UI（落地页、网站、仪表盘、Web 应用、组件、原型等）时使用。目标是产出有辨识度、生产级的前端界面，避免通用的 AI 审美。
主要能力：先读请求与现有代码库约定再定方向；确定具体视觉概念（如财经终端、瑞士工业风 SaaS、奢华酒店、游戏 HUD 等）；优先实现真实可用的屏幕或流程，而非营销外壳；在图像能显著提升效果时使用真实、生成或领域相关素材；保证响应式、可访问性，并处理文本溢出、加载态、悬停态与窄视口；本地运行时检查桌面与移动布局、修复可见缺陷并排查控制台错误。
使用方式：按“先理解上下文与美学方向，再实现工作代码”的流程推进。落地页要求首屏即点明品牌、产品或报价，H1 写具体对象，价值主张放辅助文案；避免默认左右分栏 hero 与空洞 SaaS 措辞。应用、仪表盘、编辑器等以密集扫描和可预测控件为先；游戏、作品集、消费产品可加强艺术指导与动效。
排版、色彩、动效、空间构成、素材、背景细节、控件与响应式均需刻意选择，并用 CSS 变量保持一致；动效用于有意义的微交互，React 中仅在已具备或确有必要时引入动效库。需避免紫色渐变白底、通用卡片网格、Inter 单一字体、低对比灰字、无意义假图表等反模式。
视觉验收：本地可运行时应检查约 1440px、768px、390px 宽度，修复控制台错误、空白渲染、文字裁切、控件重叠、素材损坏、对比度不足、首屏构图与移动导航问题，并确认悬停、聚焦、激活、空态、加载、错误状态。
限制：资料未提供具体安装命令、依赖版本、收费或价格信息。该技能源自 Anthropic 的 frontend-design 技能并针对 Codex 修改，采用 Apache License 2.0。