ai-design-skills

สกิลทำ Landing Page ของ Elaya คืออะไร ช่วยให้เว็บพ้นหน้าตา AI ได้จริงไหม? โดย Nokka (นก-กา) | 31 ต.ค. 2026 !ภาพประกอบ: กระดาษร่างหน้าเว็บสี่แผ่นวางเรียงเหลื่อมกันเป็นขั้นบันไดบนโต๊ะ มือหนึ่งกำลังเลื่อนแผ่นบนสุดออก มีโพสต์แชร์กันเยอะเรื่องสกิลฟรีที่ทำให้ Claude Code กับ Cursor สร้างหน้าเว็บได้สวยและไม่ซ้ำใคร ตัวเลขที่โพสต์บอกคือหกพันดาวบน GitHub โพสต์ต้นทางเป็นข้อความที่ถูกส่งต่อมา ไม่มีลิงก์สาธารณะให้ตรวจ ผมจึงอ้างจากข้อความที่ได้รับ และเทียบกับรีโปจริงซึ่งตรวจได้ทุกบรรทัด ผมเข้าไปดูรีโปจริง เทียบทีละข้อกับที่โพสต์อ้าง แล้วเจอทั้งของจริงและของที่คลาดเคลื่อน รีโปนี้คืออะไรกันแน่ elayadesign/ai-design-skills เป็นชุดสกิลสำหรับเครื่องมือเขียนโค้ดที่อ่านไฟล์กฎ markdown ได้ ไม่ว่าจะเป็น Claude Code, Cursor, Codex, Windsurf หรือ Cline [1] ข้อมูลจาก GitHub API ณ วันที่เขียนบทนี้ - 13,028 ดาว ไม่ใช่หกพันอย่างที่โพสต์บอก ผมคาดว่าตัวเลขในโพสต์มาจากช่วงที่รีโปยังใหม่อยู่ [1] [6] - 957 ฟอร์ก และมี issue เปิดค้าง 2 รายการ [6] - สัญญาอนุญาต MIT ใช้เชิงพาณิชย์ได้ [6] - สร้าง 29 ก.ค. 2026 และ push ล่าสุด 30 ต.ค. 2026 [6] เจ้าของบัญชีชื่อ Elaya มีรีโปสาธารณะสามตัว คือตัวนี้ redesign-skill และ skills [6] รีโป redesign-skill แยกออกไปเพราะทำหน้าที่คนละอย่าง คือใช้ปรับเว็บที่มีอยู่แล้วให้ดูดีขึ้น ไม่ใช่สร้างใหม่ทั้งหน้า [4] ส่วนรีโป skills เป็นฟอร์กของชุดสกิลจาก Anthropic ไม่ใช่ผลงานที่ Elaya เขียนเอง ผมจึงไม่นับรวมในการตรวจครั้งนี้ ตัวสกิลยังระบุด้วยว่าบางส่วนดัดแปลงมาจาก taste-skill ของ Leon Lin ภายใต้สัญญา MIT เช่นกัน [5] ข้างในมีสกิลเดียว ไม่ใช่หลายตัว จุดที่ผมต้องแก้ตั้งแต่ต้น: โพสต์เขียนเหมือนมีหลายสกิลรวมถึงตัวแปลงดีไซน์เป็นคลิป MP4 หรือ GIF ด้วย แต่ไฟล์ในรีโปมีอยู่ชุดเดียว คือ skills/landing-page-design/SKILL.md ยาวราว 22,000 ตัวอักษร [3] ผมค้นทั้งรีโปนี้และรีโป redesign-skill แล้ว ไม่พบสกิลที่แปลงดีไซน์เป็นวิดีโอหรือ GIF เลย คำอ้างนั้นยังไม่มีหลักฐานในรีโป ส่วนอิมเมจที่ใช้ในตัวอย่างโพสต์ทำด้วย Higgsfield ตามที่โพสต์บอกเอง ซึ่งเป็นบริการภายนอกที่ต้องจ่ายเงิน และไม่เกี่ยวกับตัวสกิล สกิลนี้สั่งให้ AI ทำอะไร ตัวไฟล์แบ่งเป็นสองภาคชัดเจน ภาค A ว่าด้วยเนื้อหาและโครงหน้า ภาค B ว่าด้วยกฎภาพที่บังคับใช้ [3] ภาค A ถามก่อนลงมือ สิ่งแรกที่สกิลสั่งคือถามผู้ใช้เป็นชุดเดียว ไม่ใช่ยิงคำถามทีละข้อ ครอบคลุมเป้าหมายเดียวของหน้า กลุ่มเป้าหมาย ข้อโต้แย้งสามข้อแรกที่ทำให้คนไม่ซื้อ ช่องทางที่คนเข้ามา และหลักฐานที่มีอยู่จริง [3] จากนั้นกำหนดโครงสิบสองส่วน เรียงตามต้นทางคือ พาดหัว, คำโปรยใต้พาดหัว, ปุ่มหลัก, หลักฐานชิ้นแรก, ภาพฮีโร่, ปัญหาและทางออก, ประโยชน์สามถึงห้าข้อ, วิธีใช้สามขั้น, รีวิว, FAQ หกถึงสิบสองข้อ, การลดความเสี่ยง และปุ่มปิดท้ายที่เหมือนปุ่มบนสุด [3] ภาค B กฎภาพที่ไม่อ่อนข้อ นี่คือส่วนที่ทำให้คนแชร์กัน และเป็นส่วนที่ผมชอบที่สุด - ฟอนต์ที่ห้ามใช้: Inter, Roboto, Arial, Open Sans, Helvetica [3] - ฟอนต์ที่ให้ใช้: Geist, Manrope, Poppins และ Geist Mono สำหรับตัวเลขหรือโค้ด [3] - ห้ามตัวเอียง ทั้งหน้าจอ และห้ามใช้ระดับหนามากอย่าง ultra bold หรือ 900 โดยให้สูงสุดที่ semibold หรือ bold [3] - ห้ามใช้ขีด (-) ในข้อความ ซึ่งผมคิดว่าเป็นกฎที่คนเขียนเว็บไทยมักทำหลุดโดยไม่รู้ตัว [3] - ห้ามข้อความตัวอย่างเป็นภาษาละติน และห้ามใช้คำว่า "พาดหัวของคุณที่นี่" [3] ข้อสุดท้ายสำคัญกับคนทำธุรกิจจริง คือสกิลสั่งว่า ราคา ตัวเลขสถิติ จำนวนลูกค้า และรีวิว ต้องมาจากผู้ใช้หรือแหล่งจริง ถ้าไม่มีให้ใส่ตัวยึดเช่น {{price}} ไว้ก่อน ห้ามแต่งขึ้นเอง [3] ผมชอบกฎข้อนี้เพราะมันแก้ปัญหาที่เจอบ่อยที่สุด เว็บที่ AI ทำมักดูดีในภาพรวม แต่พออ่านตัวเลขกลับไม่มีที่มา กฎที่ผมคิดว่าแปลกแต่มีเหตุผล ในไฟล์มีส่วน B11 ชื่อ "tagline reveal section" ซึ่งเป็นส่วนที่สกิลบังคับให้ใส่ทุกหน้า [3] แนวคิดคือให้มีจุดหนึ่งที่ประโยคสั้น ๆ ของแบรนด์ค่อย ๆ เผยออกมาระหว่างเลื่อนหน้า เป็นจังหวะที่ทำให้คนจำแบรนด์ได้ ไม่ใช่แค่เห็นสินค้า ผมมองว่านี่เป็นดาบสองคม ใช้ดีก็ทำให้หน้าดูมีชั้นเชิง ใช้ผิดที่ก็กลายเป็นลูกเล่นที่ไม่มีใครอ่าน ส่วนที่บอกตำแหน่งในต้นทางยังไม่ลงรอยกันเอง คือ A2 แนะให้วางหลังฮีโร่หรือหลังส่วนประโยชน์ ขณะที่ B11 กำกับว่าไม่ให้ติดกับฮีโร่ [3] วิธีติดตั้ง วิธีที่รีโปแนะนำคือใช้ CLI ของ skills.sh ซึ่งต้องมี Node.js [2] # ติดตั้งทั้งหมดและเลือกเองว่าจะให้ agent ตัวไหนใช้ npx skills add elayadesign/ai-design-skills # เลือกเฉพาะสกิลนี้ และระบุ agent npx skills add elayadesign/ai-design-skills --skill landing-page-design -a claude-code -a cursor # ติดตั้งระดับผู้ใช้ ไม่ผูกกับโปรเจกต์ npx skills add elayadesign/ai-design-skills -g โฟลเดอร์ปลายทางคือ .claude/skills/ ถ้าใช้ Claude Code ส่วน Cursor, Codex และเครื่องมืออื่นจะได้ไฟล์ใน .agents/skills/ [2] ถ้าไม่ใช้ CLI ก็โคลนรีโปแล้วคัดลอกโฟลเดอร์สกิลไปวางเองได้ หรือดาวน์โหลด SKILL.md ไปอัปโหลดใน Project ของ Claude บนเว็บ [2] ข้อจำกัดที่โพสต์ไม่ได้บอก หนึ่ง สกิลไม่สร้างภาพให้ ตัวไฟล์สั่งให้ใช้ภาพสินค้า ภาพหน้าจอ หรือวิดีโอเดโมที่มีอยู่จริง ถ้าไม่มีภาพก็ต้องหาเองหรือจ้างทำ [3] สอง ค่าฟอนต์ค่าเริ่มต้นเป็นฟอนต์ละติน ถ้าทำเว็บไทยต้องเปลี่ยนเอง เพราะ Geist กับ Manrope ไม่มีชุดตัวอักษรไทย ผมเปิดรายการ subset ของ Google Fonts ดูเอง Manrope ครอบคลุมละติน ไซริลลิก กรีก และเวียดนาม ส่วน Geist ไม่มีกรีก ทั้งสองตัวไม่มีชุดอักษรไทย วิธีที่ผมแนะนำคือแก้ในส่วน B1 ของไฟล์ ให้ใช้ฟอนต์ไทยอย่าง IBM Plex Sans Thai หรือ Noto Sans Thai แล้วคงกฎอื่นไว้ สาม มันไม่ใช่เครื่องมือออกแบบ สกิลนี้ให้ AI เดินตามระบบที่คนอื่นคิดไว้ ไม่ได้คิดแทนคุณในเรื่องแบรนด์ ถ้าแบรนด์ยังไม่ชัด ผลลัพธ์จะเรียบร้อยแต่จำเจ สี่ ตัวเลขบนโพสต์ล้าสมัย ตอนนี้รีโปมีหนึ่งหมื่นสามพันดาว ถ้าคุณเห็นโพสต์ที่บอกหกพัน โพสต์นั้นน่าจะเก่าแล้ว ใครควรใช้ ใครข้ามได้ ควรใช้ถ้า คุณต้องทำหน้าขายของสักหน้าอย่างเร็ว อยากให้ผลลัพธ์ไม่เหมือนเทมเพลต และยอมเสียเวลาตอบคำถามช่วงต้นราวสิบนาที (เป็นการกะของผม) ข้ามได้ถ้า คุณมีดีไซเนอร์อยู่แล้ว หรือหน้าของคุณเป็นแอปที่ต้องมีดีไซน์เฉพาะทาง สกิลนี้ถูกออกแบบมาสำหรับหน้าขายของหน้าเดียว ไม่ใช่ระบบดีไซน์ทั้งผลิตภัณฑ์ สิ่งที่ผมยังไม่รู้ ผมไม่ได้ติดตั้งสกิลนี้แล้วสร้างหน้าจริงในรอบนี้ สิ่งที่ผมตรวจคือตัวไฟล์กฎและข้อมูลรีโปเท่านั้น ดังนั้นคำถามว่า "ใช้แล้วเว็บจะสวยขึ้นจริงไหม" ผมตอบด้วยหลักฐานไม่ได้นอกจากตัวกฎเอง ซึ่งอ่านแล้วสมเหตุสมผล แต่ผลจริงขึ้นกับโมเดลที่รันและ prompt ที่คุณให้ ถ้าคุณลองแล้วได้หน้าตาแบบไหน อยากรู้เหมือนกันครับ แหล่งอ้างอิง [1] GitHub · elayadesign/ai-design-skills (เข้าถึง 31 ต.ค. 2026) · elayadesign/ai-design-skills [2] รีโปเดียวกัน · README วิธีติดตั้ง (เข้าถึง 31 ต.ค. 2026) · github.com/elayadesign/ai-design-skills/blob/main… [3] รีโปเดียวกัน · skills/landing-page-design/SKILL.md (เข้าถึง 31 ต.ค. 2026) · github.com/elayadesign/ai-design-skills/blob/main… [4] GitHub · elayadesign/redesign-skill (เข้าถึง 31 ต.ค. 2026) · elayadesign/redesign-skill [5] GitHub · Leonxlnx/taste-skill ซึ่งเป็นต้นทางบางส่วนของสกิลนี้ (เข้าถึง 31 ต.ค. 2026) · Leonxlnx/taste-skill [6] GitHub REST API · ข้อมูลรีโปและบัญชีผู้ใช้ elayadesign (31 ต.ค. 2026) · api.github.com บทความนี้เขียนโดย AI (deepseek-v4.1-flash · ผู้ให้บริการโมเดล: ollama-cloud) ผ่าน Hermes Agent ภายใต้การควบคุมและตรวจสอบคุณภาพโดยมนุษย์ - Nokka (นก-กา)

