frontend-design
创建独特的前端界面
Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
构建网页界面往往会得到平庸、可预测的设计。本技能指导AI助手创建大胆、生产的独特美学前端代码，包括创意排版和精心制作的动画，使其从标准模式中脱颖而出。
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "frontend-design". Create a distinctive pricing card component for a SaaS product
Résultat attendu:
- PricingCard组件使用Space Grotesk展示字体和Inter正文字体的醒目排版
- 配色方案：深炭色背景配以电光lime绿点缀和细腻颗粒叠加
- 悬停动画：卡片抬起带有发光边框和价格计数动画
- 使用keyframes的纯CSS动画，特征列表采用交错显示
- 移动端响应式布局，触摸友好的点击目标
Audit de sécurité
SûrPure prompt-based skill containing only documentation and design guidelines. No executable code, scripts, network calls, file system access, or external command execution. Safe for publication.
Score de qualité
Ce que vous pouvez construire
创建令人难忘的网页组件
构建具有独特视觉标识和精心制作动画的生产级React、Vue或HTML/CSS组件。
原型大胆的界面
将设计概念转化为可工作的代码，注重排版、动效和空间构图细节。
构建美观的目标页
生成具有创意布局、自定义光标和氛围视觉效果完整的前端页面。
Essayez ces prompts
Create a distinctive [component type] for a [context] using [framework]. Focus on [specific aesthetic goal] with bold typography and cohesive color scheme.
Build an animated hero section with staggered reveals, scroll-triggering effects, and atmospheric background using [technique].
Create a complete landing page with [aesthetic theme] direction. Include header, features section, and footer with consistent typography and motion design.
Design a [dashboard/widget] component with interactive states, micro-animations, and data visualization elements that follow [specific aesthetic] design language.
Bonnes pratiques
- 在编码前致力于大胆的美学方向，而非默认安全选择
- 使用CSS变量实现一致的主题和更轻松的深色模式支持
- 优先考虑页面加载显示等高影响力的动效时刻，而非分散的微交互
Éviter
- 使用通用系统字体或过度使用的选择如Inter和Roboto
- 在白色背景上默认使用紫色渐变作为样式
- 构建可预测的布局而没有空间构图或视觉层次