Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/L-LesterYu/OpenClaw-hot-skills-zh --skill frontend-design-zhEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Basado en la clasificación ocupacional SOC
Mostrando SKILL.md
| name | frontend-design-zh |
| description | 专精前端设计指南，用于创建美观、现代的用户界面。适用于构建落地页、仪表盘或任何用户界面。 |
| metadata | {"clawdbot":{"emoji":"🎨"}} |
在创建 UI 组件、落地页、仪表盘或任何前端设计工作时使用此技能。
遵循以下结构化方法进行 UI 设计：
在编码之前，先用 ASCII 格式绘制布局草图：
┌─────────────────────────────────────┐
│ 页眉 / 导航栏 │
├─────────────────────────────────────┤
│ │
│ 主视觉区域 │
│ (标题 + 行动号召) │
│ │
├─────────────────────────────────────┤
│ 功能卡片 │ 功能卡片 │ 功能卡片 │
├─────────────────────────────────────┤
│ 页脚 │
└─────────────────────────────────────┘
颜色规则：
字体选择 (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
间距与阴影：
现代暗色模式 (Vercel/Linear 风格)：
: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;
}
新野兽派风格 (90 年代网页复兴)：
: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;
}
玻璃拟态：
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1rem;
}
微语法规划：
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]
常见模式：
Tailwind CSS：
<!-- 通过 CDN 导入用于原型开发 -->
<script src="https://cdn.tailwindcss.com"></script>
Flowbite (组件库)：
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.0.0/dist/flowbite.min.js"></script>
图标 (Lucide)：
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>lucide.createIcons();</script>
图片：
https://images.unsplash.com/photo-xxx?w=800&h=600始终采用移动优先和响应式设计：
/* 移动优先 */
.container { padding: 1rem; }
/* 平板设备 */
@media (min-width: 768px) {
.container { padding: 2rem; }
}
/* 桌面设备 */
@media (min-width: 1024px) {
.container { max-width: 1200px; margin: 0 auto; }
}
卡片：
按钮：
表单：
导航：
| 元素 | 推荐值 |
|---|---|
| 主要字体 | Inter, Outfit, DM Sans |
| 代码字体 | JetBrains Mono, Fira Code |
| 圆角 | 0.5rem - 1rem (现代风格), 0 (野兽派) |
| 阴影 | 微妙，最多 1-2 层 |
| 间距 | 4px 基准单位 (0.25rem) |
| 动画 | 150-400ms, ease-out |
| 颜色 | oklch() 现代风格，避免通用蓝色 |
基于 SuperDesign 模式 — https://superdesign.dev