前端设计
产出有辨识度、可直接上线的前端界面。
前端设计 是一个可直接安装的 AI 技能包（Agent Skill），属于「软件源码」类，包内 3 个文件、约 7.3 KB。装上之后，生成有设计质量、可直接用于生产的前端界面。下面写清它解决什么问题、怎么装、需要什么依赖。
ai-skill 前端设计
你可能正遇到
- AI 做的界面一眼模板味，配色排版都像默认值。
- 能跑但不敢给人看。
装上之后你能做到
- 生成有设计质量、可直接用于生产的前端界面。
- 不是套模板，而是按需求定风格与细节。
包里有什么
- SKILL.md、src/（原始技能包）。
包内文件
- frontend-design/
- frontend-design/SKILL.md
- frontend-design/LICENSE.txt
关键信息
| 技能名 | 前端设计 |
|---|---|
| 分类 | 软件源码 |
| 文件数 / 体积 | 3 个 / 7.3 KB |
| 依赖与权限 | 无需 API Key；不联网；无需额外运行环境 |
| 安装方式 | 解压 → 放入客户端技能目录 → 重启客户端 |
| 通用性 | 遵循 SKILL.md 规范的客户端均可使用（Claude Code、OpenCode、Codex、Cursor、扣子等） |
怎么用
- 说「做一个 XX 产品的落地页」。
- 纯技能定义，无需外部账号。
怎么装
- 在砖块儿商品页获取技能包（zip），解压。
- 把解压出来的整个技能文件夹放进你所使用客户端的技能目录，例如 Claude Code 的
~/.claude/skills/、OpenCode 的~/.config/opencode/skills/。 - 确认目录里能直接看到
SKILL.md（别多套一层文件夹），重启客户端。 - 在对话里用日常语言提出这类需求，技能会自动接管。更多客户端路径见 怎么装。
关于这个技能的常见问题
这个技能属于哪一类、包里有多少文件？
前端设计 属于「软件源码」，包内共 3 个文件，解压后约 7.3 KB。根目录的 SKILL.md 是安装与使用说明，原始技能文件在 src/ 下。
装在哪里？
把解压出来的技能文件夹放进你所使用客户端的技能目录（例如 Claude Code 的 ~/.claude/skills/、OpenCode 的 ~/.config/opencode/skills/），重启后即可在对话里调用。目录里要能直接看到 SKILL.md，别多套一层。
需要 API Key 或者额外的运行环境吗？
不需要 API Key，装上即用。
它会不会读我的文件或把数据传出去？
这个技能以说明与规则为主，不联网、不上传文件，只是改变 AI 处理这类任务的方式。
要花多少钱？
本站不展示价格、也不参与交易。获取入口在详情页上方的按钮，跳到砖块儿对应商品页后，由你在那里自行判断。
同类技能
最后更新：（技能包更新后本页会同步修订）