cqh963852
3637129fd5
- 新增 CourseShelf 组件：title/desc/done/relations 卡片，hover 轮播预期成果 GIF - static/gifs 占位动图 6 张（同名替换即成片） - design-refs/pinterest 设计稿参考 13 张，含出处与版权说明 - .gitignore 忽略 .zcodeignore 工具本地配置
45 lines
4.4 KiB
Markdown
45 lines
4.4 KiB
Markdown
# Pinterest 设计稿参考（教程网站重构）
|
||
|
||
来源：Pinterest 调研（2026-10-02），每张图已溯源到原始出处。版权状况见文末。
|
||
逐项元数据见 [sources.json](./sources.json)。
|
||
|
||
## 学习面板（靶子区 + 步骤验收）
|
||
|
||
| 文件 | 设计稿 | 原始出处 |
|
||
|---|---|---|
|
||
| `00-e-learning-platform---learning-plan-dash.jpg` | E-learning Learning Plan Dashboard（Bogdan Nikitin） | [Dribbble](https://dribbble.com/shots/23956256) / [pin](https://www.pinterest.com/pin/8162843069852607/) |
|
||
| `04-coursue-learning-platform-dashboard.jpg` | Coursue Dashboard（Fireart） | [Dribbble](https://dribbble.com/shots/23027887-Coursue-Learning-Platform-Dashboard) / [pin](https://www.pinterest.com/pin/coursue-learning-platform-dashboard--628815166755740834/) |
|
||
| `02-education-platform.jpg` | W-Power Courses Dashboard（Awsmd） | [Dribbble](https://dribbble.com/shots/20197120-W-Power-Courses-Dashboar) / [pin](https://in.pinterest.com/pin/education-platform--104286547617862574/) |
|
||
| `01-online-course-platform-concept.jpg` | Online Course Platform Concept（Petr Dudchenko） | [Dribbble](https://dribbble.com/shots/10858901-Online-Course-Platform-Concept) / [pin](https://www.pinterest.com/pin/online-course-platform-concept--178525572723551326/) |
|
||
| `03-learnify---uxui-design-of-the-online-cou.jpg` | Learnify 在线课程平台（Outright） | [Dribbble](https://dribbble.com/shots/24454737-Learnify-UX-UI-design-of) / [pin](https://in.pinterest.com/pin/482800022571266106/) |
|
||
|
||
## 清单 / 任务（步骤卡 + 验收产物）
|
||
|
||
| 文件 | 设计稿 | 原始出处 |
|
||
|---|---|---|
|
||
| `06-task-management-app-ui-design.jpg` | Taskique 任务管理（Rifat）——含子任务勾选清单，重点参考 | [Dribbble](https://dribbble.com/shots/17982564-Task-Management-App-UI-Design-To-d) / [pin](https://in.pinterest.com/pin/task-management-app-ui-design--2674081025197797/) |
|
||
| `07-checklist-design---curated-list-for-ui-c.jpg` | Checklist Design 清单资源站 | [checklist.design](https://www.checklist.design/) / [pin](https://br.pinterest.com/pin/232357662016396948/) |
|
||
|
||
## 引导流（指派学习 + 脱靶提醒）
|
||
|
||
| 文件 | 设计稿 | 原始出处 |
|
||
|---|---|---|
|
||
| `08-onboarding-steps--untitled-ui.jpg` | Onboarding steps（Untitled UI / Jordan Hughes） | [Dribbble](https://dribbble.com/shots/23081995-Onboarding-steps-Untitled-UI) / [pin](https://www.pinterest.com/pin/569494315400426794/) |
|
||
| `09-onboarding-progress-designs-themes-templ.jpg` | Dashboard Onboarding 进度引导 | [Dribbble](https://dribbble.com/shots/18975440-Dashboard-Onboarding) / [pin](https://www.pinterest.com/pin/onboarding-progress-designs-themes-templates-on-dribbble--93309023522230046/) |
|
||
|
||
## 教程站整体气质
|
||
|
||
| 文件 | 设计稿 | 原始出处 |
|
||
|---|---|---|
|
||
| `10-minidil-website-on-behance.jpg` | Minidil 教育网站（Behance） | [pin](https://www.pinterest.com/pin/828803137701519210/)（Behance 原项目未在 pin 页标注外链） |
|
||
| `11-how-does-scroll-into-view-work.jpg` | How it works - Scroll into view（Webflow 模板） | [Webflow](https://webflow.com/website/How-it-works-Scroll-into-view) / [pin](https://www.pinterest.com/pin/how-it-works-scroll-into-view-webflow--22166223162567510/) |
|
||
| `12-tutorials-templates-figma--constructor-u.jpg` | Constructor UI Kit 教程页（Spline） | [constructor.spline.one](https://constructor.spline.one/startups/tutorials) / [pin](https://www.pinterest.com/pin/tutorials--635007616233735559/) |
|
||
| `05-edtech---online-learning-startup-web-ui-.jpg` | EdTech 学习站 UI Kit | [UI8](https://ui8.net/dhuhacreative/products/edtech---online-learning-startu) / [pin](https://www.pinterest.com/pin/edtech-online-learning-startup-web-ui-kit--951807702477768443/) |
|
||
|
||
## 版权状况
|
||
|
||
- ✅ **可直接使用**：Untitled UI 免费版组件（[license](https://www.untitledui.com/license)：无限个人/商用、无需署名，禁止转售与用于竞争性 UI kit；部分 React 组件 MIT）。
|
||
- ⚠️ **仅作灵感参考，禁止复刻/搬图**：所有 Dribbble shots、Behance（Minidil）、Pinterest 上的一切 re-pin 图（Pinterest 不授予再利用权，以原始出处为准）。checklist.design 未声明内容再利用条款，参考其组织方式、不照抄条目文案。
|
||
- 💰 **需付费**：UI8 EdTech Kit、Constructor（Spline）、Untitled UI PRO。
|
||
- 落地建议：借鉴信息架构与布局思想，用 shadcn/ui + Untitled UI 免费版等可商用组件库重新实现。
|