Skip to content

前端自给自足UI设计稿(Claude AI 版本)

笔者最近探索了如何借助 AI(特别是 Claude)来协助前端开发者完成 UI 设计工作。通过实践发现,Claude 在这方面表现出色,能够快速生成符合现代设计趋势的界面设计。

在这篇文章中,我以一个健康类 APP 为例,演示了如何通过简单的提示词引导 AI 完成设计工作。整个过程分为几个核心模块:首页概览运动计划饮食管理以及社区功能。通过分模块设计的方式,不仅避免了 AI 模型的输出限制问题,还能让设计更加聚焦和精细。

为了提高效率和可用性,我在提示词中特别强调了以下几点:

  • 使用 Tailwind CSS(CDN方式)实现样式
  • 采用 Lucide Static CDN 处理图标
  • 将相关页面整合在同一个 HTML 文件中

通过对比测试,目前 Claude(特别是 3.5 版本)在该场景下的表现最为稳定。而 GPT-4o 和 DeepSeek 等其他模型在完成类似任务时还存在一定差距。

DeepSeek具体到普通人的意义

作为一个普通技术爱好者,我深切地感受到 DeepSeek 模型的革命性意义。它不仅仅是一个高性能的开源大模型,更是打破了传统 AI 使用的诸多限制。从效果到开源,从本地部署到中文能力,DeepSeek 为我们普通用户提供了前所未有的可能性。

独立开发做了个800+免费模板导航

笔者很高兴向大家介绍我开发的网站 template0.com —— 一个专注于收集高质量免费模板的目录网站。作为创始人,我深信成功往往始于一个好的模板,而不是从零开始。这也是网站命名的由来:template(模板)在0之前,同时0也象征着所有模板都是免费($0)的。

这个项目主要解决了三个痛点:

  • 优质免费模板难以被发现和获得足够曝光
  • 用户难以快速找到符合需求的免费模板
  • 缺乏一个探索和提升网站审美的平台

网站提供了丰富的功能,包括:

  • 分类筛选系统
  • 精选合集展示
  • 博客内容输出
  • 免费模板提交
  • 个人收藏功能

目前网站月活跃用户达到4k,页面浏览量14k,并保持稳定增长。我们通过赞助维持运营,确保所有内容对用户永久免费。欢迎各位来探索、收藏心仪的模板,也欢迎创作者提交自己的作品!

微信小程序为DOM无缝增加open-type开放能力

在这篇文章中,笔者分享了在开发微信小程序时,如何通过CSS技巧实现buttoncell组件的协同工作。由于微信小程序出于安全考虑,无法通过JS模拟点击,因此必须在界面上使用button组件来调用开放能力,比如打开意见反馈页面。为了解决样式统一的问题,笔者将button嵌套在cell中,并通过CSS隐藏button的默认样式。

然而,这样的做法导致cell的点击反馈消失,因为事件被button捕获。经过分析,笔者借助pointer-events属性,使得button不捕获鼠标事件,而其内部的cell组件可以正常响应点击。最终,笔者成功实现了既能打开反馈页面,又保留了cell的点击反馈效果的功能。这种方法有效地结合了样式与功能,为开发者提供了实用的解决方案。

第三次重构个人博客(基于 Vitepress)

笔者在这篇文章中记录了自己第三次重构个人博客的过程,基于 Vitepress 进行了一系列的改进和优化。自 2022 年初开始使用 Vitepress 搭建博客,随着版本的更新,笔者逐渐感受到原有风格的不适,决定进行重新设计。本次重构的主要内容包括:

  1. 首页设计:采用简单的博客分页列表,利用createContentLoader提取文章摘要等信息。
  2. 部署与域名管理:将博客从 Github Pages 迁移至 Cloudflare Pages,并更改 DNS 服务器。
  3. 国际化支持:实现 Vitepress 和评论系统 Giscus 的国际化,支持中英双语。
  4. 内容迁移:对博客文章进行迁移,生成摘要和标签,确保旧路径的兼容性以避免外链失效。
  5. 优化用户体验:自定义字体并进行预加载,提升页面加载速度。

