SuperAPI AI 工具集

design-styles

设计与创作

查看项目

更新于 10-16 01:37

技能介绍

用途:把特定的网页/应用设计风格落地到项目中,提供风格特征、配色、字体、布局与实现细节,也能根据项目条件推荐合适的风格。

主要能力:

  1. 按名称应用风格,如 glassmorphism、brutalist、minimalist;从 references/design-styles-comprehensive-reference.md 中提取特征、色板、字体与布局原则,给出可执行建议:含十六进制色值、字体族与字重、间距与栅格、按钮/卡片/导航等组件级指导,以及 CSS/代码示例和真实案例。
  2. 按条件推荐风格:依据行业、目标受众、品牌个性和项目类型,推荐 2-4 个风格并简要说明理由。
  3. 浏览/列出可用风格,可按类别筛选。
  4. 与 frontend-design 技能协作:本技能负责美学方向(颜色、字体、布局原则),frontend-design 负责实现代码,并传递清晰的设计规范。

风格类别:参考资料涵盖 40+ 风格,包括极简/干净(Minimalist、Flat、Swiss/International)、材质与深度(Glassmorphism、Neomorphism、Neumorphism、Skeuomorphic)、极繁与大胆(Maximalist、Memphis、Collage)、复古(Retro-Futuristic、Y2K/Web 2.0、Vaporwave、Art Deco)、自然有机(Organic/Natural、Wabi-Sabi、Handcrafted)、柔和(Soft/Pastel、Kawaii、Playful)、优雅精致(Luxury/Refined、Editorial、Corporate/Enterprise)、原始反常规(Brutalist/Raw、Neubrutalism、Grunge、Industrial)、科技未来(Cyberpunk、Terminal/Hacker、Metro/Modern UI)、色彩导向(Monochromatic、Gradient/Aurora、Dark Mode)、布局结构(Grid/Modular、Academic、Outlined)、交互动态(Kinetic、Atmospheric、Data Visualization)等。

使用方式:提及风格名时读取综合参考文件并定位该风格,输出关键特征、色板、字体、布局原则、实现代码与真实案例;询问“适合什么风格”时按行业、受众、品牌个性筛选并给出 2-4 个候选;询问可用风格时展示速查表或分类列表;与前端技能配合时由其完成代码实现。常见组合示例:Minimalism+Gradients+Kinetic、Brutalism+粗体色(Neubrutalism)、Dark Mode+Glassmorphism、Organic+Soft Pastels、Editorial+Data Visualization。

限制与注意事项:实现建议需注明可访问性要求(WCAG AA 最低对比度、动效敏感、触摸目标尺寸、焦点状态);组合风格需互补、避免视觉冲突;应说明风格是经典还是趋势依赖。本技能本身不写项目代码,具体实现交由前端技能。参考文件路径为 references/design-styles-comprehensive-reference.md,使用时需读取该文件。安装命令与收费方式暂未提供。