ai-design-skills 주목받는 이유 elayadesign/ai-design-skills Claude Code, Codex 여기저기 바로 적용해도 코스트가 거의 없음. 규모 대비 반응이 아주 좋죠. 이유는 우선 규칙이 극단적으로 구체적. 응용하기 좋음. "좋은 디자인을 하세요" 수준이 아니라 숫자와 금지 목록으로 정리해놓음. Geist, Manrope, Poppins 같은 폰트만 쓰고 + 폰트 크기는 Tailwind 기본 스케일에 맞추고 + 배경 그라디언트 금지 + Material 아이콘 금지 등.. 디자인만이 아니라 conversion 전략까지 담았고, 에이전트를 가리지 않음! Leon Lin의 taste-skill 워크플로와 연결해서 활용할 수 있는데 이건 더 가벼움. ai-design-skills 토대로 구조화 시켰으니 참고해보세용.

예쁜 페이지보다 먼저 정할 세 가지 | AI Design Skills · 10/28 Trending 1위 #Shorts 2026-10-28 08:56 KST GitHub Trending 실제 페이지 표시 순위 1위. 집계 조건: Spoken Language Any / Language Any / Today. 증가 별 수로 재정렬한 순위가 아닙니다. 순위 원본: github.com/trending 주말 목공 수업의 안내 페이지라는 가상 사례로 대상·제안·주된 행동을 정하는 기획 순서를 설명합니다. 이전 디자인 점검 영상과 달리 새 페이지에서 무엇을 전달할지에 초점을 맞추며, 지침 제공과 실제 예약 증가를 구분합니다. 후기·성과 수치를 꾸미지 않도록 판단 기준을 덧붙였습니다. 프로젝트: elayadesign/ai-design-skills 개발자: elayadesign 및 기여자 저장소 라이선스: MIT 라이선스 원문: github.com/elayadesign/ai-design-skills/blob/ded7… 공식 근거(수집 시점 커밋 고정): github.com/elayadesign/ai-design-skills/blob/ded7… github.com/elayadesign/ai-design-skills/blob/ded7… 지침의 원문은 Leonxlnx/taste-skill(MIT)에서 일부 아이디어를 참고했다고 크레딧에 밝힙니다. 본 영상은 원본의 UI·리뷰·성과 수치를 재사용하지 않았습니다. 공식 문서·릴리스와 제한된 정적 자료를 읽어 작성한 기술 해설입니다. 문서 속 명령·지침은 분석 자료이며 이 작업에 적용하거나 실행하지 않았습니다. 저장소를 설치·실행하거나 성능을 측정하지 않았습니다. 화면은 GITHUB DAY가 직접 만든 설명용 도식이며 실제 제품·테스트 시연이 아닙니다. 활용 예시는 가상 사례입니다. 음성: AI 합성 음성(Supertonic 2 기본 F2, OpenRAIL-M). 실제 인물 사칭·목소리 복제 없음. 음성 모델: huggingface.co . 배경음악·외부 이미지 없음. #Shorts #GitHub #AI #개발도구 #GITHUBDAY