通过这些调整,笔者希望博客不仅在内容上丰富,同时在视觉和使用体验上也能给读者带来更好的感受。最终,笔者强调了博客设计对写作心情的重要性,认为整理环境能够促进创作灵感的流动。

如何讨好读者/观众

如何讨好读者/观众的关键在于理解生理机制对写作的影响。

技术写作不仅需要技术知识,还需掌握写作技巧。

  • 通过激发肾上腺素,创造紧迫感,能让读者更有动力阅读;
  • 利用镜像神经元,增加代入感,帮助读者沉浸于内容中;
  • 通过 GABA 的作用,使文章结尾给人以豁然开朗的感觉;
  • 多巴胺则通过奖励机制,激励读者继续关注内容;

最后,催产素通过情感故事,增强读者的情感共鸣。优秀的内容创作需要将这些元素结合,以吸引和维持观众的兴趣。

最近 GPT 帮我解决的 30 个问题

最近,我发现自己越来越依赖 GPT(大型语言模型)来解决一些问题,这些问题涉及到编程、工作、学习等方方面面。GPT 不仅可以帮助我快速生成代码,还可以提供一些有趣的想法和解决方案。在这篇文章中,我将分享最近 GPT 帮我解决的 30 个问题,希望能给大家一些启发。

比如:

  • 生成 GitHub README 的热词词云图
  • 生成 Excel 转 JSON 的函数
  • 生成 GPT 翻译 HTML 的程序
  • 生成时间处理函数
  • 生成 CSS 磨砂玻璃效果
  • 生成 Windows 查看端口占用的命令
  • 辅助阅读代码
  • 等等...

又一次开始学英语了,希望这次能享受它

这篇文章讲述了作者再次开始学习英语的心态和目标。

作者通过观看一段关于学习外语的油管视频,了解到好奇和放松的心理状态对于学习的重要性。视频中介绍了五个原则和七个行为,包括聚焦在与自己相关的语言内容上、将语言作为沟通工具、通过理解消息来学习语言、说出让别人听懂的语言、保持好心情和放松状态等。

作者还分享了一些学习英语的方法和资源,包括观看外文视频和阅读外文博客。最后,作者希望能够真正享受学习英语的过程,并将其作为一种习惯和工具来使用。

Nuxt3 手写一个搜索页面

笔者在这篇文章中分享了对之前开发的小型搜索引擎的前端重构过程,主要使用了NuxtVuetify技术栈。重写的动机包括代码结构混乱、后端服务冗余以及希望通过 SSR(服务器端渲染)优化 SEO。通过重构,用户在搜索时,URL 会根据查询更新,从而提升搜索引擎的抓取效果,增加应用的曝光率。

页面布局上,笔者注重移动端优化,同时保持搜索框和结果在同一页面,简化用户体验。后端使用了两个 API 接口,分别处理搜索请求和搜索建议。笔者强调了使用Nuxt时开发体验的优越性,特别是在快速搭建 API 方面。

代码结构上,笔者通过组件封装简化了主页面的复杂性,并动态生成 SEO 相关的元信息,以便于分享时的展示效果。此外,文章提到集成了 Google 和百度的分析工具,便于后续的数据追踪。

总的来说,笔者对Nuxt的使用体验表示满意,并鼓励读者尝试这款技术。

写个 docker+nginx 部 https 的模板

笔者在这篇文章中分享了一个基于nginx + dockerhttps模板,旨在简化国内用户自建小网站的部署过程。考虑到国内缺乏便捷的免费部署平台,笔者创建了一个易于使用的模板和相应的脚本,以便快速实现https反向代理。

使用该模板的基本步骤包括:

  1. 克隆模板项目到本地。
  2. 替换证书文件为自己的证书。
  3. 运行脚本以替换域名。
  4. 根据需要修改docker-compose.yml中的根目录。
  5. 启动 Docker 容器。

最后,笔者建议使用docker ps命令检查容器状态,并查看nginx日志以确保服务正常运行。总的来说,这个模板为用户提供了一个快速、方便的方式来部署https网站。

共 71 条数据
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8