Communitygithub.com

mager/frontend-design

前端设计技能,能够按照mager的实际设计品味生成、重构和指导UI开发——概念主导的界面,富有作者感、触感、表现力且高度可用,涵盖编辑温暖、明亮现代产品设计和高对比度霓虹系统。在构建或审查任何前端UI时使用此技能。

frontend-design 是什么?

mager/frontend-design 是一款专注于前端 UI 设计的 AI 助手技能,旨在帮助开发者和设计师创建符合特定设计品味的界面。它能够从头生成 UI 样式、对现有界面进行重构,并提供设计指南。该技能的核心在于“概念主导”(concept-led)的设计方法,生成的界面富有“作者感”(authored)、触感(tactile)、表现力(expressive)且高度可用。它支持多种设计风格,包括体现编辑温暖的温暖风格、明亮的现代产品设计风格,以及高对比度的霓虹系统风格。该技能适用于所有需要构建或审查前端 UI 的场景,其工作方式基于对设计概念和风格要求的理解,能够智能地应用颜色、排版、布局和交互细节。作为一套完整的技能包,它帮助团队在设计语言上保持一致,同时赋能个人快速迭代和实验。该技能适用于所有主要 AI 编码代理平台,如 Claude Code、Cursor 和 Codex,通过读取项目上下文和用户提示来生成或调整 UI 代码。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mager/frontend-design/tree/main/skills/frontend-design

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

frontend-design 是做什么的?

前端设计技能,能够按照mager的实际设计品味生成、重构和指导UI开发——概念主导的界面,富有作者感、触感、表现力且高度可用,涵盖编辑温暖、明亮现代产品设计和高对比度霓虹系统。在构建或审查任何前端UI时使用此技能。

相关技能