AI Web Studio977-121 · PSU PHUKET
ภาพและแหล่งที่มา

Provenance ของแผนภาพ Diagram Design

ภาพและแหล่งที่มา

ภาพประกอบและ prompt ต้นฉบับ

คู่มือผู้สอน

ผู้สอน: Assessment, เฉลย และ rubric capstone

คู่มือผู้สอน

คู่มือผู้สอน: AI Web Studio — 2 วัน / 8 ชั่วโมง

คู่มือผู้สอน

ข้อมูลในเว็บไซต์สาธิตและขอบเขตการใช้งาน

คู่มือผู้สอน

บันทึกการนำหลักสูตรขึ้น Cloudflare จริง

คู่มือผู้สอน

Glossary ผู้สอน: คำสำคัญ 38 คำสำหรับอธิบายในห้อง

คู่มือและบททดลองเสริม

Lab เสริม — สร้าง Brand-kit Board สำหรับเว็บไซต์ด้วย `brandkit`

คู่มือและบททดลองเสริม

Lab — สร้างเว็บไซต์หลักสูตรด้วย Codex แบบ step by step

คู่มือและบททดลองเสริม

คู่มือ — Setup Wrangler, login Cloudflare และสร้าง API token

คู่มือและบททดลองเสริม

Lab เสริม — Export และ Deploy เว็บไซต์หลักสูตรไป Cloudflare

คู่มือและบททดลองเสริม

Lab — Claude Design, Google Stitch และ Figma MCP: จากแบบสู่เว็บ

คู่มือและบททดลองเสริม

Full lab เรียนต่อด้วยตัวเองประมาณ 2 ชั่วโมง — เปลี่ยนข้อมูลจริงเป็นแผนภาพด้วย diagram-design

คู่มือและบททดลองเสริม

Prework / Self-study — ติดตั้ง Claude Code, Codex, Claude Desktop และ ChatGPT Desktop

คู่มือและบททดลองเสริม

Full lab เรียนต่อด้วยตัวเองประมาณ 2 ชั่วโมง — ออกแบบเว็บอสังหาริมทรัพย์ด้วย ui-ux-pro-max

คู่มือและบททดลองเสริม

Lab — ให้ AI ช่วย research ข้อมูล สร้าง website brief และ brand kit

คู่มือและบททดลองเสริม

Lab — RW Web: Research → Brandkit → Website → Cloudflare

คู่มือและบททดลองเสริม

Full lab เรียนต่อด้วยตัวเอง 90–120 นาที — จากเว็บไซต์บ้านสบายสู่ mobile app prototype

บทเรียน

บทเรียน 00 — เตรียมเครื่องและเข้าใจว่าเว็บทำงานอย่างไร

บทเรียน

บทที่ 1: พื้นฐาน Vibe Coding สำหรับเว็บที่ส่งมอบได้จริง

บทเรียน

บทที่ 2: Agent Skills, MCP และ Plugins โดยไม่ทำให้บริบทพัง

บทเรียน

บทที่ 3: Specs และ Prompts สำหรับเว็บบริษัท, Catalog และเว็บ animation

บทเรียน

บทเรียน 04 — ออกแบบ, ภาพ และคุณภาพก่อนเขียนหน้าเว็บ

บทเรียน

บทเรียน 05 — เว็บบริษัท: contact form ที่รันกับ demo นี้ได้จริง

บทเรียน

บทเรียน 06 — เว็บเช่าอุปกรณ์: availability และ capacity ของ demo ที่รันได้จริง

บทเรียน

บทเรียน 07 — GSAP product story, storefront และ quote demo

บทเรียน

บทเรียน 08 — รันและตรวจ deployment path ของโปรเจกต์ Cloudflare นี้

บทเรียน

บทเรียน 09 — Production Operations: security, observability, rollback และต้นทุน

บทเรียน

บทเรียน 10 — สร้างเว็บของตนเองและส่งมอบอย่างตรวจสอบได้

บทเรียน

บทเรียน 11 — เลือกบริการ Cloudflare ให้เหมาะกับเว็บไซต์

คลัง Prompt

Prompt library — จาก design brief สู่เว็บที่ตรวจรับได้

คลัง Prompt

Prompt library — diagram-design แบบตรวจย้อนกลับได้

คลัง Prompt

Prompt library — สร้างเว็บด้วย vibe coding แบบตรวจรับได้

คลัง Prompt

Prompt ฉบับเต็ม — HUSH product story ด้วย GSAP

คลัง Prompt

Prompt → ผลลัพธ์ → หลักฐานตรวจรับ

คลัง Prompt

Prompt ที่ใช้จริง — เว็บอสังหาริมทรัพย์ บ้านสบาย

คลัง Prompt

Prompt — Research → Website brief → Brandbook และ visual assets

คลัง Prompt

ทดลองติดตั้งและใช้ skill กับเว็บตัวอย่าง

คลัง Prompt

Prompt library: วงจรสร้างเว็บด้วย AI ที่ตรวจสอบได้

รายงานวิจัย

วิจัย: Vibe coding, Agent Skills และการทำงานอย่างมีหลักฐาน

รายงานวิจัย

Research — Cloudflare services for website work

รายงานวิจัย

Cloudflare สำหรับเว็บไซต์ที่สร้างด้วย Vibe Coding

รายงานวิจัย

Research — AI design tools, Desktop apps และ MCP สำหรับเว็บ

รายงานวิจัย

Labs เสริม: Cloudflare Pages สำหรับ brochure และ R2 สำหรับ media ที่มี policy

รายงานวิจัย

Research — จากข้อมูลตั้งต้นสู่ website brief และ brand assets

รายงานวิจัย

แหล่งอ้างอิงของหลักสูตร

รายงานวิจัย

มาตรฐานคุณภาพเว็บและขอบเขต commerce สำหรับหลักสูตร