Add AI tools list and update site content and styles

Added a new AI tools list markdown file. Updated VitePress config to rename the Chinese site title. Enhanced custom CSS with entrance animations for feature cards and timeline items. Improved and expanded the about pages in both English and Chinese, including a more detailed implementation roadmap and project summary. Updated homepages to clarify project purpose, tool coverage, and feature descriptions.
This commit is contained in:
tycon 2025-10-15 12:08:45 +08:00
parent d7ad13d26c
commit 2ec54ab2a8
7 changed files with 158 additions and 64 deletions

33
assets/ai-tools-list.md Normal file
View File

@ -0,0 +1,33 @@
# 项目中的AI工具列表
## AI工具名称
- Amp
- Anthropic
- Augment Code
- Claude Code
- Cluely
- CodeBuddy Prompts
- Comet Assistant
- Cursor Prompts
- Devin AI
- Junie
- Kiro
- Manus Agent Tools & Prompt
- Open Source prompts (包含 Bolt, Cline, Codex CLI, Gemini CLI, Lumo, RooCode)
- Perplexity
- Replit
- VSCode Agent
- v0 Prompts and Tools
- Warp.dev
- Z.ai Code
- Leap.new
- Lovable
- Poke
- Qoder
- Same.dev
- Trae
- Traycer AI
- Windsurf
- Xcode
- NotionAi

View File

