การสร้าง UI ด้วย Generative AI ไม่ได้จำกัดอยู่ที่การเปิดเว็บไซต์แล้วพิมพ์ Prompt อีกต่อไป เพราะ Google Stitch สามารถเชื่อมเข้ากับเครื่องมือสำหรับนักพัฒนา เช่น Gemini CLI และ AI Coding Agent ผ่าน Model Context Protocol (MCP) ทำให้เราสามารถสร้างหน้าจอ แก้ไข Design สร้าง Variants และนำ Design ไปพัฒนาเป็น Frontend ได้จาก Terminal

Workshop นี้จะทดลองสร้าง Student Management Dashboard ตั้งแต่เริ่มต้นจนได้ Workflow ที่สามารถนำไปใช้กับโครงการจริงได้

#สิ่งที่จะได้เรียนรู้

หลังจบ Workshop ผู้อ่านจะสามารถ

  • เข้าใจบทบาทของ Google Stitch ใน Design-to-Code Workflow
  • ติดตั้ง Stitch Extension สำหรับ Gemini CLI
  • เชื่อมต่อ Stitch MCP
  • ตรวจสอบ MCP Tools
  • สร้าง Stitch Project จาก Terminal
  • Generate UI ด้วย Natural Language Prompt
  • แก้ไขหน้าจอเดิม
  • สร้าง Design Variants
  • ใช้ DESIGN.md เป็น Design System
  • ใช้ Stitch Agent Skills
  • วาง Workflow จาก Requirement → Design → Frontend Code

#1. Google Stitch คืออะไร

Google Stitch เป็นเครื่องมือ AI สำหรับช่วยสร้าง User Interface จาก

  • Text Prompt
  • Image / Mockup
  • Design requirement

แนวคิดหลักคือเปลี่ยน Requirement ให้กลายเป็น UI ได้อย่างรวดเร็ว

Idea
  ↓
Requirement
  ↓
Prompt
  ↓
Google Stitch
  ↓
UI Design
  ↓
Frontend

จุดที่น่าสนใจสำหรับนักพัฒนาคือ Stitch สามารถเชื่อมกับ Coding Agent ผ่าน MCP ได้ ทำให้ Design Workflow เข้ามาอยู่ใน Developer Workflow ได้โดยตรง

#2. Architecture ของ Stitch CLI Workflow

คำว่า "Stitch CLI" ใน Workshop นี้หมายถึงการควบคุม Stitch จาก command-line workflow โดยใช้ AI Coding Agent เป็นตัวกลาง

ตัวอย่างเมื่อใช้ Gemini CLI:

Developer
    │
    ▼
Gemini CLI
    │
    │ Natural Language
    ▼
Stitch Extension
    │
    │ MCP
    ▼
Stitch MCP Server
    │
    ▼
Google Stitch
    │
    ├── Projects
    ├── Screens
    ├── Variants
    └── Design System

อีกแนวทางหนึ่งคือใช้ Agent Skills

AI Coding Agent
      │
      ▼
Stitch Skills
      │
      ▼
Stitch MCP
      │
      ▼
Google Stitch

#3. เครื่องมือที่ต้องเตรียม

ตัวอย่าง Workshop ใช้

  • Node.js
  • npm
  • Gemini CLI
  • Google Stitch
  • Git
  • Terminal

ตรวจสอบ Node.js:

node --version
npm --version

หากคำสั่งแสดง version แสดงว่า Node.js พร้อมใช้งาน

#4. ติดตั้ง Gemini CLI

ติดตั้ง Gemini CLI ตามวิธีที่เหมาะกับ environment ของคุณ แล้วตรวจสอบว่าเรียกคำสั่งได้

gemini --version

จากนั้นทดลองเปิด

gemini

เมื่อเข้าสู่ Gemini CLI แล้วจึงสามารถติดตั้ง Extension เพิ่มเติมได้

#5. ติดตั้ง Stitch Extension

