mcpField
F
fashion-styling

fashion-styling

github.com/nikojuu设计与 UI047 次安装39 周前更新
代码仓库

关于 fashion-styling

用于将时尚精品店主题分阶段应用到店铺项目的样式技能。它为基础样式、导航、商品页、结账、仪表盘和静态页面规定了颜色、字体、组件模式及目标文件。

主要功能

  1. 01按顺序执行五个样式阶段
  2. 02指定配色方案与字体
  3. 03导航和页脚样式模式
  4. 04店铺首页与商品样式
  5. 05购物车、结账和仪表盘模式

适用场景

  1. 01为店铺统一应用精品店主题
  2. 02设计导航和共享布局组件
  3. 03调整商品、购物车和结账页面
  4. 04设计客户仪表盘和静态页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nikojuu/hienohelma --skill fashion-styling

安装后在 Claude Code 中输入/fashion-styling确认已加载。

详细介绍

时尚精品店主题

品牌语调： 现代、精致、自信、柔美、时尚编辑风 目标氛围： 高端时尚杂志与亲民精品店的结合

用法

按顺序应用各阶段：

  1. “应用时尚造型阶段 1” → 基础
  2. “应用时尚造型阶段 2” → 布局
  3. “应用时尚造型阶段 3” → 首页与产品
  4. “应用时尚造型阶段 4” → 购物车、结账与身份验证
  5. “应用时尚造型阶段 5” → 控制面板与静态页面

如有需要，请在各阶段之间清除上下文。

阶段 1：基础

文件：

src/app/globals.css
src/lib/fonts.ts
tailwind.config.ts

颜色（globals.css）

添加以下 CSS 变量：

名称HSL作用
blush350 60% 75%主要强调色
champagne-gold45 50% 70%次要强调色
soft-ivory40 30% 98%背景
pearl40 20% 96%卡片背景
midnight220 25% 15%文本、深色区域
whisper-pink350 40% 95%柔和背景
wine350 50% 35%促销、错误
stone30 10% 50%次要文本

字体（fonts.ts）

角色字体用途
主要Cormorant Garamond标题、主标题
次要Inter正文、按钮

Tailwind 配置

  • 映射所有颜色变量
  • 将 border-radius 设为 2px（轻微圆角）
  • 添加 font-primary 和 font-secondary

CSS 工具类（globals.css）