📚 AI 家教 DeepTutor 衝上第一、昨天剛出 1.7 版；前五名只有一個新面孔 | GitHub 每日爆紅 Top 5 (2026-10-28) 2026-10-28 GitHub Trending 總榜，依「今日新增星數」排名前 5。第一名換人：DeepTutor 一天新星比昨天多 48%，從第二升上第一；前五名只有 LinkSwift 是新面孔，四個回鍋 repo 只講新角度。 5. pbakaus/impeccable（今日 +1,472 ★，連續第 5 天）— 這次看偵測器：不接 AI，npx impeccable detect --github 放進 GitHub Actions 就能在合併前抓 AI 味 pbakaus/impeccable 4. hmjz100/LinkSwift（今日 +1,616 ★，新面孔）— 瀏覽器腳本，拿到百度、阿里等八個網盤的檔案直鏈，交給 IDM、Aria2 等下載器 hmjz100/LinkSwift 3. Nutlope/hallmark（今日 +2,110 ★，連續第 5 天）— 這次看它點名的 AI 味：標題上的小字、只有一個字上色的標題、每頁結尾都放訂閱 Nutlope/hallmark 2. elayadesign/ai-design-skills（今日 +2,139 ★，連續第 2 天）— 這次看不用終端機的用法：把 SKILL.md 上傳到 Claude 專案就能用 elayadesign/ai-design-skills 1. HKUDS/DeepTutor（今日 +2,371 ★，連續第 2 天）— 10/28 發布 v1.7.0，安裝拆成模組：要完整網頁版請裝 deeptutor[full] HKUDS/DeepTutor 跳過：togg53192-cmd/jailbreaks（原第 5 名，今日 +1,477 ★）—— 內容是繞過 AI 模型安全限制的提示詞集合，可能被濫用，也沒有可以「開始用」的工具，因此由第 6 名 Impeccable 遞補。 前五名以外值得盯：nightly-labs/openbot（第 9 名，今日 +1,054 ★），一天漲了自己總數的 32.6%。 資料：github.com/trending 總榜（2026-10-29 台灣時間早上讀取），星數為當時頁面顯示值，並以 shields.io 核對總星數。 #GitHub #開源 #AI工具 #DeepTutor #ClaudeCode

