13 个第一次做作品任务 · 不需要先懂框架

先做出一个东西。
再慢慢看懂代码。

不用从技术名词开始。选一个你真想做的小作品，让 AI 帮你找路，你亲自决定它为谁而做、什么才算完成。

开始第一个作品我想看进阶案例

≤ 15 分钟看到第一个变化

≤ 2 小时做出可分享版本

0 付费服务不要后端与 API Key

从这里起步

先选一个当天能做完的

查看 13 个任务

01个人网页

≈ 10 分钟看到变化

做一张属于你的个人名片

先不学框架，把名字、照片和一句自我介绍变成可以分享的网页。

你会做出

一张包含你的名字、介绍、作品链接和联系方式的个人网页。

HTML
CSS

开始做

02个人网页

≈ 10 分钟看到变化

给一个想法做单页介绍

用一页网页讲清楚一个社团、活动、小店或你真正想做的项目。

你会做出

一个有标题、价值说明、行动按钮和联系方式的单页网站。

HTML
CSS

开始做

03交互练习

≈ 10 分钟看到变化

做一个会前进的步骤条

点击上一页和下一页，让页面把进度变化清楚地表现出来。

你会做出

一个可以表达报名、制作或学习进度的交互步骤条。

HTML
CSS
JavaScript

开始做

已经做过一个？

再拆成熟项目

30 个已审核的开源案例，适合在有了第一次作品经验后，继续学产品架构和项目组织。

01AI 应用 02SaaS 03Agent 04开发者工具

进阶精选 · 3 个

看成熟作品怎么被组织出来

进入进阶项目库

中等

slidevjs/slidev

Slidev

把 Markdown、Vue 和 Vite 变成可编程的演示文稿

你可以学

学界面 · 学产品结构 · 学部署

94/100 学习分★ 48.0k查看学习卡

简单

pocketbase/pocketbase

PocketBase

从一个可执行文件理解数据库、认证、文件与实时 API

你可以学

学数据库 · 学用户登录 · 学产品结构

92/100 学习分★ 60.6k查看学习卡

中等

ChatGPTNextWeb/NextChat

NextChat

从多模型聊天界面学会搭建一款可部署的 AI 产品

你可以学

学界面 · 学 AI 接入 · 学产品结构

90/100 学习分★ 88.6k查看学习卡

我想练什么

把“看懂”变成一次具体的练习

学界面学产品结构学 AI 接入学完整项目组织

先做出一个东西。再慢慢看懂代码。

先选一个当天能做完的

做一张属于你的个人名片

给一个想法做单页介绍

做一个会前进的步骤条

再拆成熟项目

看成熟作品怎么被组织出来

Slidev

PocketBase

NextChat

把“看懂”变成一次具体的练习

先做出一个东西。
再慢慢看懂代码。