设计工程师 Olav 分享了 blume.codes 落地页的构建经验，阐述核心设计理念：注意力是零和的，想脱颖而出必须提升标准。文章详解四大独特元素：视差 Hero 效果（用 Codex 生成分层图像并合成滚动视差）、完全可交互的产品演示（通过 Turborepo monorepo 复用 UI 包，使落地页与 Electron 应用共享组件并自动更新）、花朵主题的旅程矢量线，以及主题切换器。作者强调 AI 编码工具（Codex、Claude Code）让高质量建站变得触手可及，并分享了借助提示词工程实现视觉效果的完整流程与迭代经验。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词，用于提升界面视觉设计。内容涵盖：移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画（ease-out 250ms）、限制字号不超过 4 种（最小 12px）、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友：0.5px 边框在老旧或低分屏设备上可能不适用，提示偏个人经验；另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
文章指出使用 AI 直接编写网页往往导致设计模板化、缺乏质感，并介绍了 5 个用于提升网页设计水平的 Skills（taste-design, web-design, emilkowalski, magicslide, Design MD Collection）。文章提供了一个完整的工作流：从确定设计规范和参考，到生成代码及 UI 抛光，帮助独立开发者消除“AI 味”，打造高保真的产品页面。
作者基于 10 年 UI/UX 设计经验，结合 AI 工具实践，总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill：UI UX Pro Max（自动匹配行业风格）、Taste Skill（原创设计方向）、Impeccable（逐块打磨去 AI 味）、Emil Kowalski Skills（动效细节）、Hallmark（上线前检查），并配以场景演示。作者还分享了 8 条可复用的设计原则，包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等，强调工具在变但好的设计判断力依然无法被 AI 替代。
作者分享了6个提示语技巧，用于消除DeepSeek和Codex生成代码动画/UI时的AI味。包括：删除重复无信息的文案、去掉多余的装饰框和阴影、为颜色分配固定用途、统一字号和图标对齐、一屏只讲一件事、优化动效使其服务于叙事和反馈。文中每个技巧都配有具体可用的提示语。作者还预告了正在开发的大剪辑Skill，能用DeepSeek剪出十分钟真人口播视频。
作者介绍了开源项目 AI Design Skills，目前提供 landing-page-design 技能，适用于 Claude Code、Cursor、Codex 等可读取规则文件的 AI 编程工具。它不是现成模板，而是一套从内容到视觉的制作规则：先明确产品定位与用户目标，再组织页面结构；统一字体、间距、配色和动效等视觉系统；并补齐按钮悬停、加载、空页面、报错、表单校验、移动端适配和无障碍等交付细节，避免 AI 生成千篇一律的默认样式。评论区还交流了表单校验保留已填内容等实用经验。
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
本文介绍用AI搭建个人网站的最佳实践：先整理个人内容到飞书文档，再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源，涵盖组件库（shadcn/ui、Aceternity UI、Magic UI等）、动效与3D工具（Motion、GSAP、Three.js、Spline等）、整站灵感网站（Awwwards、Land-book等）、产品界面参考（Mobbin、Page Flows等）以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法，可让AI直接复用代码和Prompt，适合从零搭建或迭代优化个人网站时收藏使用。
作者指出AI构建的应用虽然强大，但界面千篇一律：相同的圆角卡片、柔和渐变和仪表盘布局。为此他制作了一个Claude Code技能来重新设计应用界面。该技能首先为应用寻找契合的视觉概念（如跑步应用围绕田径跑道），然后强制探索三个不同设计方向而非过早定稿，最后用iPhone真实分辨率渲染并进行自我批判，检测通用组件、层级弱化等AI生成特征。工作流为：概念→方向→设计→渲染→批判→优化。目标是让不同应用呈现不同世界，保留AI设计速度的同时避免AI感。
作者开发了一个 Claude Skill，用于解决 AI 生成应用界面千篇一律、缺乏个性的问题（如相同的卡片、渐变和模板化布局）。该 Skill 强迫 Claude 采用不同思路：先确立真实视觉概念，探索 3 个设计方向，选定一致的设计语言，按 iPhone 尺寸渲染界面，扫描明显的 AI slop 模式，最后进行批评与迭代优化。作者免费发放该 Skill，用户需转发并评论 'stop slop' 即可获取。其核心理念是：当所有人都在做 AI slop 应用时，你的产品必须与众不同才能成功。
作者分享了一套 Landing Page 高效工作流：先用 saaslandingpage.com 灵感库浏览数百个顶级 SaaS 产品的真实落地页，学习 Hero Section 和价值主张的设计；再借助 website-rebuild-skill（基于 Claude Code / AI Agent 的网站复刻工具）以像素级精度抓取结构、样式并重构干净代码。工作流为：选定对标案例，用 Skill 自动化重构基础骨架，替换自己的文案与品牌资产，可节省约 90% 前端排版时间，将原本一天的页面打磨工作大幅压缩，同时保证高质量还原。
作者 DerrickLi 非计算机专业出身，借助 AI 工具 Codex 搭建了自己的个人网站。文章记录了完整建站过程：先规划网站内容框架（个人介绍、作品、文章、Skills、联系入口），再反复打磨 UI，从最初追求科技感动效失败，到通过 MotionSites 素材参考最终实现电影感页面，强调有具体参考能让沟通更高效。部署阶段经历预览发布、域名接入、HTTPS 配置等调试。作者总结了定内容、选画面、做上线三步流程，并强调网站上线后仍需持续积累作品和文章内容。
作者分享了一个开源项目 M3E Canvas：可在浏览器中拖拽 Material 3 Expressive UI 组件，设计多个页面和交互流程，然后一键生成 Prompt，交给 Claude Code、Codex、Gemini CLI 或 Cursor 直接生成 App 代码。它支持 Android / Web 平台、多页面跳转、主题、动画和组件编排，实现了从“画 UI”到“AI 写代码”的高效衔接。针对“低代码编排”的质疑，作者认为借助 AI 能力，这一方式比以往更强大。
