Skill 简介
做网站的时候选配色、选字体这些事挺耗时间的。我做了个叫 ColorSpace 的 Skill，里面放了 Stripe、Notion、Vercel、Apple 等 58 个品牌的设计规范数据。你告诉它要做什么类型的网页，它会推荐几个合适的品牌风格，选一个之后它会按那个品牌的配色、字体、组件规范来生成页面。
使用场景
平时让 AI 帮忙写页面，功能上一般没问题，但视觉效果经常不太行。配色、间距、字体这些没个标准，出来的页面总感觉差点意思。
后来想到一个办法：与其让 AI 自己"发挥"，不如直接给它一套现成的设计规范照着做。比如告诉它"按 Notion 的设计规范来"，Notion 用什么蓝、标题多大、按钮什么样式，这些数据都是现成的。AI 有了明确的参照，生成的页面质量确实好不少。
这个 Skill 就是把这个过程自动化了
创作过程
大概分了三步。
第一步是整理数据。 原始design.md数据来自 GitHub 上的 awesome-design-md 项目，60 多个品牌的设计系统，每个品牌一份 DESIGN.md，包含配色、字体、组件、布局、阴影、响应式等内容。但 58 个品牌直接列出来用户没法选，所以我按网页类型分了 6 类：SaaS 工具、AI 科技、金融交易、内容社交、高端品牌、创意平台。每个品牌提取了风格关键词和主色调，做成一个分类索引。
第二步是设计推荐和生成的工作流。 推荐这块，根据用户描述的网页类型匹配分类，从中挑 3-5 个风格差异大一点的推荐。生成这块，每个品牌的 DESIGN.md 有 9 个章节，全部读完太长，所以设了优先级：先读第 9 章（这章本身就是写给 AI 用的提示词指南），再读配色和字体，组件和布局按需读。
第三步是写代码生成规则。 主要规定了几件事：颜色必须用 CSS 变量、字号字重行高必须按规范来、字体要写 fallback 链、组件的圆角阴影 hover 状态不能自己改。
单个设计规范结构
使用步骤
把仓库里的Skill下载出来直接导入到TRAE SOLO或 TRAE ide里，直接跟 AI 说你要做什么网页就行，比如"帮我做一个 SaaS 产品的官网"或者"create a portfolio website"。Skill 会自动触发，推荐几个品牌风格让你选，每个都带风格关键词和主色调。选好之后 AI 读取对应品牌的设计规范，生成网页代码。
效果展示
试了一下，跟它说"帮我做一个 AI 写作工具的落地页"，它推荐了 Claude（暖色调）、Cursor（紫色渐变）、Vercel（极简黑白）三个。选了 Vercel 之后，生成的页面配色、字体、按钮样式都跟 Vercel 官网挺像的，代码里也用了 CSS 变量管理颜色，响应式和暗色模式都处理了。
当然也不是完美的，有些细节还是需要手动调一下，但比起从零开始已经省了不少事。
