|
|
给大家看下Claude初步的成果
我用的提示词:
- **[Role]**
- 资深全栈开发专家，精通 PHP 8.2，擅长 Material Design 3 移动端适配，审美参考 Notion、Linear、Bear Notes。
- **[Task]**
- 开发"萌语博客 (MoeBlog)"，适配 InfinityFree。极致精简、手机顺滑、严禁 Emoji，统一颜文字。
- **[Constraints]**
- 1. **架构：纯文件存储，禁止数据库。** 数据用 JSON 文件保存（`data/posts.json`、`data/comments.json`、`data/kaomoji.json`、`data/settings.json`），读写用 `file_get_contents` + `file_put_contents` + `json_encode/decode`，加文件锁 `LOCK_EX` 防并发写坏。
- 2. 禁止框架，原生 PHP。
- 3. 账号：管理员 admin，默认密码 123456，密码 bcrypt 存在 `data/settings.json`。
- 4. 注释：精简干练。
- 5. 路径安全：`config.php` 实现 `base_url()` 自动识别目录深度，所有链接与资源加载必须调用此函数，严禁硬编码。
- 6. 安全：Session 验证，`htmlspecialchars` 过滤，CSRF Token，`data/` 目录放 `.htaccess` 禁止直接访问。
- 7. 兼容：InfinityFree（PHP 8.1、Apache 共享主机）可用。
- **[Pain Points — 本次重点改善]**
- 1. **视觉**：参考 Bear Notes 的温润排版、Linear 的精密间距系统，整体更有呼吸感。
- 2. **操作**：后台导航手机端底部固定 Tab Bar，桌面左侧栏；编辑器工具栏精简易点击。
- 3. **首页**：博主信息卡片（头像 + 签名 + 统计）；文章卡片信息简洁不堆砌。
- 4. **文章页**：字体行距舒适，适合长文阅读。
- 5. **评论区**：表单含字符计数，昵称框不自动 focus 打断阅读。
- **[Features]**
- 1. **全站动态标题与配置**：站点名称、博主姓名、头像直链、个性签名；标题格式 `[站点名称] · [博主姓名] 的博客`。
- 2. **博主卡片**：首页顶部展示头像、名字、签名、文章数与总字数统计。
- 3. **进阶后台设置**：评论开关与审核开关；每页文章数；自定义页底脚本；维护模式 (︶^︶)。
- 4. **编辑器**：Markdown 纯文本 + 实时预览分屏；手机工具栏精简为最常用 8 个操作，含颜文字快捷库；LocalStorage 自动草稿，带时间戳提示。
- 5. **颜文字库管理**：后台增删颜文字，前台与后台编辑器均可一键调用。
- 6. **手机优化**：文章列表长按触发 Bottom Sheet；顶部阅读进度条；Material 波纹点击效果。
- 7. **核心功能**：关键词搜索（标题 + 正文）；文章字数与阅读时间估算；点赞（localStorage 防重）；评论字符计数。
- 8. **主题**：太阳/月亮图标切换深浅色，localStorage 持久，无闪烁。
- 9. **闪念模式**：首页快速发布框，空标题自动生成「日期 + 随机颜文字」。
- 10. **强调色自定义**：后台设置页提供强调色选择器（预设 8 个颜色色块 + 自定义 hex 输入框），修改后全站实时生效，存入 `data/settings.json`，CSS 变量动态注入。
- 11. **数据导出/导入**：后台设置页提供「导出全站数据」按钮，将 `posts.json`、`comments.json`、`kaomoji.json`、`settings.json` 打包为单个 JSON 文件下载；「导入」上传同格式文件后覆盖还原，导入前自动备份当前数据，操作需二次确认。
- **[Design Direction]**
- - **配色**：
- - 深色模式背景主色 `#1D1F20` + `#2B2B2B`，避免纯黑；文字避免纯白，用 `#E8E8E8` / `#A0A0A0` 分层。
- - 浅色模式背景主色 `#F6F6F6` + `#FFFFFF`；文字避免纯黑，用 `#1A1A1A` / `#666666` 分层。
- - 强调色：默认樱花粉红 `#E91E63`，深色模式柔化为 `#F06292`；支持用户在后台自定义，通过 CSS 变量 `--p` 全局生效，深色模式自动在原色基础上提亮 15%。
- - **默认深色模式**：首次访问直接呈现深色，localStorage 无记录时 fallback 为 dark，用户手动切换后以 localStorage 为准。
- - **字体**：正文 Noto Sans SC（14-15px），标题 Noto Serif SC，代码块 Consolas/Monaco；行高 1.75-1.8。
- - **边框**：弱化或去掉边框，用背景色差与阴影代替分隔；必要时用 `opacity: 0.08-0.12` 的半透明边框。
- - **间距**：8px 基准网格，内容区最大宽度 680px 居中；元素间距宁多勿少，保证呼吸感。
- - **圆角**：卡片 16px，按钮 20px，输入框 10px，小标签 6px，统一不混用。
- - **阴影**：模糊半径 8-16px，偏移 1-4px，深色模式用 `rgba(0,0,0,0.3)`，浅色用 `rgba(0,0,0,0.08)`，禁止大范围扩散阴影。
- - **动效**：CSS transition 200ms `cubic-bezier(.2,0,0,1)`，hover 轻微上浮 `translateY(-1px)`；禁止跳变。
- - **对齐**：文字与图标垂直居中用 `align-items: center`，图标尺寸与相邻文字行高匹配。
- **[Polish Steps — 按以下顺序打磨 UI]**
- 1. 调整字体大小层级，弱化或去掉边框，修改文字与背景颜色，避免纯黑纯白。
- 2. 调整元素间距与内外边距，根据层级设置圆角，确保文字与图标对齐。
- 3. 调整阴影模糊与偏移，阴影颜色跟随主题色调，不用纯黑纯白阴影。
- 4. 完善交互反馈，hover / active / focus 状态均有合理过渡时间。
- 5. 选择合适字体，确认在深浅两色模式下均清晰可读。
- **[Format]**
- 输出以下文件，每个完整可运行，禁止省略：
- 1. `config.php` — base_url()、鉴权、JSON 读写封装、MD 渲染、公共 HTML
- 2. `index.php` — 前台首页
- 3. `post.php` — 文章详情
- 4. `admin.php` — 后台全功能
- 5. `.htaccess` — 根目录
- 6. `data/.htaccess` — 禁止外部访问 data 目录
- 7. 部署说明：只需上传所有文件，`data/` 目录与初始数据首次访问自动创建。
|
|
苏公网安备 32010602011309号
|
苏ICP备19064627号
变色卡
，用的哪个ai
