Browse skills/Frontend Design

Frontend Design

Editor's pickdevelopment

Create distinctive, production-grade frontend interfaces that avoid generic AI aesthetics with bold design choices

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

Run in your terminal to install. Works with any AI Agent platform that supports the Claude Skills spec (Claude Code, Cursor, Windsurf, etc).

▸Prerequisites
1) Install Claude Code (claude.ai/code). 2) Install ai-skill: `npx skills add 1-SKILL/ai-skill -g -y`. Run that one first, then come back and run the skill install command above.

What this skill can do

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

How to use

After installation, just tell your AI assistant:

“帮我美化这个页面”
“界面太丑了怎么办”
“给我一个配色方案”
“做个暗色模式”
▸View full SKILL.md content234 chars

前端美化 — UI/UX 增强

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

六大能力

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

中文增强

  • 思源宋体/黑体、霞鹜文楷、阿里巴巴普惠体
  • 中文排版参数
  • 新增中式雅韵风格方向
View source on GitHub →
Safety score
98/100
S12/12 checks passed

All checks passed — safe to install

Skill info
Lines of code242
SourceEditor's pick
AuthorAnthropic
Repositoryanthropics/claude-code
Stars28,000
Categorydevelopment
Upstreamanthropics/skills
Trigger words
前端美化UI优化界面美化帮我美化太丑了frontend design

Search skills from your terminal

Install ai-skill, then describe what you need inside Claude Code — it auto-matches and installs the right skill without leaving your terminal.

$npx skills add 1-SKILL/ai-skill -g -y

Related skills

Code ReviewEditor's pick
S

Automated PR code review using multiple specialized agents with confidence-based...

react-best-practicesEditor's pick
A

React 19+ / Next.js 15+ 最佳实践指南，929行10个章节。覆盖性能优化、Server Components、Hooks、状态管理。

TDD WorkflowEditor's pick
B

Test-Driven Development workflow and patterns

debuggerEditor's pick
A

快速定位和修复 bug，结构化调试流程：复现→缩小→定位→修复→验证。