Skills
β–₯NYC
skills/smithery/ai/frontend-design

frontend-design

SKILL.md

πŸ”” μ‹œμŠ€ν…œ λ©”μ‹œμ§€: 이 Skill이 호좜되면 [SEMO] Skill: frontend-design μ‹€ν–‰ - {Phase} μ‹œμŠ€ν…œ λ©”μ‹œμ§€λ₯Ό 첫 쀄에 좜λ ₯ν•˜μ„Έμš”.

frontend-design Skill

μ°¨λ³„ν™”λœ ν”„λ‘œλ•μ…˜ μˆ˜μ€€μ˜ ν”„λ‘ νŠΈμ—”λ“œ UIλ₯Ό μ„€κ³„ν•˜κ³  κ΅¬ν˜„

Purpose

일반적인 AI 미학을 ν”Όν•˜κ³ , μ˜λ„μ μ΄κ³  μ°¨λ³„ν™”λœ ν”„λ‘ νŠΈμ—”λ“œ μΈν„°νŽ˜μ΄μŠ€λ₯Ό 섀계 및 κ΅¬ν˜„ν•©λ‹ˆλ‹€.

핡심 μ² ν•™

"Bold maximalism and refined minimalism both work - the key is intentionality, not intensity."

좔ꡬ νšŒν”Ό
μ˜λ„μ μΈ λ””μžμΈ κ²°μ • λ””ν΄νŠΈ μ„€μ • κ·ΈλŒ€λ‘œ μ‚¬μš©
기얡에 λ‚¨λŠ” 차별점 쿠킀컀터 ν…œν”Œλ¦Ώ
ν”„λ‘œλ•μ…˜ μˆ˜μ€€ ν’ˆμ§ˆ ν”„λ‘œν† νƒ€μž… μˆ˜μ€€
νŒ€ λ””μžμΈ μ‹œμŠ€ν…œ μ€€μˆ˜ μž„μ˜μ˜ μŠ€νƒ€μΌ

Workflow

Phase 1: Design Thinking (μ½”λ”© μ „ ν•„μˆ˜)

μ½”λ“œ μž‘μ„± μ „ λ°˜λ“œμ‹œ λ‹€μŒμ„ μ •μ˜ν•©λ‹ˆλ‹€:

  1. λͺ©μ  (Purpose): 이 μΈν„°νŽ˜μ΄μŠ€κ°€ ν•΄κ²°ν•  λ¬Έμ œλŠ”?
  2. 톀 (Aesthetic Direction): Minimal/Bold/Professional/Playful/Premium 쀑 선택
  3. 차별점 (Memorable Element): 경쟁 μ„œλΉ„μŠ€μ™€ κ΅¬λΆ„λ˜λŠ” μ‹œκ°μ  νŠΉμ§•
  4. μ œμ•½μ‚¬ν•­ (Constraints): 기술 μŠ€νƒ, λ°˜μ‘ν˜• μš”κ΅¬μ‚¬ν•­, μ ‘κ·Όμ„± μˆ˜μ€€

Phase 2: Production Code

Design Thinking μ™„λ£Œ ν›„ κ΅¬ν˜„:

  • νƒ€μ΄ν¬κ·Έλž˜ν”Ό 선택
  • 색상 μ‹œμŠ€ν…œ μ •μ˜
  • λͺ¨μ…˜ & μΈν„°λž™μ…˜
  • 곡간 & λ ˆμ΄μ•„μ›ƒ

Phase 3: Quality Check

  • μ œλ„€λ¦­ 폰트 μ‚¬μš© μ•ˆν•¨
  • μ§„λΆ€ν•œ 색상 μ‘°ν•© νšŒν”Ό
  • 차별화 μš”μ†Œ 쑴재
  • λ°˜μ‘ν˜• ν…ŒμŠ€νŠΈ μ™„λ£Œ
  • μ ‘κ·Όμ„± 검증

References

Weekly Installs
2
Repository
smithery/ai
First Seen
4 days ago
Installed on
antigravity2
amp1
opencode1
kimi-cli1
codex1
github-copilot1