Back to Details

distinctive-frontend-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Distinctive Frontend Design Skill

独特前端设计 Skill

Operator Context

操作方上下文

This skill operates as an operator for frontend design workflows, configuring Claude's behavior for creative aesthetic development that systematically avoids generic outputs. It implements the Exploration-First architectural pattern -- full context analysis and aesthetic exploration before any implementation.
本Skill作为前端设计工作流的操作方，配置Claude的行为以实现系统性避免通用输出的创意美学开发。它采用探索优先架构模式——在任何实现前完成全面的上下文分析与美学探索。

Hardcoded Behaviors (Always Apply)

硬编码行为（始终适用）

  • CLAUDE.md Compliance: Read and follow repository CLAUDE.md before execution
  • Over-Engineering Prevention: Only implement what is directly requested; keep solutions focused on distinctive aesthetics, not unnecessary abstractions or design system scaffolding
  • Exploration-First Workflow: ALWAYS complete aesthetic exploration (Phase 1) before any implementation; never jump to code with first-instinct choices
  • Anti-Pattern Prevention: NEVER use banned fonts (Inter, Roboto, Arial, Helvetica, system fonts, Space Grotesk), purple gradients on white, or other cliches from 
    references/anti-patterns.json
  • Context-Driven Decisions: ALL design choices must be justified by project context, not convenience or defaults
  • Validation Required: MUST run validation scripts before finalizing design specifications
  • Variety Enforcement: NEVER reuse the same aesthetic choices across different projects; check project history
  • 遵循CLAUDE.md规范：执行前阅读并遵循仓库中的CLAUDE.md
  • 防止过度设计：仅实现直接要求的内容；解决方案聚焦于独特美学，避免不必要的抽象或设计系统脚手架
  • 探索优先工作流：在任何实现前必须完成美学探索（第一阶段）；绝不能仅凭第一直觉直接编写代码
  • 防止反模式：绝不使用禁用字体（Inter、Roboto、Arial、Helvetica、系统字体、Space Grotesk）、白色背景上的紫色渐变，或
    references/anti-patterns.json
    中的其他陈词滥调
  • 基于上下文的决策：所有设计选择必须由项目上下文证明合理性，而非基于便利性或默认选项
  • 强制验证：在最终确定设计规范前必须运行验证脚本
  • 强制多样性：绝不跨项目重复使用相同的美学选择；检查项目历史

Default Behaviors (ON unless disabled)

默认行为（除非禁用否则启用）

  • Concise Reporting: Show validation results rather than describing them; be specific about aesthetic choices with hex values and font names
  • Temporary File Cleanup: Remove exploration artifacts at completion; keep only final specifications and validation reports
  • Diverse Options: Provide 3-5 distinct aesthetic directions during exploration phase
  • Cultural Research: Research and incorporate cultural/thematic inspiration relevant to project context
  • Typography Excellence: Prioritize beautiful, unexpected font combinations from curated catalog
  • Animation Orchestration: Plan choreographed sequences for high-impact moments only; resist animating everything
  • Atmospheric Backgrounds: Create depth through layered effects; never use flat solid colors
  • 简洁报告：展示验证结果而非描述结果；明确说明美学选择，包含十六进制颜色值和字体名称
  • 临时文件清理：完成后移除探索工件；仅保留最终规范和验证报告
  • 多样化选项：在探索阶段提供3-5种不同的美学方向
  • 文化研究：研究并融入与项目上下文相关的文化/主题灵感
  • 卓越排版：优先从精选目录中选择美观、出人意料的字体组合
  • 动画编排：仅为高影响力时刻规划编排序列；避免对所有元素添加动画
  • 氛围背景：通过分层效果创造深度；绝不使用纯色平背景

Optional Behaviors (OFF unless enabled)

可选行为（除非启用否则禁用）

  • Design System Generation: Create comprehensive design tokens and component library
  • Accessibility Auditing: Full WCAG compliance checking beyond basic contrast
  • Performance Profiling: Detailed animation performance analysis and optimization
  • Dark Mode Variants: Automatic dark theme generation with adjusted glow/pattern opacities
  • 设计系统生成：创建全面的设计令牌和组件库
  • 可访问性审计：超出基础对比度的完整WCAG合规性检查
  • 性能分析：详细的动画性能分析与优化
  • 深色模式变体：自动生成调整光晕/图案不透明度的深色主题

What This Skill CAN Do

