frontend-design
创建独特的前端界面
متاح أيضًا من: anthropics,AI-Vibe-Prompts,Azeem-2,92Bilal26,AdamAugustinsky,7Spade,1bertogit,pbakaus,sickn33,7Spade,ZhanlinCui,AgentWorkforce,AJV009,YYH211,anthropics,am-will,92Bilal26,davila7,CesarAugustusGroB,DennisLiuCk
此技能可帮助您构建具有醒目、独特美学效果的生产级Web界面。它指导您在排版、颜色、动效和空间构成方面做出创意选择，避免生成通用的人工智能设计。
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "frontend-design". Create a settings panel with dark mode toggle
النتيجة المتوقعة:
- 返回带有切换动画的完整React组件
- 包含适当的无障碍属性和键盘导航
- 深色模式通过CSS自定义属性平滑应用
- 设置持久化到本地存储
التدقيق الأمني
آمنThis is a prompt-based skill containing design guidelines and documentation. The JavaScript plugin file contains only basic logging and template code with no network, filesystem, or command execution capabilities. No malicious patterns detected.
درجة الجودة
ماذا يمكنك بناءه
构建生产级UI组件
生成具有独特美学效果和完整功能的高质量React或Vue组件
原型视觉概念
创建具有醒目设计方向和高保真交互的视觉原型
快速落地页
根据自然语言描述构建带有动画和自适应布局的完整落地页
جرّب هذه الموجهات
Create a button component with hover animation and focus states
Build a landing page for a coffee shop with warm colors and smooth animations
Create a dark-mode analytics dashboard with charts, filters, and hover interactions
Build a music streaming player with album art, playback controls, playlist management, and staggered animations
أفضل الممارسات
- 提供关于用途、目标用户和技术限制的清晰上下文
- 指定期望的美学方向（极简主义、野兽派、复古等）
- 提及您想使用的具体框架或库
تجنب
- 在未指定设计方向的情况下请求通用组件
- 在未考虑性能的情况下要求过于复杂的设计
- 跳过交互元素的无障碍要求
الأسئلة المتكررة
此技能支持哪些框架？
它可以创建完整的Web应用程序吗？
它能处理自适应设计吗？
我的代码数据安全吗？
为什么我的设计每次看起来都不一样？
这与标准代码生成有何不同？
تفاصيل المطور
المؤلف
1bertogitالترخيص
Complete terms in LICENSE.txt
المستودع
https://github.com/1bertogit/modern-face-definitive/tree/main/.claude/skills/frontend-designمرجع
main
بنية الملفات