前端设计
创建令人难忘的前端界面，通过大胆的创意选择脱颖而出，避免通用的AI生成美学。
参见：ui-design 基础（字体，颜色，间距），web-design CSS模式。
安装
OpenClaw / Moltbot / Clawbot
npx clawhub@latest install frontend-design
该技能的作用
指导创建视觉上有区别的网页界面：
在编码前确定大胆的美学方向
有意选择字体，颜色和空间
实现动画和微交互，带来愉悦感
避免可预测的模式，标志AI生成的UI
何时使用
构建新组件，页面或网页应用
创建登陆页面，营销网站或产品UI
重新设计界面，使其更难忘
任何前端工作，视觉影响力至关重要
关键词
frontend design，web ui，ui design，landing page，creative ui，web美学，字体，视觉设计，动画设计，独特界面
设计思维过程
在编写代码前，确定美学方向：
目的：该界面解决什么问题？
受众：谁使用它，期望是什么？
约束：框架，性能，无障碍要求
选择一个极端的美学——平庸是难忘的：
方向特征
极简主义
简洁，基本，除此之外什么都没有
最大主义
混乱，密集，故意让人感到不知所措
复古未来主义
将复古美学与现代科技融合
有机/自然
柔软，流畅，自然启发
豪华/精致
高级材料，微妙的优雅
趣味/玩具
有趣，亲切，明亮
编辑/杂志
基于字体，网格
野蛮主义/粗糙
暴露结构，反设计
装饰艺术/几何
大胆的形状，对称，装饰
工业/工具主义
功能导向，坚固
什么是人们会记住的关于这个界面的东西？坚持下去。
美学指南
字体
永远不要使用通用字体：Arial，Helvetica，system-ui Inter，Roboto（除非高度故意）
选择独特的字体：将富有特色的显示字体与精致的正文字体配对
探索：Space Grotesk，Clash Display，Cabinet Grotesk，Satoshi，General Sans，Instrument Serif，Fraunces，Newsreader
/
示例配对 /
--font-display：'Clash Display'，sans-serif；
--font-body：'Satoshi'，sans-serif；
颜色和主题
坚持一个连贯的调色板——不要犹豫于安全的选择
主色+强调色优于均匀分布的颜色
使用CSS变量以保持一致性
避免在白色背景上使用紫色渐变（“AI默认值”）
：root {
--color-bg：#0a0a0a；
--color-surface：#141414；
--color-text：#fafafa；
--color-accent：#ff4d00；
--color-muted：#666666；
}
空间组合
打破期望：不对称优于完美平衡
故意重叠元素
对角线流动或非传统布局
慷慨的负空间或受控密度——不是中间立场
网格破坏元素，吸引注意力
动画和交互
关注高影响力时刻：
页面加载：带有动画延迟的分层显示
滚动触发的动画，带来惊喜
悬停状态，带有个性
更喜欢CSS动画用于HTML；Motion库用于React
/
分层进入 /
.card {
animation：fadeUp 0.6s ease-out backwards；
}
.card:nth-child(1) {
animation-delay：0.1s；
}
.card:nth-child(2) {
animation-delay：0.2s；
}
.card:nth-child(3) {
animation-delay：0.3s；
}
@keyframes fadeUp {
from {
opacity：0；
transform：translateY(20px)；
}
to {
opacity：1；
transform：translateY(0)；
}
}
背景和氛围
创建深度和氛围：
渐变网格和多停止渐变
噪音纹理和颗粒叠加
几何图案或微妙的网格
分层透明度
戏剧性的阴影或完全平面
自定义光标，用于交互元素
实现原则
匹配复杂度与愿景
最大主义愿景→复杂代码，广泛的动画
极简主义愿景→克制，精确，完美的间距
优雅=执行愿景良好，而不是添加更多
在世代之间变化
永远不要收敛于模式：
交替使用浅色/深色主题
每次使用不同的字体系列
探索不同的美学方向
每个设计都应具有独特的感觉
永远不要
永远不要使用通用字体系列（Inter，Roboto，Arial，系统字体）
永远不要在白色背景上使用紫色渐变——“AI美学”
永远不要使用可预测的，通用的布局
永远不要跳过设计思维阶段——在构建前理解
永远不要犹豫于安全的，中间立场的美学——坚持方向
永远不要忘记，独特的设计需要独特的代码
永远不要在世代之间收敛于相同的模式——故意变化
永远不要添加没有目的的复杂性——极简主义和最大主义都需要意图
by