refactoring-ui

仓库创建 2026年1月29日最近提交 4 天前SkillHot 收录 20 天前
▸ 精选理由

实用的设计原则,先灰度再上色,便于前端落地。

这个 Skill 做什么

审查并修复网页 UI 的层次、间距、色彩与深度。

帮你把网页界面视觉问题修了:调整层次感、间距、色彩和景深,让界面看起来专业、有条理。适合你感觉"界面怪怪的"、要整理 Tailwind 样式、统一色盘或上线前打磨细节时用。流程偏灰度优先和受限刻度,重点在可重复的样式令组件更一致。

▸ 展开 SKILL.md 英文原文

Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained design scales, shadows, and component styling. For typeface selection, see web-typography. For usability audits, see ux-heuristics.

内容创作视觉设计色彩体系间距规范通用
1.7k
Stars
178
Forks
40
仓库内 Skill
+178
7 日增星
安装 / 使用
给你的 Agent 一句话(通用)
帮我安装这个 skill:https://raw.githubusercontent.com/wondelai/skills/main/refactoring-ui/SKILL.md
或 curl 直取 SKILL.md
curl -fsSL "https://raw.githubusercontent.com/wondelai/skills/main/refactoring-ui/SKILL.md"
SKILL.MD 节选查看完整文件 ↗
# Refactoring UI Design System

A practical, opinionated approach to UI design. Apply these principles when generating frontend code, reviewing designs, or advising on visual improvements.

## Core Principle

**Design in grayscale first. Add color last.** This forces proper hierarchy through spacing, contrast, and typography before relying on color as a crutch.

**The foundation:** Great UI isn't about talent — it's about systems. Constrained scales for spacing, type, color, and shadows produce consistently professional results. Start with too much white space and remove; leave details (icons, shadows, micro-interactions) until layout and hierarchy work.

## Scoring

**Goal: 10/10.** Score b
via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有