站内导读
中文 这是一套面向 AI 编程工具的设计技能集合，目前包含 landing-page-design，用于从零搭建落地页：需求提问、页面结构、转化文案，以及字体、间距、圆角、动效等视觉规范。每个技能是独立文件夹，可按需安装到 Claude Code、Cursor、Codex、Windsurf 等读取 markdown 规则文件的工具。设计取值集中在文件末尾一节，便于按品牌修改。适合用 AI 写前端、需要统一设计规范的开发者。
日本語 AI コーディングツール向けのデザインスキル集で、現在は landing-page-design を収録しています。要件のヒアリング、ページ構成、コンバージョン文言に加え、書体・余白・角丸・モーションを含む視覚ルールを一通り生成します。各スキルは独立したフォルダで、Claude Code、Cursor、Codex、Windsurf など markdown のルールファイルを読むツールに必要な分だけ導入できます。デザイン値はファイル末尾の一節にまとまり、AI でフロントエンドを書く開発者に向いています。
한국어 AI 코딩 도구용 디자인 스킬 모음으로, 현재 landing-page-design을 포함합니다. 요구사항 질문, 페이지 구조, 전환 문구와 함께 서체·간격·모서리·모션 등 시각 규칙을 처음부터 구성합니다. 각 스킬은 독립 폴더이며 Claude Code, Cursor, Codex, Windsurf처럼 markdown 규칙 파일을 읽는 도구에 필요한 것만 설치할 수 있습니다. 디자인 값은 파일 끝 한 절에 모여 있어 브랜드에 맞게 수정하기 쉽고, AI로 프런트엔드를 작성하는 개발자에게 적합합니다.
English A collection of design skills for AI coding tools, currently including landing-page-design, which builds a landing page from scratch: intake questions, page structure, conversion copy, and a visual system covering type, spacing, radius, and motion. Each skill is a self-contained folder you install only where needed, in Claude Code, Cursor, Codex, Windsurf, or any tool that reads markdown rules. Design values sit in one section near the end of each file, so forks stay consistent.
README · 详细文档
来源 · 查看原文
AI Design Skills
A growing collection of design skills for AI coding tools — Claude Code, Cursor, Codex, Windsurf, and anything else that reads a markdown rules file.
Each skill is a self-contained folder. Install the ones you need.
Skills
| Skill | What it does | |---|---| | landing-page-design | Builds a landing page from scratch — intake questions, page structure, conversion copy, plus a full visual system (type, spacing, radius, motion) |
More on the way. Upgrading an existing site instead of building new? That one lives in its own repo since it predates this collection.
Install
Pick a skill from the table above, then swap <skill-name> below for its folder name.
<details open> <summary><b>Claude Code</b></summary>
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/<skill-name> .claude/skills/Then just ask, in plain language, for what that skill covers. </details>
<details> <summary><b>Cursor</b></summary>
mkdir -p .cursor/rules
curl -o .cursor/rules/<skill-name>.md \
https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/<skill-name>/SKILL.mdOr paste the file into Settings → Rules for AI. </details>
<details> <summary><b>Codex / Windsurf / other</b></summary>
Copy the skill's SKILL.md into whatever your tool uses for project rules:
| Tool | Path | |---|---| | Codex | AGENTS.md | | Windsurf | .windsurfrules | | Cline | .clinerules | | Generic | paste into your system prompt | </details>
<details> <summary><b>Claude.ai (no terminal)</b></summary>
Download the skill's SKILL.md and upload it to a Project, or attach it to a chat and say "follow this." </details>
Make it yours
Every 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.
Credits
landing-page-design adapts content realism and motion ideas from Leonxlnx/taste-skill by Leon Lin, MIT licensed. Details are at the end of its SKILL.md.
License
MIT. Use it, fork it, ship it, sell what you build with it. No attribution needed.