frontend-design
设计生产级前端界面
Également disponible depuis: sickn33,7Spade,am-will,1bertogit,1bertogit,7Spade,davila7,DennisLiuCk,92Bilal26,anthropics,YYH211,pbakaus,92Bilal26,ZhanlinCui,Azeem-2,AdamAugustinsky,AI-Vibe-Prompts,AgentWorkforce,AJV009,anthropics
创建具有精致美学的独特网页组件和页面。避免通用的人工智能生成视觉元素，打造令人印象深刻的高质量用户界面。
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". 创建一个具有独特美学的登录页面
Résultat attendu:
- 带有自定义字体搭配（标题+正文）的精美登录表单
- 带有强调色和微妙渐变的深色主题
- 流畅的焦点过渡和输入验证动画
- 适用于所有屏幕尺寸的响应式布局
- 可访问的表单标签和键盘导航
Utilisation de "frontend-design". 设计一个具有现代风格的定价卡片区域
Résultat attendu:
- 三个带有大胆视觉层次的定价方案
- 高亮选中卡片的悬停效果
- 流畅的缩放动画和边框过渡
- 带有醒目标题字体的清晰排版
- 适应屏幕尺寸的响应式网格布局
Utilisation de "frontend-design". 构建一个具有创意交互的导航菜单
Résultat attendu:
- 带有交错揭示动画的水平菜单
- 带有自定义下划线效果的悬停状态
- 带有滑动动画的移动端响应式汉堡菜单
- 带有流畅过渡的激活状态指示器
- 可访问的键盘导航支持
Audit de sécurité
SûrThis is a pure documentation skill containing only design guidance and metadata. No executable code, scripts, network calls, filesystem access, or external command execution capabilities exist. All static findings are false positives from documentation files being incorrectly scanned for code patterns.
Facteurs de risque
🌐 Accès réseau (2)
📁 Accès au système de fichiers (1)
Score de qualité
Ce que vous pouvez construire
构建精美的UI组件
创建具有精致美学和流畅动画的独特React或Vue组件。
原型化视觉概念
将设计概念转化为具有大胆、令人印象深刻视觉方向的可用代码。
设计连贯一致的界面
构建具有一致排版、配色主题和动态设计的完整前端页面。
Essayez ces prompts
创建一个具有独特样式、悬停效果和流畅过渡的醒目按钮组件。
设计一个具有大胆美学方向、自定义排版和交错揭示动画的落地页。
使用粗野主义设计美学构建一个带有图表、过滤器和流畅状态过渡的仪表板界面。
创建一个包含导航、表单、数据表格和模态对话框的综合性SaaS界面，采用具有动态效果的连贯奢华设计语言。
Bonnes pratiques
- 在编码前选择大胆的美学方向并完全遵循它
- 使用CSS变量实现跨组件的一致主题
- 优先考虑高影响力的动画而非分散的微交互
Éviter
- 为所有项目使用通用字体如Arial、Inter或Roboto
- 默认使用紫色渐变和可预测的配色方案
- 在没有明确概念愿景或设计意图的情况下创建布局
Foire aux questions
此技能支持哪些框架？
此技能可以创建完整的应用程序吗？
此技能与标准代码生成有何不同？
此技能是否访问外部设计资源？
如果生成的设计不符合我的期望怎么办？
这与聘请专业设计师相比如何？
Détails du développeur
Structure de fichiers
📄 SKILL.md