AgentSkillsCN

frontend-design

打造兼具高设计品质的移动优先 Next.js 界面。当您需要构建页面、组件或布局时，此工具将助您事半功倍。它生成的代码精致优雅，避免了千篇一律的 AI 生成美学。

SKILL.md
--- frontmatter
name: frontend-design
description: Create distinctive, mobile-first Next.js interfaces with high design quality. Use when building pages, components, or layouts. Generates polished code that avoids generic AI aesthetics.

Tech Stack

  • •Next.js 14+ App Router
  • •TypeScript
  • •Tailwind CSS
  • •Mobile-first breakpoints (sm → md → lg → xl)

Mobile-First Rules

  1. •Default styles = mobile. No breakpoint prefix means phone.
  2. •Scale up: text-sm md:text-base lg:text-lg
  3. •Touch targets: Minimum 44x44px for interactive elements
  4. •Stack by default: Use flex-col then md:flex-row
  5. •Test at 375px width first

Design Principles

Before coding, commit to a BOLD aesthetic direction:

  • •Tone: Pick one extreme—brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/pastel, industrial
  • •Differentiation: What makes this UNFORGETTABLE?

Typography

  • •Choose distinctive fonts, never Inter/Arial/Roboto/system fonts
  • •Pair a display font with a refined body font
  • •Use Google Fonts or next/font for optimization

Color & Theme

  • •Use CSS variables in globals.css
  • •Dominant color + sharp accent beats evenly-distributed palettes
  • •Commit to light OR dark, don't hedge

Motion

  • •CSS-only when possible
  • •One orchestrated page load > scattered micro-interactions
  • •Use animation-delay for staggered reveals

Layout

  • •Unexpected compositions: asymmetry, overlap, grid-breaking
  • •Generous negative space OR controlled density
  • •Never center everything

File Structure

code
src/
  components/    # Reusable components
  app/           # Pages and layouts
  styles/        # Global CSS

Anti-Patterns (NEVER)

  • •Generic gradients on white backgrounds
  • •Cookie-cutter card layouts
  • •Predictable hero + 3-column features
  • •Space Grotesk (overused)
  • •Purple/blue tech gradients