Luispitik/ux-ui-premium-direction-style-selector
GitHub: Luispitik/ux-ui-premium-direction-style-selector
一个基于Claude Code的技能，用于在Next.js项目中选择和生成视觉设计方向。
Stars: 27 | Forks: 2
# UX/UI 高级方向风格选择器 — Claude Code 技能
为任意 Next.js + Tailwind CSS 项目部署 8 个截然不同的视觉方向演示。进行并排比较，选择您喜欢的风格，然后自动生成可用于生产的主题令牌和组件。
## 功能介绍
当被调用时，此技能将：
1. **在 `/demo/` 目录下生成 5-8 个演示页面** — 每个都是具有独特视觉标识的完整页面
2. **让您选择最喜欢的** — 并排比较排版、颜色、布局和动画
3. **应用您的选择** — 生成匹配所选方向的 Tailwind 配置、CSS 变量和基础组件
### 8 种设计方向
| 方向 | 参考风格 | 情绪 | 最佳适用场景 |
|------|----------|------|--------------|
| **衬线编辑体** | The Economist, Monocle | 知识权威感 | 咨询、媒体、思想领导力 |
| **瑞士极简风** | Dieter Rams, Braun | 功能清晰感 | SaaS、工具、开发者产品 |
| **奢华暗色暖调** | Aesop, Byredo | 亲密温暖感 | 高端服务、酒店业 |
| **企业粗体风** | Accenture, McKinsey | 结构化自信感 | 企业级、B2B |
| **低调优雅风** | Kinfolk, Cereal | 编辑平静感 | 创意、健康、编辑类 |
| **新野蛮主义** | Gumroad redesign | 原始不羁感 | 创业公司、创意机构 |
| **趣味渐变风** | Linear, Stripe | 现代 SaaS 活力感 | SaaS、科技初创公司 |
| **复古终端风** | Stripe CLI, VSCode | 黑客可信感 | 开发工具、CLI 产品 |
每种方向都包含完整的规格说明：
- 符合 WCAG 对比度要求的色板
- 字体排版（Google Fonts、字重、字号）
- 布局模式和区段结构
- 动画系统（滚动显示、悬停、微交互）
- 移动端优先的响应式规格（375px → 1280px）
- 无障碍设计（焦点状态、触摸目标、减少动画）
## 安装说明
```
npx skills add Luispitik/ux-ui-premium-direction-style-selector@ux-ui-premium-direction-style-selector
```
或全局安装：
```
npx skills add Luispitik/ux-ui-premium-direction-style-selector@ux-ui-premium-direction-style-selector -g -y
```
## 使用方法
在 Claude Code 中，尝试说：
- “风格选择器”
- “选择风格”
- “视觉替代方案”
- “选择一个设计方向”
- “比较不同的美感”
### 智能方向选择
此技能会根据您的项目类型自动选择 5 个最相关的方向：
| 项目类型 | 推荐方向 |
|----------|----------|
| 落地页 | 编辑体、极简、奢华、企业、Kinfolk |
| SaaS / Web 应用 | 极简、企业、趣味、野蛮主义、复古 |
| 电商 | 极简、奢华、企业、趣味、Kinfolk |
| 仪表盘 | 极简、企业、趣味、复古、野蛮主义 |
| 作品集 | 编辑体、奢华、Kinfolk、野蛮主义、趣味 |
| 开发者工具 | 极简、野蛮主义、复古、趣味、企业 |
说“显示全部 8 个”即可查看所有方向，无论项目类型。
### 选择后：应用方向
选择后，此技能将生成：
- **`tailwind.config.ts`** — 主题令牌（颜色、字体、动画）
- **`globals.css`** — CSS 变量 + 减少动画的媒体查询
- **基础组件** — 按钮、卡片、区块、容器、导航栏、滚动显示
- **字体设置** — 在根布局中配置 next/font/google
然后清理 `/demo/` 目录并验证构建。
## 项目类型适配
除了落地页，此技能还会为以下类型调整演示结构：
- **Web 应用 / SaaS** — 功能展示、工作流程说明、定价层级
- **仪表盘** — 数据可视化模拟、侧边栏导航、数据表格
- **电商** — 产品网格、分类、信任标识
- **作品集** — 项目网格、关于区块、用户评价
## 环境要求
- Next.js App Router 项目
- 已配置 Tailwind CSS
- `src/app/` 目录结构
## 包含内容
```
ux-ui-premium-direction-style-selector/
SKILL.md # Main skill (workflow, steps 1-10)
references/
directions.md # Complete specs for all 8 directions
# - Palettes with hex codes
# - Typography (fonts, weights, sizes)
# - Layout patterns
# - Animation system + code snippets
# - Accessibility (contrast ratios, focus)
# - Mobile-first specs (375px)
# - Copy tone guidelines
```
## 内置无障碍功能
每个生成的演示都包含：
- WCAG AA 色彩对比度（每种方向都预先计算）
- 所有交互元素上可见的焦点轮廓
- 跳过至主内容链接
- 语义化 HTML（正确的标题层级、地标）
- `prefers-reduced-motion` 支持（所有动画自动禁用）
- 移动端触摸目标大于等于 44px
- 正确的 `lang` 属性
## 内置动画系统
每种方向都有独特的动画个性：
| 方向 | 动画风格 |
|------|----------|
| 编辑体 | 淡入 + 上滑，金色分隔线展开 |
| 极简风 | **无动画** — Rams: “尽可能少的设计” |
| 奢华风 | 仅缓慢淡入（800ms），英雄区电影感视差 |
| 企业风 | 快速上滑（500ms），数字统计动画，卡片悬停提升 |
| Kinfolk | 最慢的淡入（1000ms），无移动 — 静止感 |
| 野蛮主义 | **立即出现** — 卡片悬停旋转，硬阴影生长 |
| 趣味风 | 渐变微光，玻璃发光，英雄区光标追踪 |
| 复古风 | 打字机效果，闪烁光标，可选 CRT 扫描线 |
所有动画都自动支持 `prefers-reduced-motion`。
## 作者
由 **Luis Salgado** 创建 — **NorteIA** / **SalgadoIA**
- 网站：[salgadoia.com](https://salgadoia.com)
- LinkedIn：[linkedin.com/in/luis-salgado-salgado](https://linkedin.com/in/luis-salgado-salgado)
## 许可协议
MIT
标签：CSS框架, Tailwind CSS, UI主题, UI设计, UX设计, Web组件, Web设计, 主题提取, 交互设计, 前端技术栈, 动画效果, 可访问性, 响应式设计, 数据可视化, 演示部署, 用户界面模板, 组件生成, 视觉方向, 设计系统