القائمة
高い設計品質を持つ、個性的でプロダクショングレードのフロントエンドインタフェースを作成します。ユーザーが web コンポーネント、ページ、またはアプリケーションの構築を要求し、視覚的な方向性がコード品質と同じくらい重要な場合に使用します。
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/linnefromice/claude-code-workspace --skill frontend-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
استنادا إلى تصنيف SOC المهني
| name | frontend-design |
| description | 高い設計品質を持つ、個性的でプロダクショングレードのフロントエンドインタフェースを作成します。ユーザーが web コンポーネント、ページ、またはアプリケーションの構築を要求し、視覚的な方向性がコード品質と同じくらい重要な場合に使用します。 |
| origin | ECC |
タスクが単に「動作させる」ではなく「デザインされたように見せる」ことである場合に使用します。
このスキルは、汎用的な AI っぽい UI ではなく、明確な視点を必要とするプロダクトページ、ダッシュボード、アプリシェル、コンポーネント、または視覚システム向けです。
方向性を選んでコミットします。
安全で平均的な UI は、強く、首尾一貫した美学といくつかの大胆な選択を持つ UI よりも通常悪いものです。
コーディング前に以下を確定:
可能な方向性:
方向性をカジュアルに混ぜないでください。1 つを選んでクリーンに実行します。
以下を定義:
CSS 変数またはプロジェクトのトークンシステムを使用して、インタフェースが成長しても首尾一貫した状態を保ちます。
優先:
明らかに適切でない限り、対称的なカードグリッドへのデフォルトを避けます。
アニメーションを以下に使用:
汎用的なマイクロインタラクションをあちこちに散りばめないでください。1 つのよく演出されたロードシーケンスは、通常 20 のランダムなホバーエフェクトより強いです。
雰囲気を使用:
プロダクト向けページではフラットな空の背景がベストアンサーであることはまれです。
以下にデフォルトしない:
納品前に:
