我的实践：从图片、标题、描述到第一个项目 URL
Gen AI 时代的最小能力发布练习
你的 Runtime： paula31.homelinked.tech
今天目标：每个人做出一个最常见、最基础、最有用的项目 / 产品介绍 URL。
一张图片
+
一个标题
+
一段文字描述
+
一个公开 URL
下一步我们再把这个 URL 嵌入 QR / NFC。
1. 为什么这个练习重要
过去，很多学生习惯用 Figma、PPT、PDF、社交媒体或聊天软件表达想法。
这些工具有价值，但它们都有一个共同限制：
别人必须进入某个平台
或者收到某个文件
或者在某个社交关系里
才能看到你的内容
URL 不一样。
URL 是开放的、可复制的、可扫码的、可写入 NFC 的、可被浏览器打开的。
所以今天练习的不是“做一个网页”这么简单。
今天练习的是：
把一个想法
变成别人可以打开的现实入口
这就是 AI 时代最基本的能力输出。
2. 今天不要做复杂网站
今天不要做复杂系统。
不要一开始挑战：
后台系统
登录注册
数据库后台
购物车
支付
复杂 CSS
复杂 JavaScript
Flask public server
Nginx
systemd
SSL
今天只做最小项目介绍页：
Image
Title
Description
URL
这已经足够形成第一层能力发布。
3. 你的页面应该像什么
它应该像一个最常见的项目 / 产品介绍页面。
包括：
- 项目图片
- 项目标题
- 一句核心说明
- 一段项目描述
- 我观察到的问题
- 我想提供的能力
- 下一步
例子：
Project Title:
StudySpace in a Bag
One-line Description:
A portable study setup for students who need better phone support, lighting and cable organization.
Problem:
Many students study with phone, laptop, cable and small desk space, but the setup is messy and hard to continue.
Capability:
Support + Power + Light + Organization + Learning Continuity.
Next Step:
Add QR / NFC so the object can open this page directly.
4. 第一步：进入你的 Runtime
cd /opt/workspaces/paula31
source venv/bin/activate
5. 第二步：准备目录
mkdir -p exports assets practice jsonl
mkdir -p /var/www/paula31/practice
mkdir -p /var/www/paula31/assets
6. 第三步：放一张图片
你需要准备一张图片。
图片可以是：
- 你的产品照片
- 你的项目照片
- 你的手绘图
- 你的 Figma 导出图
- 你的 AI 生成概念图
- 你的真实场景照片
先把图片上传或复制到：
/opt/workspaces/paula31/assets/practice.jpg
如果你还没有图片，可以先用一个占位图：
python3 - <<'PY'
from pathlib import Path
from PIL import Image, ImageDraw, ImageFont
Path("assets").mkdir(exist_ok=True)
img = Image.new("RGB", (1200, 800), (245,245,245))
d = ImageDraw.Draw(img)
d.rectangle((60,60,1140,740), outline=(40,40,40), width=6)
d.text((120,320), "My Practice Image", fill=(20,20,20))
d.text((120,380), "Replace this with your real photo later.", fill=(80,80,80))
img.save("assets/practice.jpg")
print("created assets/practice.jpg")
PY
如果这一步提示没有 PIL / Pillow，就先安装：
pip install pillow
7. 第四步：生成项目介绍页面
复制下面命令，生成你的第一个 Practice URL 页面。
你可以先不改，跑通以后再改文字。
cat > exports/practice.html <<'HTML'
My Practice Project
My Practice
My First Practice Project
One-line description: This is my first project URL created inside my HSIMC Student Runtime.
Problem I Observed
Write the real problem you observed here. It may come from your room, school, family, community, internship, product, material, object, or daily life.
Capability I Want to Build
Write the capability here. For example: support, power, lighting, organization, learning, mobility, repair, evidence, or continuity.
What This Page Proves
This page proves that I can turn an idea, image, title and description into a public URL.
Next Step
The next step is to connect this URL with QR code and NFC so that a physical object can open this project page.
HTML
8. 第五步：发布到自己的 URL
cp assets/practice.jpg /var/www/paula31/assets/practice.jpg
cp exports/practice.html /var/www/paula31/practice/index.html
然后打开：
https://paula31.homelinked.tech/practice/
如果浏览器能打开，今天的核心任务已经完成。
9. 第六步：记录 Evidence
python3 - <<'PY'
import json, datetime
from pathlib import Path
p = Path("jsonl/my_practice.jsonl")
p.parent.mkdir(parents=True, exist_ok=True)
record = {
"event": "my_practice_url_created",
"student": "paula31",
"url": "https://paula31.homelinked.tech/practice/",
"status": "created",
"components": ["image", "title", "description", "public_url"],
"next_step": "add QR and NFC",
"ts": datetime.datetime.utcnow().isoformat() + "Z"
}
with p.open("a", encoding="utf-8") as f:
f.write(json.dumps(record, ensure_ascii=False) + "\\n")
print("Evidence written:", p)
PY
10. 第七步：用 AI 修改你的项目内容
你可以把下面 Prompt 给 AI：
Please help me rewrite my practice project page.
My project idea:
[write your project idea]
My image shows:
[describe the image]
The real problem I observed:
[describe the problem]
The capability I want to build:
[describe the capability]
Please rewrite:
1. Project title
2. One-line description
3. Problem I observed
4. Capability I want to build
5. What this page proves
6. Next step
Keep it simple, practical, and suitable for a public URL.
Do not overclaim.
Output clean HTML text sections only.
11. 成功标准
今天成功不是做复杂网站。
今天成功是：
1. 有一张图片
2. 有一个标题
3. 有一段描述
4. 有一个别人能打开的 URL
5. 有一条 JSONL Evidence
6. 能解释这个页面代表什么能力
12. 下一步：QR / NFC
当你的 URL 成功以后，下一步才是 QR / NFC。
URL
↓
QR
↓
NFC
↓
Physical Object opens the URL
↓
Object becomes a Capability Touchpoint
所以今天先不要急着研究 NFC。
先把 URL 做出来。
13. 给设计同学的提醒
Figma 是设计空间。
URL 是现实入口。
Figma 可以帮助你设计视觉。
但 URL 才能让别人打开、测试、分享、扫码、写入 NFC、作为 Evidence 保存。
所以今天不是放弃设计，而是把设计变成可以进入现实的 URL。
14. 最后一句话
不要只发图片。
不要只发 Figma。
不要只发社交媒体。
发布你的 URL。
让你的 URL 成为你的实践入口。
HSIMC Student Runtime · My Practice Guide · UTF-8