入门实战案例二之网页设计

视频链接

【Claude Code 实战教程】网站太丑？Claude + Cursor 带我尝试4种 UI 美化方式，最终融合 Readdy 做出专业界面！本期视频讲解了如何使用 Claude + Cursor 对网页界面进行美化，尝试 4 种方法优化 UI 样式，最终融合 Readdy 设计平台，适用于想要提升网页颜值的 AI 开发者。https://www.bilibili.com/video/BV1XYtwz1EsE

内容

1. 方法一：Claude 盲盒设计

   • 提示词 + ultra think 让 Claude 全自动美化

   • 随机生成配色、图标、伪导航，效果不可预测

2. 方法二：截图复刻

   • 拖入 Fish Audio 官网截屏

   • 指令：只改样式与布局，功能不变

   • 输出深色紫主题，但局部需手动打磨

3. 方法三：tweakcn CSS 主题

   • 在 tweakcn 挑选主题 → Copy CSS + 截图交给 Claude

   • 快速套用高质量样式，弹窗等局部需二次调整

   • tweakcn:

   Beautiful themes for shadcn/ui — tweakcn | Theme Editor & Generator

4. 方法四：Readdy AI 设计（推荐）

   • Claude 生成精简需求文档 → 粘贴到 Readdy

   • Readdy AI 生成专业深色界面，可用 Selector 逐块微调

   • 下载前端代码并与后端融合，最终效果专业美观

   • Readdy AI:

   Readdy