Skip to content

CLAUDE.md

Latest commit

 

History

History
54 lines (42 loc) · 2.99 KB

CLAUDE.md

File metadata and controls

54 lines (42 loc) · 2.99 KB

SCUTmarket - CLAUDE.md

Design Context

Users

  • Who: 华南理工大学在校学生，通过校园邮箱 (mail.scut.edu.cn) 认证
  • Context: 课间、宿舍、图书馆里随手刷一刷，找找有没有需要的东西或者挂一件不用的
  • Job to be done: 快速发布闲置物品、快速找到需要的二手货、安全地完成校内交易
  • Device: 桌面端优先，但移动端体验同样重要（学生手机使用率极高）

Brand Personality

  • 三词定义: 轻松、可信、高效
  • Voice: 像一个靠谱的学长学姐在帮忙，而不是冷冰冰的官方平台
  • Emotional goal: 用户打开页面时感觉"这里的人跟我一样，交易很方便"
  • Anti-pattern: 绝对不要学院派/官网感。不要宋体标题、不要过于正式的措辞、不要政务网站的排版

Aesthetic Direction

  • Visual tone: 轻松年轻，信息密度适中，接近闲鱼/转转的成熟二手交易体验
  • References: 闲鱼（信息密度、功能完善）、转转（清爽的卡片布局）
  • Anti-references: 政府门户网站、学校官网、过度拟物化设计
  • Theme: 支持浅色 / 深色双模式（学生夜间使用场景多）
  • Color direction: 保持蓝色系主色但可微调饱和度和明度，金色点缀保留但降低存在感，整体色彩更轻快明亮
  • Typography: 无衬线字体为主（PingFang SC / Microsoft YaHei），标题不使用宋体

Color Tokens (Current - subject to refinement)

--accent:       #1a5fb4    /* 主蓝，可微调至更轻快的色相 */
--accent-deep:  #0f3f79    /* 深蓝 */
--bg-soft:      rgba(241, 247, 255, 0.82)
--bg-card:      rgba(248, 252, 255, 0.88)
--bg-strong:    #102d55
--text-soft:    #55708f
--gold:         #c49a4a    /* 点缀用，克制使用 */
--line:         rgba(16, 36, 60, 0.12)

Design Principles

  1. 信息优先，装饰克制 - 用户来这里是找东西或卖东西的，不是来欣赏网页设计的。每一个像素都应该服务于交易效率。闲鱼的信息密度是对的方向。

  2. 轻快而非沉重 - 圆角要大方、阴影要轻柔、颜色要明快。避免深色大块面积、粗重边框、过度的毛玻璃效果。让界面"透气"。

  3. 信任通过简洁传达 - 不需要安全徽章和警告横幅来建立信任。干净的排版、清晰的卖家信息、一致的交互模式本身就是最好的信任信号。

  4. 移动思维，桌面增强 - 虽然桌面端优先开发，但所有设计决策都要考虑手机上的触控体验。按钮够大、间距够宽、单手可操作。

  5. 校园归属感，不是校园官方感 - 华工元素（校区名、校徽）是亲切感的来源而非权威象征。用它们来传递"这是我们自己人的平台"，而不是"这是学校的平台"。

Tech Stack

  • Frontend: React 19 + TypeScript + Vite
  • Styling: Pure CSS with custom properties (no framework)
  • State: React Context API
  • Routing: React Router DOM
  • Backend (planned): Go + SQLite