【Skill分享】前端美学设计技能,创建独特、有辨识度的生产级前端界面。避免AI通用美学

The Agent Skills Directory 中看到个有意思的skill,立马在 Trae 用新上线的 MiniMax2.7 创建一个试试。

Skill介绍

本技能指导创建独特的、生产级的前端界面,避免 generic “AI slop” 美学。实现真正可工作的代码,并对外观细节和创意选择给予非凡的关注。

使用场景

当用户提供以下需求时调用此技能:

  • 一个组件、页面、应用程序或界面的构建需求

  • 可能包含关于目的、受众或技术约束的上下文信息

调性 (Tone)

选择一个极端的方向:

  • 极致极简主义 (Brutally Minimal)
  • 极繁主义混乱 (Maximalist Chaos)
  • 复古未来主义 (Retro-Futuristic)
  • 有机/自然 (Organic/Natural)
  • 奢华/精致 (Luxury/Refined)
  • 玩具般趣味 (Playful/Toy-like)
  • 杂志编辑风格 (Editorial/Magazine)
  • 粗野主义/原始 (Brutalist/Raw)
  • 艺术装饰/几何 (Art Deco/Geometric)
  • 柔和/粉彩 (Soft/Pastel)
  • 工业/实用 (Industrial/Utilitarian)

skill结构

前端美学设计技能/                 # 前端设计技能
    ├── SKILL.md                     # 技能定义文档
    └── references/                  # 参考资料
        ├── 技术资源/
        │   ├── CSS技巧.md
        │   └── 动画库.md
        ├── 案例分析/
        │   └── 优秀界面拆解.md
        └── 设计灵感/
            ├── 动效参考.md
            ├── 字体推荐.md
            └── 配色方案.md

项目地址: Skills/Skills/前端美学设计技能/SKILL.md at main · Sleepwal/Skills

效果

用这个skill创建了一个html网页


欢迎试用和反馈改进建议

7 个赞

待会试试效果

4 个赞

佬来了,你在社区好活跃啊 :grinning_face:

2 个赞

还真挺不错的

3 个赞

这个真好看

:woman_mechanic:

2 个赞

更新了两个页面例子 :melting_face:

极简主义


杂志编辑风格


3 个赞

好看好看 星球可以

3 个赞

跟大佬学习一下