重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
npx skills add https://github.com/b-open-io/prompts --skill frontend-design打造独特、生产级的用户界面,使其从通用 AI 生成的界面中脱颖而出。
官方插件已上线:从 Anthropic 市场安装
frontend-design@claude-code-plugins,可在前端任务上自动调用。此技能提供了超越官方版本的扩展指导。
大多数 AI 生成的用户界面都存在"AI 敷衍"问题——它们在技术上正确,但视觉上平淡无奇。此技能通过做出大胆的美学选择,赋予你的界面独特的个性,帮助你打破这种模式。
避免使用: Inter, Arial, Roboto, system-ui(默认的 AI 选择)
取而代之: 根据项目基调,采用独特的字体组合:
关键原则: 绝不在不同项目中使用相同的字体。每个设计都应感觉真正不同。
避免使用: 默认的 Tailwind 颜色、基本的蓝色按钮、灰色背景
创建具有以下特点的标志性配色方案:
避免使用: 所有内容居中、对称、网格锁定
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
有意识地打破网格:
clamp() 实现流体排版避免使用: 无动画或通用的淡入效果
添加有目的的动效:
prefers-reduced-motion要求:
有关详细的实施指导,请参阅参考资料目录:
references/typography-examples.md - 按基调划分的字体组合、可变字体、响应式缩放references/color-animation-patterns.md - 高级配色方案、渐变、深色模式、动画模式references/production-patterns.md - 完整的组件示例、错误边界、性能优化、工具推荐# Distinctive font stacks (vary these per project!)
font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans'
font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist'
font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'
# Tailwind config pattern
theme: {
extend: {
colors: { /* HSL tokens */ },
fontFamily: { /* Variable fonts */ },
animation: { /* Spring-based */ },
}
}
将此技能用于:
将设计专家代理用于:
每周安装次数
47
仓库
GitHub 星标数
8
首次出现
2026年1月24日
安全审计
安装于
claude-code42
opencode41
cursor35
codex34
gemini-cli33
github-copilot26
Create distinctive, production-grade UI that stands out from generic AI-generated interfaces.
Official Plugin Available : Install
frontend-design@claude-code-pluginsfrom the Anthropic marketplace for auto-invocation on frontend tasks. This skill provides extended guidance beyond the official version.
Most AI-generated UIs suffer from "AI slop" - they're technically correct but visually bland. This skill helps you break that pattern by making bold aesthetic choices that give your interface a distinctive personality.
Avoid: Inter, Arial, Roboto, system-ui (the default AI choices)
Instead: Commit to distinctive font stacks that vary by project tone:
Key principle: NEVER use the same fonts across different projects. Each design should feel genuinely different.
Avoid: Default Tailwind colors, basic blue buttons, gray backgrounds
Create signature palettes with:
Avoid: Everything centered, symmetric, grid-locked
Break the grid intentionally:
clamp() for fluid typographyAvoid: No animations or generic fade-in
Add purposeful motion:
prefers-reduced-motionRequirements:
For detailed implementation guidance, see the references directory:
references/typography-examples.md - Font stacks by tone, variable fonts, responsive scalesreferences/color-animation-patterns.md - Advanced palettes, gradients, dark mode, animation patternsreferences/production-patterns.md - Complete component examples, error boundaries, performance optimization, tooling recommendations# Distinctive font stacks (vary these per project!)
font-display: 'Clash Display', 'Cabinet Grotesk', 'Satoshi', 'General Sans'
font-body: 'Outfit', 'Plus Jakarta Sans', 'Switzer', 'Geist'
font-mono: 'JetBrains Mono', 'Geist Mono', 'IBM Plex Mono'
# Tailwind config pattern
theme: {
extend: {
colors: { /* HSL tokens */ },
fontFamily: { /* Variable fonts */ },
animation: { /* Spring-based */ },
}
}
Use this skill for:
Use the designer agent for:
Weekly Installs
47
Repository
GitHub Stars
8
First Seen
Jan 24, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code42
opencode41
cursor35
codex34
gemini-cli33
github-copilot26
前端设计系统技能:生产级UI设计、设计令牌与可访问性指南
8,500 周安装