frontend-design by jwynia/agent-skills
npx skills add https://github.com/jwynia/agent-skills --skill frontend-design创建独特、生产级的前端界面,避免通用的“AI 垃圾”美学。此技能结合了设计哲学指导和实用的 TypeScript 工具,用于分析现有设计并生成设计系统工件。
核心原则:选择一个清晰的美学方向并精确执行。大胆的极繁主义和精致的极简主义都可行——关键在于意图,而非强度。
在以下情况下使用:
不要在以下情况下使用:
此技能以三种模式运行:
审核现有样式、提取令牌、检查无障碍性。
# 审核 CSS 以查找设计模式和不一致之处
deno run --allow-read scripts/analyze-styles.ts styles.css
# 从现有 CSS 中提取设计令牌
deno run --allow-read scripts/extract-tokens.ts ./src --format css
# 检查无障碍性(对比度、焦点状态)
deno run --allow-read scripts/analyze-accessibility.ts component.tsx
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
创建 JSON 规范,定义要生成的内容。请参阅 assets/ 目录中的模式示例。
创建调色板、排版系统、令牌和组件。
# 生成调色板
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#2563eb" --theme warm
# 生成排版系统
deno run --allow-read --allow-write scripts/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro"
# 生成设计令牌文件
deno run --allow-read --allow-write scripts/generate-tokens.ts tokens-spec.json ./output/
# 生成组件
deno run --allow-read --allow-write scripts/generate-component.ts --name Button --framework react --styling tailwind
在创建新设计之前,审核现有代码以了解当前模式。
分析 CSS 文件以识别颜色、排版、间距和不一致之处:
deno run --allow-read scripts/analyze-styles.ts <input> [options]
Options:
--tokens <file> 与现有设计令牌进行比较
--pretty 美化输出 JSON
--format <type> 输出格式:json(默认),summary
输出包括:
将设计令牌从 CSS 文件提取为标准格式:
deno run --allow-read scripts/extract-tokens.ts <input> [options]
Options:
--format <type> 输出格式:css, scss, tailwind, style-dictionary, tokens-studio
--output-css 同时输出 CSS 变量文件
检查与设计相关的无障碍性问题:
deno run --allow-read scripts/analyze-accessibility.ts <input> [options]
Options:
--format <type> 输出格式:json, summary
--level <AA|AAA> WCAG 符合级别(默认:AA)
检查包括:
根据种子颜色或主题生成协调的调色板:
deno run --allow-read --allow-write scripts/generate-palette.ts [options] <output>
Options:
--seed <color> 主种子颜色(十六进制)
--theme <type> warm, cool, neutral, vibrant, muted, dark, light
--style <type> minimalist, bold, organic, corporate, playful
--shades 生成 50-950 色阶
--semantic 生成成功/警告/错误颜色
--contrast <lvl> 目标对比度:AA(默认),AAA
--format <type> css, scss, tailwind, tokens, json
示例规范 (palette-spec.json):
{
"seedColors": {
"primary": "#2563eb",
"accent": "#f59e0b"
},
"theme": "cool",
"generateShades": true,
"generateSemantics": true,
"contrastTarget": "AA",
"outputFormat": "css"
}
生成包含字体栈和比例的排版系统:
deno run --allow-read --allow-write scripts/generate-typography.ts [options] <output>
Options:
--display <font> 展示/标题字体族
--body <font> 正文字体族
--mono <font> 等宽字体族
--scale <type> minor-second, major-second, minor-third, major-third, perfect-fourth, golden-ratio
--base <px> 基础字体大小(默认:16)
--line-height tight, normal, relaxed
--responsive 生成响应式断点
--format <type> css, scss, tailwind, tokens
类型比例:
| 比例 | 比率 | 特点 |
|---|---|---|
| minor-second | 1.067 | 微妙,保守 |
| major-second | 1.125 | 平衡,专业 |
| minor-third | 1.200 | 层次清晰 |
| major-third | 1.250 | 存在感强 |
| perfect-fourth | 1.333 | 大胆,有冲击力 |
| golden-ratio | 1.618 | 戏剧性,艺术性 |
以多种格式生成全面的设计令牌文件:
deno run --allow-read --allow-write scripts/generate-tokens.ts <spec> <output-dir>
规范结构:
{
"name": "my-design-system",
"tokens": {
"color": { "primary": "#2563eb", "secondary": "#64748b" },
"spacing": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem" },
"typography": {
"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)" },
"border": { "radius": { "sm": "0.25rem", "md": "0.5rem" } },
"animation": { "duration": { "fast": "150ms", "normal": "300ms" } }
},
"outputFormats": ["css", "scss", "tailwind", "ts"]
}
生成具有设计风格样式的组件模板:
deno run --allow-read --allow-write scripts/generate-component.ts [options] <output-dir>
Options:
--name <name> 组件名称(必需)
--type <type> button, card, input, modal, navigation, hero, custom
--framework <fw> react, vue, svelte, html
--styling <type> css, tailwind, css-modules, styled-components, emotion
--aesthetic <type> minimal, bold, organic, brutalist, glassmorphism, neumorphism
--animation <lvl> none, subtle, expressive
--dark-mode 包含深色模式支持
--tokens <file> 使用设计令牌文件
框架输出示例:
React with Tailwind:
export function Button({ variant = 'primary', children }: ButtonProps) {
return (
<button className="px-4 py-2 rounded-lg font-medium transition-all">
{children}
</button>
);
}
Vue with scoped CSS:
<template>
<button :class="['btn', `btn--${variant}`]"><slot /></button>
</template>
<script setup lang="ts">
defineProps<{ variant?: 'primary' | 'secondary' }>();
</script>
<style scoped>.btn { /* styles */ }</style>
Svelte:
<script lang="ts">
export let variant: 'primary' | 'secondary' = 'primary';
</script>
<button class="btn btn--{variant}"><slot /></button>
<style>.btn { /* styles */ }</style>
# 1. 分析现有样式
deno run --allow-read scripts/analyze-styles.ts ./legacy/styles.css --pretty > audit.json
# 2. 从分析中提取令牌
deno run --allow-read scripts/extract-tokens.ts ./legacy/styles.css --format css > tokens.css
# 3. 根据主色生成改进的调色板
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css
# 1. 生成调色板
deno run --allow-read --allow-write scripts/generate-palette.ts \
--seed "#8b5cf6" --theme vibrant --shades --semantic --format css colors.css
# 2. 生成排版系统
deno run --allow-read --allow-write scripts/generate-typography.ts \
--display "Space Grotesk" --body "Inter" --scale major-third --responsive --format css typography.css
# 3. 生成全面的令牌
deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/
# 为 React with Tailwind 生成按钮组件
deno run --allow-read --allow-write scripts/generate-component.ts \
--name Button --framework react --styling tailwind --aesthetic bold ./components/
# 为 Vue with CSS modules 生成卡片组件
deno run --allow-read --allow-write scripts/generate-component.ts \
--name Card --framework vue --styling css-modules --aesthetic glassmorphism ./components/
# 为 Svelte 生成输入框组件
deno run --allow-read --allow-write scripts/generate-component.ts \
--name Input --framework svelte --styling css --aesthetic minimal ./components/
# 审核所有组件
deno run --allow-read scripts/analyze-accessibility.ts ./src/components --level AAA --format summary
| 脚本 | 用途 | 权限 |
|---|---|---|
analyze-styles.ts | 审核 CSS 以查找模式和不一致之处 | --allow-read |
extract-tokens.ts | 从 CSS 中提取设计令牌 | --allow-read |
analyze-accessibility.ts | 检查设计无障碍性 | --allow-read |
generate-palette.ts | 生成调色板 | --allow-read --allow-write |
generate-typography.ts | 生成排版系统 | --allow-read --allow-write |
generate-tokens.ts | 生成多格式令牌 | --allow-read --allow-write |
generate-component.ts | 生成框架组件 | --allow-read --allow-write |
避免通用的“AI 垃圾”美学。详细指南请参阅 references/design-philosophy.md。
关键原则:
切勿趋同于:
“CSS 解析失败”
“颜色对比度检查失败”
“未知框架”
“不支持的令牌格式”
references/design-philosophy.md - 详细的抗垃圾美学指南references/token-formats.md - 设计令牌格式规范references/framework-templates.md - 特定于框架的模式assets/*.json - 规范的 JSON 模式文件web-search - 研究设计灵感和趋势research-workflow - 深入研究设计系统每周安装量
1.6K
仓库
GitHub 星标数
37
首次出现
Jan 20, 2026
安全审计
安装于
opencode1.3K
codex1.3K
gemini-cli1.3K
github-copilot1.3K
amp1.3K
kimi-cli1.3K
Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. This skill combines design philosophy guidance with practical TypeScript tooling for analyzing existing designs and generating design system artifacts.
Core Principle : Choose a clear aesthetic direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Use when :
Don't use when :
This skill operates in three modes:
Audit existing styles, extract tokens, check accessibility.
# Audit CSS for design patterns and inconsistencies
deno run --allow-read scripts/analyze-styles.ts styles.css
# Extract design tokens from existing CSS
deno run --allow-read scripts/extract-tokens.ts ./src --format css
# Check accessibility (contrast, focus states)
deno run --allow-read scripts/analyze-accessibility.ts component.tsx
Create JSON specifications defining what to generate. See assets/ for schema examples.
Create palettes, typography systems, tokens, and components.
# Generate a color palette
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#2563eb" --theme warm
# Generate typography system
deno run --allow-read --allow-write scripts/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro"
# Generate design tokens file
deno run --allow-read --allow-write scripts/generate-tokens.ts tokens-spec.json ./output/
# Generate a component
deno run --allow-read --allow-write scripts/generate-component.ts --name Button --framework react --styling tailwind
Before creating new designs, audit existing code to understand current patterns.
Analyze CSS files to identify colors, typography, spacing, and inconsistencies:
deno run --allow-read scripts/analyze-styles.ts <input> [options]
Options:
--tokens <file> Compare against existing design tokens
--pretty Pretty-print JSON output
--format <type> Output format: json (default), summary
Output includes :
Extract design tokens from CSS files into standardized formats:
deno run --allow-read scripts/extract-tokens.ts <input> [options]
Options:
--format <type> Output: css, scss, tailwind, style-dictionary, tokens-studio
--output-css Also output CSS variables file
Check design-related accessibility issues:
deno run --allow-read scripts/analyze-accessibility.ts <input> [options]
Options:
--format <type> Output: json, summary
--level <AA|AAA> WCAG conformance level (default: AA)
Checks include :
Generate cohesive color palettes from seed colors or themes:
deno run --allow-read --allow-write scripts/generate-palette.ts [options] <output>
Options:
--seed <color> Primary seed color (hex)
--theme <type> warm, cool, neutral, vibrant, muted, dark, light
--style <type> minimalist, bold, organic, corporate, playful
--shades Generate 50-950 shade scale
--semantic Generate success/warning/error colors
--contrast <lvl> Target contrast: AA (default), AAA
--format <type> css, scss, tailwind, tokens, json
Example specification (palette-spec.json):
{
"seedColors": {
"primary": "#2563eb",
"accent": "#f59e0b"
},
"theme": "cool",
"generateShades": true,
"generateSemantics": true,
"contrastTarget": "AA",
"outputFormat": "css"
}
Generate typography systems with font stacks and scales:
deno run --allow-read --allow-write scripts/generate-typography.ts [options] <output>
Options:
--display <font> Display/heading font family
--body <font> Body text font family
--mono <font> Monospace font family
--scale <type> minor-second, major-second, minor-third, major-third, perfect-fourth, golden-ratio
--base <px> Base font size (default: 16)
--line-height tight, normal, relaxed
--responsive Generate responsive breakpoints
--format <type> css, scss, tailwind, tokens
Type scales :
| Scale | Ratio | Character |
|---|---|---|
| minor-second | 1.067 | Subtle, conservative |
| major-second | 1.125 | Balanced, professional |
| minor-third | 1.200 | Clear hierarchy |
| major-third | 1.250 | Strong presence |
| perfect-fourth | 1.333 | Bold, impactful |
| golden-ratio | 1.618 | Dramatic, artistic |
Generate comprehensive design token files in multiple formats:
deno run --allow-read --allow-write scripts/generate-tokens.ts <spec> <output-dir>
Specification structure :
{
"name": "my-design-system",
"tokens": {
"color": { "primary": "#2563eb", "secondary": "#64748b" },
"spacing": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem" },
"typography": {
"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)" },
"border": { "radius": { "sm": "0.25rem", "md": "0.5rem" } },
"animation": { "duration": { "fast": "150ms", "normal": "300ms" } }
},
"outputFormats": ["css", "scss", "tailwind", "ts"]
}
Generate component templates with design-focused styling:
deno run --allow-read --allow-write scripts/generate-component.ts [options] <output-dir>
Options:
--name <name> Component name (required)
--type <type> button, card, input, modal, navigation, hero, custom
--framework <fw> react, vue, svelte, html
--styling <type> css, tailwind, css-modules, styled-components, emotion
--aesthetic <type> minimal, bold, organic, brutalist, glassmorphism, neumorphism
--animation <lvl> none, subtle, expressive
--dark-mode Include dark mode support
--tokens <file> Use design tokens file
Framework output examples :
React with Tailwind:
export function Button({ variant = 'primary', children }: ButtonProps) {
return (
<button className="px-4 py-2 rounded-lg font-medium transition-all">
{children}
</button>
);
}
Vue with scoped CSS:
<template>
<button :class="['btn', `btn--${variant}`]"><slot /></button>
</template>
<script setup lang="ts">
defineProps<{ variant?: 'primary' | 'secondary' }>();
</script>
<style scoped>.btn { /* styles */ }</style>
Svelte:
<script lang="ts">
export let variant: 'primary' | 'secondary' = 'primary';
</script>
<button class="btn btn--{variant}"><slot /></button>
<style>.btn { /* styles */ }</style>
# 1. Analyze existing styles
deno run --allow-read scripts/analyze-styles.ts ./legacy/styles.css --pretty > audit.json
# 2. Extract tokens from the analysis
deno run --allow-read scripts/extract-tokens.ts ./legacy/styles.css --format css > tokens.css
# 3. Generate improved palette from dominant color
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css
# 1. Generate color palette
deno run --allow-read --allow-write scripts/generate-palette.ts \
--seed "#8b5cf6" --theme vibrant --shades --semantic --format css colors.css
# 2. Generate typography system
deno run --allow-read --allow-write scripts/generate-typography.ts \
--display "Space Grotesk" --body "Inter" --scale major-third --responsive --format css typography.css
# 3. Generate comprehensive tokens
deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/
# Generate button component for React with Tailwind
deno run --allow-read --allow-write scripts/generate-component.ts \
--name Button --framework react --styling tailwind --aesthetic bold ./components/
# Generate card component for Vue with CSS modules
deno run --allow-read --allow-write scripts/generate-component.ts \
--name Card --framework vue --styling css-modules --aesthetic glassmorphism ./components/
# Generate input for Svelte
deno run --allow-read --allow-write scripts/generate-component.ts \
--name Input --framework svelte --styling css --aesthetic minimal ./components/
# Audit all components
deno run --allow-read scripts/analyze-accessibility.ts ./src/components --level AAA --format summary
| Script | Purpose | Permissions |
|---|---|---|
analyze-styles.ts | Audit CSS for patterns and inconsistencies | --allow-read |
extract-tokens.ts | Extract design tokens from CSS | --allow-read |
analyze-accessibility.ts | Check design accessibility | --allow-read |
generate-palette.ts |
Avoid generic "AI slop" aesthetics. See references/design-philosophy.md for detailed guidance.
Key principles :
Never converge on :
"CSS parsing failed"
"Color contrast check failed"
"Unknown framework"
"Token format not supported"
references/design-philosophy.md - Detailed anti-slop aesthetics guidereferences/token-formats.md - Design token format specificationsreferences/framework-templates.md - Framework-specific patternsassets/*.json - JSON schema files for specificationsweb-search - Research design inspiration and trendsresearch-workflow - Deep dive into design systemsWeekly Installs
1.6K
Repository
GitHub Stars
37
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode1.3K
codex1.3K
gemini-cli1.3K
github-copilot1.3K
amp1.3K
kimi-cli1.3K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
| Generate color palettes |
--allow-read --allow-write |
generate-typography.ts | Generate typography systems | --allow-read --allow-write |
generate-tokens.ts | Generate multi-format tokens | --allow-read --allow-write |
generate-component.ts | Generate framework components | --allow-read --allow-write |