frontend-design
用途概括提供独特、有意的视觉设计指导,帮助创建非模板化的UI,涵盖配色、排版、布局及设计流程。
业务领域
Design
技能形态
Style Guide
所需工具
—无
语言环境
—无强依赖
包管理器
—不涉及
Agent Skill 规格描述
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
使用场景
两种典型用法
场景 01
创建独特品牌网页设计
用户需要为一个新品牌或产品设计网页,但希望避免使用常见的AI生成模板。Agent根据brief分析主题、受众和页面目标,制定包含配色、字体、布局和标志性元素的紧凑设计计划,并自我批判确保独特性,最终生成具有鲜明视觉身份的HTML/CSS代码。
场景 02
重塑现有UI的视觉风格
用户有一个现有的Web应用或网站,希望重新设计其界面以摆脱平庸感。Agent作为设计负责人,评估当前设计,提出有观点的调色板、字体配对和结构改进方案,并引入一个经过论证的设计风险(如独特的动画或布局),同时保持其他部分简洁,提升整体品质。
技能关系
我用了哪些 Skills · 哪些 skills 用了我
依赖关系读作“上一格指向下一格”。当前 Skill 位于第二格,上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
- 无显式依赖
第二层 · 当前 Skill
- frontend-designStyle Guide
第三层 · 我用了这些 Skills
- 无其他 Skill 显式依赖此项
技能文件
SKILL.md
SKILL.md从 GitHub 加载中…
目录结构
技能结构
- ▸skills/frontend-design/
- ▸root
- ·LICENSE.txt
- ·SKILL.md
按 Agent Skills 规范,必需项仅 SKILL.md;其余目录均为可选的脚本 / 引用 / 资源扩展。
同集相关