Studygram notebook UI • V0.0.1

Từ prompt đến UI theo phong cách Studygram

Thay vì card corporate, layout này dùng giấy dot-grid, washi tape, sticky note, polaroid, shadow diffuse và chữ tay để tái tạo cảm giác vở thật.

Handwritten H1Dot-grid paperPolaroidWashi + tape

Trừ khi bạn dùng Studygram kit 😏

Roadmap

Tiến độ dựng Studygram kit

Update hàng tuần

Kanban • To Do

2 việc

Tuần 4To Do

Claude Agent Skills + MCP server

Tối ưu prompt cho Claude code và các IDE khác bằng MCP servers.

Claude CodeOwner: DesignCheck-in: T6

Tuần 3To Do

Micro interaction

Thêm animation nhẹ: float, fade-in, press effect cho hand-button; tinh chỉnh shadow.

MotionOwner: DesignCheck-in: T6

Kanban • Đang làm

2 việc

Tuần 2Đang làm

Layout & component

Thiết kế thêm components, section grid, checklist, ...

LayoutOwner: DesignCheck-in: T6

Tuần 1Đang làm

Cố định phong cách

Chốt palette, font, texture giấy; tạo 2–3 card mẫu (hand-card, sticky note) để tái dùng.

FoundationOwner: DesignCheck-in: T6

Kanban • Done

1 việc

Tuần 0Done

Tạo phiên bản system prompt đầu tiên

Thử nghiệm trên các model AI để tạo UI Studygram; tinh chỉnh prompt để có kết quả tốt nhất.

QA / ReleaseOwner: DesignCheck-in: T6

Visual identity

4 trụ cột Studygram “đúng bản sắc”

Xây nền analog, giữ lưới nhưng cho phép lệch nhẹ, ưu tiên handwriting và highlight thật. Mỗi trụ cột là một lớp của trang vở.

Analog paperPastel markerHandwritten typeWashi + sticker

Đừng quên 🎯

• 3 font tối đa.
• 1 màu mực đậm.
• Shadow lệch thủ công, không blur mạnh.

Chất liệu & nền

Dot-grid, kẻ ô, kraft paper. Tránh trắng tinh, thêm grain nhẹ để giống giấy thật.

Ghi chú nhanh

• Thêm texture (dot/kẻ ô). • Xoay block nhẹ. • Underline bằng marker pastel.

Apply

• Dùng 1 góc washi tape để neo block.
• Chèn doodle mũi tên dẫn mắt.
• Giữ khoảng thở rộng, text trái.

Bố cục

Organized chaos: có lưới, có xoay lệch 1–3°, block rõ ràng, khoảng thở rộng.

Ghi chú nhanh

• Thêm texture (dot/kẻ ô). • Xoay block nhẹ. • Underline bằng marker pastel.

Apply

• Dùng 1 góc washi tape để neo block.
• Chèn doodle mũi tên dẫn mắt.
• Giữ khoảng thở rộng, text trái.

Typography

Calligraphy cho H1, handwriting cho H2, rounded cho body. Thêm underline marker và chữ in hoa nhỏ.

Ghi chú nhanh

• Thêm texture (dot/kẻ ô). • Xoay block nhẹ. • Underline bằng marker pastel.

Apply

• Dùng 1 góc washi tape để neo block.
• Chèn doodle mũi tên dẫn mắt.
• Giữ khoảng thở rộng, text trái.

Màu & ánh sáng

Pastel ấm, ánh sáng diffuse như cửa sổ. Shadow mềm, tán rộng, không cứng.

Ghi chú nhanh

• Thêm texture (dot/kẻ ô). • Xoay block nhẹ. • Underline bằng marker pastel.

Apply

• Dùng 1 góc washi tape để neo block.
• Chèn doodle mũi tên dẫn mắt.
• Giữ khoảng thở rộng, text trái.

Palette • bút nhớ + mực

Pastel ấm, không sterile

