diff --git a/xiaohongshu-platform/src/App.css b/xiaohongshu-platform/src/App.css
new file mode 100644
index 0000000..3377645
--- /dev/null
+++ b/xiaohongshu-platform/src/App.css
@@ -0,0 +1,233 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+/* Header Styles */
+.header {
+  background: white;
+  border-bottom: 1px solid #e0e0e0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #ff2442;
+  margin: 0;
+}
+
+.search-bar {
+  display: flex;
+  align-items: center;
+  background: #f8f8f8;
+  border-radius: 20px;
+  padding: 0.5rem 1rem;
+  flex: 1;
+  max-width: 400px;
+  margin: 0 2rem;
+}
+
+.search-bar input {
+  border: none;
+  background: none;
+  outline: none;
+  margin-left: 0.5rem;
+  width: 100%;
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.header-actions svg {
+  cursor: pointer;
+  color: #666;
+}
+
+/* Main Content */
+.main-content {
+  flex: 1;
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.posts-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 1rem;
+  padding: 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Post Card Styles */
+.post-card {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+  cursor: pointer;
+}
+
+.post-card:hover {
+  transform: translateY(-2px);
+}
+
+.post-image {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+}
+
+.post-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.post-content {
+  padding: 1rem;
+}
+
+.post-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0 0 0.5rem 0;
+  color: #333;
+  line-height: 1.3;
+}
+
+.post-description {
+  font-size: 0.9rem;
+  color: #666;
+  margin: 0 0 1rem 0;
+  line-height: 1.4;
+}
+
+.post-author {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.author-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+}
+
+.author-name {
+  font-size: 0.8rem;
+  color: #666;
+}
+
+/* Post Actions */
+.post-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 0.3rem;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: #f0f0f0;
+}
+
+.action-btn.liked {
+  color: #ff4757;
+}
+
+.action-btn.saved {
+  color: #ffa502;
+}
+
+/* Bottom Navigation */
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-around;
+  padding: 0.5rem 0;
+  z-index: 100;
+}
+
+.nav-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: none;
+  border: none;
+  color: #999;
+  cursor: pointer;
+  padding: 0.5rem;
+  transition: color 0.2s ease;
+}
+
+.nav-btn.active {
+  color: #ff2442;
+}
+
+.nav-btn span {
+  font-size: 0.7rem;
+  margin-top: 0.2rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .header-content {
+    padding: 1rem;
+  }
+  
+  .search-bar {
+    margin: 0 1rem;
+  }
+  
+  .posts-container {
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    padding: 0.5rem;
+    gap: 0.5rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .posts-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
diff --git a/xiaohongshu-platform/src/App.jsx b/xiaohongshu-platform/src/App.jsx
new file mode 100644
index 0000000..503ca6b
--- /dev/null
+++ b/xiaohongshu-platform/src/App.jsx
@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { Heart, MessageCircle, Share2, Bookmark, Search, User, Home, Compass, Plus, Bell } from 'lucide-react';
+import './App.css';
+
+function App() {
+  const [posts, setPosts] = useState([
+    {
+      id: 1,
+      username: "创作者小红",
+      avatar: "/api/placeholder/40/40",
+      image: "/api/placeholder/300/400",
+      title: "今日OOTD分享 🌸",
+      content: "春日温柔穿搭，粉色系永远不会出错！",
+      likes: 1234,
+      comments: 89,
+      isLiked: false,
+      isSaved: false
+    },
+    {
+      id: 2,
+      username: "美食达人",
+      avatar: "/api/placeholder/40/40",
+      image: "/api/placeholder/300/400",
+      title: "超简单的蛋糕制作 🍰",
+      content: "零失败率的草莓蛋糕，新手也能做出完美作品！",
+      likes: 2567,
+      comments: 156,
+      isLiked: false,
+      isSaved: false
+    },
+    {
+      id: 3,
+      username: "旅行摄影师",
+      avatar: "/api/placeholder/40/40",
+      image: "/api/placeholder/300/400",
+      title: "云南大理古城 📸",
+      content: "漫步在石板路上，感受千年古城的魅力",
+      likes: 3421,
+      comments: 234,
+      isLiked: true,
+      isSaved: false
+    }
+  ]);
+
+  const [activeTab, setActiveTab] = useState('home');
+
+  const handleLike = (postId) => {
+    setPosts(posts.map(post => 
+      post.id === postId 
+        ? { ...post, isLiked: !post.isLiked, likes: post.isLiked ? post.likes - 1 : post.likes + 1 }
+        : post
+    ));
+  };
+
+  const handleSave = (postId) => {
+    setPosts(posts.map(post => 
+      post.id === postId 
+        ? { ...post, isSaved: !post.isSaved }
+        : post
+    ));
+  };
+
+  return (
+    <div className="app">
+      {/* Header */}
+      <header className="header">
+        <div className="header-content">
+          <h1 className="logo">小红书</h1>
+          <div className="search-bar">
+            <Search size={20} />
+            <input type="text" placeholder="搜索你感兴趣的内容" />
+          </div>
+          <div className="header-actions">
+            <Bell size={24} />
+            <User size={24} />
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="main-content">
+        <div className="posts-container">
+          {posts.map(post => (
+            <div key={post.id} className="post-card">
+              <div className="post-image">
+                <img src={post.image} alt={post.title} />
+              </div>
+              <div className="post-content">
+                <h3 className="post-title">{post.title}</h3>
+                <p className="post-description">{post.content}</p>
+                <div className="post-author">
+                  <img src={post.avatar} alt={post.username} className="author-avatar" />
+                  <span className="author-name">{post.username}</span>
+                </div>
+                <div className="post-actions">
+                  <button 
+                    className={`action-btn ${post.isLiked ? 'liked' : ''}`}
+                    onClick={() => handleLike(post.id)}
+                  >
+                    <Heart size={16} fill={post.isLiked ? '#ff4757' : 'none'} />
+                    <span>{post.likes}</span>
+                  </button>
+                  <button className="action-btn">
+                    <MessageCircle size={16} />
+                    <span>{post.comments}</span>
+                  </button>
+                  <button className="action-btn">
+                    <Share2 size={16} />
+                  </button>
+                  <button 
+                    className={`action-btn ${post.isSaved ? 'saved' : ''}`}
+                    onClick={() => handleSave(post.id)}
+                  >
+                    <Bookmark size={16} fill={post.isSaved ? '#ffa502' : 'none'} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </main>
+
+      {/* Bottom Navigation */}
+      <nav className="bottom-nav">
+        <button 
+          className={`nav-btn ${activeTab === 'home' ? 'active' : ''}`}
+          onClick={() => setActiveTab('home')}
+        >
+          <Home size={24} />
+          <span>首页</span>
+        </button>
+        <button 
+          className={`nav-btn ${activeTab === 'discover' ? 'active' : ''}`}
+          onClick={() => setActiveTab('discover')}
+        >
+          <Compass size={24} />
+          <span>发现</span>
+        </button>
+        <button 
+          className={`nav-btn ${activeTab === 'create' ? 'active' : ''}`}
+          onClick={() => setActiveTab('create')}
+        >
+          <Plus size={24} />
+          <span>创作</span>
+        </button>
+        <button 
+          className={`nav-btn ${activeTab === 'profile' ? 'active' : ''}`}
+          onClick={() => setActiveTab('profile')}
+        >
+          <User size={24} />
+          <span>我</span>
+        </button>
+      </nav>
+    </div>
+  );
+}
+
+export default App;
diff --git a/xiaohongshu-platform/src/index.css b/xiaohongshu-platform/src/index.css
new file mode 100644
index 0000000..9ef6886
--- /dev/null
+++ b/xiaohongshu-platform/src/index.css
@@ -0,0 +1,70 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  color: white;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+    color: #213547;
+  }
+}
diff --git a/xiaohongshu-platform/src/main.jsx b/xiaohongshu-platform/src/main.jsx
new file mode 100644
index 0000000..b9a1a6d
--- /dev/null
+++ b/xiaohongshu-platform/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)