frontend-design
创建独特的界面
Également disponible depuis: sickn33,7Spade,CesarAugustusGroB,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,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正文字体的醒目排版
- 配色方案：深炭色背景配以电光绿点缀和细微颗粒纹理
- 悬停动画：卡片浮起带有发光边框和价格计数器动画
- 使用keyframes的纯CSS动画，列表功能带交错揭示效果
- 移动端响应式布局，触摸友好的点击目标
Utilisation de "frontend-design". Design an animated hero section for a tech startup
Résultat attendu:
- 采用超大字距和高对比度的粗野主义风格主屏区域
- 文本元素的滚动触发揭示动画
- 带颗粒纹理的动态渐变网格背景
- 自定义光标效果，在悬停交互元素时发生变化
- 使用will-change属性进行性能优化的CSS动画
Utilisation de "frontend-design". Build a distinctive navigation component for an art gallery website
Résultat attendu:
- 从屏幕边缘平滑滑入的极简导航
- 自定义字体搭配：Logo使用Playfair Display，菜单项使用Lato
- 带下划线动画和细微缩放效果的悬停状态
- 创意变形动画的移动端汉堡菜单
- 注重可访问性，支持键盘导航和焦点指示器
Audit de sécurité
SûrAll static findings are FALSE POSITIVES. This is a pure prompt-based skill containing only documentation (SKILL.md, LICENSE.txt, skill-report.json). The scanner misidentified common English words as security patterns: license URLs as 'Hardcoded URL', Apache license terminology as 'Weak cryptographic algorithm', and design guidelines as 'System reconnaissance'. No executable code, scripts, network calls, file system access, or external command execution exists. Safe for publication.
Facteurs de risque
🌐 Accès réseau (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
创建令人难忘的网络组件
使用鲜明的视觉形象和精致的动画构建生产级的React、Vue或HTML/CSS组件。
原型设计大胆的界面
将设计概念转化为可工作的代码，注重排版、动效和空间构图的细节。
构建美观的落地页
生成具有创意布局、自定义光标和氛围视觉效果完整的前端页面。
Essayez ces prompts
使用[框架]为[场景]创建一个独特的[组件类型]。重点是[具体美学目标]，采用大胆的排版和连贯的配色方案。
使用[技术]构建带有交错揭示、滚动触发效果和氛围背景的动画主屏区域。
创建具有[美学主题]方向的完整落地页。包含页眉、功能区域和页脚，采用一致的排版和动效设计。
设计一个[仪表盘/小组件]组件，具有交互状态、微动画和数据可视化元素，遵循[具体美学]设计语言。
Bonnes pratiques
- 在编码前坚持大胆的美学方向，而非默认选择保守方案
- 使用CSS变量实现一致的主题和更简单的深色模式支持
- 优先考虑页面加载揭示等高影响力的动效时刻，而非零散的微交互
Éviter
- 使用通用系统字体或过度使用的选择如Inter和Roboto
- 将紫色渐变应用于白色背景作为默认样式
- 构建缺乏空间构图或视觉层次的可预测布局