linxuan-sys/opencode-skills-chinese/frontend-design

前端设计

当任务不只是"让它能运行"而是"让它看起来有设计感"时使用本技能。

本技能适用于产品页面、仪表盘、应用外壳、组件或视觉系统，这些场景需要清晰的设计理念而非通用的AI风格UI。

何时使用

• 从零构建落地页、仪表盘或应用界面
• 将平淡的界面升级为有设计感且令人印象深刻的版本
• 将产品概念转化为具体的视觉方向
• 实现排版、布局和动效都很重要的前端界面

核心原则

选定一个方向并坚持执行。

安全平庸的UI通常比有少数大胆选择的强统一审美效果更差。

设计工作流

1. 先定义界面框架

在编码前确定：

• 用途
• 目标受众
• 情感基调
• 视觉方向
• 用户应该记住的一个核心点

可选方向：

• 极致极简
• 编辑风
• 工业风
• 奢华风
• 俏皮风
• 几何风
• 复古未来主义
• 柔软有机风
• 极繁主义

不要随意混合风格。选择一种并干净利落地落地。

2. 构建视觉系统

定义：

• 字体层级
• 颜色变量
• 间距节奏
• 布局逻辑
• 动效规则
• 表面/边框/阴影处理

使用CSS变量或项目的token系统，确保界面在迭代过程中保持一致性。

3. 有意识地做布局

优先选择：

• 能强化层级的不对称布局
• 能创造深度的元素重叠
• 能明确焦点的充足留白
• 仅在产品需要时使用密集布局

除非明确适配，不要默认使用对称卡片网格。

4. 让动效有意义

使用动画实现：

• 展现层级关系
• 分阶段展示信息
• 响应用户操作
• 创造一两个令人印象深刻的时刻

不要到处散落通用的微交互。一个精心设计的加载序列通常比二十个随机悬停效果更好。

优秀默认方案

排版

• 选择有特点的字体
• 合适的情况下将有辨识度的展示字体与易读的正文字体搭配
• 设计导向的页面避免使用通用默认字体

颜色

• 坚持使用清晰的调色板
• 一个主色加少量点缀色通常比权重均匀的彩虹调色板效果更好
• 除非产品真的需要，避免使用陈词滥调的紫色渐变加白色背景

背景

使用氛围感元素：

• 渐变
• 网格渐变
• 纹理
• 细微噪点
• 图案
• 分层透明度

对于面向产品的页面，空白的纯色背景很少是最优选择。

布局

• 当布局效果更好时打破网格
• 有意识地使用对角线、偏移和分组
• 即使布局非常规也要保持阅读流程清晰

反模式

永远不要默认使用：

• 千篇一律的SaaS首屏
• 没有层级的通用卡片堆
• 没有系统的随机强调色
• 像占位符一样的排版
• 只是因为容易加而存在的动效

执行规则

• 在现有产品中工作时保留已建立的设计系统
• 让技术复杂度匹配视觉创意
• 保持可访问性和响应式能力
• 前端在桌面和移动端都应该感觉经过精心设计

质量门

交付前确认：

• 界面有清晰的视觉理念
• 排版和间距看起来经过精心设计
• 颜色和动效为产品服务，而非随机装饰
• 结果不像通用的AI生成UI
• 实现是生产级别的，而不只是视觉上好看