📖 Step 2: Design - UI/UX Basics#35 / 291
Style Guide
Style Guide
📖One-line summary
A documented reference for color codes, fonts, and spacing rules.
✨Example
📖 Style Guide v1.0
Colors
#2563EBBrand Blue
#1F2937Dark Gray
#F3F4F6Light BG
Typography
Heading: Pretendard Bold 24px
Body: Pretendard Regular 16px
Caption: Pretendard Medium 12px
Spacing Rules
8pxBase unit×2 ×3 ×4
⚡Vibe coding prompt examples
>_
Build a project style guide. Organize typography, color, spacing, and icon usage rules.
>_
Build a doc structure that integrates the code style guide and UI style guide. Make it useful for both developers and designers.
>_
Build a Tailwind CSS config file based on the brand style guide. Include custom colors, fonts, and spacing scale.
Try these prompts in your AI coding assistant!