# PutonghuaPro **Repository Path**: lovelwb/putonghua-pro ## Basic Information - **Project Name**: PutonghuaPro - **Description**: PutonghuaPro Prototype Design - **Primary Language**: HTML - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2025-12-06 - **Last Updated**: 2025-12-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # PutonghuaPro #### 介绍 PutonghuaPro Prototype Design #### 软件架构 软件架构说明 - `ai/` - AI辅助学习功能模块，包含AI相关的交互和功能实现 - `home/` - 应用首页模块，包含主页面的展示和功能 - `icon/` - 图标资源文件夹，存放应用图标和各类图标资源 - `login/` - 用户登录模块，包含登录页面的实现 - `mistakeNote/` - 错题本模块，用于记录和管理学习过程中的错题 - `my/` - 个人中心模块，包含用户个人信息和设置功能 - `index.html` - 应用入口文件 HTML #### NAME PutonghuaPro #### UI Prompt 普通话 Pro - UI 风格规范指南 (System Prompts) 请在生成代码或设计图时，严格遵循以下关键词和描述： 1. 核心基调 (Core Vibe) 关键词：新中式 (New Chinese Style)、禅意 (Zen)、雅致 (Elegant)、极简 (Minimalist)、透气感 (Airy)、书卷气 (Scholarly). 描述：界面应当像一张铺开的宣纸，内容如水墨般晕染其上。拒绝高饱和度的荧光色，拒绝复杂的拟物化纹理。 2. 色彩体系 (Color Palette) 使用中国传统色，保持低饱和度，高级且护眼。 背景色 (Background): #F7F7F7 (云峰白 - 极淡的暖灰，模拟纸张质感) #FFFFFF (纯白 - 用于卡片容器) 主色调 (Primary - 品牌色): #5C7A6E (竹青 - 沉稳的灰绿色，代表生长与学习) 或者 #4B8E8D (天青 - 汝窑色，更显通透) 辅助色/强调色 (Accent): #B64533 (朱砂 - 用于“错误”、“录音按钮”或“重点标注”) #E0C879 (藤黄 - 用于“积分”、“等级”或“高亮背景”) 文字色 (Typography): #333333 (墨色 - 正文，非纯黑，像干墨) #666666 (淡墨 - 次级文字) #999999 (银灰 - 提示文字) 3. 字体与排版 (Typography & Layout) 中文字体： 标题：使用 宋体 (Serif) 风格（如 Noto Serif SC 或 Songti SC），体现传统韵味。 正文/功能性文字：使用 黑体 (Sans-serif) 风格（如 PingFang SC, Noto Sans SC），确保小字号下的清晰易读。 排版特征： 留白 (White space)：增加 padding 和 margin，不要排得太满，讲究“疏可走马”。 竖排元素：仅在装饰性标题或日期处尝试 CSS writing-mode: vertical-rl，作为视觉点缀。 4. 组件形态 (UI Components) 卡片 (Cards)： 微圆角：border-radius: 8px 或 12px。不要用全圆角，要保留一点“方正”的骨架。 轻阴影：box-shadow: 0 4px 20px rgba(0,0,0,0.05)，像纸张悬浮的感觉。 按钮 (Buttons)： 实心按钮：主色背景 + 白色宋体字。 空心按钮/边框按钮：细线边框（1px），像印章的边缘。 分割线： 使用虚线或渐变线，模拟毛笔笔锋的枯笔效果（CSS中可用渐变实现）。 5. 图标与装饰 (Icons & Decoration) 图标风格：线性图标 (Line Icons)，线条要细，端点圆润。 背景装饰：可以使用淡雅的水墨晕染、山峦轮廓、竹叶或云纹作为 SVG 背景，透明度设为 10% 左右，切勿喧宾夺主。 #### 给 AI 编程助手的指令 (Copy & Paste) 如果你正在使用 AI（如 ChatGPT）来写 HTML/CSS 代码，你可以把下面这段话发给它，作为System Prompt（系统预设）： Prompt: 我们正在开发一款名为“普通话 Pro”的 App 原型。请你按照**“新中式极简风”**来设计 HTML 和 Tailwind CSS（或原生 CSS）。 设计规范如下： 配色：背景使用米白色/宣纸白 (#F9F7F3)，主色调使用中国传统色“竹青” (#5C7A6E)，强调色使用“朱砂红” (#B64533)，文字使用“墨色” (#2C2C2C)。 字体：大标题使用衬线体（Serif/Songti）以体现文化感，正文和按钮使用无衬线体（Sans/Heiti）以保证易读性。 容器风格：内容卡片使用白色背景，带有轻微的阴影 (box-shadow) 和圆角 (border-radius: 12px)，营造悬浮纸张的感觉。 氛围：整体布局要宽敞，注重留白（Negative space），给人一种优雅、宁静的学习氛围。 装饰：如果需要装饰，可以使用极简的线条或淡入淡出的水墨元素。 请根据以上风格，为我生成 [具体的页面功能，如：首页/练习页面] 的代码。 ####给 AI 绘画工具的提示词 (Midjourney / Stable Diffusion) 如果你们需要生成一些 UI 的参考图或者 App 内的插图，可以使用这组提示词： 英文 (推荐，更精准): Prompt: Mobile app UI design for a Chinese language learning app, name is "Putonghua Pro", New Chinese Style, Minimalism, Zen aesthetics. Color palette: Creamy white rice paper background, muted Sage Green and Ink Black text, Cinnabar Red accents. Elegant layout, plenty of white space, Songti typography for headings. UI elements: rounded square cards, thin line icons. High fidelity, clean interface, Dribbble trending, Figma style. --ar 9:16 --v 6.0 中文描述 (用于沟通): 移动端 App UI 设计，中文学习应用，新中式风格，极简主义，禅意美学。配色方案：米白色宣纸质感背景，低饱和度的竹青色，水墨黑文字，朱砂红点缀。布局优雅，大量留白，宋体标题。UI元素：微圆角的卡片，细线图标。高保真，界面干净，Dribbble 流行风格。 #### 相关问题; styleGuide.html 为模版； 1. 如何让 Index 界面显示不同的页面？ 在 index.html 代码的第 116 行，找到