整页 · 学术编辑 ／ 原创示意
首屏
把专业，做得有温度
教授、顾问或研究者的个人网站：留白、衬线标题与清晰的作品目录。
BBS.AI / 设计灵感
看见喜欢的效果，
再开始你的创作。
先选一个视觉方向，再把项目、用途和配色填进去。
不用从一句「帮我做个好看的网站」开始。
- 01挑一个接近目标的设计示例
- 02填写资料，复制完整任务说明
- 03交给 AI 生成，再回来分享结果
可搭配关键词和内容类型筛选。首屏包含整页方案的首屏参考，卡片上保留完整的内容类型。
14 组原创设计起点
整页 · 产品介绍 ／ 原创示意
首屏
先讲清楚，能帮谁
面向小团队的工具首页，用任务说明和产品示意代替空泛的宣传。
整页 · 商品展示 ／ 原创示意
首屏
让一个好产品成为主角
用一件商品、一组清楚的卖点与真实规格，建立简洁的品牌展示页。
整页 · 个人作品 ／ 原创示意
首屏
作品，比自我介绍更有说服力
克制的深色作品集，突出项目背景、本人负责的部分与具体成果。
区块 · 方案对比 ／ 原创示意
其他区块
选择越清楚，决策越轻松
并排展示服务范围、交付物和适合人群，避免让用户反复猜差别。
视觉 · 柔和渐变 ／ 原创示意
首屏视觉效果
不用大视频，也有氛围
纯 CSS 色彩与半透明卡片，为发布页建立轻巧、安静的视觉背景。
界面 · 数据概览 ／ 原创示意
其他区块
让下一步，比数据更明显
围绕一个实际工作任务，安排关键指标、异常提示与下一步操作。
区块 · 常见问题 ／ 原创示意
其他区块
在用户犹豫的地方，回答问题
把使用条件、隐私和售后说清楚，做一个真正有用的常见问题区块。
组件 · 导航栏 ／ 可运行小样
导航栏
让用户知道，下一步去哪
简洁导航配合手机菜单；用清楚的分组帮助用户找到主要内容。
组件 · 页脚 ／ 可运行小样
页脚
页面到底了，方向还在
把关于、帮助和联系放在合适的位置，让页脚成为有用的最后一站。
组件 · 行动入口 ／ 可运行小样
按钮
一个按钮，说清会发生什么
把行动、条件和后续步骤讲清楚，而不是让每个按钮都写“立即开始”。
组件 · 首屏 ／ 可运行小样
首屏
一眼看懂，你提供什么
用一句价值说明、一个行动入口和一组轻巧的视觉元素组织首屏。
视觉 · 玻璃卡片 ／ 可运行小样
视觉效果
有层次，也要读得清楚
可降级的半透明卡片与柔和色块，适合少量点缀，不让特效占满页面。
视觉 · 拟物图标 ／ 可运行小样
视觉效果
让一组图标，说同一种语言
用统一光照、配色与圆角构建小型图标组，先保证辨识，再考虑质感。
还没有匹配的设计，换个用途关键词试试。
内容在当前浏览器生成，不上传项目名称，也不会调用模型。
YOUR NEXT PROJECT
给你的想法，一套清楚的规则。
统一颜色、字体和间距，让每个新页面都像同一个产品。
查看与编辑完整设计规范
Scrolltide
动态网页、区块、组件的提示词与模板。适合找整页或局部动效方向。
有免费示例，也有付费内容；以具体页面为准。访问官网 ↗Navbar Gallery
按静态导航、下拉、巨型菜单等类型看导航设计。
设计参考，原站案例不等于可直接复制的授权源码。访问官网 ↗Footer Design
按字体、网格、深浅色等方向浏览网站页脚。
适合比较信息分组和视觉收尾。访问官网 ↗CTA Gallery
按钮、购买、下载、表单等行动入口的案例集合。
重点看文案和后续步骤，而不只看按钮颜色。访问官网 ↗Refero Styles
把颜色、字体、间距和组件规范整理为 AI 可阅读的 DESIGN.md。
适合先确定设计规则，再让AI写页面。访问官网 ↗Supahero
网页首屏设计集合，帮助比较标题、行动入口和视觉构图。
官网目前注明已并入 ScreensDesign。访问官网 ↗3dicons
3D图标与编辑资源，适合功能说明和统一视觉素材。
官网说明当前版本为CC0，也有高级功能；核对所选资产与套餐。访问官网 ↗Liquid Glass
玻璃质感与实时内容折射效果的交互演示。
特效参考；本站提供的是更轻的CSS磨砂玻璃小样。访问官网 ↗官网核对：2026-10-26。这里只介绍用途并链接来源；本站示例、代码和规范生成器为原创。
先借鉴结构，再换成自己的内容。
预览是用 HTML/CSS 绘制的原创示意。品牌、文案和数据只是演示，提示词未承诺在某个模型中生成一模一样的结果。
把任务交给你已有的工具。
适合能生成网页代码的 AI 编程工具或网页构建器。模型、版本和项目环境不同，可能需要多轮调整。
把尝试，变成下一个人的灵感。
带上提示词、工具版本、生成截图和修改经过，分享你的实际结果 ↗。不必只展示成功案例。
只想阅读或手动复制？展开全部文字版提示词
把专业，做得有温度
教授主页、专业顾问、研究者作品目录。
请设计学术编辑风个人首页。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：暖米白纸感底色、墨黑正文、铜橙强调；衬线大标题搭配无衬线正文，左侧文字与右侧抽象线条平衡布局。 页面结构： 姓名、专业身份与一句准确的研究方向 简短个人介绍与联系入口 按年份分组的精选研究或项目 完整目录入口与来源链接 实现：提供研究关键词筛选；年份、DOI和下载链接只使用提供的真实数据。无照片时使用原创抽象图形，不生成虚构肖像。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
先讲清楚，能帮谁
小工具发布、独立开发产品、团队效率软件。
请设计轻量SaaS工具落地页。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：柔和鼠尾草绿和纸白；清晰的两栏首屏，右侧小型产品示意，左侧一个主要行动按钮，卡片边框细且留白充分。 页面结构： 一句话说明工具为谁解决什么问题 可点开的产品使用示例 三个具体任务与对应功能 清楚的开始使用入口和常见问题 实现：所有产品示意注明演示；不编造转化率、用户数或合作品牌。按钮未接入时明确标记演示。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
让一个好产品成为主角
独立品牌、单品介绍、产品发布。
请设计单品品牌展示页。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：奶油沙色底、橄榄绿产品视觉、衬线标题；商品视觉位于右侧，左侧短标题与购买意向入口。不要堆满标签。 页面结构： 商品名称、真实主张与主图 三项有依据的产品特点 尺寸材质或成分规格 真实价格与购买入口；未知信息用待填写项 实现：没有授权商品图时用注明示意的CSS几何占位。不得编造环保认证、健康功效、折扣或库存。购买入口只连接已有真实商店。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
作品，比自我介绍更有说服力
设计师、开发者、自由职业者的作品集。
请设计深色创作者作品集首页。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：深炭黑背景、浅灰文字、淡青绿强调；大字号开场，几何线条作为点缀，项目以有序网格排布。 页面结构： 姓名、擅长的工作与可联系状态 三个精选项目与项目角色 每个项目的约束、过程与有依据的结果 简短介绍与联系入口 实现：项目图注明来源；只使用真实项目成果，实验项目明确标记。动效仅在有需要时使用轻量CSS，减少动态偏好时关闭。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
选择越清楚，决策越轻松
顾问服务、设计服务、真实订阅方案对比。
请设计服务方案比较区块。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：暖灰底、白色卡片，中间方案以鼠尾草绿强调；对齐的标题、范围与清楚的差异说明，手机改成单列。 页面结构： 说明计价方式与服务边界 三个方案的适合人群、交付物和明确限制 价格与税费说明；未提供则显示待报价 咨询入口和退款或取消条款链接 实现：不虚构价格、限时优惠、热门推荐人数。不默认勾选附加付费项。比较表在手机上不横向溢出。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
不用大视频，也有氛围
活动发布、个人项目、产品首屏。
请设计轻量渐变Hero区块。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：浅绿色、桃粉与奶油白的柔和径向渐变；高可读性短标题搭配半透明辅助卡片，层次轻，不依赖模糊滤镜。 页面结构： 一句清楚的项目介绍 一段简短价值说明 一个主要按钮与一个次要文字链接 静态渐变背景和辅助说明卡片 实现：使用CSS渐变，不下载背景视频，不使用canvas、WebGL或外部动效库。渐变不能削弱文字对比度；默认静态，动态只能作为用户开启的可选项。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
让下一步，比数据更明显
销售线索、内容计划、项目进度等工作台原型。
请设计轻量工作台数据概览。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：浅灰绿背景、白色指标卡、小型柱状图，珊瑚色仅用于需要注意的项目；版式整齐、信息层次清楚。 页面结构： 当前任务与数据更新时间 三个与该任务有关的关键指标 趋势与异常说明 待处理事项和下一步操作 实现：数据必须来自授权来源；没有数据时显示明确标记的样例或空状态。图表提供文字摘要，不能只靠颜色传达状态。不把敏感数据放进公开页面。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
在用户犹豫的地方，回答问题
产品说明、服务介绍、新用户入门。
请设计可访问的FAQ区块。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：浅橄榄灰底、清楚的衬线标题、白色问答条目与细边框；只保留必要的展开与收起提示。 页面结构： 说明这组问答适合哪些用户 五个关于使用方式、限制、数据处理和支持的问题 每个回答给出具体条件与真实相关链接 无法解决时的求助入口 实现：用原生details/summary实现，JavaScript不可用时仍可操作。问题来自实际业务，不编造退款、隐私或服务承诺。禁止为动画牺牲键盘可用性。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
让用户知道，下一步去哪
内容网站、产品首页、小型企业网站。
请设计响应式导航栏。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：纸白背景、左侧文字标志、右侧少量导航；主要行动用珊瑚色，手机切换为原生折叠菜单。 页面结构： 标志与首页入口 三个清楚的主栏目 一个主要行动入口 手机菜单展开、收起和键盘焦点 实现：优先使用原生details/summary；不把导航入口藏在只有悬停才能打开的菜单里。当前栏目用aria-current标识。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
页面到底了，方向还在
社区、工作室、小型服务网站。
请设计多栏页脚。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：米白底与细分隔线；品牌介绍较短，链接按用途分组，最后一行放版权和政策入口。 页面结构： 品牌与一句真实介绍 内容和服务链接分组 联系与帮助入口 版权与真实政策链接 实现：手机改为单列或两列；不生成虚构地址、认证或社交链接；演示链接必须说明是演示。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
一个按钮，说清会发生什么
咨询预约、资料领取、产品上手引导。
请设计清晰的行动引导区块。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：暖色卡片、简短标题、单一橙色主要按钮与次要文字入口；按钮附近交代点击后会发生什么。 页面结构： 具体任务或价值说明 明确的行动按钮 点击后的步骤和条件 可选的了解更多链接 实现：不得制造虚假倒计时或稀缺性。咨询、购买、下载需要不同文案；涉及收费时先展示条件。演示不能假装下单成功。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
一眼看懂，你提供什么
产品发布、个人项目、轻量落地页。
请设计轻量产品首屏Hero。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：纸白大留白、左侧主标题、右侧抽象几何卡片；只用一次轻柔的进入效果，不使用大视频。 页面结构： 服务对象和具体问题 一句主要价值说明 主要行动和次要说明 明确标记的产品示意 实现：手机先标题再视觉；优先保证标题立即可见。动画只能渐进增强，prefers-reduced-motion时关闭。不要隐藏内容等待脚本。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
有层次，也要读得清楚
产品辅助卡片、活动说明、少量视觉装饰。
请设计CSS玻璃质感卡片。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：浅色渐变背景、半透明白色卡片、细亮边与柔和阴影；正文使用深色以确保可读。 页面结构： 静态轻量背景 标题与说明卡片 一个原生展开式说明 不支持模糊效果时的不透明回退 实现：这是CSS磨砂玻璃效果，不模拟真实光学折射。只在小范围使用backdrop-filter，低性能设备可改为实色。背景与文本需有足够对比。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。
让一组图标，说同一种语言
功能介绍、工作台入口、视觉方向草图。
请设计统一风格拟物图标组。 项目：[你的项目名称] 业务与用户：[你的业务与目标用户] 视觉方向：三种原创CSS几何图形，统一左上光照、鼠尾草绿和暖色阴影；辅以文字标签。 页面结构： 说明图标用途 三个配套形状与文字标签 一致的尺寸与留白 不依赖颜色或图形传达唯一信息 实现：CSS示例仅是拟物几何图形，不是真正的3D模型文件。若使用外部图标，先核对具体资产许可，不将整站资源一概当成免费。 采用响应式布局、语义化HTML、清晰可见的键盘焦点；不编造真实经营数据。预览仅为原创布局示意，需在所用工具中验证。