GRIDGEIST
เมนู
EN/TH

Agent Skill / โครงสร้างที่มาจากผลิตภัณฑ์

ออกแบบอย่างมีระบบ.

Gridgeist เปลี่ยนผู้ใช้ งานหลัก หลักฐานของผลิตภัณฑ์ และเจตนาของแบรนด์ให้เป็นระบบภาพที่เป็นของผลิตภัณฑ์นั้นจริง ๆ

เริ่มใช้งาน ↓

01 / แนวคิดหลัก

กริดคือการตัดสินใจ
ไม่ใช่เครื่องแบบ.

โครงสร้างอาจมองเห็น ช่วยงานอยู่เงียบ ๆ หรือหายไปจากสายตา ผู้ใช้ งาน เนื้อหา และแบรนด์เป็นผู้ตัดสิน ไม่ใช่สไตล์สำเร็จรูป

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

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

  1. 01

    Create / สร้างใหม่

    เริ่มจากลำดับเนื้อหา กลุ่มผู้ใช้ และ Visual thesis ก่อนสร้าง Interface ที่สมบูรณ์และ Responsive

  2. 02

    Redesign / ปรับใหม่

    รักษาฟังก์ชันและแบรนด์เดิม พร้อมเปลี่ยน Pattern ที่อ่อนแอให้เป็นทิศทางที่สอดคล้องกันทั้งระบบ

  3. 03

    Review / รีวิว

    วิเคราะห์ Clarity, Hierarchy, Typography, Responsive, Accessibility และคุณภาพ Implementation ก่อนแก้ไข

03 / System contract

หนึ่งทิศทาง.
ทุกการตัดสินใจ.

เวอร์ชัน 1.2 เชื่อมสี ตัวอักษร Layout, Spacing, Components, States, Media และ Motion ก่อนเริ่มเก็บรายละเอียด โดยปรับขนาดของ Contract ให้พอดีกับพื้นผิว

01 / Foundationค่าพื้นฐาน
02 / Semanticบทบาทในผลิตภัณฑ์
03 / Componentพฤติกรรมตามบริบท
สี + ตัวอักษรกำหนดบทบาทก่อนค่า.

คู่สี ลำดับ ภาษา และพฤติกรรมขณะโหลดถูกระบุอย่างชัดเจน

canvas → text → action
Layout + Spacingกำหนดความสำคัญก่อน Track.

ใช้ Rhythm เดียวกัน แต่จัดองค์ประกอบใหม่ตามงานหลักของแต่ละ Viewport

360 → 768 → 1280 → 1600
Componentsกำหนดโครงก่อน Instance.

หน้าที่ร่วมกำหนด Variant, Density, เนื้อหายาว และพื้นที่แคบ

job → anatomy → variant
States + Motionใช้หลักฐานก่อนคำกล่าวอ้าง.

Focus, Selection, Error, Success และ Reduced motion ยังสื่อสารได้โดยไม่พึ่งสีอย่างเดียว

DefaultSelectedFocus

04 / ระดับของโครงสร้าง

วิธีเดียวกัน
สัญญาณต่างกัน.

ตัวอย่างเชิงโครงสร้าง ไม่ใช่งานลูกค้า แต่ละพื้นผิวเปลี่ยนความเข้มของกริดโดยยังใช้หลัก Evidence-first ชุดเดียวกัน

01 / มองเห็นระบบเทคนิค

ใช้แนวจัดวางชัดเจนเพื่อเผยความสัมพันธ์ของข้อมูล โค้ด และสถานะระบบ

02 / เงียบเรื่องเล่าที่ใช้ภาพนำ

แนวจัดวางที่ไม่แย่งสายตาเปิดพื้นที่ให้งานศิลป์ คำบรรยาย และลำดับเรื่อง

03 / มองไม่เห็นเครื่องมือที่ควบคุมโดยตรง

Canvas เป็นพระเอก ส่วนโครงสร้างอยู่ในการวางเครื่องมือและพฤติกรรมสัมผัส

04 / สถานะนำขั้นตอนธุรกรรม

