frontend-design
独自性のあるフロントエンドインターフェースを作成
也可从以下获取: 1bertogit,7Spade,sickn33,1bertogit,7Spade,anthropics,pbakaus,DennisLiuCk,davila7,AdamAugustinsky,AgentWorkforce,am-will,92Bilal26,YYH211,ZhanlinCui,CesarAugustusGroB,Azeem-2,AJV009,anthropics,AI-Vibe-Prompts
Webインターフェースの構築は、しばしば汎用的で予測可能なデザインになりがちです。このスキルは、AIアシスタントが標準的なパターンから抜け出し、独自の美学、創造的なタイポグラフィ、洗練されたアニメーションを備えた本番品質のフロントエンドコードを作成できるよう導きます。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“frontend-design”。 Create a distinctive pricing card component for a SaaS product
预期结果:
- PricingCard component with bold typography using Space Grotesk display font and Inter body font
- Color scheme: deep charcoal background with electric lime accents and subtle grain overlay
- Hover animation: card lifts with glowing border and price counter animation
- CSS-only animations using keyframes with staggered reveal for feature list
- Mobile-responsive layout with touch-friendly tap targets
正在使用“frontend-design”。 Design an animated hero section for a tech startup
预期结果:
- Hero section with brutalist aesthetic using oversized typography and high contrast
- Scroll-triggered reveal animations for text elements
- Animated gradient mesh background with grain texture
- Custom cursor effect that changes on hover over interactive elements
- Performance-optimized CSS animations with will-change properties
正在使用“frontend-design”。 Build a distinctive navigation component for an art gallery website
预期结果:
- Minimalist navigation with smooth slide-in animation from screen edge
- Custom font pairing: Playfair Display for logo, Lato for menu items
- Hover states with underline animations and subtle scale effects
- Mobile hamburger menu with creative morphing animation
- Accessibility-focused with keyboard navigation and focus indicators
安全审计
安全All 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.
风险因素
🌐 网络访问 (2)
📁 文件系统访问 (1)
质量评分
你能构建什么
記憶に残るWebコンポーネントを作成
独自のビジュアルアイデンティティと洗練されたアニメーションを備えた、本番対応のReact、Vue、またはHTML/CSSコンポーネントを構築する。
大胆なインターフェースをプロトタイプ化
タイポグラフィ、モーション、空間構成の細部に注意しながら、デザインコンセプトを動くコードに落とし込む。
美的なランディングページを構築
クリエイティブなレイアウト、カスタムカーソル、雰囲気のあるビジュアル効果を備えた、完全なフロントエンドページを生成する。
试试这些提示
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.
最佳实践
- 安全な選択に流されるのではなく、コーディング前に大胆な美的方向性にコミットする
- 一貫したテーマ設定とダークモード対応を容易にするためにCSS変数を使用する
- 散発的なマイクロインタラクションよりも、ページロード時のリビールなどインパクトのあるモーションを優先する
避免
- 汎用的なシステムフォントやInter、Robotoのような使い古された選択肢を使う
- 白背景に紫のグラデーションをデフォルトのスタイルとして適用する
- 空間構成や視覚階層のない予測可能なレイアウトを作る