ติดตั้ง Stitch extension สำหรับ Gemini CLI:

gemini extensions install https://github.com/gemini-cli-extensions/stitch --auto-update

จากนั้นเปิด Gemini CLI ใหม่

gemini

Extension นี้ช่วยให้ Gemini CLI ติดต่อ Stitch MCP และส่งคำสั่งด้านการออกแบบไปยัง Stitch ได้

#6. Authentication

Stitch MCP รองรับแนวทาง Authentication เช่น

  1. API Key
  2. Application Default Credentials (ADC)

สำหรับการทดลองส่วนบุคคล API Key มักตั้งค่าได้ง่ายกว่า ส่วน environment ที่ผูกกับ Google Cloud สามารถเลือก ADC ตามคู่มือของ Stitch extension

อย่านำ API Key ใส่ Git repository หรือ commit ลง source control

หากใช้ environment variable ควรเก็บ secret แยกจาก source code

#7. ตรวจสอบ Stitch MCP

เปิด Gemini CLI:

gemini

ตรวจสอบ MCP tools:

/mcp list

ดูรายละเอียด:

/mcp desc

หาก Stitch ถูกตั้งค่าถูกต้อง จะพบ tools ที่เกี่ยวข้องกับ Stitch

Architecture ณ จุดนี้จะเป็น

Gemini CLI
    │
    ▼
MCP Client
    │
    ▼
Stitch MCP Server
    │
    ▼
Stitch API

#8. เริ่มใช้งาน /stitch

ใน Gemini CLI สามารถใช้คำสั่ง /stitch เพื่อส่ง Natural Language Request ไปยัง workflow ของ Stitch

ตัวอย่าง:

/stitch List my Stitch projects

นี่เป็นคำสั่งที่เหมาะสำหรับทดสอบ connection ก่อนเริ่มสร้าง Design

#9. Workshop Project

เราจะสร้างระบบตัวอย่างชื่อ

Student Management System

Requirement:

Student Management Dashboard

Features:
- Dashboard
- Student Management
- Course Management
- Reports
- Search
- Responsive Layout

#10. สร้าง Stitch Project

ภายใน Gemini CLI ลองสั่ง:

/stitch Create a new Stitch project named
"Student Management System"

Agent จะเลือก MCP tool ที่เหมาะสมและสร้าง Project ให้

แนวคิดคือผู้ใช้ไม่จำเป็นต้องจำ API syntax ทั้งหมด แต่สามารถอธิบาย intent ผ่านภาษาธรรมชาติ

#11. สร้าง Dashboard แรก

เริ่มจาก Prompt ง่าย ๆ

/stitch Create a responsive student management dashboard
for a university.

Stitch จะสร้าง UI จาก Requirement

อย่างไรก็ตาม Prompt ที่สั้นเกินไปทำให้ AI ต้องตัดสินใจเองหลายเรื่อง

ดังนั้นควรใช้ Structured Prompt

#12. Structured Prompt

ตัวอย่าง Prompt ที่มีรายละเอียดมากขึ้น:

/stitch Create a responsive web dashboard for a university
student management system.

Platform:
Desktop-first responsive web application.

Layout:
- Collapsible left sidebar
- Sticky top navigation
- Main content area

Sidebar:
- Dashboard
- Students
- Courses
- Reports
- Settings

Top Navigation:
- Page title
- Search
- Notification
- User profile

Dashboard:
- Total Students
- Active Students
- Courses
- Instructors

Student Management:
- Search input
- Filter control
- Add Student primary button
- Responsive data table
- Status badges
- Pagination

Prioritize accessibility, information hierarchy,
and efficient scanning of data.

Prompt แบบนี้ระบุทั้ง

  • Platform
  • Layout
  • Navigation
  • Components
  • UX priorities

ทำให้ผลลัพธ์ควบคุมได้มากขึ้น

#13. หลักการเขียน Prompt สำหรับ UI

ใช้ Template ต่อไปนี้ได้

