jpskill.com
🛠️ 開発・MCP コミュニティ

designing-frontend

Build distinctive, production-grade frontend interfaces with memorable aesthetics. Use when creating web components, pages, or applications. Prioritizes creative, context-specific design over generic patterns.

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux 
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o designing-frontend.zip https://jpskill.com/download/17665.zip && unzip -o designing-frontend.zip && rm designing-frontend.zip
🪟 Windows (PowerShell) 
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/17665.zip -OutFile "$d\designing-frontend.zip"; Expand-Archive "$d\designing-frontend.zip" -DestinationPath $d -Force; ri "$d\designing-frontend.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して designing-frontend.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → designing-frontend フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動
⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

フロントエンドの設計

ワークフロー

  1. 概念化

    • 目的とユーザーのコンテキストを特定します
    • 大胆な美的方向性（徹底的なミニマル、マキシマリスト、レトロフューチャー、オーガニック、ラグジュアリー、ブルータリストなど）を選択します
    • 忘れられない要素を1つ定義します
    • 技術的な制約（フレームワーク、パフォーマンス、アクセシビリティ）をメモします

  2. 実装

    • プロダクション品質のコード（HTML/CSS/JS、React、Vueなど）を記述します
    • 以下の美的ガイドラインを適用します

  3. 検証

    • 視覚的な階層とまとまりを確認します
    • インタラクションとアニメーションをテストします
    • アクセシビリティ要件を検証します
    • 一般的なパターンが発生していないことを確認します

  4. 反復

    • 検証に基づいて詳細を洗練します
    • 必要に応じて独自性を高めます

美的ガイドライン

タイポグラフィ

  • 特徴的で個性的なフォントを使用します（Inter、Roboto、Arial、システムフォントは避けます）
  • 表現力豊かなディスプレイフォントと洗練された本文フォントを組み合わせます

色とテーマ

  • CSS変数を使用してまとまりのあるパレットを構築します
  • 均等に分散された配色ではなく、シャープなアクセントのある支配的な色を使用します
  • 決まり文句の組み合わせ（白地に紫色のグラデーション）は避けます

モーション

  • オーケストレーションされたページロードと段階的な表示で、インパクトの強い瞬間を作り出します
  • HTMLにはCSSアニメーションを使用し、ReactにはMotionライブラリを使用します
  • 驚くようなホバー状態とスクロールトリガーエフェクトを追加します

空間構成

  • グリッドの慣習から脱却します：非対称性、オーバーラップ、斜めの流れ
  • 寛大なネガティブスペースまたは意図的な密度を使用します

背景と視覚効果

  • グラデーションメッシュ、ノイズテクスチャ、幾何学模様を重ねます
  • コンテキストに応じた効果を適用します：レイヤー化された透明度、劇的な影、装飾的な境界線
  • 奥行きと質感を通して雰囲気を与えます

実装原則

  • 複雑さをビジョンに合わせる: マキシマリストなデザインには手の込んだコードが必要であり、ミニマリストなデザインにはスペーシングとタイポグラフィの精度が求められます
  • すべてのデザインを変化させる: プロジェクトごとに異なるフォント、テーマ、美学を使用します
  • 決して収束しない: 繰り返しの選択（Space Grotesk、一般的なレイアウト）は避けます
  • コンテキスト固有: デザインはその目的に合わせて真に作り込まれていると感じられるべきです
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Designing Frontend

Workflow

  1. Conceptualize

    • Identify purpose and user context
    • Choose a bold aesthetic direction (brutally minimal, maximalist, retro-futuristic, organic, luxury, brutalist, etc.)
    • Define the one unforgettable element
    • Note technical constraints (framework, performance, accessibility)

  2. Implement

    • Write production-grade code (HTML/CSS/JS, React, Vue, etc.)
    • Apply aesthetic guidelines below

  3. Verify

    • Check visual hierarchy and cohesion
    • Test interactions and animations
    • Validate accessibility requirements
    • Confirm no generic patterns emerged

  4. Iterate

    • Refine details based on verification
    • Enhance distinctiveness where needed

Aesthetic Guidelines

Typography

  • Use distinctive, characterful fonts (avoid Inter, Roboto, Arial, system fonts)
  • Pair expressive display fonts with refined body fonts

Color & Theme

  • Build cohesive palettes with CSS variables
  • Use dominant colors with sharp accents, not evenly-distributed schemes
  • Avoid clichéd combinations (purple gradients on white)

Motion

  • Create high-impact moments with orchestrated page loads and staggered reveals
  • Use CSS animations for HTML; Motion library for React
  • Add surprising hover states and scroll-triggered effects

Spatial Composition

  • Break from grid conventions: asymmetry, overlap, diagonal flow
  • Use generous negative space OR intentional density

Backgrounds & Visual Effects

  • Layer gradient meshes, noise textures, geometric patterns
  • Apply contextual effects: layered transparencies, dramatic shadows, decorative borders
  • Add atmosphere through depth and texture

Implementation Principles

  • Match complexity to vision: Maximalist designs require elaborate code; minimalist designs demand precision in spacing and typography
  • Vary every design: Different fonts, themes, aesthetics for each project
  • Never converge: Avoid repeated choices (Space Grotesk, common layouts)
  • Context-specific: Design should feel genuinely crafted for its purpose