frontend-design
Design distinctive production-ready frontend interfaces
こちらからも入手できます: Azeem-2,1bertogit,1bertogit,92Bilal26,AdamAugustinsky,AJV009,AgentWorkforce,DennisLiuCk,anthropics,ZhanlinCui,anthropics,YYH211,7Spade,7Spade,92Bilal26,CesarAugustusGroB,davila7,AI-Vibe-Prompts
Generic AI-generated UIs lack visual identity and memorability. This skill applies the DFII framework to create intentional, high-craft interfaces with cohesive aesthetics that stand out.
スキルZIPをダウンロード
Claudeでアップロード
設定 → 機能 → スキル → スキルをアップロードへ移動
オンにして利用開始
テストする
「frontend-design」を使用しています。 Design a hero section with retro-futurist aesthetic for a space tourism startup
期待される結果:
Hero section featuring: gradient mesh background with deep purple to teal transition, custom display font (Orbitron) for headline, asymmetric text layout with overlapping elements, grain overlay texture, single high-impact floating animation on CTA button, starfield particle effect using CSS only. DFII Score: 13 (Excellent execution with strong aesthetic cohesion).
「frontend-design」を使用しています。 Create a pricing card component with luxury minimal aesthetic
期待される結果:
Three-tier pricing cards with: generous whitespace (48px base unit), refined serif display font (Playfair Display) paired with geometric sans (Jost), monochromatic base with gold accent only on primary CTA, subtle box-shadow with 20% opacity, smooth scale transform on hover, checkmark icons as SVG. Avoids generic purple gradients and symmetrical layouts.
セキュリティ監査
安全All 36 static analysis findings are false positives. The skill contains only markdown documentation describing a frontend design methodology (DFII framework). No executable code, network calls, or command execution present. The LICENSE.txt is standard Apache 2.0 text. Safe for publication.
品質スコア
作れるもの
Landing Page Design
Create a memorable landing page with editorial brutalism aesthetic, including custom typography hierarchy, asymmetric layout, and high-impact entrance animations.
Dashboard Component Library
Build a cohesive set of dashboard components with luxury minimal aesthetic, using restrained color palette, precise spacing, and refined micro-interactions.
Brand Website Redesign
Redesign an existing website with retro-futurist aesthetic direction, implementing custom gradient meshes, layered translucency, and distinctive motion patterns.
これらのプロンプトを試す
Design a signup form component using luxury minimal aesthetic. Include intentional typography choices, a dominant color story with one accent, and purposeful whitespace. Provide complete HTML and CSS.
Create a product landing page. First, evaluate the design direction using the DFII framework across all five dimensions. Target a score of 12 or higher. Use industrial utilitarian aesthetic with intentional asymmetric composition.
Define a complete design system for a fintech dashboard. Specify: display and body font pairings with rationale, CSS variable color system with one dominant tone and one accent, spacing rhythm, and motion philosophy. Then implement a sample card component.
Transform this generic button component into something memorable using editorial brutalism aesthetic. Explain what makes it distinctive from typical AI-generated UI. Include hover states and focus styles for accessibility.
ベストプラクティス
- Always state the aesthetic direction explicitly before writing code
- Use the DFII framework to validate design decisions achieve a score of 8 or higher
- Include at least one memorable design anchor that differentiates from generic templates
回避
- Using system fonts or AI defaults like Inter, Roboto, or Arial without intentional rationale
- Applying generic purple-to-white SaaS gradients without aesthetic justification
- Creating symmetrical, predictable section layouts that could be any template