Cara Streamline CSS Styling dengan Claude Code

CSSスタイリングでClaude Codeが活躍する場面

デザインカンプ dari CSSimplementasi、レスポンシブdukungan、ダークモードdukungan dll.、スタイリング作業 手間 かかり.Claude Code デザイン 意図 理解し、efisien style generate bisa dilakukan.

generate Tailwind CSSkomponen

> Tailwind CSS dengan 以下 カードkomponen pembuatanして：
> - gambar、タイトル、説明文、タグ、投稿日
> - ホバー dengan 影 強くなるanimasi
> - ダークモードdukungan
> - mobileレスポンシブ

function BlogCard({ post }: { post: Post }) {
  return (
    <article className="group rounded-xl overflow-hidden border border-gray-200
      bg-white shadow-sm transition-shadow duration-300 hover:shadow-lg
      dark:border-gray-700 dark:bg-gray-800">

      <div className="aspect-video overflow-hidden">
        <img
          src={post.image}
          alt={post.title}
          className="h-full w-full object-cover transition-transform
            duration-300 group-hover:scale-105"
        />
      </div>

      <div className="p-4 sm:p-6">
        <div className="mb-2 flex flex-wrap gap-2">
          {post.tags.map(tag => (
            <span key={tag} className="rounded-full bg-blue-100 px-2.5 py-0.5
              text-xs font-medium text-blue-800
              dark:bg-blue-900 dark:text-blue-200">
              {tag}
            </span>
          ))}
        </div>

        <h2 className="mb-2 text-lg font-bold text-gray-900
          line-clamp-2 dark:text-white sm:text-xl">
          {post.title}
        </h2>

        <p className="mb-4 text-sm text-gray-600 line-clamp-3
          dark:text-gray-300">
          {post.description}
        </p>

        <time className="text-xs text-gray-500 dark:text-gray-400">
          {new Date(post.date).toLocaleDateString('en-US')}
        </time>
      </div>
    </article>
  );
}

generate CSSanimasi

> ローディングspinner CSSanimasi dengan pembuatanして。
> Tailwind utilitas dan カスタムanimasi 組み合わせて。

/* tailwind.config.jsに追加するカスタムアニメーション */
@layer utilities {
  @keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
  }

  .animate-spinner {
    animation: spinner 1s linear infinite;
  }

  .animate-pulse-ring {
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }
}

function LoadingSpinner({ size = 'md' }: { size?: 'sm' | 'md' | 'lg' }) {
  const sizeClasses = {
    sm: 'h-5 w-5 border-2',
    md: 'h-8 w-8 border-3',
    lg: 'h-12 w-12 border-4',
  };

  return (
    <div className="flex items-center justify-center">
      <div className={`${sizeClasses[size]} animate-spinner rounded-full
        border-gray-300 border-t-blue-600
        dark:border-gray-600 dark:border-t-blue-400`}
      />
    </div>
  );
}

refactoring 既存style

> src/styles/ 配下 CSSfile 分析して、
> 重複しているstyle 共通化して。
> 使われていないCSSclass 特定してDeleteして。

Claude Code proyek全体 CSS 分析し、重複pola integrasiや不要class 除去 提案.

一括dukungan レスポンシブデザイン

> 全halamankomponen レスポンシブdukungan periksa.
> 320px〜1440pxま dengan masalahないかkonfirmasiして、修正 diperlukanな箇所 直して。

// レスポンシブなgridlayout 例
function ProductGrid({ products }: { products: Product[] }) {
  return (
    <div className="grid grid-cols-1 gap-4
      sm:grid-cols-2 sm:gap-6
      lg:grid-cols-3
      xl:grid-cols-4 xl:gap-8">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

implementasi ダークモード

> proyek全体 ダークモード tambahkan.
> sistempengaturan 追従し、pengguna 手動 dengan peralihanられるよう.

// hooks/useTheme.ts
import { useEffect, useState } from 'react';

type Theme = 'light' | 'dark' | 'system';

export function useTheme() {
  const [theme, setTheme] = useState<Theme>(() => {
    return (localStorage.getItem('theme') as Theme) || 'system';
  });

  useEffect(() => {
    const root = document.documentElement;
    const systemDark = window.matchMedia('(prefers-color-scheme: dark)');

    function applyTheme() {
      const isDark = theme === 'dark' ||
        (theme === 'system' && systemDark.matches);
      root.classList.toggle('dark', isDark);
    }

    applyTheme();
    systemDark.addEventListener('change', applyTheme);
    localStorage.setItem('theme', theme);

    return () => systemDark.removeEventListener('change', applyTheme);
  }, [theme]);

  return { theme, setTheme };
}

Summary

Dengan memanfaatkan Claude Code, komponen スタイリング dari レスポンシブdukungan、ダークモードimplementasiま 、CSS 関わる作業 大幅 efisiensi bisa dilakukan.デザイン 要件 spesifik プロンプト 伝えるこ dan コツ.効果的なプロンプト 書き方 プロンプトテクニック完全panduan silakan lihat.スタイリング 規約 CLAUDE.md 記述 dan 一貫性 保て.

詳しく Anthropic公式dokumenやTailwind CSS公式サイト silakan lihat.