← Back to Skills Marketplace
wsc1231231

Minimalist Design System

by wsc · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ Security Clean
560
Downloads
0
Stars
1
Active Installs
1
Versions
Install in OpenClaw
/install minimalist-design-system
Description
专家级前端架构师与UI/UX设计系统集成指南。极简现代主义设计系统，帮助将精密设计系统无缝集成到现有代码库。适用于：前端组件开发、UI设计实现、设计令牌配置、Tailwind CSS定制、响应式布局、动效设计、无障碍优化。触发场景：用户需要实现极简现代风格UI、配置设计令牌、创建组件库、优化视觉一致性。
README (SKILL.md)

极简现代主义设计系统

角色定位

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

Usage Guidance
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.
Capability Analysis
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.
Capability Assessment
✓ 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.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install minimalist-design-system
  3. After installation, invoke the skill by name or use /minimalist-design-system
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
- 首发版本，集成极简现代主义设计系统的完整指南 - 明确设计令牌（色彩、字体、空间、阴影）和组件规范（按钮、卡片、输入框） - 提供前端工程集成流程与兼容性建议（Tailwind配置、CSS变量、A11y标准、高级动效） - 适用于极简现代风格UI设计、组件库开发和视觉一致性优化
Metadata
Slug minimalist-design-system
Version 1.0.0
License MIT-0
All-time Installs 1
Active Installs 1
Total Versions 1
Frequently Asked Questions

What is Minimalist Design System?

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

How do I install Minimalist Design System?

Run "/install minimalist-design-system" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Minimalist Design System free?

Yes, Minimalist Design System is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Minimalist Design System support?

Minimalist Design System is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Minimalist Design System?

It is built and maintained by wsc (@wsc1231231); the current version is v1.0.0.

More Skills
self-improving agent
Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Clau...
⬇ 463283 · by pskoett
Skill Vetter
Security-first skill vetting for AI agents. Use before installing any skill from ClawdHub, GitHub, or other sources. Checks for red flags, permission scope, and suspicious patterns.
⬇ 259410 · by spclaudehome
Polymarket
Query Polymarket prediction markets. Check odds, find trending markets, search events, track price movements.
⬇ 232503 · by joelchance
Self-Improving + Proactive Agent
Self-reflection + Self-criticism + Self-learning + Self-organizing memory. Agent evaluates its own work, catches mistakes, and improves permanently. Use when...
⬇ 200423 · by ivangdavila
Github
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
⬇ 191115 · by steipete
ontology
Typed knowledge graph for structured agent memory and composable skills. Use when creating/querying entities (Person, Project, Task, Event, Document), linkin...
⬇ 190156 · by oswalpalash

💬 Comments