.text-gradient-fashion {
  background: linear-gradient(135deg, hsl(350 60% 65%), hsl(45 50% 70%), hsl(350 60% 75%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.shimmer-fashion {
  background: linear-gradient(110deg, transparent 20%, hsl(45 60% 85% / 0.3) 40%, hsl(350 60% 90% / 0.4) 50%, hsl(45 60% 85% / 0.3) 60%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

阶段 2：布局与导航

文件：

src/components/Navigation/StickyNavbar.tsx
src/components/Navigation/Navbar.tsx
src/components/Navigation/NavbarLinks.tsx
src/components/Navigation/MobileLinks.tsx
src/components/Navigation/CustomerDropdown.tsx
src/components/Footer.tsx
src/app/(auth)/(dashboard)/layout.tsx

样式规则

背景： bg-soft-ivory 或 bg-pearl 文本： 标题使用 text-midnight，正文使用 text-midnight/70 边框： border-blush/20 或 border-stone/20 悬停： 过渡为 blush 或 champagne-gold

导航样式

{/* Link with underline animation */}
<a className="relative font-secondary text-sm text-midnight hover:text-blush transition-colors">
  Link Text
  <span className="absolute bottom-0 left-1/2 w-0 h-[1px] bg-blush transition-all duration-300 group-hover:w-full group-hover:left-0" />
</a>

页脚样式

<footer className="bg-soft-ivory border-t border-blush/20">
  <div className="h-[1px] bg-gradient-to-r from-transparent via-blush/30 to-transparent" />
  {/* Content */}
</footer>

控制面板侧边栏

<aside className="bg-pearl border border-blush/10 p-6">
  <h2 className="font-primary text-xl text-midnight mb-4">My Account</h2>
  <div className="h-[1px] bg-gradient-to-r from-blush/40 to-transparent mb-4" />
  {/* Nav links */}
</aside>

阶段 3：首页与产品

文件：

src/app/(storefront)/page.tsx
src/components/Hero.tsx
src/components/subtitle.tsx
src/components/Homepage/CategorySection.tsx
src/components/Homepage/AboutMeSection.tsx
src/components/Product/ProductCarousel.tsx
src/components/ProductCard.tsx
src/components/PriceDisplay.tsx
src/components/ImageSlider.tsx
src/components/imageSliderWithZoom.tsx
src/components/Product/ProductDetail.tsx
src/components/Product/WishlistButton.tsx
src/components/Product/Breadcrumbs.tsx
src/components/Product/SortOptions.tsx
src/components/Product/Pagination.tsx
src/app/(storefront)/products/[...slug]/page.tsx
src/app/(storefront)/product/[slug]/page.tsx

分区标题样式

<div className="flex items-center justify-center gap-4 mb-6">
  <div className="w-16 h-[1px] bg-gradient-to-r from-transparent to-blush/60" />
  <div className="w-2 h-2 rounded-full border border-blush/60" />
  <div className="w-16 h-[1px] bg-gradient-to-l from-transparent to-blush/60" />
</div>
<h2 className="text-3xl md:text-4xl font-primary text-midnight text-center">
  Section Title
</h2>

主视觉样式

<section className="relative min-h-[70vh] bg-soft-ivory">
  {/* Image with overlay */}
  <div className="absolute inset-0 bg-gradient-to-t from-midnight/40 via-transparent to-transparent" />

  <div className="relative z-10">
    <h1 className="text-5xl md:text-7xl font-primary text-soft-ivory tracking-tight">
      Headline
    </h1>
    <button className="px-8 py-4 bg-soft-ivory text-midnight font-secondary text-sm tracking-wider uppercase hover:bg-blush transition-colors">
      Shop Now
    </button>
  </div>
</section>

产品卡片样式

<div className="group relative bg-soft-ivory overflow-hidden">
  {/* Image */}
  <div className="aspect-[3/4] overflow-hidden">
    <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
  </div>

  {/* Sale badge */}
  <span className="absolute top-3 left-3 px-2 py-1 bg-wine text-soft-ivory text-xs font-secondary uppercase">
    -30%
  </span>

  {/* Wishlist button */}
  <button className="absolute top-3 right-3 p-2 bg-soft-ivory/80 text-midnight hover:text-blush transition-colors">
    <Heart className="w-5 h-5" />
  </button>

  {/* Content */}
  <div className="p-4">
    <h3 className="font-primary text-lg text-midnight">Product Name</h3>
    <p className="text-sm font-secondary text-stone">Brand</p>
    <div className="mt-2 flex items-center gap-2">
      <span className="font-secondary text-midnight">€99.00</span>
      <span className="font-secondary text-stone line-through text-sm">€129.00</span>
    </div>
  </div>
</div>

分类卡片样式

<a className="group relative aspect-[3/4] overflow-hidden">
  <img className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" />
  <div className="absolute inset-0 bg-gradient-to-t from-midnight/70 via-midnight/20 to-transparent" />
  <div className="absolute bottom-6 left-6">
    <h3 className="font-primary text-2xl text-soft-ivory">Category</h3>
    <span className="text-sm font-secondary text-soft-ivory/70">24 products</span>
  </div>
</a>

阶段 4：购物车、结账与身份验证

文件：

src/app/(storefront)/cart/page.tsx
src/components/Cart/Cart.tsx
src/components/Cart/CartItem.tsx
src/components/Cart/CartPage.tsx
src/components/Cart/AddToCartButton.tsx
src/components/Cart/CheckoutButton.tsx
src/components/Cart/CampaignAddedCartItems.tsx
src/components/Checkout/CheckoutSteps.tsx
src/components/Checkout/CustomerDataForm.tsx
src/components/Checkout/SelectShipmentMethod.tsx
src/components/Checkout/StripeCheckoutPage.tsx
src/components/Checkout/PaytrailCheckoutPage.tsx
src/components/Checkout/PaytrailPaymentSelection.tsx
src/app/(storefront)/payment/success/[orderId]/page.tsx
src/app/(auth)/login/page.tsx
src/app/(auth)/register/page.tsx
src/components/Auth/Loginform.tsx
src/components/Auth/RegisterForm.tsx
src/components/Auth/ForgotPasswordForm.tsx
src/components/Auth/ResetPasswordForm.tsx

按钮样式

{/* Primary CTA */}
<button className="w-full px-8 py-4 bg-midnight text-soft-ivory font-secondary text-sm tracking-wider uppercase transition-all duration-300 hover:bg-blush hover:text-midnight">
  Add to Cart
</button>

{/* Secondary */}
<button className="px-8 py-4 border border-midnight/30 text-midnight font-secondary text-sm tracking-wider uppercase hover:border-blush hover:bg-blush/10 transition-all">
  Continue Shopping
</button>

表单输入框样式

<div className="space-y-2">
  <label className="text-sm font-secondary text-midnight">Email</label>
  <input className="w-full px-4 py-3 bg-pearl border border-stone/20 text-midnight placeholder:text-stone/50 focus:outline-none focus:ring-2 focus:ring-blush/50 transition-all" />
</div>

带角饰的卡片

<div className="group relative bg-soft-ivory p-6">
  {/* Border */}
  <div className="absolute inset-0 border border-blush/10 pointer-events-none group-hover:border-blush/25 transition-colors" />

  {/* Corner accents */}
  <div className="absolute top-0 left-0 w-4 h-4 border-l border-t border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />
  <div className="absolute top-0 right-0 w-4 h-4 border-r border-t border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />
  <div className="absolute bottom-0 left-0 w-4 h-4 border-l border-b border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />
  <div className="absolute bottom-0 right-0 w-4 h-4 border-r border-b border-blush/20 group-hover:w-6 group-hover:h-6 transition-all duration-300" />

  {/* Content */}
</div>

结账步骤样式

<div className="flex items-center justify-center gap-4">
  {/* Completed step */}
  <div className="w-8 h-8 rounded-full bg-blush text-midnight flex items-center justify-center">
    <Check className="w-4 h-4" />
  </div>

  {/* Line */}
  <div className="w-12 h-[1px] bg-blush/50" />

  {/* Current step */}
  <div className="w-8 h-8 rounded-full border-2 border-blush text-midnight flex items-center justify-center font-secondary text-sm">
    2
  </div>

  {/* Line */}
  <div className="w-12 h-[1px] bg-stone/30" />

  {/* Future step */}
  <div className="w-8 h-8 rounded-full border border-stone/30 text-stone flex items-center justify-center font-secondary text-sm">
    3
  </div>
</div>

Toast 样式

{/* Success */}
className="bg-blush/10 border border-blush/30 text-midnight"

{/* Error */}
className="bg-wine/10 border border-wine/30 text-wine"

阶段 5：控制面板与静态页面

文件：

src/app/(auth)/(dashboard)/mypage/page.tsx
src/app/(auth)/(dashboard)/myorders/page.tsx
src/app/(auth)/(dashboard)/mywishlist/page.tsx
src/app/(auth)/(dashboard)/myinfo/page.tsx
src/components/CustomerDashboard/EditCustomerForm.tsx
src/app/(storefront)/about/page.tsx
src/components/Aboutpage/AboutHero.tsx
src/components/Aboutpage/AboutBlock.tsx
src/components/Aboutpage/AboutCTA.tsx
src/app/(storefront)/contact/page.tsx
src/components/Contactpage/ContactForm.tsx
src/app/(storefront)/privacy-policy/page.tsx
src/app/(storefront)/terms/page.tsx
src/app/(storefront)/gallery/page.tsx

页面标题样式

<div className="mb-8">
  <div className="flex items-center gap-3 mb-2">
    <div className="w-2 h-2 rounded-full border border-blush/60" />
    <h1 className="text-2xl md:text-3xl font-primary text-midnight">Page Title</h1>
  </div>
  <p className="font-secondary text-midnight/60 ml-5">Page description</p>
</div>

状态徽章

{/* Pending */}
<span className="px-3 py-1 bg-champagne-gold/20 text-midnight border border-champagne-gold/40 text-xs font-secondary uppercase">
  Pending
</span>

{/* Paid/Success */}
<span className="px-3 py-1 bg-blush/20 text-midnight border border-blush/40 text-xs font-secondary uppercase">
  Paid
</span>

{/* Shipped */}
<span className="px-3 py-1 bg-blush/30 text-midnight border border-blush/50 text-xs font-secondary uppercase">
  Shipped
</span>

空状态样式

<div className="relative bg-soft-ivory p-12 text-center">
  {/* Border */}
  <div className="absolute inset-0 border border-blush/10 pointer-events-none" />

  {/* Corner accents */}
  <div className="absolute top-0 left-0 w-8 h-8 border-l border-t border-blush/30" />
  <div className="absolute top-0 right-0 w-8 h-8 border-r border-t border-blush/30" />
  <div className="absolute bottom-0 left-0 w-8 h-8 border-l border-b border-blush/30" />
  <div className="absolute bottom-0 right-0 w-8 h-8 border-r border-b border-blush/30" />

  <Icon className="w-16 h-16 text-midnight/20 mx-auto mb-6" />
  <h3 className="text-xl font-primary text-midnight mb-3">No items yet</h3>
  <p className="text-sm font-secondary text-midnight/60 mb-6">Description text</p>
  <a href="/products" className="inline-flex px-8 py-3 bg-midnight text-soft-ivory font-secondary text-sm tracking-wider uppercase hover:bg-blush hover:text-midnight transition-all">
    Start Shopping
  </a>
</div>

关于页面区块

{/* Alternating layout */}
<div className="grid md:grid-cols-2 gap-12 items-center">
  <div className={reverse ? "md:order-2" : ""}>
    <img className="w-full aspect-[4/5] object-cover" />
  </div>
  <div>
    <span className="text-xs tracking-[0.2em] uppercase font-secondary text-stone">Our Story</span>
    <h2 className="mt-2 text-3xl font-primary text-midnight">Headline</h2>
    <div className="mt-2 w-12 h-[1px] bg-gradient-to-r from-blush to-transparent" />
    <p className="mt-6 font-secondary text-midnight/70 leading-relaxed">Content</p>
  </div>
</div>

快速参考

排版

font-primary    → Headings (Cormorant Garamond)
font-secondary  → Body/buttons (Inter)

text-midnight        → Dark text
text-midnight/70     → Body text
text-stone           → Muted text
text-soft-ivory      → Light text (on dark bg)

背景

bg-soft-ivory   → Main background
bg-pearl        → Cards, sections
bg-midnight     → Dark sections
bg-blush/10     → Subtle highlight

强调色

border-blush/20     → Subtle borders
border-blush/40     → Corner accents
bg-blush            → Hover states
bg-wine             → Sale badges
bg-champagne-gold   → Premium accents

装饰

{/* Circle */}
<div className="w-2 h-2 rounded-full border border-blush/60" />

{/* Gradient line */}
<div className="h-[1px] bg-gradient-to-r from-blush/40 to-transparent" />

{/* Center line */}
<div className="h-[1px] bg-gradient-to-r from-transparent via-blush/30 to-transparent" />

检查清单

  • 阶段 1：基础（3 个文件）
  • 阶段 2：布局与导航（7 个文件）
  • 阶段 3：首页与产品（17 个文件）
  • 阶段 4：购物车、结账与身份验证（20 个文件）
  • 阶段 5：控制面板与静态页面（14 个文件）

评论

支持 Markdown