# 前端设计创建独特的生产级前端界面，避免通用的“AI slop”美学。该技能将设计理念指导与实用的 TypeScript 工具相结合，用于分析现有设计并生成设计系统工件。 **核心原则**：选择明确的美学方向并精确执行。大胆的极简主义和精致的极简主义都有效——关键是意向性，而不是强度。 ## 何时使用此技能 **使用时**： * 构建 Web 组件、页面或应用程序 * 审核现有 CSS 设计不一致的地方 * 从遗留代码库中提取设计令牌 * 生成调色板和排版系统 * 跨框架创建组件模板 * 检查设计元素的可访问性合规性 **当**时不要使用： * 简单的文字内容更改 * 仅后端工作 * 非视觉功能 ## 先决条件 * **Deno** 运行时（用于脚本执行） * 可选：用于分析的现有 CSS/设计文件 * 可选：设计令牌文件以供参考 ## 快速入门该技能以三种模式运作： ### 1\.分析模式审核现有样式、提取标记、检查可访问性。 # 审核 CSS 的设计模式和不一致之处 deno run --允许读取脚本/analyze-styles.ts styles.css # 从现有 CSS 中提取设计标记 deno run --allow-read script/extract-tokens.ts ./src --format css # 检查可访问性（对比度、焦点状态） deno run --allow-read script/analyze-accessibility.ts component.tsx ### 2\.指定模式创建 JSON 规范来定义要生成的内容。有关架构示例，请参阅“assets/”。 ### 3\.生成模式创建调色板、排版系统、标记和组件。 # 生成调色板 deno run --allow-read --allow-write 脚本/generate-palette.ts --seed "#2563eb" --主题温暖 # 生成排版系统 deno run --allow-read --allow-write script/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro" # 生成设计令牌文件 deno run --allow-read --allow-write 脚本/generate-tokens.ts tokens-spec.json ./output/ # 生成组件 deno run --allow-read --allow-write script/generate-component.ts --name Button --framework React --styling tailwind ** ** ## 说明 ### 第 1 阶段：分析（可选但推荐）在创建新设计之前，审核现有代码以了解当前模式。 #### 1a。风格分析分析 CSS 文件以识别颜色、排版、间距和不一致之处： deno run --allow-read script/analyze-styles.ts <输入> [选项] 选项： --tokens <文件> 与现有设计令牌进行比较 --pretty 漂亮打印 JSON 输出 --format 输出格式：json（默认）、摘要 **输出包括**： * 具有十六进制标准化的颜色使用清单 * 版式图案（字体、大小、粗细） * 间距值分布 * 不一致之处和建议 #### 1b。代币提取将 CSS 文件中的设计标记提取为标准化格式： deno run --allow-read script/extract-tokens.ts <输入> [选项] 选项： --format 输出：css、scss、tailwind、style-dictionary、tokens-studio --output-css 也输出 CSS 变量文件 #### 1c。无障碍审核检查与设计相关的可访问性问题： deno run --allow-read script/analyze-accessibility.ts <输入> [选项] 选项： --format <类型> 输出：json，摘要 --level WCAG 一致性级别（默认值：AA） **检查包括**： * 色彩对比度 * 焦点指示器的存在 * 触摸目标尺寸 * 尊重运动偏好 ** ** ### 第二阶段：生成 #### 2a。调色板生成从种子颜色或主题生成有凝聚力的调色板： deno run --allow-read --allow-write script/generate-palette.ts [选项] <输出> 选项： --seed <颜色> 主要种子颜色（十六进制） --theme 暖色、冷色、中性、活力、柔和、深色、浅色 --style 简约、大胆、有机、企业、俏皮 --shades 生成 50-950 色阶 --semantic 生成成功/警告/错误颜色 --contrast 目标对比度：AA（默认）、AAA --format <类型> css、scss、tailwind、tokens、json **规范示例** (`palette-spec.json`)： { “种子颜色”：{ “主要”：“#2563eb”， “口音”：“#f59e0b” }, “主题”：“酷”， “generateShades”：正确， “generateSemantics”：正确， “对比目标”：“AA”， “输出格式”：“CSS” } #### 2b。排版系统生成生成具有字体堆栈和比例的版式系统： deno run --allow-read --allow-write script/generate-typography.ts [选项] <输出> 选项： --display 显示/标题字体系列 --body 正文字体系列 --mono 等宽字体系列 --scale <类型> 小二度、大二度、小三度、大三度、纯四度、黄金比例 --base 基本字体大小（默认值：16） --行高紧、正常、放松 --responsive 生成响应断点 --format <类型> css、scss、tailwind、令牌 **键入比例**：规模|比率|性格 ---|---|--- 小二度| 1.067 | 1.067微妙、保守大二度| 1.125 | 1.125平衡、专业小三度| 1.200 | 1.200层次清晰大三度| 1.250 | 1.250存在感强完美第四 | 1.333 | 1.333大胆、有影响力黄金比例| 1.618 | 1.618戏剧性、艺术性 #### 2c。设计代币生成生成多种格式的综合设计令牌文件： deno run --allow-read --allow-write script/generate-tokens.ts