本Skill可实现的功能

  • Guide systematic aesthetic exploration before implementation
  • Validate design choices against anti-pattern database
  • Generate diverse font recommendations by aesthetic category
  • Create context-driven color palettes from cultural/thematic sources
  • Plan high-impact animation choreography with easing curves
  • Design atmospheric backgrounds with layered gradient/pattern/texture effects
  • Audit existing designs for generic patterns and "AI slop" signals
  • Provide concrete CSS/React/Tailwind implementation guidance
  • Score designs on distinctiveness metrics with actionable feedback
  • 在实现前指导系统性美学探索
  • 对照反模式数据库验证设计选择
  • 按美学类别生成多样化字体推荐
  • 从文化/主题来源创建基于上下文的调色板
  • 规划带有缓动曲线的高影响力动画编排
  • 设计带有分层渐变/图案/纹理效果的氛围背景
  • 审核现有设计中的通用模式和「AI同质化设计」信号
  • 提供具体的CSS/React/Tailwind实现指导
  • 按独特性指标为设计评分并提供可操作反馈

What This Skill CANNOT Do

本Skill无法实现的功能

  • Generate pixel-perfect mockups (provides specifications and code, not visual design files)
  • Replace human creativity (guides and validates, but requires creative direction from user)
  • Guarantee uniqueness against all existing designs on the internet
  • Auto-generate complete design systems (focuses on aesthetic distinctiveness, not comprehensive systems)
  • Handle backend, API, or data visualization concerns
  • Validate against specific brand guidelines without those guidelines provided
  • 生成像素级完美的原型图（提供规范和代码，而非视觉设计文件）
  • 替代人类创意（仅提供指导和验证，需要用户提供创意方向）
  • 保证与互联网上所有现有设计都不同
  • 自动生成完整的设计系统（聚焦于美学独特性，而非全面系统）
  • 处理后端、API或数据可视化相关问题
  • 在未提供特定品牌指南的情况下对照指南验证

Instructions

操作步骤

Phase 1: Context Discovery

第一阶段：上下文发现

Goal: Understand the project deeply before making any aesthetic decisions.
Step 1: Gather context by asking (adapt based on what is already known):
  1. Purpose: What is this frontend for? (portfolio, SaaS product, creative showcase, documentation, landing page)
  2. Audience: Who will use it? (developers, artists, enterprise users, general public, specific demographics)
  3. Emotion: What should users feel? (professional, playful, sophisticated, rebellious, calm, energetic)
  4. Cultural context: Any geographic, cultural, or thematic associations? (Japanese minimalism, industrial, retro, academic)
  5. Constraints: Accessibility requirements, performance budgets, existing brand elements to preserve?
  6. Tech stack: React, Vue, vanilla HTML/CSS, Next.js, framework preferences?
  7. Previous projects: Any recent frontend work? (to ensure variety across projects)
Step 2: Define 2-3 aesthetic directions using 
references/color-inspirations.json
and 
references/font-catalog.json
as starting points.
Example directions and what they mean:
  • Neo-Brutalist Technical: Bold typography, harsh contrasts, geometric precision, industrial textures
  • Warm Artisan: Handcrafted feel, organic colors, subtle textures, serif elegance
  • Midnight Synthwave: Dark backgrounds, neon accents, retro-futurism, gradient glows
  • Botanical Minimal: Natural greens, generous whitespace, serif elegance, organic shapes
  • Arctic Technical: Cool blues, sharp geometry, monospace accents, clean precision
Step 3: Output 
aesthetic_direction.json
with chosen direction(s) and contextual justification. See 
references/implementation-examples.md
for template.
Gate: Aesthetic direction defined with contextual justification linking project purpose, audience, and emotion to chosen direction. Do NOT proceed without this gate passing.
目标：在做出任何美学决策前深入理解项目。
步骤1：收集上下文，通过询问以下问题（根据已知信息调整）：
  1. 用途：这个前端用于什么场景？（作品集、SaaS产品、创意展示、文档、着陆页）
  2. 受众：谁会使用它？（开发者、艺术家、企业用户、普通大众、特定人群）
  3. 情感传递：用户应该产生什么感受？（专业、有趣、精致、叛逆、平静、充满活力）
  4. 文化背景：是否有地理、文化或主题关联？（日式极简主义、工业风、复古风、学术风）
  5. 约束条件：可访问性要求、性能预算、需要保留的现有品牌元素？
  6. 技术栈：React、Vue、原生HTML/CSS、Next.js，或偏好的框架？
  7. 过往项目：最近有过哪些前端工作？（确保跨项目的多样性）
步骤2：定义2-3种美学方向，以
references/color-inspirations.json
和
references/font-catalog.json
为起点。
示例方向及含义：
  • 新野兽派技术风：大胆排版、强烈对比、几何精度、工业纹理
  • 温暖工匠风：手工质感、有机色彩、微妙纹理、优雅衬线体
  • 午夜合成波风：深色背景、霓虹点缀、复古未来主义、渐变光晕
  • 植物极简风：自然绿色、充足留白、优雅衬线体、有机形状
  • 北极技术风：冷蓝色调、锐利几何、等宽字体点缀、干净精准
