GRIDGEIST
ENGitHub ↗

คู่มือการใช้งาน / v1.0

จากเจตนา
สู่ระบบ.

ใช้ Gridgeist เพื่อสร้าง ปรับดีไซน์ หรือรีวิวหน้าเว็บ ด้วยลำดับข้อมูลที่ชัดเจนและภาษาภาพที่เฉพาะเจาะจงกับผลิตภัณฑ์

เวลาอ่าน
08 นาที
รูปแบบงาน
03
สัญญาอนุญาต
MIT

01 / เริ่มต้นใช้งาน

เริ่มจากผลิตภัณฑ์
ไม่ใช่ชื่อสไตล์.

เรียกใช้ $gridgeist แล้วอธิบายผลิตภัณฑ์ ผู้ใช้งาน งานที่ต้องการ สิ่งที่ห้ามเปลี่ยน และวิธีตรวจผลลัพธ์

PROMPT / CREATEภาษาไทย
ใช้ $gridgeist ออกแบบ Landing Page สำหรับแพลตฟอร์มเรียน SQL
ให้บทเรียน Query editor และผลลัพธ์เป็นหลักฐานสำคัญของงานภาพ
หลีกเลี่ยงกริดการ์ด SaaS แบบทั่วไป
ตรวจทั้ง Desktop, Mobile, Keyboard และ Accessibility

Context ที่ดีทำให้งานดีขึ้นต่อเนื่อง ให้ Agent ตรวจ Repository และหน้าเว็บที่ Render แล้วเมื่อเป็นไปได้

02 / การติดตั้ง

ติดตั้งให้ Agent
ที่คุณใช้งาน.

01

Codex Plugin

แนะนำ

เพิ่ม Marketplace ติดตั้ง Plugin แล้วเริ่ม Codex session ใหม่

codex plugin marketplace add ohmiler/gridgeist
codex plugin add gridgeist@gridgeist
02

Agent ที่รองรับ

UNIVERSAL

ใช้ open agent skills CLI สำหรับ Claude Code, Cursor, Gemini CLI, Copilot, OpenCode และ Agent อื่นที่รองรับ

npx skills add ohmiler/gridgeist -g
03

ติดตั้งด้วยตนเอง

PORTABLE

คัดลอก skills/gridgeist/ ไปยัง Skills directory ของ Agent ที่รองรับมาตรฐาน Agent Skills แบบ SKILL.md

03 / เลือกรูปแบบงาน

ระบบเดียว.
สามทางเข้า.

รูปแบบใช้เมื่อเริ่มจาก
Createสร้าง Interface ใหม่ลำดับเนื้อหา + Visual thesis
Redesignปรับดีไซน์ผลิตภัณฑ์เดิมรักษา Behavior + สำรวจ Pattern
Reviewวิเคราะห์ Draft ก่อนแก้ไขปัญหาตามลำดับความสำคัญ + หลักฐาน

04 / เขียน Brief

ข้อมูลสี่อย่าง
ลดความคลุมเครือ.

  1. 01

    ผลิตภัณฑ์ + ผู้ใช้

    กำลังออกแบบอะไร และใครเป็นคนใช้งาน?

  2. 02

    รูปแบบงาน + ผลลัพธ์

    Create, Redesign หรือ Review และเมื่อเสร็จแล้วอะไรควรเป็นจริง?

  3. 03

    ข้อจำกัด

    ระบุ Behavior, Route, เนื้อหา, Brand asset และเทคโนโลยีที่ต้องรักษา

  4. 04

    การตรวจสอบ

    ระบุ Viewport, Interaction, Keyboard path, Accessibility และ Project checks

รูปแบบ Prompt / Redesign +
ใช้ $gridgeist ปรับดีไซน์ Dashboard นี้ใหม่
รักษา Route, Function, เนื้อหา และสีแบรนด์เดิมทั้งหมด
สร้างลำดับข้อมูลใหม่ตาม Investigation path หลักของผู้ใช้
ตรวจ Narrow mobile, Tablet, Laptop และ Wide desktop
รูปแบบ Prompt / Review +
รีวิว Interface นี้ด้วย $gridgeist โดยยังไม่ต้องแก้โค้ด
สรุปคำตัดสินหนึ่งบรรทัด ตามด้วยปัญหาที่เรียงตามความสำคัญ
หลักฐาน และทิศทางใหม่หนึ่งทิศทางที่สอดคล้องกัน

05 / ขั้นตอนทำงาน

สำรวจก่อน
จัดองค์ประกอบ.

  1. 01Inspect

    ทำความเข้าใจผลิตภัณฑ์ ผู้ใช้ Route, Component, Token และ UI ที่ Render แล้ว

  2. 02Set a thesis

    เขียนหนึ่งประโยคที่กำกับลำดับ โครงสร้าง การแสดงออก และหลักฐานจากผลิตภัณฑ์

  3. 03Define the system

    กำหนด Container, Column, Spacing, Type role, สี เส้น และการเปลี่ยน Layout ตามหน้าจอ

  4. 04Compose

    สร้างลำดับก่อนรายละเอียด ให้ Code, Data, Workflow หรือภาพจริงทำหน้าที่สื่อสาร

  5. 05Implement

    ทำตาม Convention ของ Repository, Semantic HTML, Keyboard behavior และ Primitive เดิม

  6. 06Refine

    แก้ความชัดเจนก่อน แล้วจึงแก้ลำดับ แนววาง ตัวอักษร Interaction, Accessibility และคุณภาพโค้ด

06 / ตรวจผลลัพธ์

ใช้หลักฐาน
ก่อนตัดสิน.

A

ความชัดเจน

ผลิตภัณฑ์ ผู้ใช้ และสิ่งที่ต้องทำต่อเข้าใจได้ทันที

B

ลำดับ

แต่ละ Viewport มีจุดเด่นหลักหนึ่งจุดและลำดับการอ่านที่ชัดเจน

C

การตอบสนอง

Mobile ถูกจัดใหม่ตามความสำคัญ และ Code กับ Table ไม่ล้นจอ

D

การเข้าถึง

Landmark, Focus, Contrast, Motion และ Keyboard path ใช้งานได้

07 / ข้อจำกัด

เป็นวิธีคิด.
ไม่ใช่ Preset.

  • ค่าเริ่มต้นด้าน Grid, Type และสีเป็นเพียงจุดเริ่ม ไม่ใช่กฎตายตัว
  • คุณภาพผลลัพธ์ขึ้นอยู่กับ Context ของผลิตภัณฑ์ที่ Agent ได้รับ
  • Automated checks ไม่สามารถแทนการตรวจหน้าเว็บที่ Render จริงได้
  • ผลลัพธ์จากโมเดลอาจเปลี่ยน ควรทดสอบซ้ำเมื่อเปลี่ยน Agent หรือแก้ Skill

พร้อมดูวิธีนี้ในงานจริงหรือยัง?

ดูกรณีศึกษาทั้งหมด