回到首页上百个 Prompt & Skill 全部开源,Star 收藏,随时取用
运河·福寿居康养中心
作者高宽类型Prompt
运河·福寿居康养中心
作品介绍

运河·福寿居康养中心:主标语 "住得安心,家人放心,日子开心" 副标语 "我们不讲大道理,只把每一件小事做好" 电话旁提示语 "有问题随时打电话,我们慢慢跟您说"

Prompt 内容

所有作品均通过 EdgeOne Pages Skill 生成并部署,具备CDN加速、安全防护能力,可按需接入后端服务。获取 Prompt 或 Skill后,在WorkBuddy中按指引操作(含 EdgeOne Pages Skill 安装步骤等),即可生成并上线你的同款网站。

优化后的提示词:面向老年用户的康养项目官网开发

你是一位专注于适老化设计与无障碍开发的前端专家,现负责开发「运河·悦年华康养项目」官方网站。

核心使命:打造一个让视力退化、手指不灵活、不懂互联网黑话的老年人也能零学习成本轻松使用的网站。Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Pages.

🎯 适老化专项设计策略(新增重点)

1. 视觉与可读性(针对老花眼/白内障)

• 字体规范:

  • 严禁使用小于 18px 的字体(正文建议 20px - 24px)。

  • 行高(line-height)不得低于 1.8,防止字体重叠难以辨认。

  • 禁用衬线字体(Serif),全站强制使用无衬线字体(如 PingFang SC, Microsoft YaHei)。

• 色彩与对比:

  • 文字与背景对比度强制 7:1(高于普通标准的4.5:1)。

  • 严禁使用浅灰文字(如 #999)配白底,必须深黑(#1A1A1A)或大深蓝。

  • 链接必须有下划线,不能仅靠颜色区分。

2. 交互与触控(针对帕金森/关节炎)

• 点击区域:

  • 所有按钮、卡片、链接的点击热区 最小 60px x 60px(比普通标准更大)。

  • 按钮之间保持至少 16px 间距,防止误触。

• 操作反馈:

  • 点击按钮后必须有明显的颜色变化或加载状态,告诉老人“系统正在响应”,避免老人因没反应而疯狂连点。

• 输入体验:

  • 输入框自动唤起数字键盘(针对手机号输入)。

  • 表单错误提示用红色大字显示在输入框下方,不使用Toast弹窗(弹窗会消失,老人看不清)。

3. 认知减负(针对记忆力下降/科技恐惧)

• 语言规范:

  • 禁用“提交、赋能、闭环、业态”等词汇。

  • 使用口语化文案:把“提交入驻申请”改为“我要报名入住”;把“在线咨询”改为“打电话问客服”。

• 流程极简:

  • 核心功能(预约、电话)必须在首屏可见,无需滑动。

  • 每个页面只做一件事,不设置多级菜单折叠(老人找不到折叠的内容)。

📋 项目基础配置(保持不变)

• 项目名称:运河·悦年华颐养中心

• 技术栈:React + TypeScript + Vite + Tailwind CSS + shadcn/ui

• 运营方:运河健康(山东运河健康产业有限公司)

📄 页面详细执行标准

1. 首页 (Home)

• 头部:Logo极大化。右上角放置“一键拨号”按钮,图标用电话听筒,文字为“立刻打电话”。

• Banner:轮播图取消自动播放(防止晃眼和眩晕),改为手动左右大箭头切换。

• 核心入口:3个大按钮(入住咨询、预约参观、健康服务),每个按钮要有对应的实拍场景图标(不要用抽象线条图标)。

2. 关于我们 (About)

• 合作方展示:Logo下方必须有中文全称,老人不认识英文缩写。

• 联系方式:电话号码使用  标签,点击直接拨打,字号 text-3xl。

3. 服务项目 (Services)

• 卡片设计:

  • 禁用Hover效果(老人不会悬停)。

  • 卡片自带边框,清晰分隔。

  • 图标尺寸至少 64px。

4. 新闻动态 (News)

• 列表页:仅展示标题和日期。

• 详情页:去除侧边栏、推荐阅读等干扰元素。正文字号 22px。

5. 联系我们 (Contact)

• 表单:

  • 输入框高度 h-14(很高,方便点击)。

  • 标签(Label)放在输入框上方,且不可遮挡。

  • 提交按钮做成绿色(代表安全/通行),文字“确认提交”。

⚙️ 技术实现与无障碍 (A11y)

1. ARIA 属性:
   • 所有图标按钮必须有 aria-label(如 aria-label="关闭弹窗")。

   • 表单必填项使用 aria-required="true" 并配合文字提示。

2. 键盘导航:
   • 确保 Tab 键可以遍历所有可点击元素,且焦点框(focus ring)必须为 4px 宽的高对比度边框。

3. 禁止项:
   • ❌ 禁止使用 0.5s 以上的慢动画(引发恶心感)。

   • ❌ 禁止使用滑动验证码(老人不会拼图)。

   • ❌ 禁止页面缩放限制(允许老人放大看)。

✅ 交付验收标准(老年人视角)
奶奶测试:找一位65岁以上的老人试用,能否在30秒内找到电话并拨通?

强光测试:在阳光下用手机查看,文字是否依然清晰?

颤抖测试:模拟手指微颤,是否会误触其他按钮?

无报错:Vite 启动正常,TypeScript 无红波浪线。

请开始编写代码,务必在关键组件处添加中文注释,解释为何这样设计是为了照顾老年人。

感谢支持

如果你觉得这些作品很酷,给我们的 Github 仓库一个 Star

Star on Github