frontend-design-pro

前端设计质量提升 skill。让 AI 生成的 UI/前端代码更专业，避免常见设计反模式。参考 impeccable 项目的设计语言规范，提供 audit/polish/critique 等设计审查命令。触发词：/audit /polish /critique /colorize /animate /bolder /quieter /distill 以及：审查UI设计、优化界面、前端设计建议、让设计更好看、检查设计质量

View Source SKILL.md

Stars

Installs

Status

ACTIVE

Visibility

PUBLIC

安装方式

直接复制以下提示词，发送给你的 AI 助手即可完成安装。

请先检查是否已安装 SkillHub 商店，若未安装，请根据 https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/skillhub.md 安装 SkillHub 商店，然后安装 frontend-design-pro 技能。若已安装，则直接安装 frontend-design-pro 技能。

Overview

Skill Key: antonia-sz/frontend-design-pro
Author: antonia-sz
Source Repo: openclaw/skills
Version: 1.0.0
Source Path: skills/antonia-sz/frontend-design-pro
Latest Commit SHA: ea538b12525a9db296c64fd53e7962decb6fc6fe

Extracted Content

SKILL.md excerpt

# Frontend Design Pro — 前端设计质量提升

灵感来源：[impeccable](https://github.com/pbakaus/impeccable) ⭐ 3k

一套专业的前端设计语言规范，让 AI 输出的 UI 摆脱"千篇一律的模板感"。

---

## 为什么需要这个 skill？

LLM 从相同的通用模板中学习，没有引导就会产生相同的可预测错误：
- Inter 字体 + 紫色渐变
- 卡片套卡片套卡片
- 彩色背景上的灰色文字
- Bounce/弹性动画（显得老气）

这个 skill 用设计规范和反模式清单，主动引导 AI 产出专业设计。

---

## 设计规范（核心原则）

### 字体 (Typography)
- ✅ 选择有个性的字体：Geist, Instrument Serif, DM Sans, Sora
- ✅ 建立字体比例系统（modular scale：1.25 或 1.333）
- ❌ 禁止：Arial, Inter（过于通用）, system-ui（缺乏个性）
- ❌ 禁止：同一页面超过 2 种字体族

### 色彩 (Color & Contrast)
- ✅ 使用 OKLCH 色彩空间定义颜色（感知均匀）
- ✅ 中性色永远带色调（warm gray / cool gray，不要纯灰）
- ✅ 暗色模式：背景用 #0f0f0f，不要纯黑 #000000
- ❌ 禁止：彩色背景上用灰色文字
- ❌ 禁止：纯黑/纯灰（始终带一点色调）

### 空间 (Spatial Design)
- ✅ 建立 4px 或 8px 基础间距系统
- ✅ 用留白创造呼吸感，不要把元素挤在一起
- ✅ 内容宽度限制：正文 65ch，宽容器 1280px
- ❌ 禁止：随意的 padding 数字（13px, 22px）

### 动效 (Motion Design)
- ✅ easing 使用 cubic-bezier(0.16, 1, 0.3, 1)（快入慢出）
- ✅ 微交互时长：100-200ms；页面过渡：300-500ms
- ✅ 尊重 prefers-reduced-motion
- ❌ 禁止：bounce/elastic easing（显得廉价）
- ❌ 禁止：超过 600ms 的动画（太慢）

### 交互 (Interaction Design)
- ✅ Focus 状态必须清晰可见（不要移除 outline）
- ✅ Loading 状态：skeleton 优于 spinner
- ✅ 错误信息：具体 + 可操作（"邮箱格式不对" vs "输入有误"）
- ❌ 禁止：禁用状态没有提示原因

### UX 文案 (UX Writing)
- ✅ 按钮文字：动词开头（"保存更改" 不是 "确认"）
- ✅ 空状态：说明原因 + 提供下一步操作
- ✅ 错误提示：人话，不要技术术语
- ❌ 禁止："请稍候..."（说明在做什么）

---

## 命令列表

在任何 UI/前端相关对话中使用这些命令：

| 命令 | 功能 |
|------|------|
| `/audit [组件名]` | 检查无障碍、性能、响应式问题 |
| `/critique [组件名]` | UX 设计评审：层次、清晰度 |
| `/polish [组...

Related Claw Skills

heyixuan2

bambu-studio-ai

★ 41

Bambu Lab 3D printer control and automation. Activate when user mentions: printer status, 3D printing, slice, analyze model, generate 3D, AMS filament, print monitor, Bambu Lab, or any 3D printing task. Full pipeline: search → generate → analyze → colorize → preview → open BS → user slice → print → monitor. Supports all 9 Bambu Lab printers (A1 Mini, A1, P1S, P2S, X1C, X1E, H2C, H2S, H2D).

capt-marbles

geo-optimization

★ 1

Generative Engine Optimization (GEO) for AI search visibility. Optimize content to appear in ChatGPT, Perplexity, Claude, and Google AI Overviews. Use when optimizing websites, pages, or content for LLM discoverability and citation.

carlulsoe

parakeet-stt

★ 0

Local speech-to-text with NVIDIA Parakeet TDT 0.6B v3 (ONNX on CPU). 30x faster than Whisper, 25 languages, auto-detection, OpenAI-compatible API. Use when transcribing audio files, converting speech to text, or processing voice recordings locally without cloud APIs.

carlzhao007

feishu-process-feedback

★ 0

飞书消息自动处理与进度反馈技能。安装后后台运行，监听飞书任务消息并自动创建独立进程处理。在处理前后发送实时进度反馈（任务确认、进度百分比、完成通知）。支持任务类型识别、智能解析、错误重试、并发控制、状态持久化。使用场景：飞书自动化工作流、任务进度追踪、批量任务处理、需要实时反馈的场景。

cartoonitunes

bottyfans

★ 0

BottyFans agent skill for autonomous creator monetization. Lets AI agents register, build a profile, publish posts (public, subscriber-only, or pay-to-unlock), upload media, accept USDC subscriptions and tips on Base, send and receive DMs, track earnings, and appear on the creator leaderboard. Use this skill when an agent needs to monetize content, interact with fans, manage a creator profile, handle payments in USDC, or operate as an autonomous creator on the BottyFans platform.

camopel

arxivkb

★ 0

Local arXiv paper manager with semantic search. Crawls arXiv categories, downloads PDFs, chunks content, and indexes with FAISS + Ollama embeddings. No cloud API keys required — everything runs locally.