分享一个 Claude 页面风格提示词

编辑部 2026-05-04T19:40:16.308321 41970 阅读 tech

请用纯 HTML/CSS/JS 复刻 Claude.ai 官网的视觉风格：设计系统：背景色: #F4F1EA （暖奶油白）强调色: #D97757 （珊瑚橙）字体: 衬线展示字体用 Instrument Serif，正文用 Inter 圆角: 12px 统一圆角间距: 基于 4px 倍数体...

分享一个 Claude 页面风格提示词

请用纯 HTML/CSS/JS 复刻 Claude.ai 官网的视觉风格：

设计系统：

背景色: #F4F1EA（暖奶油白）
强调色: #D97757（珊瑚橙）
字体: 衬线展示字体用 Instrument Serif，正文用 Inter
圆角: 12px 统一圆角
间距: 基于 4px 倍数体系

页面结构：

顶部导航（logo + 菜单 + CTA按钮）
英雄区（大标题 + 副标题 + 输入框）
功能卡片区（3列网格）
底部 footer

要求：

支持亮/暗双模式切换
无 AI 滥用风格（无紫色渐变、无发光气泡）
微动效（hover 时卡片轻微上浮）

欢迎佬友补充

2 个帖子 - 2 位参与者

阅读完整话题

来源: linux.do查看原文

分享一个 Claude 页面风格帖子使用 IT