ตำแหน่งคำสั่งที่คงที่ สถานะชัดเจน และทางกู้คืนเป็นผู้สร้าง Hierarchy

05 / เขียน Prompt ให้ได้ผล

บอกสี่อย่าง
ก่อนเริ่ม.

Context ที่ดีทำให้ Agent ตัดสินใจจากผลิตภัณฑ์ แทนการเดาจากสไตล์ยอดนิยม

  1. 01ผลิตภัณฑ์และผู้ใช้

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

  2. 02งานที่ต้องการ

    สร้างใหม่ ปรับดีไซน์ หรือรีวิวโดยไม่แก้โค้ด

  3. 03สิ่งที่ต้องรักษา

    ฟังก์ชัน Route เนื้อหา สี และบุคลิกของแบรนด์

  4. 04สิ่งที่ต้องตรวจ

    Desktop, Mobile, Keyboard, Accessibility และ Build

06 / ตัวอย่าง Prompt

คัดลอก
แล้วปรับใช้.

CREATE
ใช้ $gridgeist ออกแบบ Landing Page สำหรับแพลตฟอร์มเรียน SQL
ให้บทเรียน Query editor และผลลัพธ์เป็นส่วนสำคัญของงานภาพ
หลีกเลี่ยงการ์ด SaaS แบบทั่วไป และตรวจทั้ง Desktop กับ Mobile
REDESIGN
ใช้ $gridgeist ปรับดีไซน์ Dashboard นี้ใหม่
รักษาฟังก์ชัน เส้นทาง เนื้อหา และสีแบรนด์เดิมทั้งหมด
จัดลำดับข้อมูลตามความสำคัญ และอย่าแก้เพียงแค่ลดความโค้งของการ์ด
REVIEW
รีวิวหน้าเว็บนี้ด้วย $gridgeist โดยยังไม่ต้องแก้โค้ด
สรุปคำตัดสินหนึ่งบรรทัด ตามด้วยปัญหาที่เรียงตามความสำคัญ
หลักฐาน และทิศทางใหม่ที่สอดคล้องกัน

07 / หลักปฏิบัติ

ให้ Agent เห็น
ของจริง.

เปิด Repository และหน้าเว็บที่ Render แล้ว

ระบุ Behavior ที่ห้ามเปลี่ยนเมื่อ Redesign

ใช้ข้อมูล โค้ด และ Workflow ของผลิตภัณฑ์จริง

ตรวจหลาย Viewport และ Interaction state

08 / หลักฐานการประเมิน

19

สิบเก้าสถานการณ์.
หกรอบระบบ.

ชุดที่เผยแพร่ครอบคลุม Create, Redesign, Review, การปรับตามแบรนด์, Direction alignment, State recovery, Accessibility, ความซื่อตรงของหลักฐาน, Companion ownership และ Design-system coherence

6 / 6 Implementation ของ Scenario 19 สำหรับ v1.2 ผ่านทั้งภาษาไทยและอังกฤษ พร้อมการตรวจ Responsive ด้วย Browser แบบอิสระ Guardrail ได้รับการซ่อมแล้ว ส่วนหลักฐานจากผู้ใช้จริงยังเป็นงานต่อไป

อ่านชุดประเมิน ↗

09 / ติดตั้งและอัปเดต

ติดตั้งครั้งเดียว
อัปเดตอย่างตั้งใจ.

01 / CODEX PLUGINแนะนำ

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

codex plugin marketplace add ohmiler/gridgeist codex plugin add gridgeist@gridgeist
02 / AGENT SKILLSใช้ได้ทั่วไป

ติดตั้งแบบ Global สำหรับ Agent ที่รองรับ

npx skills add ohmiler/gridgeist -g
03 / UPDATEสั่งเอง

Refresh Marketplace หรืออัปเดต Agent Skills โดยไม่มีการอัปเดตเบื้องหลัง

codex plugin marketplace upgrade gridgeist npx skills update gridgeist -g -y
อ่านวิธีติดตั้ง ↗

Tagged releases
MIT License