codex-skills
为Codex Agent提供高质量前端界面设计与实现能力的专用技能。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：codex-skills。 它的用途是：为Codex Agent提供高质量前端界面设计与实现能力的专用技能。 完整的 Skill 内容见：https://321skill.com/skills/codex-skills-vipulgupta2048/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘$frontend-design 为一家科技初创公司创建一个具有粗野主义美学风格的落地页，要求有超大字体和动态渐变背景。’，它会根据预设的‘粗野主义’设计手册，生成包含相应CSS变量、排版、布局和动画的完整HTML/CSS/JS代码。或者，你可以说：‘优化这个React组件的交互动效和视觉层次’，技能会应用其实现模式来增强现有代码。
介绍
这是一个专为OpenAI Codex Agent设计的技能，旨在解决开发者在构建具有高设计品质和生产就绪度的前端界面时面临的挑战。它通过提供预设的设计系统、具体的代码模式和可复用的模板，将专业的设计原则转化为可执行的代码，帮助开发者快速产出视觉独特、代码健壮的前端作品。
使用方式非常灵活。当你的任务涉及构建或优化网页组件、页面或应用时，Codex Agent会自动激活此技能。你也可以在Codex CLI中通过$frontend-design命令显式调用它，并直接下达设计指令，例如创建特定美学风格的页面或优化现有组件。
该技能非常适合前端开发、全栈开发和UI设计师等角色。对于前端开发者，它是快速实现高质量设计的得力助手；对于全栈开发者，它能弥补设计能力的短板；对于UI设计师，它则是将设计概念快速转化为代码原型的桥梁。
建议在使用时，明确你期望的设计风格（如“工业风”、“复古未来主义”）和具体功能要求，技能会根据预设的美学手册生成匹配的代码。同时，它内置了响应式设计、动画和可访问性最佳实践，适合用于构建需要直接面向用户、对视觉和体验有要求的项目原型或生产级界面。
核心特点
核心区别在于其内置了多个完整、具体且风格迥异的预设设计系统（如粗野主义、编辑风、复古未来主义），并提供了从美学指导到具体代码实现的一站式解决方案，而非仅提供通用的代码片段。
注意事项
不适合需要完全自定义、与特定现有设计系统严格绑定的复杂企业级项目开发。
常见问题
这个技能支持哪些前端框架？
主要提供基于原生HTML/CSS/JS的模板和模式，但其设计原则和代码模式可应用于React等框架的组件开发。
如何为我的项目应用特定的设计风格？
在指令中明确指定美学方向（如“brutalist”），技能会自动调用对应的设计手册来生成代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/codex-skills-vipulgupta2048/raw/index.md 读取 codex-skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/codex-skills-vipulgupta2048/raw/index.md（查看排版版本）