功能描述

专家级前端架构师与UI/UX设计系统集成指南。极简现代主义设计系统，帮助将精密设计系统无缝集成到现有代码库。适用于：前端组件开发、UI设计实现、设计令牌配置、Tailwind CSS定制、响应式布局、动效设计、无障碍优化。触发场景：用户需要实现极简现代风格UI、配置设计令牌、创建组件库、优化视觉一致性。

使用说明 (SKILL.md)

极简现代主义设计系统

Name: Minimalist Design System
Author: wsc1231231

角色定位

你是一位资深首席前端工程师、顶级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

技术实施

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

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

安全使用建议

This skill is an instruction-only design-system guide and appears coherent with its stated purpose. Before installing or allowing autonomous runs, consider: (1) provenance — the source/homepage is unknown, so review the SKILL.md and design-spec contents (you already have them here) and confirm you trust their recommendations; (2) repository access — the guidance expects the agent to inspect and modify code to integrate the system, so only allow it access to repos you intend it to change and review any generated diffs before committing; (3) external resources — the design spec references Google Fonts (normal for UI work) which will cause network requests when loading fonts; (4) review produced configurations (tailwind.config.js, CSS variables, Framer Motion usage) for compatibility and security (e.g., avoid accidentally exposing sensitive runtime values). If you want more assurance, restrict the agent to a read-only copy of your codebase or require human approval before applying changes.

功能分析

Type: OpenClaw Skill Name: minimalist-design-system Version: 1.0.0 The skill bundle is a legitimate design system integration guide for frontend developers. It contains UI/UX specifications, design tokens (colors, typography, spacing), and implementation instructions for Tailwind CSS and Framer Motion. There are no signs of malicious code, data exfiltration, or harmful prompt injections; all content is strictly aligned with its stated purpose of UI/UX design and frontend architecture.

能力评估

✓ Purpose & Capability

The name and description (a minimalist design-system integration guide) match the SKILL.md and the detailed design-spec: guidance covers tokens, Tailwind config, component patterns, accessibility, and animation — all relevant to the stated purpose. No unrelated capabilities (cloud access, CI secrets, platform credentials) are requested.

ℹ Instruction Scope

Instructions are high-level, persona-driven (instructing the agent to act as a senior front-end architect) and describe work the agent would perform (identify tech stack, parse design tokens, audit component architecture). That implies the agent may examine the user's codebase or repo context to produce concrete advice — which is expected for integration tasks but does grant the agent broad discretion to read repository files. The SKILL.md does not instruct reading system secrets or external endpoints beyond the included font CDN link.

✓ Install Mechanism

No install spec, no code files to execute, and nothing is downloaded or written by an installer. This instruction-only format minimizes filesystem and supply-chain risk.

✓ Credentials

The skill declares no required environment variables, credentials, or config paths. The only external resource referenced is Google Fonts for font loading in the design spec, which is appropriate for UI guidance and not a credential or secret.

✓ Persistence & Privilege

always:false and default model-invocation settings are used. The skill does not request permanent presence or elevated agent-wide privileges. Note: model invocation is allowed (platform default), which means the agent could autonomously apply the guidance if permitted by the host environment — this is expected behavior and not itself suspicious.

版本历史

v1.0.0

- 首发版本，集成极简现代主义设计系统的完整指南 - 明确设计令牌（色彩、字体、空间、阴影）和组件规范（按钮、卡片、输入框） - 提供前端工程集成流程与兼容性建议（Tailwind配置、CSS变量、A11y标准、高级动效） - 适用于极简现代风格UI设计、组件库开发和视觉一致性优化

元数据

Slug minimalist-design-system

版本 1.0.0

许可证 MIT-0

累计安装 1

当前安装数 1

历史版本数 1

常见问题

Minimalist Design System 是什么？

专家级前端架构师与UI/UX设计系统集成指南。极简现代主义设计系统，帮助将精密设计系统无缝集成到现有代码库。适用于：前端组件开发、UI设计实现、设计令牌配置、Tailwind CSS定制、响应式布局、动效设计、无障碍优化。触发场景：用户需要实现极简现代风格UI、配置设计令牌、创建组件库、优化视觉一致性。它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 560 次。

如何安装 Minimalist Design System？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install minimalist-design-system」即可一键安装，无需额外配置。

Minimalist Design System 是免费的吗？

是的，Minimalist Design System 完全免费，采用 MIT-0 许可证，可自由下载、安装和使用。

Minimalist Design System 支持哪些平台？

Minimalist Design System 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Minimalist Design System？

由 wsc（@wsc1231231）开发并维护，当前版本 v1.0.0。

Minimalist Design System