高级 UI 设计与美学套件
一个专注于创建定制化、独特且无障碍的网页界面，同时消除 AI 生成的通用设计俗套的设计框架。
当对 UI 组件进行样式设计、审核或审计时，请在 references/<category>/<topic>/SKILL.md 中查找相应主题。
目录与快速导航
1. 反 AI 低质设计与视觉工艺 (references/anti-slop-and-craft/)
| 主题 | 子路径 | 描述 |
|---|
| no-ai-design-slop | anti-slop-and-craft/no-ai-design-slop | 被动质量门，防止 AI 默认通用设计：紫色渐变、居中悬浮卡片以及千篇一律的布局。 |
| audit-ai-design-slop | anti-slop-and-craft/audit-ai-design-slop | 诊断性审计，识别 AI 视觉缺陷、不一致元素以及以删除优先的清理方案。 |
| build-awwwards-quality-sites | anti-slop-and-craft/build-awwwards-quality-sites | Awwwards 级工艺：强烈的艺术指导、编辑级排版、GSAP 动效与真实图像。 |
| ui-ux-pro-max | anti-slop-and-craft/ui-ux-pro-max | 专业前端设计手册：排版比例、有意的留白与微交互。 |
| design-first-ui-prompting | anti-slop-and-craft/design-first-ui-prompting | 在编写前端代码之前，先进行以规格驱动的美学与交互设计提示。 |
2. 样式、令牌与品牌 (references/styling-and-tokens/)
| 主题 | 子路径 | 描述 |
|---|
| brand-guidelines | styling-and-tokens/brand-guidelines | 强制执行排版规则、语气语调、标志使用、色彩合规性与间距标准。 |
| theme-factory | styling-and-tokens/theme-factory | 精选视觉主题生成器、设计令牌、字体搭配与 CSS 变量。 |
| tailwindcss | styling-and-tokens/tailwindcss | Tailwind CSS 组件配方、布局网格、排版工具与响应式模式。 |
| unsplash-asset-images | styling-and-tokens/unsplash-asset-images | 获取高质量的真实摄影资产、人像与背景图。 |
3. 表面与页面原型 (references/surfaces-and-pages/)
| 主题 | 子路径 | 描述 |
|---|
| glass-dark-ui | surfaces-and-pages/glass-dark-ui | 毛玻璃暗色面板、伪元素渐变边框、可读对比度。 |
| skeuomorphic-ui | surfaces-and-pages/skeuomorphic-ui | 有触感的物理风格：分层渐变、堆叠的内外阴影与浮雕细节。 |
| framed-grid-layout | surfaces-and-pages/framed-grid-layout | 精度极细网格边界、L 形角支架、结构化编辑区块。 |
| landing-page | surfaces-and-pages/landing-page | 高转化率的单产品 SaaS 落地页结构、叙事弧与文案。 |
| pricing-page | surfaces-and-pages/pricing-page | 高转化率的定价表格、套餐对比矩阵、功能清单与常见问题解答。 |