@ -139,7 +139,7 @@ export default defineConfig({
label: '简体中文',
lang: 'zh-CN',
link: '/zh/',
title: 'AI 系统提示词中心',
title: 'AI 系统提示词仓库',
themeConfig: {
nav: [
{ text: '首页', link: '/zh/' },

View File

@ -1,4 +1,5 @@
/* Styles for VitePress Home Features cards */
/* Hover effect remains on article.box to scale content */
article.box {
transition: transform 0.3s ease-in-out;
}
@ -6,3 +7,56 @@ article.box {
article.box:hover {
transform: scale(1.05); /* Scales up by 5% */
}
/* Entrance animation applied to the entire card link */
.VPFeature {
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0; /* Start invisible */
}
/* Staggered animation delay for each card link within its parent container */
.VPHomeFeatures .VPFeature:nth-child(1) { animation-delay: 0.1s; }
.VPHomeFeatures .VPFeature:nth-child(2) { animation-delay: 0.2s; }
.VPHomeFeatures .VPFeature:nth-child(3) { animation-delay: 0.3s; }
.VPHomeFeatures .VPFeature:nth-child(4) { animation-delay: 0.4s; }
.VPHomeFeatures .VPFeature:nth-child(5) { animation-delay: 0.5s; }
.VPHomeFeatures .VPFeature:nth-child(6) { animation-delay: 0.6s; }
.VPHomeFeatures .VPFeature:nth-child(7) { animation-delay: 0.7s; }
.VPHomeFeatures .VPFeature:nth-child(8) { animation-delay: 0.8s; }
.VPHomeFeatures .VPFeature:nth-child(9) { animation-delay: 0.9s; }
.VPHomeFeatures .VPFeature:nth-child(10) { animation-delay: 1.0s; }
/* Keyframe animation definition */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 20px, 0); /* Start slightly below */
}
to {
opacity: 1;
transform: translate3d(0, 0, 0); /* End at original position */
}
}
.timeline-item {
/* Entrance animation for timeline items */
animation: fadeInUp 0.8s ease-out forwards; /* Use the same animation */
opacity: 0; /* Start invisible */
position: relative; /* Ensure z-index works */
z-index: 1; /* Bring to front on hover */
}
/* Remove timeline-content hover styles */
.timeline-content {
/* No transition, transform-origin, will-change here */
display: block;
height: 100%;
}
.timeline-content:hover {
/* No transform here */
z-index: auto; /* Reset z-index */
}

View File

@ -7,6 +7,48 @@ docFooter:
next: false
---
<div class="timeline-section">
<h2>🛠️ Implementation Roadmap</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>1. Fork Official Repository</h3>
<p>Fork the <a href="https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools" target="_blank">official repository</a> to your personal account, establishing the foundation for secondary development.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>2. Convert Document Format</h3>
<p>Use custom scripts in the <code>scripts</code> directory to batch convert source files into a unified Markdown format, generating both 'zh' and 'en' document folders.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>3. Translation and Localization</h3>
<p>Translate and proofread the generated Markdown documents, completing the localization to prepare for a bilingual website.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>4. Build Documentation Website</h3>
<p>Build a bilingual static website based on VitePress, with deep customization including theme, navigation, and homepage layout.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>5. Configure Automatic Synchronization</h3>
<p>Configure GitHub Actions to automatically detect updates in the upstream repository and generate intuitive update reports for review and manual synchronization.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>6. Deploy to Vercel</h3>
<p>After the project builds successfully locally, deploy it online via Vercel. There's a certain free tier, allowing for almost 0 cost successful operation.</p>
</div>
</div>
</div>
</div>
<style>
.timeline-section {
max-width: 800px;
@ -43,14 +85,13 @@ docFooter:
padding: 20px 40px;
position: relative;
width: 50%;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.2s; }
.timeline-item:nth-child(2) { animation-delay: 0.4s; }
.timeline-item:nth-child(3) { animation-delay: 0.6s; }
.timeline-item:nth-child(4) { animation-delay: 0.8s; }
.timeline-item:nth-child(5) { animation-delay: 1.0s; }
.timeline-item:nth-child(6) { animation-delay: 1.2s; } /* New delay for 6th item */
.timeline-item:nth-child(odd) {
left: 0;
padding-right: 30px;
@ -100,7 +141,7 @@ docFooter:
}
to {
opacity: 1;
transform: translateY(0);
/* transform: translateY(0); -- Removed to avoid conflict */
}
}
@media (max-width: 768px) {
@ -124,44 +165,8 @@ docFooter:
}
</style>
<div class="timeline-section">
<h2>🛠️ Implementation Route</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-content">
<h3>1. Fork Official Repository</h3>
<p>Forked the <a href="https://github.com/x1xhlol/system-prompts-and-models-of-ai-tools" target="_blank">official repository</a> to my personal account to establish a basis for secondary development.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>2. Convert Document Format</h3>
<p>Used a custom script in the <code>scripts</code> directory to batch convert source files into a unified Markdown format and generate two document folders, zh and en.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>3. Translation & Localization</h3>
<p>Translated and proofread the generated Markdown documents to prepare for a bilingual website.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>4. Build Documentation Site</h3>
<p>Built a bilingual static site based on VitePress, with deep customization for the theme, navigation, and homepage layout.</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>5. Configure Auto-Sync</h3>
<p>Configured a GitHub Action to automatically detect upstream updates and generate intuitive reports for review and manual synchronization.</p>
</div>
</div>
</div>
</div>
<div style="max-width: 800px; margin: 60px auto; text-align: center;">
<p style="font-size: 1.1em; line-height: 1.7; color: var(--vp-c-text-2);">
Based on the original project, I have completely refactored it into a modern static documentation website using the <strong>VitePress</strong> tech stack, aiming to provide a better browsing and reading experience. Using custom scripts in the `scripts` directory, the source files are batch converted into a unified Markdown format, and two document folders, zh and en, are generated. The generated Markdown documents are translated and proofread to complete the Chinese localization in preparation for the subsequent bilingual website. A bilingual static website is built based on VitePress, with deep customization including theme, navigation, and homepage layout. However, since most of the translation and conversion was done by AI, some errors may exist. If you have any doubts, it is recommended to check the content of the original repository directly.
<div style="max-width: 800px; margin: 60px auto; text-align: left;">
<p style="font-size: 1.1em; line-height: 1.7; color: var(--vp-c-text-2); text-indent: 2em;">
This project is primarily based on the open-source project "system prompts and models of ai tools". Building upon the original project, the documentation has been further summarized and localized. Therefore, my summary focuses on the Chinese version, and the English part might not be entirely accurate. However, for native prompts, it is best to refer back to the original English text in the repository. The project has been completely refactored into a modern static documentation website using the VitePress tech stack, aiming to provide a better browsing and reading experience. Custom scripts in the `scripts` directory are used to batch convert source files into a unified Markdown format, generating both 'zh' and 'en' document folders. The generated Markdown documents are translated and proofread, completing the localization to prepare for a bilingual website. A bilingual static website is built based on VitePress, with deep customization including theme, navigation, and homepage layout. Finally, it is deployed on Vercel to save deployment costs. However, since most translations are done by AI, some translations might contain errors. If in doubt, it is recommended to directly check the content of the original repository.
</p>
</div>

View File

@ -2,9 +2,9 @@
layout: home
hero:
name: "AI Prompts Hub"
text: "Remastered Edition"
tagline: This project is a secondary development based on the original. It has been refactored by yancongya into a modern documentation site using VitePress, providing a better browsing experience, bilingual support, and dark/light mode.
name: "AI System Prompts Repository"
text: "Prompts & Tools"
tagline: This project contains prompts and corresponding tools for almost all AI coding tools on the market. You can directly copy them into your development process for rules, prompts, and various MCP tools, further standardizing and guiding your project for better development. You can click on the cards below to jump directly to the corresponding page, or use the dropdown menu in the top title bar to select the tool you want to use.
image:
src: /logo.svg
alt: AI Prompts Hub Logo
@ -69,7 +69,7 @@ features:
details: Prompts and models for Notionai.
link: /en/notionai/
- title: Open Source Prompts
details: Prompts and models for Open Source Prompts.
details: Includes Bolt, Cline, Codex CLI, Gemini CLI, Lumo, RooCode.
link: /en/open-source-prompts/
- title: Orchidsapp
details: Prompts and models for Orchidsapp.
@ -114,7 +114,3 @@ features:
details: Prompts and models for Zai Code.
link: /en/zai-code/
---
## Summary of Product Tool Documents
[Please add the summary here]

View File

@ -40,6 +40,12 @@ docFooter:
<p>配置 GitHub Action 自动检测上游仓库的更新,并生成直观的更新报告以供审阅和手动同步。</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-content">
<h3>6. 部署到 Vercel</h3>
<p>项目本地构建没问题后,通过 Vercel 来部署上线,有一定的免费额度,可以几乎实现 0 成本成功运营。</p>
</div>
</div>
</div>
</div>
@ -79,14 +85,13 @@ docFooter:
padding: 20px 40px;
position: relative;
width: 50%;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
.timeline-item:nth-child(1) { animation-delay: 0.2s; }
.timeline-item:nth-child(2) { animation-delay: 0.4s; }
.timeline-item:nth-child(3) { animation-delay: 0.6s; }
.timeline-item:nth-child(4) { animation-delay: 0.8s; }
.timeline-item:nth-child(5) { animation-delay: 1.0s; }
.timeline-item:nth-child(6) { animation-delay: 1.2s; } /* New delay for 6th item */
.timeline-item:nth-child(odd) {
left: 0;
padding-right: 30px;
@ -136,7 +141,7 @@ docFooter:
}
to {
opacity: 1;
transform: translateY(0);
/* transform: translateY(0); -- Removed to avoid conflict */
}
}
@media (max-width: 768px) {
@ -160,8 +165,9 @@ docFooter:
}
</style>
<div style="max-width: 800px; margin: 60px auto; text-align: center;">
<p style="font-size: 1.1em; line-height: 1.7; color: var(--vp-c-text-2);">
在原项目的基础上,我利用 <strong>VitePress</strong> 技术栈将其完全重构为一个现代化的静态文档网站,旨在提供更佳的浏览和阅读体验。使用 `scripts` 目录下的自定义脚本,将源文件批量转换为统一的 Markdown 格式并生成zh和en两个文档文件夹。对生成的 Markdown 文档进行翻译和校对,完成汉化,为后续的双语网站做准备。基于 VitePress 搭建双语静态网站并进行深度定制包括主题、导航、主页布局等。但因为大部分翻译转化都是基于ai完成的所以部分翻译可能存在错误如果有疑问还是建议直接查看原仓库的内容。
<div style="max-width: 800px; margin: 60px auto; text-align: left;">
<p style="font-size: 1.1em; line-height: 1.7; color: var(--vp-c-text-2); text-indent: 2em;">
这个项目主要是基于system prompts and models of ai tools这个开源项目在原项目的基础上进一步对文档进行总结和汉化所以我是以中文效果为主进行总结的英文部分反倒可能不太精准但原生的提示词最好还是要回到仓库项目内查看英文原文。然后通过 VitePress 技术栈将其完全重构为一个现代化的静态文档网站,旨在提供更佳的浏览和阅读体验。使用 \`scripts\` 目录下的自定义脚本,将源文件批量转换为统一的 Markdown 格式并生成zh和en两个文档文件夹。对生成的 Markdown 文档进行翻译和校对,完成汉化,为后续的双语网站做准备。基于 VitePress 搭建双语静态网站,并进行深度定制,包括主题、导航、主页布局等。最后部署在vercel上节约下部署的成本。但因为大部分翻译转化都是基于ai完成的所以部分翻译可能存在错误如果有疑问还是建议直接查看原仓库的内容。
</p>
</div>

View File

@ -2,9 +2,9 @@
layout: home
hero:
name: "AI 提示中心"
text: "重制版"
tagline: 本项目是在原项目基础上进行的二次开发。它已被 yancongya 重构为使用 VitePress 的现代化文档站点,提供更好的浏览体验、双语支持和深色/浅色模式
name: "AI 系统提示词仓库"
text: "提示词&工具"
tagline: 本项目包含了几乎市面上全部ai coding工具的提示词和对应的工具你可以直接复制他们到你开发过程中的rules、prompts和各类mcp工具等进一步规范和指导你的项目更好的开发。你可以直接点击下面的卡片直接跳转到对应的页面来查看也可顶部标题栏的下拉才对来选择你要使用的工具
image:
src: /logo.svg
alt: AI Prompts Hub Logo
@ -69,7 +69,7 @@ features:
details: Notionai 的提示和模型。
link: /zh/notionai/
- title: Open Source Prompts
details: Open Source Prompts 的提示和模型
details: 包含 Bolt, Cline, Codex CLI, Gemini CLI, Lumo, RooCode
link: /zh/open-source-prompts/
- title: Orchidsapp
details: Orchidsapp 的提示和模型。