frontend-design
個性的なフロントエンドインターフェイスを設計する
一般的な生成インターフェイスは、予測可能で弱い印象になりがちです。このスキルは、Claude、Codex、Claude Code が個性的で本番品質のフロントエンドデザインへ向かうよう導きます。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "frontend-design" from https://skillstore.io/skills/atman36-frontend-design.md and its manifest at https://skillstore.io/api/skills/atman36-frontend-design/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「frontend-design」を使用しています。 スケジュール管理アプリのランディングページをデザインする。
期待される結果:
強い文字階層、焦点の定まったカラーシステム、控えめなモーション、レスポンシブなセクション、アクセシビリティチェックを備えた個性的なエディトリアルレイアウト。
「frontend-design」を使用しています。 一般的に見えるダッシュボードカードを改善する。
期待される結果:
より明確な余白、強調されたデータ表現、意図のあるホバー状態、プロダクトに合った視覚スタイルを備えた洗練されたコンポーネント方向性。
「frontend-design」を使用しています。 ポートフォリオ向けに記憶に残るヒーローセクションを作成する。
期待される結果:
カスタムタイポグラフィ、重層的な構成、雰囲気のある背景ディテール、レスポンシブなサイズ調整、本番品質の仕上げを備えた大胆なビジュアルコンセプト。
セキュリティ監査
安全All 25 static alerts are false positives caused by Markdown code fences, inline code formatting, and ordinary design terminology. The file contains frontend guidance and examples, with no shell execution, system reconnaissance, prompt injection, or other malicious intent. No security remediation is required.
リスク要因
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/atman36-frontend-design/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/atman36-frontend-design?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/atman36-frontend-design/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/atman36-frontend-design.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
AI-Vibe-Prompts. (2026). frontend-design security audit report (audit version 9) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/atman36-frontend-design/audits/9BibTeX形式の引用
@techreport{ai-vibe-prompts-atman36-frontend-design-2026,
author = {AI-Vibe-Prompts},
title = {frontend-design security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/atman36-frontend-design/audits/9},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-design security audit report (audit version 9)"
version: "1.0.0"
type: report
authors:
- name: "AI-Vibe-Prompts"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/atman36-frontend-design/audits/9"
identifiers:
- type: other
value: "skillstore:atman36-frontend-design:audit:9"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 18 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
atman36-frontend-design
2026-10-25
zhanlincui-frontend-design
2026-09-09
adamaugustinsky-frontend-design
2026-10-21
cesaraugustusgrob-frontend-design
2026-09-09
anthropics-frontend-design
2026-10-24
agentworkforce-frontend-design
2026-10-22
dennisliuck-frontend-design
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
プロダクトのランディングページを形作る
タイポグラフィ、色、レイアウト、モーションを強化し、新しいプロダクトページに記憶に残る視覚的方向性を作ります。
平凡なコンポーネントを改善する
一般的なフロントエンドコンポーネントを、アクセシビリティとレスポンシブ要件を満たしたまま洗練されたインターフェイスに変えます。
ブランドに合ったインターフェイスを作成する
特定のオーディエンスや提案内容に合った印象のWebページをAIコーディングエージェントが構築できるよう導きます。
これらのプロンプトを試す
Use frontend-design to improve this page. Keep the current content, but make the visual direction clearer and more polished.
Use frontend-design to create a distinctive component for this feature. Include responsive behavior, accessible states, and refined visual details.
Use frontend-design to build a production-ready app view. Choose a bold aesthetic direction and implement layout, motion, typography, and quality checks.
Use frontend-design to audit this interface, identify generic choices, then rework it into a distinctive, accessible, and performant frontend experience.
ベストプラクティス
- 美的方向性を選ぶ前に、オーディエンス、目的、制約を定義します。
- タイポグラフィ、色、モーション、レイアウトをひとつの一貫したシステムとして使用します。
- 納品前にアクセシビリティ、レスポンシブ対応、パフォーマンスを検証します。
回避
- 汎用的なフォントと紫のグラデーションの組み合わせをデフォルトで再利用しないでください。
- 可読性やパフォーマンスを損なう装飾効果を追加しないでください。
- 依頼が動作するフロントエンドコードを必要としている場合に、静的なモックアップを納品しないでください。
よくある質問
このスキルは動作するフロントエンドコードの構築に役立ちますか？
どのAIツールをサポートしていますか？
ランディングページ専用ですか？
同梱アセットは含まれていますか？
アクセシビリティに対応していますか？
なぜセキュリティ指摘は却下されたのですか？
開発者情報
作成者
AI-Vibe-Promptsライセンス
MIT
作者バージョン
v1.0.0
Skillstore リビジョン
r2
参照
89edfdc710d0846129dcee6a929477b04f08052c
メンテナンスの新しさ
2026/7/26
利用状況
11 ダウンロード · 307 閲覧
ファイル構成
📄 SKILL.md