Purpose:
[หน้าจอนี้ใช้ทำอะไร]

Platform:
[Web / Mobile]

Layout:
[โครงสร้าง]

Navigation:
[รูปแบบ navigation]

Components:
[รายการ component]

Interaction:
[พฤติกรรม]

Responsive:
[พฤติกรรมเมื่อหน้าจอเปลี่ยน]

Accessibility:
[ข้อกำหนด]

ตัวอย่าง:

Create a course analytics dashboard.

Platform:
Responsive web application.

Layout:
Sidebar + top navigation + content grid.

Components:
- KPI cards
- line chart
- course table
- filter dropdown
- date range selector

Responsive:
Collapse sidebar into a drawer on mobile.

Accessibility:
Maintain strong contrast and visible focus states.

#14. แก้ไข Design เดิม

ข้อดีของ Stitch คือไม่จำเป็นต้อง Generate ใหม่ทุกครั้ง

ตัวอย่าง:

/stitch Edit the student dashboard.

Changes:
- Make the sidebar collapsible.
- Add a semester filter.
- Add status badges to the student table.
- Add a floating Add Student action on mobile.

Preserve the current information architecture
and visual design.

คำว่า

Preserve the current...

มีประโยชน์มาก เพราะช่วยระบุว่าส่วนใดไม่ควรถูกเปลี่ยน

#15. สร้าง Design Variants

เมื่อต้องเลือกแนวทาง UI สามารถขอหลาย Variants

/stitch Generate 3 variants of the student dashboard.

Variant 1:
Enterprise and information-dense.

Variant 2:
Minimal with generous whitespace.

Variant 3:
Card-based and touch-friendly.

Keep the same information architecture
and core functionality.

Workflow จะเป็น

Base Design
     │
     ├── Variant A
     ├── Variant B
     └── Variant C
            │
            ▼
       Design Review
            │
            ▼
      Selected Design

#16. Design System ด้วย DESIGN.md

โครงการที่มีหลายหน้าควรมี Design System เพื่อป้องกัน UI แต่ละหน้ามี Style แตกต่างกัน

ตัวอย่างโครงสร้าง:

.stitch/
└── DESIGN.md

ตัวอย่าง DESIGN.md:

# Student Management Design System

## Visual Direction

Clean, modern, professional academic dashboard.

## Colors

Primary: #2563EB
Background: #F8FAFC
Surface: #FFFFFF
Text Primary: #111827
Text Secondary: #6B7280
Success: #16A34A
Warning: #D97706
Danger: #DC2626

## Typography

Use a modern sans-serif typeface.

## Buttons

Primary buttons use the primary color.
Use medium rounded corners.
Maintain clear hover and focus states.

## Cards

White background.
Subtle border.
Soft elevation.
Consistent internal spacing.

## Layout

Use a consistent spacing system.
Prefer clear visual hierarchy.
Use generous whitespace.

Design System จะทำหน้าที่เป็น Source of Truth

DESIGN.md
   │
   ├── Colors
   ├── Typography
   ├── Spacing
   ├── Components
   └── Layout
          │
          ▼
      Stitch Screens

#17. ติดตั้ง Stitch Agent Skills

Google Labs มี repository สำหรับ Stitch Skills ซึ่งออกแบบให้ทำงานกับ Stitch MCP

ดูรายการและติดตั้ง skills:

npx skills add google-labs-code/stitch-skills

หากต้องการดูคำสั่ง:

npx skills --help

ชุด skills แบ่งงานออกเป็นกลุ่ม เช่น

stitch-design
stitch-build
stitch-utilities

#18. Design Skills ที่สำคัญ

ตัวอย่าง skills ที่มีประโยชน์:

#generate-design

ใช้สำหรับ

  • Generate Screen
  • Edit Screen
  • Generate Variants

แนวคิด:

Prompt
  ↓
generate-design
  ↓
Stitch MCP
  ↓
Screen

#manage-design-system

ใช้จัดการ Design System และ DESIGN.md