**规格结构**： { “名称”：“我的设计系统”， “令牌”：{ “颜色”：{“主要”：“#2563eb”，“次要”：“#64748b”}， "间距": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem" }, “排版”：{ "fontFamilies": { "display": "Playfair Display", "body": "Inter" }, “fontSizes”：{“sm”：“0.875rem”，“base”：“1rem”，“lg”：“1.125rem”} }, "shadow": { "sm": "0 1px 2px rgba(0,0,0,0.05)" }, "边框": { "半径": { "sm": "0.25rem", "md": "0.5rem" } }, “动画”：{“持续时间”：{“快速”：“150毫秒”，“正常”：“300毫秒”}} }, “outputFormats”：[“css”，“scss”，“tailwind”，“ts”] } #### 2d。组件生成生成具有以设计为中心的样式的组件模板： deno run --allow-read --allow-write script/generate-component.ts [选项] <输出目录> 选项： --name <名称> 组件名称（必填） --type 按钮、卡片、输入、模态、导航、英雄、自定义 --framework 反应、vue、svelte、html --styling css、tailwind、css-modules、styled-components、emotion --aesthetic 简约、大胆、有机、野兽派、玻璃形态、新形态 --animation 无，微妙，富有表现力 --dark-mode 包括暗模式支持 --tokens 使用设计标记文件 **框架输出示例**：与顺风反应：导出函数 Button({variant = 'primary', Children }: ButtonProps) { 返回（ <脚本设置lang =“ts”> DefineProps<{ 变体？: '主要' | '次要' }>(); .btn { /* 样式 */ } 苗条： <脚本语言=“ts”> 导出 let 变体：'primary' | '次要' = '主要'; ** ** ## 示例 ### 示例 1：审核旧版 CSS 并使其现代化 # 1.分析现有样式 deno run --allow-read script/analyze-styles.ts ./legacy/styles.css --pretty >audit.json # 2. 从分析中提取标记 deno run --allow-read script/extract-tokens.ts ./legacy/styles.css --format css > tokens.css # 3. 从主色生成改进的调色板 deno run --allow-read --allow-write 脚本/generate-palette.ts --seed "#336699" --shades --format csslette.css ### 示例 2：从头开始创建设计系统 # 1.生成调色板 deno run --allow-read --allow-write 脚本/generate-palette.ts \ --seed "#8b5cf6" --主题充满活力 --shades --semantic --format css colors.css # 2. 生成排版系统 deno run --allow-read --allow-write 脚本/generate-typography.ts \ --display "Space Grotesk" --body "Inter" --scale Major-third --responsive --format csstypography.css # 3.生成综合代币 deno run --allow-read --allow-write 脚本/generate-tokens.ts design-spec.json ./tokens/ ### 示例3：生成组件库 # 使用 Tailwind 为 React 生成按钮组件 deno run --allow-read --allow-write 脚本/generate-component.ts \ --name Button --framework React --styling tailwind --aesthetic 粗体 ./components/ # 使用 CSS 模块为 Vue 生成卡片组件 deno run --allow-read --allow-write 脚本/generate-component.ts \ --name Card --framework vue --styling css-modules --aesthetic glassmorphism ./components/ # 为 Svelte 生成输入 deno run --allow-read --allow-write 脚本/generate-component.ts \ --name 输入 --framework svelte --styling css --aesthetic minimise ./components/ ### 示例 4：启动前的可访问性检查 # 审核所有组件 deno run --allow-read script/analyze-accessibility.ts ./src/components --level AAA --format 摘要 ** ** ## 脚本参考脚本 |目的|权限 ---|---|--- `分析样式.ts` |审核 CSS 的模式和不一致之处 | `--允许读取` `extract-tokens.ts` |从 CSS 中提取设计标记 | `--允许读取` `分析-accessibility.ts` |检查设计的可访问性 | `--允许读取` `生成调色板.ts` |生成调色板 | `--允许读取 --允许写入` `生成版式.ts` |生成排版系统 | `--允许读取 --允许写入` `生成令牌.ts` |生成多格式令牌 | `--允许读取 --允许写入` `生成组件.ts` |生成框架组件 | `--允许读取 --允许写入` ** ** ## 设计理念避免通用的“AI slop”美学。有关详细指导，请参阅“references/design-philosophy.md”。 **关键原则**： * **排版** ：选择独特的字体，而不是默认字体（避免 Arial、Inter、Roboto） * **颜色**：带有鲜明口音的主色调，而不是胆怯的调色板 * **运动**：通过分散的微交互精心安排的揭示 * **构图**：不对称、重叠、破坏网格的元素 * **纹理**：渐变、噪点、图案 - 非平面纯色 **永远不要集中在**： * 白色背景上的紫色渐变 * 系统字体或过度使用的字体系列 * 可预测的基于卡片的布局 * 千篇一律的 Bootstrap 美学 ** ** ## 常见问题 **“CSS解析失败”** * 确保有效的 CSS 语法 * SCSS/PostCSS可能需要先进行预处理 **“颜色对比度检查失败”** * 检查无法解析的 CSS 变量 * 提供实际的颜色值或标记文件 **“未知框架”** * 支持：react、vue、svelte、html * 检查拼写和小写字母 **“不支持令牌格式”** * 支持：css、scss、tailwind、style-dictionary、tokens-studio、json、ts ** ** ## 其他资源 * `references/design-philosophy.md` \-详细的防坡美学指南 * `references/token-formats.md` \- 设计 token 格式规范 * `references/framework-templates.md` \- 特定于框架的模式 * `assets/*.json` \- 用于规范的 JSON 架构文件 ** ** ## 相关技能 * `web-search` \- 研究设计灵感和趋势 * `研究工作流程` \- 深入研究设计系统

前端设计

包含技能