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