关于 frontend-design-philosophy
这是一套面向前端设计与实现者的设计原则，帮助打造具有明确风格、避免通用化的界面。内容涵盖设计方向选择、常见反模式及验证清单。
主要功能
- 01先明确界面目的与受众
- 02选择清晰的美学方向
- 03识别并避免通用设计模式
- 04通过清单检查设计质量
适用场景
- 01规划新界面的视觉方向
- 02审查 AI 生成的界面
- 03检查响应式与无障碍设计
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/frontend-design-philosophy确认已加载。
详细介绍
前端设计理念
打造独特、非套路化界面的核心原则。
先思考设计
编写代码前，请先思考：
- 目的：这个界面要实现什么目标？
- 受众：谁会使用它？他们有什么期待？
- 基调：它应该带来什么感受？
- 差异化：它有什么独特之处？
选择鲜明风格
与其默认采用稳妥、套路化的设计，不如坚定地选择鲜明的美学方向：
| 风格 | 特征 |
|---|---|
| 粗野主义 | 原始、坦诚、实用 |
| 极繁主义 | 大胆、层次丰富、富有表现力 |
| 极简主义 | 克制、精准、突出本质 |
| 复古未来主义 | 怀旧科技感、霓虹、渐变 |
| 奢华风 | 精致、疏朗、高端 |
| 趣味风 | 动态、鲜艳、令人愉悦 |
避免“AI 垃圾风”
套路化的 AI 生成美学一眼就能认出来。请避免：
| 类别 | 避免使用 |
|---|---|
| 字体 | Inter、Roboto、Arial，以及作为主要字体的系统字体 |
| 颜色 | 紫色渐变、蓝紫渐变 |
| 布局 | 居中式首屏、三栏功能区 |
| 设计选择 | 到处使用圆角、微妙阴影 |
反面模式
| 类别 | 避免 |
|---|---|
| 字体排印 | 全篇只用一种字体、默认系统字体 |
| 颜色 | 灰上加灰、缺乏巧思的配色 |
| 布局 | 对称网格、所有内容都居中 |
| 动效 | 到处使用悬停效果、弹跳动画 |
验收清单
- 字体排印具有辨识度（不是默认字体）
- 配色经过刻意选择且数量有限
- 布局打破可预测的套路
- 动效服务于目的，且经过精心打磨
- 设计方向清晰一致
- 响应式表现保持良好品质
- 不为美观牺牲无障碍性
资源
**请记住：**每一个默认选项都是一种选择。如果你使用默认选项，做出来的作品就会流于套路。
评论
支持 Markdown