DESIGN.md
    ↓
manage-design-system
    ↓
Stitch
    ↓
Consistent Screens

#code-to-design

ใช้ในกรณีที่มี Frontend อยู่แล้ว

React / Vue / Web App
        ↓
Static HTML
        ↓
Design Extraction
        ↓
Stitch

#extract-design-md

วิเคราะห์ Frontend Source Code เพื่อสร้าง Design System

Frontend Source
      ↓
Design Analysis
      ↓
DESIGN.md

#upload-to-stitch

นำ asset เช่น

  • HTML
  • PNG
  • JPEG
  • WebP
  • Markdown

เข้า Stitch Project

#19. Frontend เดิม → Stitch

สมมติว่ามี React application:

my-dashboard/
├── src/
├── public/
├── package.json
└── vite.config.js

สามารถให้ Agent วิเคราะห์ frontend และนำเข้า Stitch

ตัวอย่าง Prompt:

Analyze this frontend application.

Extract its visual design system into
.stitch/DESIGN.md.

Create a static representation of the dashboard
and upload it into a new Stitch project named
"Student Dashboard Migration".

Workflow:

Existing Application
        ↓
Static HTML
        ↓
Extract Design
        ↓
DESIGN.md
        ↓
Upload
        ↓
Stitch Project

นี่ทำให้ Stitch ไม่ได้ใช้เฉพาะสำหรับเริ่ม Project ใหม่ แต่สามารถใช้กับ Legacy Frontend ได้ด้วย

#20. Stitch → Frontend

หลังเลือก Design แล้ว ขั้นต่อไปคือ Implementation

ตัวอย่าง Prompt:

Implement the selected Stitch dashboard design
using React.

Create reusable components:

- AppSidebar
- AppHeader
- StatCard
- StudentTable
- StatusBadge
- Pagination

Use responsive layout and preserve the visual
hierarchy from the Stitch design.

โครงสร้างที่อาจได้:

src/
├── components/
│   ├── AppSidebar.tsx
│   ├── AppHeader.tsx
│   ├── StatCard.tsx
│   ├── StudentTable.tsx
│   ├── StatusBadge.tsx
│   └── Pagination.tsx
│
├── pages/
│   └── Dashboard.tsx
│
└── App.tsx

#21. Stitch SDK

นอกจาก MCP/Skills แล้ว ยังมี Stitch SDK สำหรับเรียก Stitch จาก TypeScript application

ติดตั้ง:

npm install @google/stitch-sdk

กำหนด API Key:

export STITCH_API_KEY="your-api-key"

ตัวอย่างแนวคิด:

import { stitch } from "@google/stitch-sdk";

const project = await stitch.createProject({
  title: "Student Management"
});

const generation = await project.generate(
  "A responsive student management dashboard"
);

const screen = generation.first;

const html = await screen.getHtml();
const image = await screen.getImage();

SDK เหมาะกับกรณีที่ต้องการสร้าง Automation หรือ Tool ของตัวเองบน Stitch

#22. ตัวอย่าง Automated Design Workflow

เราสามารถออกแบบ Pipeline:

Requirement
     ↓
AI Agent
     ↓
Prompt Enhancement
     ↓
Stitch Generate
     ↓
Design Review
     ↓
Variant Selection
     ↓
DESIGN.md
     ↓
Frontend Generation
     ↓
Build
     ↓
Visual Testing
     ↓
E2E Testing

เมื่อนำไปใช้กับ Software Engineering จะสามารถเชื่อมกับ

Git
GitHub
CI/CD
Playwright
Visual Regression Testing

ได้ต่อไป

#23. โครงสร้าง Project ที่แนะนำ

student-management/
│
├── .stitch/
│   ├── DESIGN.md
│   ├── SITE.md
│   └── next-prompt.md
│
├── src/
│   ├── components/
│   ├── pages/
│   └── assets/
│
├── tests/
│   ├── e2e/
│   └── visual/
│
├── package.json
└── README.md

