美学前端
把 agent 变成有审美取向的前端工程师。
美学前端 是一个可直接安装的 AI 技能包(Agent Skill),属于「软件源码」类,包内 25 个文件、约 101.1 KB。装上之后,按一套明确的审美规则出配色、字号层级和留白,不是随机搭配。下面写清它解决什么问题、怎么装、需要什么依赖。
ai-skill 美学前端
你可能正遇到
- AI 写的前端能跑但难看:配色撞、间距乱、字号没层级。
- 改几轮越改越花,最后自己上手重排。
装上之后你能做到
- 按一套明确的审美规则出配色、字号层级和留白,不是随机搭配。
- 知道哪种视觉风格适合哪类产品,而不是清一色渐变卡片。
包里有什么
- SKILL.md、src/(原始技能包)。
包内文件
- aesthetic-prism/
- aesthetic-prism/lenses.md
- aesthetic-prism/craft/
- aesthetic-prism/references/
- aesthetic-prism/scripts/
- aesthetic-prism/SKILL.md
- aesthetic-prism/masters/
- aesthetic-prism/micro-checks-cjk.md
- aesthetic-prism/craft/motion-choreography.md
- aesthetic-prism/craft/interaction-vocabulary.md
- aesthetic-prism/craft/microtypography.md
- aesthetic-prism/craft/spatial-coexistence.md
- aesthetic-prism/craft/color-perceptual.md
- aesthetic-prism/craft/color-relativity.md
- aesthetic-prism/craft/compositional-diagnosis.md
- aesthetic-prism/references/awwwards-2026-cases.md
- aesthetic-prism/scripts/render.py
- aesthetic-prism/scripts/gate.py
- aesthetic-prism/masters/vignelli.md
- aesthetic-prism/masters/scher.md
- aesthetic-prism/masters/bruno-simon.md
- aesthetic-prism/masters/wang-zhihong.md
- aesthetic-prism/masters/hara.md
- aesthetic-prism/masters/mueller-brockmann.md
- aesthetic-prism/masters/lubalin.md
关键信息
| 技能名 | 美学前端 |
|---|---|
| 分类 | 软件源码 |
| 文件数 / 体积 | 25 个 / 101.1 KB |
| 依赖与权限 | 无需 API Key;不联网;需要本机 Python / Node 环境 |
| 安装方式 | 解压 → 放入客户端技能目录 → 重启客户端 |
| 通用性 | 遵循 SKILL.md 规范的客户端均可使用(Claude Code、OpenCode、Codex、Cursor、扣子等) |
注意事项
纯技能定义,无外部依赖。
纯技能定义,无外部依赖。
怎么用
- 让 AI 做页面时带上它,说「用美学规范做一版」。
怎么装
- 在砖块儿商品页获取技能包(zip),解压。
- 把解压出来的整个技能文件夹放进你所使用客户端的技能目录,例如 Claude Code 的
~/.claude/skills/、OpenCode 的~/.config/opencode/skills/。 - 确认目录里能直接看到
SKILL.md(别多套一层文件夹),重启客户端。 - 在对话里用日常语言提出这类需求,技能会自动接管。更多客户端路径见 怎么装。
关于这个技能的常见问题
这个技能属于哪一类、包里有多少文件?
美学前端 属于「软件源码」,包内共 25 个文件,解压后约 101.1 KB。根目录的 SKILL.md 是安装与使用说明,原始技能文件在 src/ 下。
装在哪里?
把解压出来的技能文件夹放进你所使用客户端的技能目录(例如 Claude Code 的 ~/.claude/skills/、OpenCode 的 ~/.config/opencode/skills/),重启后即可在对话里调用。目录里要能直接看到 SKILL.md,别多套一层。
需要 API Key 或者额外的运行环境吗?
不需要 API Key,装上即用。 但需要本机有 Python / Node 运行环境。
它会不会读我的文件或把数据传出去?
这个技能以说明与规则为主,不联网、不上传文件,只是改变 AI 处理这类任务的方式。
要花多少钱?
本站不展示价格、也不参与交易。获取入口在详情页上方的按钮,跳到砖块儿对应商品页后,由你在那里自行判断。
同类技能
最后更新:(技能包更新后本页会同步修订)