CREATE
ใช้ $gridgeist ออกแบบ Landing Page สำหรับแพลตฟอร์มเรียน SQL ให้บทเรียน Query editor และผลลัพธ์เป็นส่วนสำคัญของงานภาพ หลีกเลี่ยงการ์ด SaaS แบบทั่วไป และตรวจทั้ง Desktop กับ Mobile
คู่มือภาษาไทย / Agent Skill สำหรับงานเว็บ
ออกแบบอย่างมีระบบ.
01 / แนวคิดหลัก
การตกแต่ง
ไม่ใช่ระบบ.
ให้กริด ตัวอักษร ระยะห่าง เส้นแบ่ง และหลักฐานจากผลิตภัณฑ์ทำหน้าที่สื่อสาร แทนการเพิ่มของตกแต่งที่ใช้ได้กับทุกเว็บ
02 / เลือกรูปแบบงาน
สามทางเข้า
ระบบเดียวกัน.
- 01
Create / สร้างใหม่
เริ่มจากลำดับเนื้อหา กลุ่มผู้ใช้ และ Visual thesis ก่อนสร้าง Interface ที่สมบูรณ์และ Responsive
- 02
Redesign / ปรับใหม่
รักษาฟังก์ชันและแบรนด์เดิม พร้อมเปลี่ยน Pattern ที่อ่อนแอให้เป็นทิศทางที่สอดคล้องกันทั้งระบบ
- 03
Review / รีวิว
วิเคราะห์ Clarity, Hierarchy, Typography, Responsive, Accessibility และคุณภาพ Implementation ก่อนแก้ไข
03 / เขียน Prompt ให้ได้ผล
บอกสี่อย่าง
ก่อนเริ่ม.
Context ที่ดีทำให้ Agent ตัดสินใจจากผลิตภัณฑ์ แทนการเดาจากสไตล์ยอดนิยม
- 01ผลิตภัณฑ์และผู้ใช้
กำลังออกแบบอะไร และใครเป็นคนใช้งาน
- 02งานที่ต้องการ
สร้างใหม่ ปรับดีไซน์ หรือรีวิวโดยไม่แก้โค้ด
- 03สิ่งที่ต้องรักษา
ฟังก์ชัน Route เนื้อหา สี และบุคลิกของแบรนด์
- 04สิ่งที่ต้องตรวจ
Desktop, Mobile, Keyboard, Accessibility และ Build
04 / ตัวอย่าง Prompt
คัดลอก
แล้วปรับใช้.
REDESIGN
ใช้ $gridgeist ปรับดีไซน์ Dashboard นี้ใหม่ รักษาฟังก์ชัน เส้นทาง เนื้อหา และสีแบรนด์เดิมทั้งหมด จัดลำดับข้อมูลตามความสำคัญ และอย่าแก้เพียงแค่ลดความโค้งของการ์ด
REVIEW
รีวิวหน้าเว็บนี้ด้วย $gridgeist โดยยังไม่ต้องแก้โค้ด สรุปคำตัดสินหนึ่งบรรทัด ตามด้วยปัญหาที่เรียงตามความสำคัญ หลักฐาน และทิศทางใหม่ที่สอดคล้องกัน
05 / หลักปฏิบัติ
ให้ Agent เห็น
ของจริง.
เปิด Repository และหน้าเว็บที่ Render แล้ว
ระบุ Behavior ที่ห้ามเปลี่ยนเมื่อ Redesign
ใช้ข้อมูล โค้ด และ Workflow ของผลิตภัณฑ์จริง
ตรวจหลาย Viewport และ Interaction state
06 / ติดตั้ง
เพิ่มสายตา
ให้ Agent.
git clone https://github.com/ohmiler/gridgeist.gitดูตัวอย่างจริง ↗
รองรับ Agent ที่ใช้ SKILL.md
เผยแพร่ภายใต้ MIT License