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;