菜单
创建具有高设计水准、独特且可用于生产环境的前端界面。当用户要求构建Web组件、页面、制品、海报或应用（例如网站、着陆页、仪表板、React组件、HTML/CSS布局，或对任何Web UI进行样式设计/美化）时，可使用此技能。生成富有创意、经过打磨的代码和UI设计，避免通用的AI美学风格。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/TXYzznc/GP --skill frontend-design命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
具备世界级游戏UI设计专业能力，融合任天堂UI理念的清晰性、《死亡空间》与《银河战士Prime》的沉浸式叙事化界面，以及电竞游戏的竞技可读性原则。游戏UI是连接玩家意图与游戏响应的无形桥梁。优秀的游戏UI在不破坏沉浸感的前提下为玩家服务，能在激烈的游戏过程中瞬间传达关键信息，引导新玩家的同时又不会让老玩家感到被轻视，还能流畅适配从4K显示器到掌机屏幕、从键盘到触摸再到控制器的各类场景。顶尖的游戏UI设计师深知，屏幕上的每一个像素都弥足珍贵——它们是从游戏世界中“借”来的。当提及“game ui, game interface, hud design, heads up display, game menu, inventory ui, health bar, stamina bar, game hud, minimap, crosshair, reticle, button prompt, controller ui, gamepad navigation, diegetic interface, in-world ui, quest tracker, damage numbers, cooldown indicator, radial menu, game tooltip, game-ui, hud, game-interface, game-menu, controller-ui, diegetic, game-design, accessibility, console, mobile-games”这些关键词时适用。
Clash of Gods 项目角色美术资源 AI 绘图提示词生成器。 支持两种模式： - 影视级CG角色设定图（三视图+细节展示板，UE5/PBR质感，适合主要角色、Boss） - 游戏立绘/头像（游戏内使用的角色卡面、头像、立绘） 当用户提到"角色设定图"、"三视图"、"设定板"、"CG质感"、"影视级"、"角色海报"、 "立绘"、"头像"、"角色卡面"、"人物设计"时，立即使用此技能。 即使用户只给出角色名称和简单描述，也应主动使用此技能生成完整提示词。
Clash of Gods 项目 AI 绘图提示词生成总入口。 根据用户描述的绘图需求，自动判断类型并调用对应子模块生成高质量提示词。 支持以下类型： - 技能/Buff 图标（ICON）：技能图标、Buff 状态图标 - 角色立绘（CHARACTER）：召唤师、英雄、NPC 立绘/头像 - 场景图（SCENE）：地图背景、战斗场景、场景元素 - UI 元素（UI）：按钮、面板、边框、HUD 组件等界面元素
基于 SOC 职业分类
正在显示 SKILL.md
| name | frontend-design |
| description | 创建具有高设计水准、独特且可用于生产环境的前端界面。当用户要求构建Web组件、页面、制品、海报或应用（例如网站、着陆页、仪表板、React组件、HTML/CSS布局，或对任何Web UI进行样式设计/美化）时，可使用此技能。生成富有创意、经过打磨的代码和UI设计，避免通用的AI美学风格。 |
| license | Complete terms in LICENSE.txt |
| tags | frontend-ui-design, production-ready-code, creative-web-design, css-animations, typography-optimization |
| tags_cn | 前端UI设计, 生产可用代码, 创意Web设计, CSS动效, 排版优化 |
此技能可指导创建独特、可用于生产环境的前端界面，避免千篇一律的“AI流水线”美学风格。在实现可正常运行的代码时，格外注重美学细节与创意选择。
用户需提供前端需求：要构建的组件、页面、应用或界面。他们可能会包含关于用途、受众或技术限制的上下文信息。
在编码之前，先了解上下文并确定一个明确的美学方向：
关键要点：选择清晰的概念方向并精准执行。大胆的极繁主义和精致的极简主义都可行——关键在于设计的目的性，而非强度。
随后实现可运行的代码（HTML/CSS/JS、React、Vue等），代码需满足：
重点关注：
绝对不要使用通用的AI生成美学风格，例如过度使用的字体家族（Inter、Roboto、Arial、系统字体）、陈词滥调的配色方案（尤其是白色背景搭配紫色渐变）、可预测的布局和组件模式，以及缺乏特定场景特色的模板化设计。
创造性地解读需求，做出符合特定场景的独特选择。每个设计都应独一无二。在浅色与深色主题、不同字体、不同美学风格之间切换。绝对不要在多个设计中重复使用常见选择（例如Space Grotesk字体）。
重要提示：实现复杂度要与美学愿景匹配。极繁主义设计需要包含大量动画和特效的复杂代码。极简主义或精致风格的设计则需要克制、精准，并注重间距、排版和细微细节。优雅源于对设计愿景的出色执行。
请记住：Claude能够完成极具创意的工作。不要设限，展示跳出思维定式、全力投入独特愿景时所能创造的真正成果。