antfu-design

仓库创建 2026年1月28日最近提交 1 个月前SkillHot 收录 22 天前

▸ 精选理由

适合使用 UnoCSS 的前端团队，能统一风格并兼顾深色/浅色主题。

这个 Skill 做什么

为 UnoCSS 提供语义化类名、双色主题与微交互等设计约定与令牌系统。

把 UnoCSS 的语义化类名、双色（light/dark）主题令牌和微交互细节讲清楚，方便把界面从按钮到色板都用统一规则做出来。用在用 UnoCSS 构建或重构界面（无论是 landing page 还是 devtools 面板）时，能统一视觉和交互小细节。特色是把繁琐的 utility 组合抽成语义 tokens，减少样式混乱，提高可维护性。

▸ 展开 SKILL.md 英文原文

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

开发编程UnoCSS设计规范语义类名通用

5.7k

Stars

313

Forks

仓库内 Skill

+188

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/antfu/skills/main/skills/antfu-design/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

Use this when building interfaces with UnoCSS in any framework (React, Vue, Svelte, Solid, or plain HTML), from dense devtools panels to landing pages. Read core-design-read first to set the direction, then apply the token system plus the polish and anti-slop rules.

## Core Rules

- Use semantic shortcuts (`bg-base`, `border-base`, `color-active`, `btn-action`) instead of raw utility chains in markup.
- Design light and dark mode together. Core tokens must work in both themes.
- Name z-index layers (`z-top-nav`, `z-panel-content`, `z-drawer-content`). Do not use raw z values in templates.
- Generate class-based utilities only (`class="..."`). Avoid Attributify syntax in generated code.
- Ke

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有