Frontend Design

Frontend Design 是一个专注于视觉美学与设计方向的技能，帮助开发者在构建或重塑 UI 时做出独特、有意图的设计选择，避免呈现出千篇一律的模板化外观。

核心能力

美学方向

• 为界面确定独特的视觉风格和设计方向
• 做出有意图的设计选择，而非依赖默认样式
• 让产品看起来不像"又一个 AI 生成的模板"

字体排版

• 选择合适的字体组合和排版层次
• 字号、行高、字间距的精细调整
• 通过排版建立清晰的信息层级

色彩与视觉

• 配色方案的选择与搭配
• 避免默认调色板的廉价感
• 通过色彩传达品牌调性和情感

布局与空间

• 打破对称、网格化的呆板布局
• 留白和视觉节奏的把控
• 让页面有"设计感"而非仅仅是"能用"

使用场景

• 从零开始构建新页面或组件时
• 对现有界面进行视觉改版
• 感觉当前 UI "看起来像模板"想要提升
• 需要确定产品的整体视觉风格方向

使用方式

在 Claude Code 对话中输入 /frontend-design 启动该技能，描述你的界面需求，技能会帮助你做出有审美、有意图的设计决策。

相关资源

• Frontend Design 技能源码