OpenSource-Hub

ai-design-skills

기타

elayadesign/ai-design-skills

Claude Code, Cursor 등 AI 코딩 도구를 위한 디자인 스킬 모음.

개요

Claude Code, Cursor, Codex, Windsurf 등 AI 프로그래밍 도구를 위한 디자인 스킬 모음으로, 각 스킬은 독립적인 Markdown 규칙 파일이며 필요에 따라 설치할 수 있습니다. 첫 번째 스킬은 랜딩 페이지 생성을 안내하며, 요구사항 질문, 페이지 구조, 전환 카피와 완전한 비주얼 시스템을 다룹니다. 폰트, 색상, 간격, 모션 효과는 통합된 블록에 모여 있어 자유롭게 커스터마이징할 수 있습니다.

README 미리보기

# AI Design Skills\n\nA growing collection of design skills for AI coding tools — Claude Code, Cursor, Codex, Windsurf, and anything else that reads a markdown rules file.\n\nEach skill is a self-contained folder. Install the ones you need.\n\n---\n\n## Skills\n\n| Skill | What it does |\n|---|---|\n| [`landing-page-design`](./skills/landing-page-design/SKILL.md) | Builds a landing page from scratch — intake questions, page structure, conversion copy, plus a full visual system (type, spacing, radius, motion) |\n\nMore on the way. [Upgrading an existing site instead of building new?](https://github.com/elayadesign/redesign-skill) That one lives in its own repo since it predates this collection.\n\n---\n\n## Install\n\nPick a skill from the table above, then swap `` below for its folder name.\n\n\nClaude Code\n\n```bash\nmkdir -p .claude/skills\ngit clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills\ncp -r /tmp/ai-design-skills/skills/ .claude/skills/\n```\n\nThen just ask, in plain language, for what that skill covers.\n\n\n\nCursor\n\n```bash\nmkdir -p .cursor/rules\ncurl -o .cursor/rules/.md \\n  https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills//SKILL.md\n```\n\nOr paste the file into **Settings → Rules for AI**.\n\n\n\nCodex / Windsurf / other\n\nCopy the skill's `SKILL.md` into whatever your tool uses for project rules:\n\n| Tool | Path |\n|---|---|\n| Codex | `AGENTS.md` |\n| Windsurf | `.windsurfrules` |\n| Cline | `.clinerules` |\n| Generic | paste into your system prompt |\n\n\n\nClaude.ai (no terminal)\n\nDownload the skill's `SKILL.md` and upload it to a Project, or attach it to a chat and say *"follow this."*\n\n\n---\n\n## Make it yours\n\nEvery skill's design values (fonts, colors, spacing, motion) live in one section near the bottom of its file. Fork this repo, edit that section, and the rest of the skill follows automatically.\n\n---\n\n## Credits\n\n`landing-page-design` adapts content realism and