Skip to content

清新、现代的前端工具,让创建精美的 README.md 文档变得简单流畅。无需复杂的配置,只需填写表单,即可生成专业、美观的 README 文档,支持多种风格和主题切换。

Notifications You must be signed in to change notification settings

HazeBlue/README-Palette

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📖 项目简介 | Project Introduction

README Palette 是一个清新、现代的前端工具,让创建精美的 README.md 文档变得简单流畅。无需复杂的配置,只需填写表单,即可生成专业、美观的 README 文档,支持多种风格和主题切换。

这是一个纯前端静态网页应用,可直接在浏览器中使用,也可以部署到 Cloudflare Pages 等静态托管平台。

README Palette is a fresh, modern frontend tool that makes creating beautiful README.md documents simple and smooth. Without complex configuration, just fill in the form to generate professional and beautiful README documents with multiple styles and theme switching support.

This is a pure frontend static web application that can be used directly in a browser or deployed to static hosting platforms like Cloudflare Pages.


✨ 功能特性 | Features

  • 🎨 4 种精美主题(Light / Mint / Sky / Lavender)
  • 📝 实时预览生成的 README
  • 📋 一键复制到剪贴板
  • 💾 一键下载 README.md 文件
  • 🗑️ 一键清空表单
  • 🎯 自动生成目录(TOC)
  • 🏷️ 自动生成 GitHub 徽章(Stars、Forks、License)
  • 💝 支持加密货币打赏地址(BTC / ETH / USDT)
  • 🎭 4 种 README 风格(Clean / Cool / Minimal / Gradient)
  • 📸 自动生成截图占位符
  • 🎨 清新现代的 UI 设计
  • 📱 完全响应式布局
  • 🎨 4 Beautiful Themes (Light / Mint / Sky / Lavender)
  • 📝 Real-time README Preview
  • 📋 One-Click Copy to Clipboard
  • 💾 One-Click Download README.md
  • 🗑️ One-Click Clear Form
  • 🎯 Auto-Generate Table of Contents (TOC)
  • 🏷️ Auto-Generate GitHub Badges (Stars, Forks, License)
  • 💝 Support Cryptocurrency Donation Addresses (BTC / ETH / USDT)
  • 🎭 4 README Styles (Clean / Cool / Minimal / Gradient)
  • 📸 Auto-Generate Screenshot Placeholders
  • 🎨 Fresh and Modern UI Design
  • 📱 Fully Responsive Layout

🛠️ 技术栈 | Tech Stack

  • HTML5 - 语义化结构
  • CSS3 - 现代样式(CSS 变量、渐变、阴影、动画)
  • JavaScript - 核心逻辑
  • jQuery - DOM 操作与事件处理
  • Google Fonts - Inter & Poppins 字体
  • HTML5 - Semantic Structure
  • CSS3 - Modern Styles (CSS Variables, Gradients, Shadows, Animations)
  • JavaScript - Core Logic
  • jQuery - DOM Manipulation & Event Handling
  • Google Fonts - Inter & Poppins Fonts

💻 使用方法 | Usage

基础使用

  1. 打开 index.html
  2. 填写项目信息表单
  3. 点击「✨ 生成 README」按钮
  4. 在右侧预览区查看生成的 README
  5. 点击「📋 复制」或「💾 下载」保存
  6. 点击「🗑️ 清空表单」可重新开始

表单字段说明

  • 项目名称:必需,显示在 README 顶部
  • 项目简介:一句话描述项目
  • 功能列表:每行一个功能,支持 Emoji
  • 技术栈:用逗号分隔,例如:HTML, CSS, JavaScript
  • 安装方式:安装命令或步骤
  • 使用示例:代码示例或使用说明
  • 截图说明:每行一个,留空则使用默认占位符
  • 作者信息:你的名字或 GitHub 用户名
  • GitHub 用户名:用于生成 GitHub 徽章
  • 仓库名称:用于生成 GitHub 徽章
  • 打赏地址:BTC / ETH / USDT 地址(可选)
  • 许可证:选择许可证类型
  • README 风格:Clean / Cool / Minimal / Gradient

主题切换

点击右上角的主题按钮即可切换:

  • ☀️ Light - 经典浅色主题
  • 🌿 Mint - 清新薄荷绿主题
  • 🌤️ Sky - 开阔天空蓝主题
  • 💜 Lavender - 优雅薰衣草紫主题

主题选择会自动保存到本地存储。

Basic Usage

  1. Open index.html
  2. Fill in the project information form
  3. Click the "✨ Generate README" button
  4. View the generated README in the preview area on the right
  5. Click "📋 Copy" or "💾 Download" to save
  6. Click "🗑️ Clear Form" to start over

Form Field Descriptions

  • Project Name: Required, displayed at the top of README
  • Project Description: One-sentence project description
  • Features List: One feature per line, supports Emoji
  • Tech Stack: Comma-separated, e.g., HTML, CSS, JavaScript
  • Installation: Installation commands or steps
  • Usage Example: Code examples or usage instructions
  • Screenshot Descriptions: One per line, leave empty for default placeholder
  • Author Info: Your name or GitHub username
  • GitHub Username: For generating GitHub badges
  • Repository Name: For generating GitHub badges
  • Donation Addresses: BTC / ETH / USDT addresses (optional)
  • License: Select license type
  • README Style: Clean / Cool / Minimal / Gradient

Theme Switching

Click the theme buttons in the top right to switch:

  • ☀️ Light - Classic Light Theme
  • 🌿 Mint - Fresh Mint Green Theme
  • 🌤️ Sky - Open Sky Blue Theme
  • 💜 Lavender - Elegant Lavender Purple Theme

Theme selection is automatically saved to local storage.


🎨 配色方案 | Color Scheme

详细的配色方案请查看 colors.md 文档。

Please refer to the colors.md document for detailed color scheme information.


📝 生成的 README 结构 | Generated README Structure

生成的 README 包含以下部分:

  1. 标题 - 项目名称 + GitHub 徽章
  2. 项目简介 - 项目描述
  3. 目录(TOC) - 自动生成
  4. 功能特性 - 功能列表
  5. 技术栈 - 使用的技术
  6. 安装 - 安装说明
  7. 使用 - 使用示例
  8. 截图 - 截图展示
  9. 打赏支持 - 加密货币地址(如果提供)
  10. 许可证 - 许可证信息
  11. 作者 - 作者信息

The generated README includes the following sections:

  1. Title - Project Name + GitHub Badges
  2. Project Introduction - Project Description
  3. Table of Contents (TOC) - Auto-generated
  4. Features - Feature List
  5. Tech Stack - Technologies Used
  6. Installation - Installation Instructions
  7. Usage - Usage Examples
  8. Screenshots - Screenshot Display
  9. Donation Support - Cryptocurrency Addresses (if provided)
  10. License - License Information
  11. Author - Author Information

📄 许可证 | License

本项目采用 MIT 许可证。

This project is licensed under the MIT License.


👤 作者 | Author

README Palette Team


🙏 致谢 | Acknowledgments


⭐ 如果这个项目对你有帮助,欢迎给个 Star!| If this project helps you, please give it a Star!

About

清新、现代的前端工具,让创建精美的 README.md 文档变得简单流畅。无需复杂的配置,只需填写表单,即可生成专业、美观的 README 文档,支持多种风格和主题切换。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published