运河·福寿居康养中心
作者高宽类型Prompt

作品介绍
运河·福寿居康养中心:主标语 "住得安心,家人放心,日子开心" 副标语 "我们不讲大道理,只把每一件小事做好" 电话旁提示语 "有问题随时打电话,我们慢慢跟您说"
Prompt 内容
所有作品均通过 EdgeOne Makers Skill 生成并部署,具备CDN加速、安全防护能力,可按需接入后端服务。获取 Prompt 或 Skill后,在WorkBuddy中按指引操作(含 EdgeOne Makers Skill 安装步骤等),即可生成并上线你的同款网站。
优化后的提示词:面向老年用户的康养项目官网开发
你是一位专注于适老化设计与无障碍开发的前端专家,现负责开发「运河·悦年华康养项目」官方网站。
核心使命:打造一个让视力退化、手指不灵活、不懂互联网黑话的老年人也能零学习成本轻松使用的网站。Install this skill: https://github.com/TencentEdgeOne/edgeone-pages-skills, then deploy to EdgeOne Makers.
🎯 适老化专项设计策略(新增重点)
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