跳到正文
UIGrammer
EN 中文

主题 · 产品 · 进阶

在线课程平台

课程平台 = 课程 hero、星级评分、编号大纲与讲师背书构成的课程详情页。

直达修改 Prompt

提示

评分和人数放在标题旁边,别藏在页脚。大纲编号让人看见进度。

Build an online course platform called "Cohort" that publishes design and engineering courses. STYLE - Warm paper (#fbfaf8) canvas, near-black type (#1a1a1a) - One muted accent (indigo #4f46e5) for links and active states - Editorial serif for course titles, system sans for meta and body LAYOUT - Course hero card: indigo thumbnail, "DESIGN" category, serif title "Design Systems for Product Teams", a 4.8 star row (1,214 ratings), "8 lessons - 4h 20m - Certificate", price $89 + an indigo "Enroll now" button - "Curriculum" card with numbered rows: 1 Foundations: tokens and scales (24 min), 2 Component API design (28 min), 3 Docs that developers read (32 min); tall adds 4 Accessibility as a default (22 min) - Tall only: instructor row - avatar "ML", "Mara Lindqvist", "Design Lead - 12,400 students" COMPONENTS - Course hero: category, serif title, star row with ratings, meta line, price + Enroll - Curriculum card: numbered rows with lesson titles and durations - Instructor row: avatar, name, student count INTERACTION - Lesson rows reveal on view; the enroll button carries the accent; stars use a half-star for 4.8. TECHNICAL - React, Tailwind CSS, shadcn/ui for cards and progress