القائمة
디자인 품질이 높은 독특하고 프로덕션 급의 프론트엔드 인터페이스를 제작합니다. 사용자가 웹 컴포넌트, 페이지 또는 애플리케이션 구축을 요청하고 시각적 방향이 코드 품질만큼 중요할 때 사용하세요.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/SAM42-Lab/everything-claude-code-kr --skill frontend-designيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | frontend-design |
| description | 디자인 품질이 높은 독특하고 프로덕션 급의 프론트엔드 인터페이스를 제작합니다. 사용자가 웹 컴포넌트, 페이지 또는 애플리케이션 구축을 요청하고 시각적 방향이 코드 품질만큼 중요할 때 사용하세요. |
| origin | ECC |
단순히 "작동하게 만드는 것"이 아니라 "디자인된 것처럼 보이게 만드는 것"이 과제일 때 이 스킬을 사용하세요.
이 스킬은 일반적인 AI 느낌의 UI가 아닌 명확한 관점이 필요한 제품 페이지, 대시보드, 앱 쉘, 컴포넌트 또는 시각적 시스템을 위한 것입니다.
방향을 정하고 그것을 고수하세요.
안전하고 평범한 UI는 대담한 선택이 가미된 강력하고 일관된 미학보다 대개 좋지 않습니다.
코딩하기 전에 다음을 결정하세요:
가능한 방향:
방향을 무분별하게 섞지 마세요. 하나를 선택하고 깔끔하게 실행하세요.
다음을 정의하세요:
인터페이스가 확장되어도 일관성을 유지할 수 있도록 CSS 변수나 프로젝트의 토큰 시스템을 사용하세요.
다음을 선호하세요:
명확하게 적합한 경우가 아니면 기본 대칭 카드 그리드를 피하세요.
애니메이션을 사용하여 다음을 수행하세요:
일반적인 마이크로 인터랙션을 모든 곳에 흩뿌리지 마세요. 잘 연출된 하나의 로드 시퀀스가 스무 개의 무작위 호버 효과보다 대개 더 강력합니다.
분위기를 활용하세요:
단순히 비어 있는 평면 배경은 제품 중심 페이지에서 최선의 답인 경우가 드뭅니다.
다음을 기본으로 하지 마세요:
전달하기 전 확인 사항:
