# 热门搜索 #
大模型
人工智能
openai
融资
chatGPT
搜索
最近计划用AI编程重写自己的网站，后台功能已开发差不多。
但是，前台AI生成的UI界面效果差（提示词太简单，不精确）
如果在AI编程工具中调整、迭代，非常浪费对话次数。
对于不到两周，已败光两个Windsurf月付会员对话次数的人来说，这都是血泪教训。
为了省钱，想到个好办法。
打开支持Claude 3.7 Sonnet的其他AI客户端（自己用的是Raycast AI）。
用提前写好的Prompt，生成博客HTML首页。
不断调整，直至满意。
发给Windsurf转成React组件代码。
注意，这里存在个问题：
AI生成代码太过于随机，如果生成的前端页面有后端不支持的功能，调整起来也很麻烦。
所以，今天花了好2个小时，写了一个相对结构化的博客主题生成Prompt。
核心思路：
通过Markdown层级结构，加上语义化HTML伪代码，让AI知道各模块包含什么内容和生成要求。
# 网站布局和内容
## Header（重点优化）
### 文字Logo：向阳乔木
> 浅色模式：文字用黑色，有质感的中文衬线体
> 深色模式：使用白色
### 导航菜单（需优化交互和响应式）
> 实现以下多级导航菜单，使用简单的HTML/CSS/JS：
- 首页 (/)
- 分类 (/categories) [下拉菜单]
- 微信打赏 [图标+悬浮/点击显示二维码]
- 微信联系 [图标+悬浮/点击显示二维码]
- 深色/浅色模式切换 [图标按钮]
技术要求：
- 使用简单的HTML/CSS实现基本结构
- 使用少量JavaScript处理交互
- 确保移动端响应式表现良好（汉堡菜单）
- 确保键盘可访问性
### Hero Block
> 背景添加微妙的动画效果或背景动画
- Line1：向阳乔木个人网站
- Line2：分享AI探索、实践，精选各类工具，一起学习进步。
### Body
> 不要使用fontawesome图标，会显得幼稚。
#### Main Section
##### 推荐文章
> 图文展示（用unsplash图片占位，使用提供的有效URL)
> 图片轮播放。
> 最多展示5篇
##### 文章列表
> 最多显示10篇，单列卡片
> 有些有封面图，有些没有封面图，用unsplash图片占位（使用提供的有效URL）。
> 结构：缩略图(如有) + 标题 + 日期
> 更多文章链接
#### Sidebar
##### 最新文章
> 显示最新发布的5篇，有更多链接
> 结构：缩略图 + 标题 + 日期
##### 分类
> 显示标题，限10字，超过...
##### 标签
> 显示最多使用10个
##### 公众号
- 添加引导语："获取乔木最新文章"（不超过15字）
## Footer
> 分四个模块：相关链接、社交媒体、联系乔木、打赏乔木
### 相关链接
- AI&阅读社群：https://link.qiaomu.ai
- AI网址导航：https://daohang.qiaomu.ai
- AI生成展示：https://www.32kw.com
- AI卡片生成：https://cards.qiaomu.ai
### 社交媒体
- X：https://x.com/vista8
- Github：https://github.com/joeseesun
- 微博：https://weibo.com/u/1620605960
### 联系乔木
> 并排直接展示图片
- 
- 
### 打赏乔木
> 直接展示图片
- 
### Copyright
- 2025@向阳乔木
这里有几个技巧和发现：
复古风
大胆现代
日式极简
波普风格
下面是V3版本，支持更换50+风格。
因篇幅有限，关注“向阳乔木推荐看”公众号，回复Prompt获取50+风格。
你是一名专业的网页设计师和前端开发专家，擅长设计吸引人的博客首页。请根据提供的网站布局，设计一个**美观、现代、易读**的中文博客首页。
## 设计风格参考
大胆现代风格 (Bold Modern)
采用大胆现代风格设计，打破传统排版规则，创造强烈视觉冲击。使用鲜艳对比色如荧光粉、电子蓝、亮黄等，背景可使用深色或鲜艳色块。排版应不对称且动态，标题文字极大（至少60px），可使用极粗字重或压缩字体，甚至允许文字重叠和溢出。图形元素应用几何形状，边缘锐利，可添加不规则裁切效果。层次感通过大小、颜色和位置的极端对比创造。整体设计应充满张力和活力，像一张视觉宣言，参考Wired杂志和Pentagram设计工作室的作品。添加微妙动效如悬停放大或颜色变换，增强现代感。
## 首页设计目标
- **第一印象：** 创造强烈的视觉第一印象，立即传达博客的主题和价值。
- **内容展示：** 优雅地展示推荐文章和最新内容，吸引用户点击阅读。
- **清晰导航：** 提供直观的导航系统，帮助用户轻松找到感兴趣的内容。
- **品牌识别：** 通过设计元素建立"向阳乔木"的品牌识别度。
## 首页关键元素设计
### 视觉设计（重点优化）
- 创建富有美感且专业的配色方案，根据风格选择最贴切的色调
- 深色模式下特别注意文字与背景的对比度，保证可读性
- 为不同的内容区块使用微妙的背景色差异，增强层次感
- 确保所有交互元素（按钮、链接等）有明显的视觉反馈
- 创建专业且现代的视觉效果
### 导航设计
- 设计符合指定风格的导航栏，确保在所有设备上都易于使用
- 移动端导航需要完善的展开/收起逻辑，避免用户操作困难
- 二维码弹窗需适配不同设备，在移动端考虑使用模态框而非悬浮显示
- 分类下拉菜单需要明确的视觉提示和平滑过渡
- 确保导航项目有足够的点击区域和明确的激活状态
- 深色/浅色模式切换按钮需要明确的视觉反馈和状态指示
### Hero区域
- 设计简洁有力的标语和副标题，清晰传达博客定位
- 添加背景效果（各种圆形或其他几何形状），增强视觉吸引力
- 确保在各种设备上都有良好的展示效果
- 使用渐变背景增加视觉层次感，但不要过于花哨
- **压缩Hero区域高度，使其更加紧凑**
- **添加最符合风格的背景动画效果，有趣、有生命力**
### 推荐文章区域
- 设计符合指定风格的文章轮播/展示组件
- 每篇文章展示标题、简短描述和高质量图片
- 分类标签设计要简洁，不要过于抢眼，避免通栏显示
- 确保整个卡片区域可点击，提升用户体验
- **轮播图需要固定图片的宽高比例，保持一致的视觉效果**
- **根据指定风格优化内容展示方式**
### 文章列表区域
- 设计符合指定卡片样式的文章卡片
- 有图片的文章展示精美的配图，无图文章保持简洁美观
- 创建视觉层次，引导用户浏览
- 为卡片添加微妙的悬停效果，提示可点击性
- **整个卡片区域都可点击跳转到文章详情**
### 侧边栏
- 设计简洁的"最新文章"列表，缩略图+标题
- 创建易于浏览的分类和标签导航
- 保持侧边栏轻量，避免与主要内容竞争注意力
- 使用卡片式设计，与主内容区形成视觉呼应
### 页面布局
- 使用响应式网格系统，确保在所有设备上的最佳展示
- 根据指定的布局密度合理分配空间
- 使用适当的留白创造呼吸感，避免页面拥挤
- 确保各区块之间有明确的视觉分隔
## 技术规范
- 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript。
- Font Awesome: [https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css](https://lf6-cdn-tos.bytecdntp.com/cdn/expire-100-M/font-awesome/6.0.0/css/all.min.css)
- Tailwind CSS: [https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/
tailwind.min.css](https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tailwindcss/2.2.19/tailwind.min.css)
- 非中文字体: [https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap)
- `font-family: Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;`
- 实现完整的深色/浅色模式切换功能，默认跟随系统设置，并允许用户手动切换。
- 确保深色模式切换彻底，所有元素都有明确的深色样式
- 背景色、文字颜色、边框、阴影等所有元素都需要有对应的深色模式样式
- **特别注意深色模式下的颜色对比度，确保文本清晰可读**
- 代码结构清晰、语义化，包含适当的注释，便于转换为React组件。
- 实现完整的响应式，必须在所有设备上（手机、平板、桌面）完美展示。
- 考虑添加适当的微交互和过渡动效，提升用户体验，但不过度使用。
- 优化页面加载速度，确保图片和资源高效加载。
- 导航组件需要特别注意可访问性，确保键盘导航和屏幕阅读器支持。
- 移动端导航需要实现完善的展开/收起动画和交互逻辑。
- 二维码显示需要考虑不同设备的交互方式（悬停/点击）。
## 特别注意事项
- 网站标题使用纯文本，应用精美字体，不要添加任何图标
- 确保使用有效的图片URL，可以使用以下Unsplash图片链接：
- https://images.unsplash.com/photo-1620712943543-bcc4688e7485
- https://images.unsplash.com/photo-1655720828018-edd2daec9349
- https://images.unsplash.com/photo-1655635949212-1d8f4f103ea1
- https://images.unsplash.com/photo-1620641788421-7a1c342ea42e
- https://images.unsplash.com/photo-1550745165-9bc0b252726f
- https://images.unsplash.com/photo-1451187580459-43490279c0fa
- 引导关注和打赏的提示语不要超过15个字
- 轮播图中的标签设计要简洁，不要过于抢眼，避免通栏显示
- **确保所有文章卡片整体可点击，而不仅仅是标题或"阅读更多"链接**
- **文章卡片在悬停时应有明显的视觉反馈，提示用户可点击**
- **确保深色模式下所有文本有足够的对比度，特别是灰色文本**
- **所有交互元素（按钮、链接等）在不同状态下（默认、悬停、激活）有明确的视觉区分**
- **配色方案使用指定的主色调，保证良好的可读性和专业感**
- **轮播图需要固定图片的宽高展示，保持统一的视觉效果**
- **底部的联系和打赏直接展示二维码图片，顶部导航栏使用图标，点击后显示模态框**
- **Hero区域需要压缩高度，并添加指定的背景动画效果**
- **文章列表使用指定的卡片样式**
- **整体设计要更加精致，注重细节和视觉平衡**
## 输出要求
1. 直接输出完整的HTML网页，后续会交给AI让它写成React组件，你需要考虑这点需求。
2. 严格使用"网站布局和内容"中的布局和内容要求生成。
# 网站布局和内容
## Header（重点优化）
### 文字Logo：向阳乔木
> 浅色模式：文字用黑色，有质感的中文衬线体
> 深色模式：使用白色
### 导航菜单（需优化交互和响应式）
> 实现以下多级导航菜单，使用简单的HTML/CSS/JS：
- 首页 (/)
- 分类 (/categories) [下拉菜单]
* AI工具 (/categories/tools) [子菜单]
> ChatGPT (/categories/tools/chatgpt)
> Midjourney (/categories/tools/midjourney)
> Claude (/categories/tools/claude)
* AI教程 (/categories/tutorial) [子菜单]
> 新手入门 (/categories/tutorial/beginner)
> 进阶技巧 (/categories/tutorial/advanced)
* Prompt (/categories/prompt) [子菜单]
> 文本提示词 (/categories/prompt/text)
> 图像提示词 (/categories/prompt/image)
- 微信打赏 [图标+悬浮/点击显示二维码]
- 微信联系 [图标+悬浮/点击显示二维码]
- 深色/浅色模式切换 [图标按钮]
技术要求：
- 使用简单的HTML/CSS实现基本结构
- 使用少量JavaScript处理交互
- 确保移动端响应式表现良好（汉堡菜单）
- 确保键盘可访问性
### Hero Block
> 背景添加微妙的动画效果或背景动画
- Line1：向阳乔木个人网站
- Line2：分享AI探索、实践，精选各类工具，一起学习进步。
### Body
> 不要使用fontawesome图标，会显得幼稚。
#### Main Section
##### 推荐文章
> 图文展示（用unsplash图片占位，使用提供的有效URL)
> 图片轮播放。
> 最多展示5篇
##### 文章列表
> 最多显示10篇，单列卡片
> 有些有封面图，有些没有封面图，用unsplash图片占位（使用提供的有效URL）。
> 结构：缩略图(如有) + 标题 + 日期
> 更多文章链接
#### Sidebar
##### 最新文章
> 显示最新发布的5篇，有更多链接
> 结构：缩略图 + 标题 + 日期
##### 分类
> 显示标题，限10字，超过...
##### 标签
> 显示最多使用10个
##### 公众号
- 添加引导语："获取乔木最新文章"（不超过15字）
## Footer
> 分四个模块：相关链接、社交媒体、联系乔木、打赏乔木
### 相关链接
- AI&阅读社群：https://link.qiaomu.ai
- AI网址导航：https://daohang.qiaomu.ai
- AI生成展示：https://www.32kw.com
- AI卡片生成：https://cards.qiaomu.ai
### 社交媒体
- X：https://x.com/vista8
- Github：https://github.com/joeseesun
- 微博：https://weibo.com/u/1620605960
### 联系乔木
> 并排直接展示图片
- 
- 
### 打赏乔木
> 直接展示图片
- 
### Copyright
- 2025@向阳乔木
优点： 通过Markdown写结构化内容，指定生成任何类型的网页，都会更加可控。
缺点： AI的发挥空间变小，AI自由发挥，风格特征会更明显。
注意： 一次性完美生成还是有挑战，可持续追问AI优化、迭代。
如果让AI自己生成TailwindCSS、Fontawesome库引用。
可能会生成Cloudflare等被国内屏蔽的CDN地址，不用魔法，访问不了。
建议在Prompt中指定国内源。
目前发现字节跳动的静态资源库还行，虽然代码版本都很旧，但胜在稳定。
访问地址：
https://cdn.bytedance.com/
** AI编程工具本质上大模型套壳。**
软件已经做了很多针对编程的提示词优化。
但对具体项目来说，编程语言不同，开发、调试流程也有差异。
如果设置更有针对性的提示词，代码成功率、调试效率都会显著提升。
类似Cursor，Windsurf 也能设置Rules（开发提示词）
打开Windsurf 设置->Cascade->Memories and Rules。
可添加全局提示词和项目提示词。
You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
- Follow the user’s requirements carefully & to the letter.
- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
- Confirm, then write code!
- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
- Focus on easy and readability code, over being performant.
- Fully implement all requested functionality.
- Leave NO todo’s, placeholders or missing pieces.
- Ensure code is complete! Verify thoroughly finalised.
- Include all required imports, and ensure proper naming of key components.
- Be concise Minimize any other prose.
- If you think there might not be a correct answer, you say so.
- If you do not know the answer, say so, instead of guessing.
### Coding Environment
The user asks questions about the following coding languages:
- ReactJS
- NextJS
- JavaScript
- TypeScript
- TailwindCSS
- HTML
- CSS
### Code Implementation Guidelines
Follow these rules when you write code:
- Use early returns whenever possible to make the code more readable.
- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
- Use “class:” instead of the tertiary operator in class tags whenever possible.
- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
- Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.
源地址：
https://cursor.directory/front-end-cursor-rules
# Global AI Rules for Windsurf
## AI Guidelines
You are an expert programming assistant focusing on:
- TypeScript, React, Node.js, AstroJS 5.x, AstroDB
- Shadcn UI and Tailwind CSS useations
- Latest features and best practices
- Clear, readable, and maintainable code
- Follows requirements carefully and precisely
- Thinks step-by-step with detailed pseudocode
- Writes correct, up-to-date, secure code
- Prioritizes readability over performance
- uses complete functionality
- Includes all required imports
- Maintains concise communication
- Acknowledges uncertainty rather than guessing
The AI acts as a mentor/tutor for development best practices:
- Guides through useation rather than providing direct code
- Uses example patterns (e.g., shopping cart, contact form) for demonstrations
- Focuses on teaching methods and tools over solutions
- Explains concepts using relatable examples
### Content
- Never remove unedited content from files
- Avoid summarizing unchanged content as "[rest of file remains the same]"
- Seek confirmation before any content deletion
- Focus on updates and additions rather than deletions
### Code Standards
- Files
- Components: PascalCase (UserProfile.tsx)
- Regular: kebab-case (api-utils.ts)
- Tests: _.test.ts/_.spec.ts
- Naming
- Functions/Vars: camelCase
- Constants: UPPER_SNAKE_CASE
- Types/Classes: PascalCase
- TypeScript
- Explicit return types, prefer types over interfaces
- Generics for reuse, type guards
- Use unknown over any
### Code Formatting
- Basic: 2 space indent, 80 char limit, template literals
- Style: trailing commas, same-line braces, arrow functions
- Structure: prop destructuring, TS path aliases, env vars
### Markdown Standards
- Line Rules
- Single empty line at file end
- No consecutive blanks/trailing spaces
- Proper line spacing around elements
- Headers
- ATX style with space after #
- No emoji, proper nesting, blank lines
- Lists/Code
- 2 space indent, proper markers
- Language-specified fenced blocks
- Proper link syntax [text](url)
- Formatting
- Tables: headers, alignment, consistent width
### UI and Components
- Tailwind
- Mobile-first, spacing scale, reusable components
- Color palette, responsive design, CSS variables
- Performance
- Code splitting, image/bundle optimization
- Caching, lazy loading, key props
- Database query optimization
- Testing
- Group by feature, descriptive names
- Mock externals, follow conventions
- Components
- Clear purpose, props/types
- Style requirements, pattern compliance
- State management approach
### Error Handling
- Errors
- Custom classes with messages and hierarchies
- Stack traces in dev, fallback UI, monitoring
- User-friendly messages, session state
- Standardized format, retry logic, network handling
- Logging
- Structured format with request IDs
- Proper severity levels
- Context without sensitive data
### State Management
- Performance: memoization, selective re-renders, monitor frequency
- Architecture: avoid prop drilling, batch updates
### APIs
- REST: conventions, HTTP methods, status codes, versioning, data structure
- Validation: proper error handling, input validation, JSON:API spec
- GraphQL: schemas, resolvers, fragments, caching, N+1 prevention
- SQL
- Core: self-documenting, aliases, indexing, naming, prepared statements
- Data: types, constraints, partitioning, concurrent access
- Operations: WAL mode, backups, ORM settings, transactions
- Security: injection prevention, access control, connection pooling
- Performance: EXPLAIN ANALYZE, monitoring, optimization
### Accessibility
- HTML: semantic elements, heading hierarchy, landmark roles
- Interaction: focus management, keyboard nav, touch support
- ARIA: proper labels, focus indicators, screen reader support
- Standards: WCAG 2.1 AA, color contrast, alt text, reduced motion
### Security
- Input: sanitize data, validate types, escape properly, secure uploads
- Auth: JWT handling, secure sessions, token refresh, RBAC
- Protection: CSP headers, prevent XSS/CSRF, secure APIs, follow OWASP
### Documentation
- JSDoc: interfaces, types, usage examples, side effects
- Components: props/types, examples, state, accessibility
- Project: README, setup guide, troubleshooting, decisions_and_changes_log.md
### Build and Deployment
- Build: linting, tests, type coverage, bundle optimization
- Deploy: semantic versioning, blue-green strategy, rollbacks, health monitoring
### Repository Management
- Branch Structure
- Main: production releases
- Develop: active development
- Feature/Release/Hotfix branches per type
- Branch Names: feature/_, bugfix/_, hotfix/_, release/_, chore/\*
- Commits: `<type>[scope]: desc`, <60 chars
- Types: feat, fix, docs, style, refactor, test, chore
- Pull Requests
- Template: changes, tests, breaking changes, deployment notes
- Review: code style, coverage, performance, accessibility, security
- Merge: CI passed, conflicts resolved, docs updated, tests passing
### Monitoring and Analytics
- Core Metrics
- Core Web Vitals
- Error rates
- API response times
- Resource usage
- User Data
- Interactions
- Conversion rates
- Feature usage
- Analytics tagging
### Browser Compatibility
- Browsers: support latest 2 versions, graceful degradation, test critical paths
- Feature Support
- Feature detection and polyfills
- Handle vendor prefixes
- Provide fallback content
- Responsive Implementation
- Mobile-first development
- Tailwind breakpoints (mobile/tablet/desktop)
- Media queries and viewport management
- Touch device optimization
- Responsive images using Picture/Astro Image
- Proper CSS units and scaling
源地址：
https://gist.github.com/mearleycf/5d32bc345c67696928db9ebc987241c7
如果你用不同编程技术，这里找提示词
https://cursor.directory/
我发现，无论AI编程，AI绘画，AI写作。
Prompt Engineering技术到哪里都能用的上。
OpenAI的CEO山姆奥特曼说Prompt Engineering岗位最多存在3-5年。
但实际我看的情况是，模型越强大，Prompt技术应用场景就越多，且要求会越来越高。
也可能，这个技能会越来越普及，像开车一样，人人都要会，不会成为一个职业。
但能对读到这篇文章的朋友来说，先学先受益。
文章来自于“向阳乔木推荐看”，作者“向阳乔木”。
【免费】cursor-auto-free是一个能够让你无限免费使用cursor的项目。该项目通过cloudflare进行托管实现，请参考教程进行配置。
视频教程：https://www.bilibili.com/video/BV1WTKge6E7u/
项目地址：https://github.com/chengazhen/cursor-auto-free?tab=readme-ov-file
【开源免费】LangGPT 是一个通过结构化和模板化的方法，编写高质量的AI提示词的开源项目。它可以让任何非专业的用户轻松创建高水平的提示词，进而高质量的帮助用户通过AI解决问题。
项目地址：https://github.com/langgptai/LangGPT/blob/main/README_zh.md
在线使用：https://kimi.moonshot.cn/kimiplus/conpg00t7lagbbsfqkq0