前端设计：专业 UI/UX 指南 - Openclaw Skills

什么是 前端设计？

前端设计技能为旨在创建高保真 Web 界面的开发人员提供了专家级蓝图。通过利用 Openclaw Skills 库中的这一特定条目，您可以摆脱陈旧、通用的风格，拥抱 Vercel 灵感的深色模式、玻璃拟态和新野兽主义等现代美学。它强调结构化工作流程，在编写任何代码之前，优先通过 ASCII 线框图进行结构规划。

除了美学，这项技能还通过引入 oklch() 色彩空间和语义化变量定义等现代 CSS 标准来关注卓越的技术性能。它提供了精心挑选的排版、间距比例和动画微语法，确保使用 Openclaw Skills 构建的每个项目都能保持专业、统一且无障碍的用户体验。

下载入口:https://github.com/openclaw/skills/tree/main/skills/mpociot/superdesign

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

npx clawhub@latest install superdesign

2. 手动安装

将技能文件夹复制到以下位置之一

全局模式 ~/.openclaw/skills/ 工作区 <project>/skills/

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

请帮我使用 Clawhub 安装 superdesign。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。

前端设计 应用场景

• 使用结构化 ASCII 线框图快速原型化高转化率的落地页。
• 设计具有清晰信息层级和一致间距的复杂管理仪表盘。
• 使用高清 oklch() 色彩定义创建现代深色模式主题。
• 为企业级 Web 应用程序实现无障碍且响应式的组件库。

前端设计 工作原理

1. 布局设计：使用 ASCII 线框图定义组件结构和层级，以可视化用户界面。
2. 主题定义：通过使用语义化 CSS 变量选择颜色、排版和间距比例来建立视觉身份。
3. 动画规划：在实现前，使用专门的微语法来规划过渡和交互时机（例如：悬停和按下状态）。
4. 技术执行：使用 Tailwind CSS 等优先类框架和 Flowbite 等组件库生成优化代码。
5. 完善：应用响应式设计断点和无障碍审计，确保界面在所有设备上对所有用户均可用。

前端设计 配置指南

要将此技能集成到您的开发工作流程中，请确保您正在使用现代 CSS 和 JavaScript 库。对于通过 CDN 进行的快速原型设计，请在您的项目中包含以下脚本：

# 标准设置包括 Tailwind、Flowbite 和 Lucide 图标
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>

前端设计 数据架构与分类体系

前端设计技能将数据组织成 UI 模式和技术要求的结构化分类：

元素	数据模式 / 要求
颜色	使用 oklch() 的语义变量，以获得更好的感知均匀性。
排版	无衬线、等宽、衬线和显示字体的分类列表。
间距	一致的 4px (0.25rem) 基础单位比例。
图标	带有自动化 SVG 创建脚本的 Lucide 图标集。
图像	通过 Unsplash 和 placehold.co 进行动态占位符集成。

name: frontend-design
description: Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
metadata: {"clawdbot":{"emoji":"??"}}

Frontend Design Skill

Use this skill when creating UI components, landing pages, dashboards, or any frontend design work.

Design Workflow

Follow this structured approach for UI design:

1. Layout Design — Think through component structure, create ASCII wireframes
2. Theme Design — Define colors, fonts, spacing, shadows
3. Animation Design — Plan micro-interactions and transitions
4. Implementation — Generate the actual code

1. Layout Design

Before coding, sketch the layout in ASCII format:

┌─────────────────────────────────────┐
│         HEADER / NAV BAR            │
├─────────────────────────────────────┤
│                                     │
│            HERO SECTION             │
│         (Title + CTA)               │
│                                     │
├─────────────────────────────────────┤
│   FEATURE   │  FEATURE  │  FEATURE  │
│     CARD    │   CARD    │   CARD    │
├─────────────────────────────────────┤
│            FOOTER                   │
└─────────────────────────────────────┘

2. Theme Guidelines

Color Rules:

• NEVER use generic bootstrap-style blue (#007bff) — it looks dated
• Prefer oklch() for modern color definitions
• Use semantic color variables (--primary, --secondary, --muted, etc.)
• Consider both light and dark mode from the start

Font Selection (Google Fonts):

Sans-serif: Inter, Roboto, Poppins, Montserrat, Outfit, Plus Jakarta Sans, DM Sans, Space Grotesk
Monospace: JetBrains Mono, Fira Code, Source Code Pro, IBM Plex Mono, Space Mono, Geist Mono
Serif: Merriweather, Playfair Display, Lora, Source Serif Pro, Libre Baskerville
Display: Architects Daughter, Oxanium

Spacing & Shadows:

• Use consistent spacing scale (0.25rem base)
• Shadows should be subtle — avoid heavy drop shadows
• Consider using oklch() for shadow colors too

3. Theme Patterns

Modern Dark Mode (Vercel/Linear style):

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.970 0 0);
  --muted: oklch(0.970 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
  --font-sans: Inter, system-ui, sans-serif;
}

Neo-Brutalism (90s web revival):

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0 0 0);
  --primary: oklch(0.649 0.237 26.97);
  --secondary: oklch(0.968 0.211 109.77);
  --accent: oklch(0.564 0.241 260.82);
  --border: oklch(0 0 0);
  --radius: 0px;
  --shadow: 4px 4px 0px 0px hsl(0 0% 0%);
  --font-sans: DM Sans, sans-serif;
  --font-mono: Space Mono, monospace;
}

Glassmorphism:

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
}

4. Animation Guidelines

Micro-syntax for planning:

button: 150ms [S1→0.95→1] press
hover: 200ms [Y0→-2, shadow↗]
fadeIn: 400ms ease-out [Y+20→0, α0→1]
slideIn: 350ms ease-out [X-100→0, α0→1]
bounce: 600ms [S0.95→1.05→1]

Common patterns:

• Entry animations: 300-500ms, ease-out
• Hover states: 150-200ms
• Button press: 100-150ms
• Page transitions: 300-400ms

5. Implementation Rules

Tailwind CSS:

<!-- Import via CDN for prototypes -->
<script src="https://cdn.tailwindcss.com"></script>

Flowbite (component library):

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>

Icons (Lucide):

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>lucide.createIcons();</script>

Images:

• Use real placeholder services: Unsplash, placehold.co
• Never make up image URLs
• Example: https://images.unsplash.com/photo-xxx?w=800&h=600

6. Responsive Design

Always design mobile-first and responsive:

/* Mobile first */
.container { padding: 1rem; }

/* Tablet */
@media (min-width: 768px) {
  .container { padding: 2rem; }
}

/* Desktop */
@media (min-width: 1024px) {
  .container { max-width: 1200px; margin: 0 auto; }
}

7. Accessibility

• Use semantic HTML (header, main, nav, section, article)
• Include proper heading hierarchy (h1 → h2 → h3)
• Add aria-labels to interactive elements
• Ensure sufficient color contrast (4.5:1 minimum)
• Support keyboard navigation

8. Component Design Tips

Cards:

• Subtle shadows, not heavy drop shadows
• Consistent padding (p-4 to p-6)
• Hover state: slight lift + shadow increase

Buttons:

• Clear visual hierarchy (primary, secondary, ghost)
• Adequate touch targets (min 44x44px)
• Loading and disabled states

Forms:

• Clear labels above inputs
• Visible focus states
• Inline validation feedback
• Adequate spacing between fields

Navigation:

• Sticky header for long pages
• Clear active state indication
• Mobile-friendly hamburger menu

---

Quick Reference

---

Based on SuperDesign patterns — https://superdesign.dev