关于 frontend-design-systems
frontend-design-systems 是面向 Claude 的前端设计 Skill，指导使用 React、Tailwind CSS 和 shadcn/ui 构建界面。内容侧重响应式布局、可复用组件、间距与视觉层级，适用于开发生产级前端体验。
主要功能
- 01React、Tailwind CSS 与 shadcn/ui 指导
- 02响应式布局规划
- 03可复用组件组合
- 04间距与视觉层级
- 05前端验证清单
适用场景
- 01构建 SaaS 仪表板或管理面板
- 02创建响应式落地页
- 03将设计参考转为可复用界面
- 04提升前端组件的一致性
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/frontend-design-systems确认已加载。
详细介绍
前端设计系统
概述
此技能可帮助 Claude 使用以下技术生成高质量的前端界面：
- React
- Tailwind CSS
- shadcn/ui
- 现代布局系统
- 可用于生产环境的组件架构
工作流侧重于：
- 间距一致性
- 视觉层次
- 精准对齐
- 响应式布局
- 简洁的组件组合
- 避免千篇一律的“AI 生成”设计模式
目标是打造精致、用心且具有专业设计感的界面，而不是看起来像自动生成或视觉上杂乱无章的界面。
设置
开始之前：
-
安装 Node.js： https://nodejs.org
-
创建 Next.js 项目：
npx create-next-app@latest
- 安装 Tailwind CSS：
npm install tailwindcss @tailwindcss/postcss postcss
- 安装 shadcn/ui：
npx shadcn@latest init
- 启动开发服务器：
npm run dev
推荐工具：
- VS Code
- Tailwind CSS
- shadcn/ui
- React DevTools
- Figma 参考设计（可选）
推荐扩展：
- Tailwind CSS IntelliSense
- ES7 React snippets
- Prettier
- Error Lens
所需输入
- UI 需求
- 布局目标
- 品牌方向
- 目标平台：
- SaaS 仪表盘
- 落地页
- 管理面板
- 移动优先 UI
- 初创公司网站
可选：
- 设计参考
- 现有设计系统
- 品牌颜色
- 字体排印偏好
何时使用此技能
在以下情况下使用此技能：
- 构建 React 界面
- 设计 SaaS 仪表盘
- 创建落地页
- 生成可复用的 UI 系统
- 提升前端界面的精致度
- 设计响应式布局
- 构建可用于生产环境的前端体验
何时不使用
以下情况不要使用此技能：
- 仅包含后端的系统
- 不需要设计要求的原始 HTML 原型
- 非 React 前端技术栈
- 纯实验性的视觉艺术项目
使用案例
使用 React、Tailwind 和 shadcn/ui 创建一个现代 AI 初创公司落地页。
Claude 应该：
- 创建清晰的布局层次
- 使用合理的间距系统
- 构建可复用的 UI 区块
- 保持视觉一致性
- 避免布局杂乱
- 使用响应式设计模式
- 生成精致且可用于生产环境的代码
最终效果应当：
- 现代且经过精心设计
- 避免千篇一律的 AI 生成布局
- 保持良好的可读性
- 支持响应式行为
- 易于扩展和维护
前端设计核心原则
1. 优先考虑间距与对齐
优秀的前端设计很大程度上取决于间距的一致性。
Claude 应重点关注：
- 可预测的间距系统
- 整洁的对齐
- 充足的视觉留白
- 均衡的布局
间距质量会显著影响：
- 感知到的专业度
- 可读性
- 易用性
- 视觉精致度
避免：
- 拥挤的布局
- 不一致的内边距
- 不均匀的间距
- 视觉上杂乱的区块
2. 构建清晰的视觉层次
界面应清楚地传达：
- 哪些内容最重要
- 视线应聚焦于何处
- 内容如何分组
通过以下方式建立层次：
- 字体大小层级
- 间距
- 布局结构
- 对比度
- 组件尺寸
良好的层次结构有助于提升：
- 可读性
- 导航体验
- 易用性
3. 避免“AI 风格”的设计
生成的 UI 往往显得千篇一律，因为它们：
- 过度使用渐变
- 布局过于拥挤
- 滥用阴影
- 缺乏间距规范
- 重装饰、轻结构
Claude 应优先考虑：
- 克制
- 简洁的构图
- 用心安排的间距
- 易读的布局
- 细腻的视觉润色
专业的界面通常给人这样的感觉：
- 平和
- 结构清晰
- 均衡
- 经过精心设计
4. 保持组件可复用
UI 系统应保持：
- 模块化
- 可组合
- 可扩展
- 易于维护
推荐结构：
components/
ui/
layout/
sections/
可复用系统有助于提升：
- 开发速度
- 一致性
- 可扩展性
5. 正确使用 Tailwind
Tailwind 应提升清晰度，而不是造成类名混乱。
推荐的工作方式：
- 使用一致的间距刻度
- 采用可复用的模式
- 将实用类按组组织
避免：
- 过度复杂的内联写法
- 难以阅读的实用类链
- 不一致的尺寸体系
良好的 Tailwind 用法有助于提升：
- 可维护性
- 迭代速度
- 设计一致性
6. 将 shadcn/ui 作为基础
shadcn/ui 应提供：
- 无障碍的基础组件
- 可扩展的组件结构
- 清晰的交互体系
Claude 应：
- 有针对性地自定义布局
- 避免呈现默认模板的外观
- 审慎地扩展组件
目标是：
- 精心打磨的自定义设计
- 而非泛化的复制粘贴式界面
工作流
1. 定义布局结构
首先确定：
- 页面层级
- 内容区块
- 导航流程
- 响应式行为
示例：
- 主视觉区
- 功能
- 用户评价
- 定价
- 行动号召
重点关注：
- 清晰度
- 间距节奏
- 视觉流动
2. 构建核心布局体系
创建：
- 容器
- 间距体系
- 响应式网格
- 可复用的包装组件
保持：
- 最大宽度一致
- 间距可预测
- 缩放具有响应性
避免：
- 不一致的断点
- 随意的间距值
- 过于密集的区块
3. 生成可复用组件
创建：
- 按钮
- 卡片
- 导航栏
- 表单
- 模态框
- 定价区块
组件应：
- 保持可组合性
- 支持复用
- 保持视觉一致性
4. 优化字体排版与间距
调整：
- 字号比例
- 区块间距
- 行高
- 对齐方式
- 留白
字体排版应提升：
- 可读性
- 层级感
- 专业度
间距应营造：
- 呼吸感
- 清晰的节奏
- 平衡的构图
5. 改善响应式体验
验证：
- 移动端布局
- 平板端表现
- 桌面端缩放
- 导航易用性
响应式布局应：
- 自然适配
- 保持层级
- 维持良好的间距品质
避免：
- 拥挤的移动端布局
- 过大的桌面端间距
- 组件堆叠错乱
6. 增添视觉质感
使用：
- 微妙的阴影
- 克制的渐变
- 悬停过渡效果
- 清晰的边框
- 平衡的对比度
视觉润色应有助于：
- 清晰度
- 易用性
- 专业度
避免：
- 过多特效
- 杂乱的视觉效果
- 喧闹的配色体系
7. 最终验证
交付前验证：
- 间距一致性
- 响应式行为
- 对齐精度
- 可读性
- 无障碍性
- 组件一致性
确保：
- 界面设计经过周密考量
- 布局保持整洁
- 各区块衔接自然
输出要求
最终输出应包含：
- 生产级前端代码
- 可复用的 React 组件
- 整洁的 Tailwind 结构
- 精心打磨的 UI 体系
- 响应式布局
- 专业的视觉层级
工作流本身应保持：
- 可扩展
- 可维护
- 易读
- 组件驱动
- 可用于生产环境
执行策略（适用于 AI Agent）
Agent 应：
- 优先处理间距和对齐
- 构建清晰的视觉层级
- 避免泛化的 AI 风格设计模式
- 生成可复用的组件体系
- 保持响应式体验的一致性
- 优化可读性和可维护性
工作流应以以下目标为优化方向：
- 视觉质感
- 前端质量
- 可扩展性
- 可读性
- 专业且一致的 UI
最佳实践
- 始终一致地使用间距
- 保持布局视觉上简洁舒适
- 优先考虑可读性，而非装饰
- 复用 UI 模式
- 尽早验证响应式效果
- 有序组织 Tailwind 实用类
- 将 shadcn/ui 用作可自定义的基础
备注
- 间距品质会显著影响前端质量的感知
- 良好的对齐能提升视觉上的专业度
- 简洁的布局通常胜过过于复杂的布局
- 优秀的前端体系注重一致性，而非装饰
- 结构良好的 UI 体系长期来看扩展性显著更好