Màu thiên giấy, ngả kem. Highlighter nhẹ, mực đậm để giữ tương phản. Tránh xanh xám lạnh kiểu dashboard.

Color chips

Tap to copy

Quick preview

Heading on paper

keyword trên nền giấy kem, mực đậm, khoảng thở rộng.

Highlighter

Blush

Mint

Layer gợi ý: Paper → Pastel → Ink.

Typography mẫu

Tóm tắt về layout Studygram

Có 4 trụ cột: chất liệu giấy, bố cục lệch nhẹ nhưng có lưới, typography tay + marker, màu pastel ấm. Kết hợp sticky, washi, polaroid và hand-card để tạo lớp.

Tip: giữ border đậm, shadow nhẹ và nhiều texture.

Đây là ví dụ chữ: heading tay, subheading uppercase đỏ, body tròn trịa dễ đọc trên nền dot-grid, có nhấn nghiêng, code và highlight vàng.

Tiêu đề cấp 1

Tiêu đề cấp 2

Tiêu đề cấp 3

Tiêu đề cấp 4

Tiêu đề cấp 5

Tiêu đề cấp 6

Dùng highlight xanh cho link/definition, highlight hồng cho cảnh báo nhẹ, và mix underline scribble để tạo nhấn thủ công.

Sticky note + washi tape

Ghi chú nhanh kiểu giấy dán

Dùng cho tip, checklist, hoặc menu. Có băng dính đỏ nhạt, xoay lệch, hover bay nhẹ.

Todo List 📌

Học ReactJS
Tập thể dục
Mua cà phê

Ý tưởng 💡

Thiết kế UI vở học sinh với Tailwind v4, dot-grid, highlight vàng.

Đừng quên! ❤️

Gọi điện về cho mẹ lúc 8h tối.

Studygram extras

Thêm “đồ nghề” để trang vở sống động

Những pattern nhỏ nhưng tạo vibe analog: badge, stamp, callout, checklist, tab tay và divider kiểu bút dạ.

SectionA+

Badge + stamp dùng để đánh dấu block quan trọng.

NotesTasksIdeas

Callout ghim kim

Đặt tip ở giữa trang, thêm “pin” đỏ để giống note dán lên giấy.

định nghĩakeyword

Checklist tay

Viết outline trước
Highlight sau khi viết
Thêm tape/sticker neo góc

Bio

Todo

Ref

Page edge index tabs

Dán mép trang để chia mục nhanh như vở thật.

Chapter 1Important

Study corner snapshot — “Góc học” kiểu polaroid frame

Flashcard stack

Q: Pastel highlight dùng khi nào?

A: sau khi viết, chỉ nhấn keyword.

Notebook timeline

Bước 1: Outline

Chia block, kẻ lưới, chừa whitespace.

Bước 2: Viết nội dung

Mực đậm làm anchor cho mắt.

Bước 3: Highlight + doodle

Dùng 1–2 pastel cố định, không rải lung tung.

Hand card méo viền

Card Studygram: nhiều chất liệu khác nhau

Hand-card classic

Dot-grid + viền đậm

Heading Pacifico + underline scribble
Highlight vàng/mint cho keyword
Washi tape hoặc sticker neo góc

Soft rounded

Bo tròn + shadow mềm

Dùng cho nội dung dài, nhẹ nhàng như giấy note mới.

Lined paper

Nền giấy kẻ mờ

Hợp checklist/summary.

Overlay lines

Card có line overlay

Line mờ phía sau text, nhìn như vở thật.

Torn paper

Mép giấy rách

Đặt quote hoặc tip nhỏ như xé từ vở ra.

Pastel gradient

Nền pastel loang

Hợp card mở đầu section.

Tabbed card

Card có tab dán

Giống thẻ index trong sổ tay.

Quote

“Make studying cute enough that you want to come back.”

Quote card nhẹ với accent rose.

Glassy paper

Nền giấy mờ trong

Đặt lên background có texture/dot-grid.

Accent rose

Viền & shadow màu

Dùng cho trạng thái “important”.