AgentSkillsCN

frontend-design

创建具有卓越设计品质的差异化、可投产前端界面。两种模式：(1) 新项目——大胆美学设计理念，包括排版、色彩理论、空间构图、动效设计、视觉细节，避免通用AI美学，打造令人难忘的界面；(2) 现有代码库——强制设计语言分析，通过扫描布局模式、排版层次、组件结构、间距与主题系统确保一致性后再实施。适用于构建组件、页面、应用、设计系统、UI修改。涵盖React、Vue、Next.js、HTML/CSS、Tailwind。关键词：创建组件、构建页面、设计界面、添加UI、美学设计、视觉设计、排版、动效、空间布局、设计系统、一致性、模式分析、现有代码库。

SKILL.md
--- frontmatter
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with exceptional design quality. Two modes - (1) New projects - bold aesthetic design philosophy including typography, color theory, spatial composition, motion design, visual details, avoiding generic AI aesthetics, creating unforgettable interfaces. (2) Existing codebases - mandatory design language analysis enforcing consistency by scanning layout patterns, typography hierarchy, component structure, spacing, theme systems before implementation. Use when building components, pages, applications, design systems, UI modifications. Covers React, Vue, Next.js, HTML/CSS, Tailwind. Keywords - create component, build page, design interface, add UI, aesthetic design, visual design, typography, animations, spatial layout, design system, consistency, pattern analysis, existing codebase.

Frontend Design Skill

This skill provides two distinct workflows for creating production-grade frontend interfaces:

Scenario Detector

Answer this question: Is there an existing codebase with components, pages, or a design system?

✅ YES → Existing Codebase (Most Common)

Use this workflow: EXISTING-CODEBASE-CHECKLIST.md

Purpose: Enforce design language consistency by analyzing existing patterns before implementation.

When to use:

  • •Adding components to existing project
  • •Creating new pages in existing app
  • •Modifying UI in established codebase
  • •Working with design system

Process: Mandatory 3-phase checklist (Design Analysis → Decisions → Implementation)

✅ NO → New Project (Greenfield)

Use this workflow: NEW-PROJECT-DESIGN.md

Purpose: Create bold, distinctive aesthetic design from scratch.

When to use:

  • •Starting new projects
  • •Building standalone components/pages
  • •No existing design system to match
  • •Full creative freedom

Process: Design thinking → Aesthetic principles → Implementation

Quick Reference

For consistency in existing codebases: → EXISTING-CODEBASE-CHECKLIST.md

For aesthetic design philosophy: → NEW-PROJECT-DESIGN.md

For real-world examples: → EXAMPLES.md

For deep-dive principles: → REFERENCE.md

Still unsure which scenario applies? Default to EXISTING-CODEBASE-CHECKLIST if there's any existing code to reference.