Minimalist Design System

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

Security Scan

This is an instruction-only design-system guidance skill whose declared purpose, instructions, and resource links are internally consistent and do not request credentials or install code.

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.

Assessment

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.

极简现代主义设计系统

角色定位

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