Ilm-Alan/frontend-design
GitHub: Ilm-Alan/frontend-design
一个为AI编码助手设计的前端美学技能，通过八种预设锚点锁定设计令牌，以实现视觉一致性和快速样式生成。
Stars: 47 | Forks: 7
# 前端设计
适用于 Claude Code、Codex 和 Gemini CLI 的前端设计技能。八种美学锚点，每种都将调色板、排版和纹理锁定至特定的 CSS 令牌。每次简报仅选择其一。
## 安装
### Claude 代码
```
git clone https://github.com/Ilm-Alan/frontend-design.git ~/.claude/skills/frontend-design
```
### Codex
```
git clone https://github.com/Ilm-Alan/frontend-design.git ~/.codex/skills/frontend-design
```
### Gemini CLI
在 `~/.gemini/settings.json` 中启用实验性技能：
```
{ "experimental": { "skills": true } }
```
然后：
```
git clone https://github.com/Ilm-Alan/frontend-design.git ~/.gemini/skills/frontend-design
```
通过 `/skills list` 验证。
## 工作原理
每个锚点都会锁定特定的调色板、字体和纹理令牌。选择一个锚点即承诺使用这些令牌，而非某种氛围。在编写任何代码之前，该技能会要求提供：
1. 一个锚点，选择时应倾向于意外的搭配。
2. 一个值得记住的锚点内部操作。
3. 与所选锚点令牌匹配的 CSS。
如果渲染出的令牌偏离了锚点的范围，则意味着锚点没有发挥作用。
## 八种锚点
| 锚点 | 令牌 |
|---|---|
| **瑞士** | 纯白，Akzidenz/Helvetica/Söhne 无衬线字体，瑞士红或国际橙色点缀，可见网格 |
| **工业** | 漆黑，IBM Plex Mono / JetBrains Mono 贯穿始终，一种语义信号色，扁平化 |
| **粗野主义** | 纯原色，系统字体（Times, Helvetica, Courier），硬偏移阴影 `Xpx Xpx 0 #000`，原生浏览器控件 |
| **极光极繁主义** | 深色饱和渐变底，Inter/PP Neue Machina，网格渐变表面，霓虹发光 |
| **混沌极繁主义** | 冲突的柔和色 + 霓虹色，混合字体，每个表面都有图案，超大显示 |
| **复古未来主义** | 漆黑 + 霓虹，年代字体（VT323, Orbitron, Space Mono, Monoton），CRT 扫描线或色差 |
| **有机** | 大地色调（鼠尾草绿、黏土色、赤陶色、赭石色）——绝非奶油色，人文主义衬线或温暖无衬线字体，圆角，细微纹理 |
| **低保真** | 纸黄色（非奶油色），混合系统字体，旋转元素，半调网点，Risograph 套印不准 |
完整的令牌规格详见 [`SKILL.md`](SKILL.md)。
## 仓库结构
```
frontend-design/
├── SKILL.md
├── README.md
└── LICENSE.txt
```
## 许可证
MIT。
标签：AI集成, Claude Code, Codex, CSS框架, CSS设计, Gemini CLI, UI设计, 前端设计, 字体选择, 纹理效果, 美学风格, 自动化设计, 视觉设计, 设计令牌, 设计工具, 设计系统, 设计锚点, 调色板管理, 风格指南