步骤3：输出
aesthetic_direction.json
，包含选定的方向及上下文合理性说明。参考
references/implementation-examples.md
中的模板。
关卡：已定义美学方向，并将项目用途、受众和情感与选定方向关联证明合理性。未通过此关卡不得继续。

Phase 2: Typography Selection

第二阶段：排版选择

Goal: Select distinctive, contextual font pairings that define the design's personality.
Step 1: Load 
references/font-catalog.json
. All fonts in catalog are pre-approved; banned fonts (Inter, Roboto, Arial, Helvetica, system fonts, Space Grotesk) are excluded from catalog.
Step 2: Select font pairing using this process:
  1. Identify 3-5 candidate fonts from the appropriate aesthetic category
  2. Eliminate any that feel "obvious" or overused for this context
  3. Test combinations: Display font + Body font, or single font family with weight variation
  4. Verify the pairing creates clear visual hierarchy
  5. Check against project history for variety
Selection criteria:
  • Matches aesthetic direction from Phase 1
  • Creates clear hierarchy (Display/Heading + Body, or single font with weight variation)
  • Is unexpected -- avoid first instinct, explore deeper in the catalog
  • Has not been used in recent projects
Step 3: Validate
bash
undefined
目标：选择独特、符合上下文的字体组合，定义设计的个性。
步骤1：加载
references/font-catalog.json
。目录中的所有字体均为预先批准；禁用字体（Inter、Roboto、Arial、Helvetica、系统字体、Space Grotesk）已从目录中排除。
步骤2：通过以下流程选择字体组合：
  1. 从相应美学类别中确定3-5种候选字体
  2. 排除在此上下文中显得“显而易见”或过度使用的字体
  3. 测试组合：展示字体+正文字体，或单一字体家族搭配不同字重
  4. 验证组合是否能形成清晰的视觉层级
  5. 对照项目历史检查多样性
选择标准：
  • 匹配第一阶段的美学方向
  • 形成清晰的层级（展示/标题+正文，或单一字体搭配不同字重）
  • 出人意料——避免第一直觉，深入目录探索更多选项
  • 未在近期项目中使用
步骤3：验证
bash
undefined

TODO: scripts/font_validator.py not yet implemented

TODO: scripts/font_validator.py 尚未实现

Manual alternative: check fonts against banned list

手动替代方案：对照禁用列表检查字体

Banned: Inter, Roboto, Arial, Helvetica, system fonts, Space Grotesk

禁用字体：Inter, Roboto, Arial, Helvetica, system fonts, Space Grotesk


Manually verify: no banned fonts in selection, pairing not recently used, aesthetic match with direction.

**Step 4: Document** typography specification with font families, weights, usage roles, and rationale for each selection. See `references/implementation-examples.md` for template.

**Gate**: Font validation passes (no banned fonts, no recent reuse, aesthetic match confirmed). Do NOT proceed until gate passes.

手动验证：选择中无禁用字体，组合未在近期使用，与美学方向匹配。

**步骤4：记录**排版规范，包含字体家族、字重、使用场景及每个选择的理由。参考`references/implementation-examples.md`中的模板。

**关卡**：字体验证通过（无禁用字体、无近期重复使用、确认与美学方向匹配）。未通过此关卡不得继续。

Phase 3: Color Palette

第三阶段：色彩调色板

Goal: Create a contextual palette with clear dominance hierarchy, not a random collection of colors.
Step 1: Research cultural/contextual inspiration using 
references/color-inspirations.json
. Inspiration sources include:
  • Cultural aesthetics: Japanese indigo, Scandinavian earth tones, Mediterranean warmth
  • IDE themes: Dracula, Nord, Gruvbox, Tokyo Night, Catppuccin
  • Natural phenomena: Desert sunsets, deep ocean, autumn forests, arctic twilight
  • Historical periods: Art Deco, Mid-century modern, Victorian industrial
  • Artistic movements: Bauhaus, De Stijl, Impressionism
Select an inspiration source that resonates with the project context from Phase 1.
Step 2: Build palette with strict dominance structure:
  • Dominant (60-70%): Base background and major surfaces -- this sets the mood
  • Secondary (20-30%): Supporting elements, containers, navigation -- provides structure
  • Accent (5-10%): High-impact moments, CTAs, highlights -- demands attention sparingly
  • Functional: Success, warning, error, info states -- consistent across all designs
