frontend-design

スター7

フォーク3

更新日2026年6月5日 13:53

ออกแบบ UI ที่สวยและมีเอกลักษณ์ ใช้เมื่อผู้ใช้ขอสร้าง/ปรับหน้าเว็บ component หรืองานออกแบบ frontend

インストール

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

ソース

apgamerinfo

apgamerinfo/boyser-ai

ダウンロード

Skill: frontend-design

เลี่ยง AI-slop: อย่าใช้ของโหลๆ — font กลางๆ (Inter/Roboto/Arial), purple gradient บนพื้นขาว/ดำ, layout ตายตัวซ้ำๆ
เลือกคอนเซ็ปต์ให้เข้ากับงาน: dashboard ≠ editorial ≠ fintech ≠ portfolio — palette, typography, spacing ต้องสื่อบุคลิกของงานนั้น
ถ้าโจทย์เปิดกว้าง: เสนอ 3-4 ทิศทาง (สี/ฟอนต์/อารมณ์ พร้อมเหตุผลสั้นๆ) ให้ผู้ใช้เลือกก่อนลงมือ — อย่าเดาแล้วทำเลย
ดีเทลที่ทำให้ดูพรีเมียม: type scale ชัด, spacing สม่ำเสมอ, micro-interaction/transition, hover/focus state, empty/loading state
Responsive (mobile-first) + contrast ผ่าน WCAG AA (อ่านง่าย เข้าถึงได้)
ใช้ font/สีที่เจาะจง (ระบุ hex/ชื่อ font จริง) ไม่ลอยๆ

จับคู่กับ skill ของ frontend framework ที่ใช้ (เช่น nextjs-prisma) เมื่อต้อง implement

このリポジトリの他の Skills

同じリポジトリ

ควบคุมและตรวจสอบ Android ผ่าน ADB ใช้เมื่อทำงานกับเครื่อง Android, อ่าน UI, automate การแตะ/พิมพ์, หรือ debug แอปบนมือถือ (เช่น BOYSER farm)

ออกแบบ REST/JSON API ใช้เมื่อผู้ใช้ขอออกแบบ endpoint, API, หรือโครงสร้าง request/response

ตรวจสอบ backtest/กลยุทธ์เทรดว่าน่าเชื่อถือไหม ใช้เมื่อรีวิวผล backtest, strategy, หรือผู้ใช้ถามว่ากลยุทธ์นี้ใช้ได้จริงไหม

เขียน bash/shell script ที่ทนทาน ใช้เมื่อผู้ใช้ขอ shell script automation หรือคำสั่งที่ซับซ้อนหลายขั้น

รีวิวโค้ด/diff/PR หาบั๊ก ความถูกต้อง และจุดที่ควรปรับ ใช้เมื่อผู้ใช้ขอรีวิว ตรวจโค้ด ดู PR หรือขอความเห็นที่สอง

วิเคราะห์ข้อมูล CSV/ตาราง/ชุดข้อมูล ใช้เมื่อผู้ใช้ขอวิเคราะห์ คำนวณสถิติ หาแนวโน้ม หรือหา insight จากข้อมูล

name	frontend-design
description	ออกแบบ UI ที่สวยและมีเอกลักษณ์ ใช้เมื่อผู้ใช้ขอสร้าง/ปรับหน้าเว็บ component หรืองานออกแบบ frontend

เลี่ยง AI-slop: อย่าใช้ของโหลๆ — font กลางๆ (Inter/Roboto/Arial), purple gradient บนพื้นขาว/ดำ, layout ตายตัวซ้ำๆ
เลือกคอนเซ็ปต์ให้เข้ากับงาน: dashboard ≠ editorial ≠ fintech ≠ portfolio — palette, typography, spacing ต้องสื่อบุคลิกของงานนั้น
ถ้าโจทย์เปิดกว้าง: เสนอ 3-4 ทิศทาง (สี/ฟอนต์/อารมณ์ พร้อมเหตุผลสั้นๆ) ให้ผู้ใช้เลือกก่อนลงมือ — อย่าเดาแล้วทำเลย
ดีเทลที่ทำให้ดูพรีเมียม: type scale ชัด, spacing สม่ำเสมอ, micro-interaction/transition, hover/focus state, empty/loading state
Responsive (mobile-first) + contrast ผ่าน WCAG AA (อ่านง่าย เข้าถึงได้)
ใช้ font/สีที่เจาะจง (ระบุ hex/ชื่อ font จริง) ไม่ลอยๆ

จับคู่กับ skill ของ frontend framework ที่ใช้ (เช่น nextjs-prisma) เมื่อต้อง implement