elayadesign/ai-design-skills

AI Design Skills 是一組給 AI 編程工具用的設計技能,每個技能是一個獨立資料夾,核心是一份 markdown 規則檔。目前提供 landing-page-design,從需求訪談、頁面結構、轉換文案到字體、間距、圓角、動態的視覺系統都寫在裡面。跟一般提示詞範本不同,它把設計值集中在檔案後段,fork 後改那一區就能換掉整套風格。
AI 寫程式與 Skills未提供★ 10,801

專案簡介

以上內容由 AI 根據官方 README 整理,未經實測;指令以官方文件為準。

原始描述

未提供

AI 規格

可搭配的工具Claude CodeCursorCodexWindsurfClineClaude.ai

主要功能

  • 以單一 SKILL.md 提供設計流程與規則
  • landing-page-design 涵蓋需求訪談、頁面結構與轉換文案
  • 內含字體、間距、圓角、動態的視覺系統設定
  • 可複製到 Claude Code、Cursor、Codex、Windsurf、Cline
  • 設計值集中一區,fork 後改一處即可換風格
  • MIT 授權,可直接用於商業專案

安裝方式

  1. Claude Code:建立技能目錄

    mkdir -p .claude/skills
  2. Claude Code:複製倉庫到暫存目錄

    git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
  3. Claude Code:把指定技能放進專案

    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/
  4. Cursor:建立規則目錄

    mkdir -p .cursor/rules
  5. Cursor:下載 SKILL.md 到規則目錄

    curl -o .cursor/rules/<skill-name>.md \
      https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md
  6. Codex / Windsurf / Cline:把 SKILL.md 內容貼到 AGENTS.md、.windsurfrules 或 .clinerules

  7. Claude.ai:下載 SKILL.md 上傳到 Project,或附加在對話中

設定教學

不需要環境變數或 API 金鑰。安裝時把 SKILL.md 放進對應工具的規則位置,第一次使用前確認路徑與工具相符即可。

主要設定檔

部署方式

Claude Code

  1. 建立 Claude Code 技能目錄

    mkdir -p .claude/skills
  2. 把技能倉庫複製到暫存目錄

    git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
  3. 把指定技能資料夾複製到專案

    cp -r /tmp/ai-design-skills/skills/<skill-name> .claude/skills/

Cursor

  1. 建立 Cursor 規則目錄

    mkdir -p .cursor/rules
  2. 下載技能的 SKILL.md 到規則目錄

    curl -o .cursor/rules/<skill-name>.md \
      https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.md

Codex / Windsurf / Cline

  1. 把 SKILL.md 內容貼到各工具規則檔:Codex 用 AGENTS.md、Windsurf 用 .windsurfrules、Cline 用 .clinerules

設定內容整理自 repository 內的設定檔與文件,未經實測;變數名稱與指令以官方檔案為準。

適合用途

  • 用 Claude Code 或 Cursor 從零刻 landing page 的前端開發者
  • 想讓 AI 產出的頁面有固定字體、間距與動態規則的設計師
  • 在 Codex、Windsurf、Cline 裡想套用專案規則的人
  • 沒有終端機、只在 Claude.ai 對話中工作的使用者

常見問題

需要 API 金鑰或額外服務才能用嗎?

不需要。技能本質是一份 markdown 規則檔,安裝時只是把 SKILL.md 複製或下載到對應工具的路徑。

技能要放在哪個路徑?

Claude Code 放在 .claude/skills/,Cursor 放在 .cursor/rules/;Codex 用 AGENTS.md、Windsurf 用 .windsurfrules、Cline 用 .clinerules,或直接貼進 system prompt。

沒有終端機也能用嗎?

可以。把 SKILL.md 下載後上傳到 Claude.ai 的 Project,或附加在對話中並要求它照著做。

可以改設計風格嗎?

可以。fork 倉庫後修改 SKILL.md 後段的設計值區塊(字型、顏色、間距、動態),其餘內容會跟著套用。

目前有哪些技能?

目前只有 landing-page-design 一個技能。要改既有網站的話,README 指向另一個獨立倉庫 redesign-skill。

公開標籤

未提供
Stars 等欄位只是 GitHub 快照,不保證品質、安全性或商用適用性。