【Skill 创作】前端设计风格推荐助手 —— 一句话描述产品类型，自动推荐 3-5 个风格差异明显的设计规范

张三520 · 2026 年5 月 22 日 03:14

1、Skill 简介

这是一个帮助前端开发者和设计师快速选择网页设计风格的 Skill。你只需要描述你的产品类型（比如"AI 写作助手"、“金融交易平台”），它就会从 47+ 个顶级品牌设计规范中，自动推荐 3-5 个风格差异最大的方案，并输出完整的 CSS 变量、字体 fallback 链和组件规范。

适合谁用：

前端开发者做新项目时纠结选什么设计风格
设计师需要快速出方案给客户看差异
独立开发者没有设计师，想直接参考大厂规范

2、使用场景

我为什么想做它？

作为一个前端开发者，我经常遇到这个问题：

“新项目要开始了，用什么设计风格好？”
“快速做个demo出来，用做演示”

去 Dribbble 或 Behance 找灵感，选择太多反而更纠结。直接抄一个品牌的官网，又担心不适合自己的产品类型。而且每个品牌的 DESIGN.md 文档都很长，要一个个看效率太低。

做出来之前的问题：

花几小时浏览各种设计网站，最后更纠结了
参考了某个品牌的设计，但不知道同类还有哪些选择
自己调整颜色、圆角、阴影，结果越改越不像
字体 fallback 链写不完整，导致不同系统显示效果差异大

做出来之后能省掉的动作：

不用一个个翻品牌设计文档
不用自己对比风格差异
不用纠结 CSS 变量命名
不用担心字体 fallback 遗漏

原本需要 2-3 小时的调研工作，现在一句话 30 秒搞定。

3、创作过程

第一步：整理设计规范数据源

我收集了 awesome-design-md 品牌设计规范库中的 47+ 个品牌，按产品类型分成 6 大类：

分类	品牌数量	典型品牌
SaaS 工具	7	Linear、Vercel、Notion、Stripe
AI 科技	8	Claude、OpenAI、x.ai、Runway
金融交易	7	Binance、Coinbase、Revolut
内容社交	8	Twitter、Spotify、Discord、TikTok
高端品牌	8	Apple、Tesla、Chanel、Rolex
创意平台	9	Framer、Figma、Spline、Rive

每个品牌提取了：风格关键词、主色调、字体规范、差异化特点、适用场景。

第二步：设计推荐逻辑

核心算法是风格差异最大化：

用户输入 "AI 写作助手"
    ↓
匹配分类：AI 科技 + SaaS 工具
    ↓
从分类中筛选 3-5 个品牌在以下维度差异最大：
- 色调（冷色 vs 暖色 vs 中性）
- 明度（深色模式 vs 浅色模式）
- 复杂度（简约 vs 丰富）
- 字体风格（几何 vs 人文 vs 衬线）
- 圆角风格（锐利 vs 柔和 vs 圆形）
    ↓
输出每个品牌的完整规范

第三步：强制规范约束

为了保证输出质量，我设定了四条强制规则：

颜色必须用 CSS 变量 —— 禁止硬编码色值
字体必须写完整 fallback 链 —— 从品牌字体到系统字体全覆盖
字号字重行高必须按规范 —— 严格遵循原品牌的 typography
组件规范不可自行修改 —— 圆角、阴影、hover 状态严格遵循原品牌

第四步：构建 Skill 结构

frontend-design-style-skill/
├── SKILL.md                    # 主文档：决策矩阵 + 工作流
├── references/
│   ├── categories/             # 6大分类索引
│   │   ├── saas-tools.md
│   │   ├── ai-tech.md
│   │   ├── fintech.md
│   │   ├── social-content.md
│   │   ├── luxury-brand.md
│   │   └── creative-platform.md
│   ├── design-specs.md         # 强制设计规范
│   └── examples/               # 示例文档
│       └── example-recommendation.md