搜索技能/前端美化

前端美化

已认证开发工具

前端界面美化助手,拒绝千篇一律的 AI 审美。颜色搭配、排版优化、响应式布局、动效建议、组件美化、暗色模式,输出生产级代码。

$npx skills add mindverse/skillhub@frontend-design -g -y

在终端运行即可安装。支持 Claude Code、Cursor、Windsurf 等 42 个 AI 平台。

这个技能能做什么

反AI审美(禁止紫色渐变白底)
中文字体推荐
2026设计趋势
暗色模式
Tailwind/CSS/React 输出
响应式布局

怎么用

安装后,直接对你的 AI 助手说:

帮我美化这个页面
界面太丑了怎么办
给我一个配色方案
做个暗色模式

技能内容预览

# 前端美化 — UI/UX 增强

基于 Anthropic 官方 frontend-design 技能增强。

## 六大能力
1. 颜色搭配(oklch色彩空间)
2. 排版优化(中文行高 1.8-2.0)
3. 响应式布局(Container Queries)
4. 动效建议(View Transitions API)
5. 组件美化
6. 暗色模式

## 中文增强
- 思源宋体/黑体、霞鹜文楷、阿里巴巴普惠体
- 中文排版参数
- 新增中式雅韵风格方向
在 GitHub 查看完整内容 →
安全评分
98/100
S12/12 项检测通过
技能信息
代码量242 行
来源official
作者Anthropic
仓库anthropics/claude-code
Stars28,000
分类开发工具
上游anthropics/skills
触发关键词
前端美化UI优化界面美化帮我美化太丑了frontend design

同类技能

Tailwind 设计系统
S

使用 Tailwind CSS 构建设计系统,包含令牌、变体和响应式模式

Google React 组件拼接
S

Google Labs React 组件拼接,支持设计系统组合和状态共享

Google React 组件
S

Google Labs React 组件模式,支持无障碍、性能和设计系统集成

Next.js 缓存策略
S

Next.js 缓存策略,包含重新验证、按需缓存和过期重新验证