My Practice: From Image, Title and Description to a Public URL

A Minimum Capability Publishing Exercise for the Gen AI Era

Your Runtime: benny18.homelinked.tech

One image
+
One title
+
One short description
+
One public URL

1. Why This Practice Matters

Many students are comfortable with Figma, PPT, PDF, social media, or chat messages.

These tools are useful, but they usually depend on a platform, a file, a login, or a social relationship.

A URL is different.

A URL can be opened by a browser. It can be copied, scanned, shared, printed, embedded into QR, and later written into NFC.

Today’s task is not simply “make a webpage”.

Today’s task is:

turn one idea
into a public reality entry

2. Do Not Build a Complex Website Today

Do not start with a complicated system.

Do not begin with:

backend system
login system
database admin panel
shopping cart
payment
complex CSS
complex JavaScript
Flask public server
Nginx
systemd
SSL

Today, build only the minimum project introduction page:

Image
Title
Description
URL

This is already enough to create the first layer of capability publishing.

3. What Your Page Should Look Like

Your page should look like a simple project / product introduction page.

It should include:

• project image
• project title
• one-line description
• project description
• problem observed
• capability you want to build
• next step

Example:

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. Step 1: Enter Your Runtime

cd /opt/workspaces/benny18
source venv/bin/activate

5. Step 2: Prepare Folders

mkdir -p exports assets practice jsonl
mkdir -p /var/www/benny18/practice
mkdir -p /var/www/benny18/assets

6. Step 3: Prepare One Image

You need one image.

The image can be:

• a product photo
• a project photo
• a hand sketch
• a Figma export
• an AI-generated concept image
• a real scene photo

Put the image here:

/opt/workspaces/benny18/assets/practice.jpg

If you do not have an image yet, create a placeholder image first:

python3 - <<'PY'
from pathlib import Path
from PIL import Image, ImageDraw

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

If Python says PIL / Pillow is missing, install it inside your venv:

pip install pillow

7. Step 4: Create the Project Introduction Page

Copy this command to generate your first practice page.

You can run it first without changes, then edit the text later.

cat > exports/practice.html <<'HTML'











  
  

    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.
    

    

      AI-to-Code → Code-to-URL → URL-to-Evidence → Evidence-to-Offer
    
  




HTML

8. Step 5: Publish to Your Own URL

cp assets/practice.jpg /var/www/benny18/assets/practice.jpg
cp exports/practice.html /var/www/benny18/practice/index.html

Then open:

https://benny18.homelinked.tech/practice/

If the page opens in your browser, today’s core task is complete.

9. Step 6: Record 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": "benny18",
    "url": "https://benny18.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. Use AI to Rewrite Your Project Content

You can give this prompt to 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. Success Standard

Today’s success is not a complex website.

Today’s success means:

1. one image
2. one title
3. one description
4. one public URL
5. one JSONL Evidence record
6. ability to explain what capability this page represents

12. Next Step: QR / NFC

After your URL works, the next layer is QR / NFC.

URL
↓
QR
↓
NFC
↓
Physical Object opens the URL
↓
Object becomes a Capability Touchpoint

Do not rush into NFC today.

Build the URL first.

13. Note for Design Students

Figma is a design space.

URL is a reality entry.

Figma can help you design the visual.

But URL allows other people to open, test, share, scan, write into NFC, and preserve as Evidence.

Today is not about abandoning design. It is about turning design into a URL that can enter reality.

14. Final Message

Do not only send images.
Do not only send Figma.
Do not only send social media posts.

Publish your URL.
Let your URL become your practice entry.

HSIMC Student Runtime · My Practice Guide · English UTF-8