แยก .stitch เพื่อเก็บ Design Context ออกจาก application source

#24. Best Practices

#24.1 อย่าเริ่ม Prompt ด้วยเรื่องสีอย่างเดียว

แทนที่จะสั่ง:

Make a beautiful blue dashboard.

ให้เริ่มจาก

Create a dashboard optimized for managing
large numbers of student records.

จากนั้นจึงกำหนด visual direction

#24.2 ระบุ Component

ใช้ศัพท์ UI เช่น

collapsible sidebar
sticky navigation
data table
filter dropdown
modal dialog
status badge
empty state
skeleton loading
pagination

ช่วยลดความกำกวมของ Prompt

#24.3 แก้ทีละส่วน

หลีกเลี่ยงการ Generate ทั้งหน้าใหม่ทุกครั้ง

ใช้:

Edit only the table section.
Preserve the header and sidebar.

#24.4 ใช้ DESIGN.md

เมื่อมีหลาย Screen ควรมี Design System กลาง

Login
Dashboard
Students
Courses
Reports
Settings
      │
      ▼
  DESIGN.md

#24.5 Generate ไม่เท่ากับ Production Ready

หลัง AI Generate Frontend แล้วควรตรวจสอบ

  • Accessibility
  • Responsive Design
  • Semantic HTML
  • Component structure
  • State management
  • Error states
  • Security
  • Performance
  • Cross-browser behavior

#25. Stitch + Software Testing

หลัง Design-to-Code สามารถต่อกับ Playwright

Stitch
  ↓
Frontend
  ↓
Playwright
  ├── Functional Test
  ├── Responsive Test
  └── Visual Regression Test

ตัวอย่าง test:

import { test, expect } from "@playwright/test";

test("dashboard renders correctly", async ({ page }) => {
  await page.goto("http://localhost:5173");

  await expect(
    page.getByRole("heading", { name: "Dashboard" })
  ).toBeVisible();

  await expect(
    page.getByRole("button", { name: "Add Student" })
  ).toBeVisible();
});

สามารถเพิ่ม Visual Testing:

await expect(page).toHaveScreenshot(
  "student-dashboard.png"
);

ทำให้ Workflow ขยายเป็น

AI Design
   ↓
AI Code
   ↓
Automated Test
   ↓
Visual Validation

#26. Workshop Challenge

ลองสร้างระบบ Software Engineering Learning Platform

Requirement:

Pages:

1. Dashboard
2. Courses
3. Assignments
4. Test Results
5. Profile

ให้สร้าง

#Step 1

Project:

SE Learning Platform

#Step 2

สร้าง Dashboard

#Step 3

Generate 3 Variants

#Step 4

สร้าง DESIGN.md

#Step 5

สร้าง Courses Screen โดยใช้ Design System เดิม

#Step 6

นำ Design ไปสร้าง React Components

#Step 7

เขียน Playwright Test

เป้าหมายสุดท้าย:

Requirement
    ↓
Stitch
    ↓
Design System
    ↓
React
    ↓
Playwright

#27. สรุป

Google Stitch ช่วยลดช่องว่างระหว่าง Design และ Development โดยเฉพาะเมื่อเชื่อมกับ CLI, MCP และ Agent Skills

จาก Workflow แบบเดิม:

Requirement
    ↓
Designer
    ↓
Mockup
    ↓
Developer
    ↓
Frontend

สามารถพัฒนาเป็น AI-assisted workflow:

Requirement
    ↓
Structured Prompt
    ↓
Google Stitch
    ↓
Design Variants
    ↓
DESIGN.md
    ↓
Frontend Components
    ↓
Automated Testing

สำหรับ Software Engineer จุดสำคัญไม่ได้อยู่ที่การให้ AI "วาดหน้าจอสวย ๆ" เท่านั้น แต่คือการนำ Requirement, Design System, Frontend Code และ Automated Testing มาอยู่ใน workflow เดียวกัน

#References