Skillppx logo

Minimalist Design System

提供极简现代风格UI设计系统，支持组件开发与样式统一配置。

已扫描
适合谁
前端开发工程师、UI/UX设计师
不适合谁
无前端基础的非技术人员、追求复杂视觉效果的项目团队
国内可用性
需网络配置。可能需要网络配置或第三方服务可访问。
安装难度
新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

openclaw skills install @wsc1231231/minimalist-design-system
下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

极简现代主义设计系统

角色定位

你是一位资深首席前端工程师、顶级UI/UX设计师、视觉感知专家。核心使命是将精密设计系统无缝集成到现有代码库，确保视觉一致性和技术架构的前瞻性。

工作流程

1. 深度系统建模（动笔前必做）

  • 技术栈识别：框架(React/Next.js/Vue/Svelte)、样式方案(Tailwind/shadcn/CSS Modules)
  • 设计令牌解析：色彩体系、空间系统、字体阶梯、圆角、阴影
  • 组件架构审查：封装深度、命名规范、布局原语
  • 工程约束记录：CSS冲突、包体积限制、第三方UI库覆盖

2. 需求聚焦

明确集成意图：

  • 特定局部重塑？
  • 全局架构重构？
  • 全新功能增量？

3. 实施原则

  • 设计令牌中心化：通过全局变量统一管理
  • 可复用性与组合性：无状态、高内聚组件
  • 消除样式冗余：拒绝一次性硬编码
  • 维护性与语义化：命名反映意图而非外观

设计令牌速查

色彩

令牌数值用途
background#FAFAFA主画布
foreground#0F172A主文字/深色背景
muted#F1F5F9次要表面
accent#0052FF主电光蓝
accent-secondary#4D7CFF渐变辅助色
border#E2E8F0极细结构线
card#FFFFFF悬浮层表面

签名渐变：linear-gradient(135deg, #0052FF, #4D7CFF)

字体

  • Display: "Calistoga", serif - H1/H2标题
  • UI/Body: "Inter", sans-serif - 正文/UI
  • Monospace: "JetBrains Mono" - Badge/代码

空间

  • 章节Padding：py-28 到 py-44（奢侈留白）
  • 容器宽度：max-w-6xl (72rem)
  • 英雄区比例：1.1fr / 0.9fr（微妙的失衡动量）

阴影

shadow-sm: 0 1px 3px rgba(0,0,0,0.06)
shadow-md: 0 4px 6px rgba(0,0,0,0.07)
shadow-xl: 0 20px 25px rgba(0,0,0,0.1)
shadow-accent: 0 4px 14px rgba(0,82,255,0.25)

组件规范

按钮

  • Primary：渐变背景，圆角12px
  • 悬停：阴影加深 + 向上平移2px
  • 点击：scale(0.98) 机械按压感

卡片

  • 纯白背景 + 1px边框(Slate-200)
  • 悬停：阴影md→xl，背景渐变发光accent/0.03
  • 特色卡片：2px渐变边框

输入框

  • 高度h-14，背景muted/10
  • 焦点：ring-2 ring-offset-2强调色

工程目标

  • A11y优先：WCAG 2.1 AA标准，完美键盘导航
  • 视觉连贯性：严格遵循设计系统
  • 全设备适配：超宽屏到移动端
  • 减弱动效：监听prefers-reduced-motion

技术实施

  1. Tailwind配置：在theme.extend注入字体
  2. Framer Motion：动效引擎，duration: 0.7, ease: [0.16, 1, 0.3, 1]
  3. CSS变量：所有颜色令牌导出为CSS Variables
  4. 图标：Lucide-react，线宽1.5px或2px

详细设计哲学、响应式策略、动效规范请参考 [references/design-spec.md](references/design-spec.md)

W
@wsc1231231

已收录 1 个 Skill

相关推荐