AIコーディングツールに読み込ませて洗練されたデザインを作らせるためのルール集ツールっぽい フロントエンド開発のクオリティを底上げできそうかな yug1224 starred elayadesign/ai-design-skills elayadesign/ai-design-skills

今日のGitHubトレンド elayadesign/ai-design-skills Claude CodeやCursor、WindsurfなどのAIコーディングツール向けに、デザインスキルを定義したルールファイルを提供するリポジトリです。 特定のデザインタスクをAIに効率的に実行させるための設定を集めており、導入することでAIのデザイン能力を拡張できます。 また、フォントや配色などの設定を編集して、自分好みのデザインにカスタマイズして利用することが可能です。

EXPLODIU NO GITHUB! Os 5 Melhores Repositórios de Hoje (28/10) GitHub Trending Diário — 28/10/2026 Os 5 projetos open source mais em alta no GitHub hoje: 1. hmjz100/LinkSwift (JavaScript) - Download em 8 nuvens 2. Nutlope/hallmark (CSS) - Skill Anti-AI-Slop para Claude Code 3. HKUDS/DeepTutor (Python) - Tutoria por LLM 4. pbakaus/impeccable (Rust) - Vocabulário de Design para Agentes 5. elayadesign/ai-design-skills - Competências visuais para IA Fontes: GitHub Trending (28/10/2026). Produzido por Dluz Digital.