Step 3: Check against anti-patterns in 
references/anti-patterns.json
:
  • No purple (#8B5CF6, #A855F7) as accent on white background
  • No evenly distributed colors without clear dominance
  • No generic blue (#3B82F6) as primary on white
  • No pastels without saturation variation
  • No pure black (#000000) or pure white (#FFFFFF) as dominant color
Step 4: Validate
bash
undefined
目标：创建具有清晰主导层级的上下文调色板，而非随机的颜色集合。
步骤1：使用
references/color-inspirations.json
研究文化/上下文灵感。灵感来源包括：
  • 文化美学：日本靛蓝、斯堪的纳维亚大地色调、地中海暖色调
  • IDE主题：Dracula、Nord、Gruvbox、Tokyo Night、Catppuccin
  • 自然现象：沙漠日落、深海、秋日森林、北极暮光
  • 历史时期：装饰艺术、中世纪现代、维多利亚工业风
  • 艺术运动：包豪斯、风格派、印象派
选择与第一阶段项目上下文共鸣的灵感来源。
步骤2：构建具有严格主导结构的调色板：
  • 主导色（60-70%）：基础背景和主要表面——奠定整体氛围
  • 辅助色（20-30%）：辅助元素、容器、导航——提供结构
  • 强调色（5-10%）：高影响力时刻、CTA、高亮——谨慎使用以吸引注意力
  • 功能色：成功、警告、错误、信息状态——所有设计中保持一致
步骤3：对照
references/anti-patterns.json
中的反模式检查：
  • 白色背景上不得使用紫色（#8B5CF6、#A855F7）作为强调色
  • 颜色不得均匀分布而无清晰主导色
  • 白色背景上不得使用通用蓝色（#3B82F6）作为主色
  • 不得使用无饱和度变化的马卡龙色调
  • 不得使用纯黑（#000000）或纯白（#FFFFFF）作为主导色
步骤4：验证
bash
undefined

TODO: scripts/palette_analyzer.py not yet implemented

TODO: scripts/palette_analyzer.py 尚未实现

Manual alternative: check palette against anti-patterns in references/anti-patterns.json

手动替代方案：对照references/anti-patterns.json中的反模式检查调色板


Manually verify: no cliche patterns (purple on white, generic blue), clear 60/30/10 dominance ratio, sufficient contrast for accessibility.

**Gate**: Palette passes cliche detection and demonstrates clear 60/30/10 dominance ratio. Do NOT proceed until gate passes.

手动验证：无陈词滥调模式（白背景配紫色、通用蓝色），符合60/30/10主导比例，具有足够的可访问性对比度。

**关卡**：调色板通过陈词滥检测试，并展示清晰的60/30/10主导比例。未通过此关卡不得继续。

Phase 4: Animation Strategy

第四阶段：动画策略

Goal: Design choreography for high-impact moments only. Restraint is a feature.
Step 1: Identify high-impact moments worth investing animation effort:
  • Initial page load (hero section reveal)
  • Major state transitions (empty to filled, loading to success)
  • Feature showcases (pricing reveal, testimonial carousel)
  • User achievements (form submission success, milestone reached)
Moments NOT worth animating (resist the urge):
  • Every hover state on every element
  • Every button click feedback
  • Low-importance UI elements (footers, metadata)
  • Background elements that distract from content
Step 2: Design choreography for each identified moment. Reference 
references/animation-patterns.md
for battle-tested patterns:
  • Orchestrated page load with staggered reveal
  • State transition choreography (empty to populated)
  • Loading-to-success celebration sequences
  • Scroll-triggered section reveals
  • Interactive hover effects (use sparingly)
Step 3: Define easing curves and timing for the design:
Easing by purpose:
  • Entrances: 
    cubic-bezier(0.22, 1, 0.36, 1)
    -- smooth deceleration into view
  • Exits: 
    cubic-bezier(0.4, 0, 1, 1)
    -- smooth acceleration out of view
  • Interactions: 
    cubic-bezier(0.4, 0, 0.2, 1)
    -- Material Design standard for hover/click
  • Elastic: 
    cubic-bezier(0.68, -0.55, 0.265, 1.55)
    -- playful overshoot for celebrations
Duration by scope:
  • Micro-interactions (hover, focus): 150-250ms
  • Component transitions (card, modal): 300-500ms
  • Page transitions (hero load, section): 500-800ms
  • Stagger delay between elements: 100-200ms
  • Never exceed 1000ms for any UI animation
Gate: At least one high-impact moment has a fully defined choreography including element order, easing curves, and timing values. Do NOT proceed without this.
目标：仅为高影响力时刻设计编排。克制是核心特性。
步骤1：确定值得投入动画精力的高影响力时刻：
  • 初始页面加载（英雄区域展示）
  • 主要状态转换（空状态到填充状态、加载到成功）
  • 功能展示（定价展示、推荐语轮播）
  • 用户成就（表单提交成功、达成里程碑）
不值得添加动画的时刻（克制冲动）：
  • 每个元素的每个悬停状态
  • 每个按钮的点击反馈
  • 低重要性UI元素（页脚、元数据）
  • 分散内容注意力的背景元素
步骤2：为每个确定的时刻设计编排。参考
references/animation-patterns.md
中的成熟模式：
  • 编排式页面加载，带有 staggered 展示效果
  • 状态转换编排（空状态到填充状态）
  • 加载到成功的庆祝序列
  • 滚动触发的区域展示
  • 交互式悬停效果（谨慎使用）
步骤3：为设计定义缓动曲线和时长
按用途选择缓动曲线：
  • 入场动画：
    cubic-bezier(0.22, 1, 0.36, 1)
    —— 平滑减速进入视野
  • 退场动画：
    cubic-bezier(0.4, 0, 1, 1)
    —— 平滑加速离开视野
  • 交互动画：
    cubic-bezier(0.4, 0, 0.2, 1)
    —— Material Design 标准的悬停/点击缓动
  • 弹性动画：
    cubic-bezier(0.68, -0.55, 0.265, 1.55)
    —— 用于庆祝场景的趣味过冲效果
按范围选择时长：
  • 微交互（悬停、聚焦）：150-250ms
  • 组件转换（卡片、模态框）：300-500ms
  • 页面转换（英雄区域加载、区域切换）：500-800ms
  • 元素间的 staggered 延迟：100-200ms
  • 任何UI动画时长不得超过1000ms
关卡：至少有一个高影响力时刻拥有完整定义的编排，包含元素顺序、缓动曲线和时长值。未通过此关卡不得继续。

Phase 5: Background & Atmosphere

第五阶段：背景与氛围

Goal: Create depth and mood through layered effects. Never use flat solid colors as backgrounds.
Step 1: Choose technique from 
references/background-techniques.md
based on aesthetic direction:
  • Layered radial gradients: Atmospheric depth with soft colored glows (sophisticated, landing pages)
  • Geometric patterns: Grid lines, dots, diagonal stripes (technical precision, developer tools)
  • Noise textures: Grain overlays for tactile organic feel (portfolios, artisan brands)
  • Contextual effects: IDE scanlines, paper texture, cursor spotlight (thematic immersion)
  • Multi-layer composition: Combine 2-3 techniques for rich atmospheric depth
Step 2: Implement background CSS that matches the aesthetic direction. A good atmospheric background combines at minimum:
  • Base surface color (never pure white or pure black)
  • Gradient layer for depth and focus direction
  • Pattern or texture layer for character
Step 3: Verify background does not compromise text readability. Check contrast ratios against WCAG AA minimums.
Gate: Background uses at least 2 layers creating visual depth and atmospheric mood. Solid single-color backgrounds fail this gate.
目标：通过分层效果创造深度和氛围。绝不使用纯色平背景。
步骤1：根据美学方向从
references/background-techniques.md
中选择技术：
  • 分层径向渐变：带有柔和彩色光晕的氛围深度（精致、着陆页）
  • 几何图案：网格线、圆点、斜条纹（技术精准、开发者工具）
  • 噪点纹理：颗粒叠加以获得触感有机质感（作品集、工匠品牌）
  • 上下文效果：IDE扫描线、纸张纹理、光标聚光灯（主题沉浸）
  • 多层组合：结合2-3种技术以获得丰富的氛围深度
步骤2：实现与美学方向匹配的背景CSS。优质的氛围背景至少包含：
  • 基础表面色（绝不使用纯白或纯黑）
  • 用于深度和聚焦方向的渐变层
  • 用于个性的图案或纹理层
步骤3：验证背景不影响文本可读性。对照WCAG AA最低标准检查对比度。
关卡：背景使用至少2层以创造视觉深度和氛围。纯色平背景无法通过此关卡。

Phase 6: Validation & Scoring

第六阶段：验证与评分

Goal: Objective quality assessment through validation scripts before any finalization.
Step 1: Run comprehensive validation
bash
undefined
目标：在最终确定前通过验证脚本进行客观质量评估。
步骤1：运行全面验证
bash
undefined

TODO: scripts/validate_design.py not yet implemented

TODO: scripts/validate_design.py 尚未实现

Manual alternative: review each validation check listed below against design choices

手动替代方案：对照以下列出的每个验证检查项审查设计选择


**Step 2: Review** validation report. The report checks:
- No banned fonts in selection or fallback stacks
- No cliche color schemes detected
- Font pairing uniqueness versus recent projects
- Color dominance ratio meets 60/30/10 target
- Sufficient contrast ratios (WCAG AA minimum)
- Animation strategy is defined (not missing)
- Background atmosphere is present (not flat)

**Step 3: Address issues** -- if overall score < 80:
1. Review each failed check in the report
2. Iterate on the specific problematic area (return to that phase)
3. Re-run validation after each fix
4. Do NOT proceed to specification output until score >= 80

**Gate**: Validation score >= 80 (Grade B or higher). Do NOT deliver specification output until this gate passes.

**步骤2：审查验证报告**。报告检查：
- 选择或回退栈中无禁用字体
- 未检测到陈词滥调色方案
- 字体组合与近期项目相比具有独特性
- 颜色主导比例符合60/30/10目标
- 具有足够的对比度（WCAG AA最低标准）
- 已定义动画策略（未缺失）
- 存在氛围背景（非纯色）

**步骤3：解决问题**——如果总分<80：
1. 审查报告中列出的每个未通过检查项
2. 针对特定问题区域迭代（返回对应阶段）
3. 每次修复后重新运行验证
4. 得分≥80前不得进入规范输出阶段

**关卡**：验证得分≥80（B级或更高）。未通过此关卡不得交付规范输出。

Phase 7: Design Specification Output

第七阶段：设计规范输出

Goal: Deliver a complete, implementable design specification.
Step 1: Generate CSS custom properties (design tokens) covering typography, colors, spacing, shadows, and animation values. Reference 
references/implementation-examples.md
for comprehensive token template.
Step 2: Create base styles that apply tokens to:
  • Typography hierarchy (display, heading, body, mono)
  • Atmospheric background (layered gradients/patterns)
  • Layout reset and defaults
Step 3: Document design specification as a structured document covering:
  • Aesthetic direction and inspiration
  • Typography system with font families, weights, and usage roles
  • Color palette with dominance structure and hex values
  • Animation strategy with timing specifications
  • Background technique and implementation
  • Validation score and grade
Step 4: If implementation is requested, provide framework-specific starter code. Reference 
references/implementation-examples.md
for React+Tailwind config, HTML+CSS templates, and design system templates.
Gate: Design specification document delivered with all sections complete and validation score included.
目标：交付完整、可实现的设计规范。
步骤1：生成CSS自定义属性（设计令牌），涵盖排版、色彩、间距、阴影和动画值。参考
references/implementation-examples.md
中的完整令牌模板。
步骤2：创建应用令牌的基础样式：
  • 排版层级（展示、标题、正文、等宽）
  • 氛围背景（分层渐变/图案）
  • 布局重置与默认值
步骤3：将设计规范记录为结构化文档，包含：
  • 美学方向与灵感
  • 排版系统，包含字体家族、字重和使用场景
  • 带有主导结构和十六进制值的调色板
  • 带有时长规范的动画策略
  • 背景技术与实现
  • 验证得分与等级
步骤4：如果请求实现，提供框架特定的起始代码。参考
references/implementation-examples.md
中的React+Tailwind配置、HTML+CSS模板和设计系统模板。
关卡：交付包含所有章节和验证得分的设计规范文档。

Examples

示例

Example 1: New Landing Page

示例1：新着陆页

User says: "Create a distinctive design for a developer tool landing page" Actions:
  1. Gather context: developer audience, technical but approachable emotion (PHASE 1)
  2. Define directions: Neo-Brutalist Technical vs. Arctic Technical (PHASE 1)
  3. Select fonts: geometric display + readable serif body from catalog (PHASE 2)
  4. Build palette: warm concrete dominant, charcoal secondary, high-voltage yellow accent (PHASE 3)
  5. Plan hero staggered reveal animation (PHASE 4)
  6. Create layered gradient + grid background (PHASE 5)
  7. Validate: score >= 80, no anti-patterns (PHASE 6)
  8. Output design specification with CSS tokens (PHASE 7) Result: Contextual, validated design specification ready for implementation
用户需求：“为开发者工具着陆页创建独特设计” 操作步骤：
  1. 收集上下文：开发者受众、专业但亲切的情感（第一阶段）
  2. 定义方向：新野兽派技术风 vs 北极技术风（第一阶段）
  3. 选择字体：从目录中选择几何展示字体+易读衬线正文字体（第二阶段）
  4. 构建调色板：暖混凝土主导色、炭灰色辅助色、高压黄色强调色（第三阶段）
  5. 规划英雄区域staggered展示动画（第四阶段）
  6. 创建分层渐变+网格背景（第五阶段）
  7. 验证：得分≥80，无反模式（第六阶段）
  8. 输出带有CSS令牌的设计规范（第七阶段） 结果：符合上下文、经过验证的设计规范，可直接用于实现

Example 2: Design Audit

示例2：设计审计

User says: "This site looks too generic, review it for AI slop" Actions:
  1. Read existing CSS/design files to inventory current choices (PHASE 1)
  2. Check fonts against banned list and 
    references/anti-patterns.json
    (PHASE 2)
  3. Analyze color palette for cliches and dominance issues (PHASE 3)
  4. Review animation usage (too much or too little) (PHASE 4)
  5. Evaluate background depth (flat solid colors?) (PHASE 5)
  6. Run validation to score current design (PHASE 6)
  7. Deliver report with specific replacement recommendations (PHASE 7) Result: Actionable audit with specific fixes for each detected issue
用户需求：“这个网站看起来太通用了，审核是否存在AI同质化设计” 操作步骤：
  1. 阅读现有CSS/设计文件以盘点当前选择（第一阶段）
  2. 对照禁用列表和
    references/anti-patterns.json
    检查字体（第二阶段）
  3. 分析调色板中的陈词滥调和主导性问题（第三阶段）
  4. 审查动画使用情况（过多或过少）（第四阶段）
  5. 评估背景深度（是否为纯色平背景？）（第五阶段）
  6. 运行验证为当前设计评分（第六阶段）
  7. 交付包含具体替代建议的报告（第七阶段） 结果：可操作的审计报告，包含每个检测到问题的具体修复方案

Error Handling

错误处理

Error: "Validation failed -- banned font detected"

错误：“验证失败——检测到禁用字体”

Cause: Selected font is on the banned list (Inter, Roboto, Arial, Helvetica, system fonts, Space Grotesk) or appears in a CSS fallback stack Solution:
  1. Select alternative from 
    references/font-catalog.json
    -- all catalog fonts are pre-approved
  2. Verify fallback stacks do not include banned fonts (e.g., 
    sans-serif
    alone is banned)
  3. Re-run font validator to confirm resolution
原因：选定字体在禁用列表中（Inter、Roboto、Arial、Helvetica、系统字体、Space Grotesk），或出现在CSS回退栈中 解决方案：
  1. 从
    references/font-catalog.json
    中选择替代字体——目录中的所有字体均为预先批准
  2. 验证回退栈中不包含禁用字体（例如，单独的
    sans-serif
    被禁用）
  3. 重新运行字体验证器以确认问题已解决

Error: "Cliche color scheme detected"

错误：“检测到陈词滥调色方案”

Cause: Palette analyzer flags purple gradient on white, generic blue primary, or evenly distributed colors Solution:
  1. Review 
    references/color-inspirations.json
    for culturally-grounded alternatives
  2. Ensure clear 60/30/10 dominance ratio -- if colors are evenly split, commit to a dominant
  3. Choose inspiration from project context (audience, purpose, emotion), not convenience
  4. Re-run palette analyzer to confirm resolution
原因：调色板分析器标记了白色背景上的紫色渐变、通用蓝色主色或均匀分布的颜色 解决方案：
  1. 查看
    references/color-inspirations.json
    寻找基于文化的替代方案
  2. 确保清晰的60/30/10主导比例——如果颜色均匀分布，确定一个主导色
  3. 从项目上下文（受众、用途、情感）中选择灵感，而非基于便利性
  4. 重新运行调色板分析器以确认问题已解决

Error: "Low distinctiveness score (< 80)"

错误：“独特性得分低（<80）”

Cause: Design lacks personality, shows timid commitment to aesthetic direction, or has multiple marginal issues Solution:
  1. Review validation report for the specific weak areas
  2. Strengthen contextual elements: add custom textures, commit fully to the aesthetic direction
  3. Check if font + color + background form a cohesive story or feel disconnected
  4. Iterate and re-validate -- max 3 attempts before reconsidering the aesthetic direction
原因：设计缺乏个性，对美学方向的投入不足，或存在多个边缘问题 解决方案：
  1. 审查验证报告中的具体薄弱环节
  2. 强化上下文元素：添加自定义纹理，完全投入到美学方向
  3. 检查字体+颜色+背景是否形成连贯的故事，或是否感觉脱节
  4. 迭代并重新验证——最多3次尝试，若仍未通过则重新考虑美学方向

Anti-Patterns

反模式

Anti-Pattern 1: Skipping Aesthetic Exploration

反模式1：跳过美学探索

What it looks like: Jumping to CSS/React implementation with first-instinct font and color choices Why wrong: Produces generic, unconsidered design with no contextual justification; most "AI slop" originates here Do instead: Complete Phase 1 context discovery and direction selection before touching implementation
表现：仅凭第一直觉选择字体和颜色，直接跳转到CSS/React实现 错误原因：产生通用、未经深思的设计，无上下文合理性；大多数「AI同质化设计」源于此 正确做法：在接触实现前完成第一阶段的上下文发现和方向选择

Anti-Pattern 2: Using Banned Fonts

反模式2：使用禁用字体

What it looks like: 
font-family: 'Inter', sans-serif
or 
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI'
Why wrong: Overused to the point of invisibility; instant "AI slop" aesthetic signal; fails validation immediately Do instead: Select from 
references/font-catalog.json
, run font validator, choose unexpected pairings
表现：
font-family: 'Inter', sans-serif
或 
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI'
错误原因：过度使用到近乎无形；是「AI同质化设计」的直接信号；立即验证失败 正确做法：从
references/font-catalog.json
中选择，运行字体验证器，选择出人意料的组合

Anti-Pattern 3: Purple Gradients on White

反模式3：白色背景上的紫色渐变

What it looks like: 
background: linear-gradient(135deg, #667eea, #764ba2)
with white surfaces and purple accents Why wrong: Most cliched color scheme in modern web design; signals generic SaaS template; no contextual justification possible Do instead: Research cultural/contextual color inspiration, create palette with 60/30/10 dominance structure
表现：
background: linear-gradient(135deg, #667eea, #764ba2)
搭配白色表面和紫色强调色 错误原因：现代设计中的陈词滥调；每个SaaS产品都在使用；无上下文合理性 正确做法：研究文化/上下文色彩灵感，创建具有60/30/10主导比例的调色板

Anti-Pattern 4: Evenly Distributed Colors

反模式4：颜色均匀分布

What it looks like: Five accent colors used in roughly equal proportion across the design Why wrong: Creates visual chaos without hierarchy; no dominant aesthetic emerges; looks like color picker experimentation Do instead: Follow 60/30/10 rule strictly (dominant/secondary/accent), validate dominance ratio
表现：五种强调色在设计中大致均等使用 错误原因：造成视觉混乱，无层级；看起来像颜色选择器的实验结果 正确做法：严格遵循60/30/10规则（主导/辅助/强调），验证主导比例

Anti-Pattern 5: Implementing Without Validation

反模式5：未验证即实现

What it looks like: Writing CSS/React implementation without ever running design validation Why wrong: May build entire frontend on flawed design foundations; wastes time on rework; no objective quality measure Do instead: Run validation in Phase 6, ensure score >= 80 before proceeding to specification output
表现：在未运行设计验证的情况下编写CSS/React实现 错误原因：可能在有缺陷的设计基础上构建整个前端；浪费返工时间；无客观质量衡量标准 正确做法：在第六阶段运行验证，确保得分≥80后再进入规范输出阶段

References

参考资料

This skill uses these shared patterns:
  • Anti-Rationalization - Prevents shortcut rationalizations
  • Verification Checklist - Pre-completion checks
本Skill使用以下共享模式：
  • 反合理化 - 防止捷径合理化
  • 验证清单 - 完成前检查

Domain-Specific Anti-Rationalization

领域特定反合理化

RationalizationWhy It's WrongRequired Action
"Inter is clean and readable"Clean = invisible; readable != distinctiveSelect from curated catalog
"Purple gradient looks modern"Modern = cliched; every SaaS uses thisResearch contextual inspiration
"I'll validate later"Later = never; flaws compound through phasesValidate at each phase gate
"Simple solid background is fine"Solid = flat; depth creates atmosphereAdd at least 2 background layers
"Same fonts worked last time"Worked != distinctive; variety is requiredCheck project history, choose new
合理化借口错误原因要求操作
"Inter干净易读"干净=无形；易读≠独特从精选目录中选择
"紫色渐变看起来很现代"现代=陈词滥调；每个SaaS都在使用研究上下文灵感
"我稍后再验证"稍后=永不；缺陷在各阶段累积在每个阶段关卡验证
"简单的纯色背景就够了"纯色=扁平；深度创造氛围添加至少2层背景
"上次使用的字体效果很好"效果好≠独特；需要多样性检查项目历史，选择新字体

Reference Files

参考文件

  • ${CLAUDE_SKILL_DIR}/references/font-catalog.json
    : Curated fonts by aesthetic category (banned fonts excluded)
  • ${CLAUDE_SKILL_DIR}/references/color-inspirations.json
    : Cultural/contextual color palette sources
  • ${CLAUDE_SKILL_DIR}/references/animation-patterns.md
    : High-impact animation choreography patterns with CSS and React examples
  • ${CLAUDE_SKILL_DIR}/references/background-techniques.md
    : Atmospheric background creation methods with code snippets
  • ${CLAUDE_SKILL_DIR}/references/anti-patterns.json
    : Banned fonts, cliche colors, layout and component cliches
  • ${CLAUDE_SKILL_DIR}/references/implementation-examples.md
    : CSS tokens, base styles, framework templates, specification document templates
  • ${CLAUDE_SKILL_DIR}/references/project-history.json
    : Aesthetic choices across projects (auto-generated by validation)
  • ${CLAUDE_SKILL_DIR}/references/font-catalog.json
    ：按美学类别分类的精选字体（已排除禁用字体）
  • ${CLAUDE_SKILL_DIR}/references/color-inspirations.json
    ：文化/上下文色彩调色板来源
  • ${CLAUDE_SKILL_DIR}/references/animation-patterns.md
    ：高影响力动画编排模式，包含CSS和React示例
  • ${CLAUDE_SKILL_DIR}/references/background-techniques.md
    ：氛围背景创建方法，包含代码片段
  • ${CLAUDE_SKILL_DIR}/references/anti-patterns.json
    ：禁用字体、陈词滥调颜色、布局和组件反模式
  • ${CLAUDE_SKILL_DIR}/references/implementation-examples.md
    ：CSS令牌、基础样式、框架模板、规范文档模板
  • ${CLAUDE_SKILL_DIR}/references/project-history.json
    ：跨项目的美学选择（由验证自动生成）