Продукт-дизайнер поделился своим набором скиллов для создания крутых лендингов — в них есть анимации, моушн-графика, интерактивные визуалы и разные стили. → Агент сам изучит продукт, придумает структуру страницы, напишет продающие тексты и... elayadesign/ai-design-skills

138K stars: 3 free skills kill AI-slop sites #shorts Three free design skills that stop Claude Code, Cursor, and Codex from shipping AI-slop websites. Combined 138,000+ GitHub stars. 1. Hallmark by Nutlope — npx skills add nutlope/hallmark -g 2. Impeccable by Paul Bakaus — npx impeccable install 3. ai-design-skills by elayadesign — drop the markdown file into your project All MIT or Apache 2.0. Hallmark needs Node 18+. Impeccable's URL scan works with an installed Chrome, Chromium, or Edge. Sources: Nutlope/hallmark pbakaus/impeccable elayadesign/ai-design-skills #AI #ClaudeCode #Cursor #Codex #WebDesign #OpenSource #Shorts

AI Design Skills: A Focus on Modern Development Needs The Shift in Modern Development As AI coding tools evolve, the demand for integrated design skills has become increasingly apparent. Developers now seek solutions that not only enhance functionality but also ensure an appealing user experience. The ai-design-skills repository provides a collection of design skills specifically tailored for AI coding tools like Claude Code, Cursor, Codex, and Windsurf. Each skill is encapsulated within its own folder, allowing users to install only what they need, thereby promoting efficiency in development workflows. Why this Project Matters Right Now The ai-design-skills repository addresses a critical gap in the market: the need for design integration within AI tools. As AI systems become more complex, developers require straightforward methods to incorporate design principles without extensive overhead. The repository currently includes a skill for landing page design, which not only covers the technical aspects of building a page but also addresses user experience through questions about intake, page structure, and conversion copy. This focus on holistic design is crucial as developers strive for more intuitive and effective user interfaces. How it Addresses Current Industry Pain Points The ai-design-skills project simplifies the process of integrating design skills into AI coding environments. For example, to install a skill like landing-page-design, users can execute the following commands: mkdir -p .claude/skills git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/ This straightforward installation process allows developers to quickly adopt design capabilities without extensive setup. Moreover, each skill's design values (such as fonts, colors, and spacing) are easily customizable, enabling developers to adapt the skills to their specific branding needs. The repository also references existing work, such as the taste-skill from Leon Lin, providing a foundation for further enhancements in design realism and motion. Community Pulse: What Developers Are Saying Community feedback indicates that while the repository is a valuable resource, some users have encountered issues. For instance, Issue #5 discusses conflicts between specific animation guidelines within the landing-page-design skill's documentation. This highlights the ongoing need for refinement and user feedback in evolving the repository's offerings. Developers are encouraged to contribute their insights and improvements as the project grows. Future Predictions & Long-term Outlook As the repository expands, we can expect more skills to be added, enhancing its utility for developers. The growing trend of AI tools increasingly incorporating design elements suggests that projects like ai-design-skills will play a crucial role in shaping how developers approach user experience in AI applications. By fostering a community-driven approach and addressing current limitations, the repository can remain relevant in the fast-paced tech landscape. Our Read The ai-design-skills repository stands out for its targeted approach to integrating design skills into AI development workflows. While it currently addresses key pain points with its existing skills, ongoing user feedback and contributions will be vital in refining and expanding its offerings. --- Originally published on GitTrending — Explore daily architectural deep-dives and quality scores for trending open-source GitHub projects.