别再让 AI 硬写网页了!这 5 个设计 Skills 让页面质感直接升级
文章指出使用 AI 直接编写网页往往导致设计模板化、缺乏质感,并介绍了 5 个用于提升网页设计水平的 Skills(taste-design, web-design, emilkowalski, magicslide, Design MD Collection)。文章提供了一个完整的工作流:从确定设计规范和参考,到生成代码及 UI 抛光,帮助独立开发者消除“AI 味”,打造高保真的产品页面。
文章指出使用 AI 直接编写网页往往导致设计模板化、缺乏质感,并介绍了 5 个用于提升网页设计水平的 Skills(taste-design, web-design, emilkowalski, magicslide, Design MD Collection)。文章提供了一个完整的工作流:从确定设计规范和参考,到生成代码及 UI 抛光,帮助独立开发者消除“AI 味”,打造高保真的产品页面。
作者分享了 10 条可直接发送给 Codex 或 Claude Code 的 UI 优化提示词,用于提升界面视觉设计。内容涵盖:移除中点分隔符与冗余解释文本、优化文案表达、采用 Radix UI Colors 颜色规范、光学对齐与同心圆圆角、使用 0.5px 边框、精简动画(ease-out 250ms)、限制字号不超过 4 种(最小 12px)、减少用户判断类交互、谨慎使用圆角阴影等。作者还补充回复网友:0.5px 边框在老旧或低分屏设备上可能不适用,提示偏个人经验;另有网友补充了减少冗余 Eyebrow/Overline 眉题的第 11 条建议。
文章介绍了一套用 Codex 串起三个开源工具的完整软件复刻工作流:REA(Reverse Engineer Anything)用于逆向分析目标软件功能的实现原理;Reverse-skill 作为技能路由包,帮 AI 自动选择工具、按需搭建环境并积累经验;PentAGI 则是一支 AI 渗透测试团队,对复刻结果做安全体检。作者给出五步操作流程:安装三件套、让 REA 读懂目标功能、核对有出处的分析证据、用 Codex 重写自己的版本、用 PentAGI 做安全测试,并提供了面向不懂编程的用户的提示词模板和排错方法。
作者拥有6年游戏开发经验,制作过120多个游戏原型,但前100个几乎没有赚钱,转折点在于理解了分发的重要性。文章分享了作者如何借助 CrazyGames、Coolmath Games 等已有海量用户的网页游戏平台发布游戏,而非盲目自行推广。开发上,作者大量使用 AI 工具(Claude Code、Codex、AgentsGuild)进行 vibe coding,主要制作2D休闲益智类游戏。文章还讲解了游戏提交平台的流程、激励式广告变现方式、留存与参与度对收入的影响,以及如何通过数据分析持续迭代游戏。核心观点是:好的游戏只是起点,分发与用户参与度才是真正赚钱的关键。
作者分享了一个开源项目 M3E Canvas:可在浏览器中拖拽 Material 3 Expressive UI 组件,设计多个页面和交互流程,然后一键生成 Prompt,交给 Claude Code、Codex、Gemini CLI 或 Cursor 直接生成 App 代码。它支持 Android / Web 平台、多页面跳转、主题、动画和组件编排,实现了从“画 UI”到“AI 写代码”的高效衔接。针对“低代码编排”的质疑,作者认为借助 AI 能力,这一方式比以往更强大。
设计工程师 Olav 分享了 blume.codes 落地页的构建经验,阐述核心设计理念:注意力是零和的,想脱颖而出必须提升标准。文章详解四大独特元素:视差 Hero 效果(用 Codex 生成分层图像并合成滚动视差)、完全可交互的产品演示(通过 Turborepo monorepo 复用 UI 包,使落地页与 Electron 应用共享组件并自动更新)、花朵主题的旅程矢量线,以及主题切换器。作者强调 AI 编码工具(Codex、Claude Code)让高质量建站变得触手可及,并分享了借助提示词工程实现视觉效果的完整流程与迭代经验。
作者分享了两个月来 AI 编程实践的核心变化:并发。设计打磨从串行问多遍改为并发问多个 agent,review 并行跑多个模型,项目用 Herdr 管理一排。主工具为 Qoder CLI 和 Claude Code,用 Codex、Agy、Grok Build 做对抗性 Review。研发流程包括 Brainstorm、Save Design、Improve Design、Impl、Review 五个原子节点,作者倾向花 90% 时间打磨 design。此外还介绍了基于 skill 的定时任务编排、Robobun 复刻尝试以及 Hunk、Moeka 等轻量周边工具。
文章指出,使用 Codex Skills 不应像逛插件商店一样盲目安装,而应围绕核心工作流进行选择。作者推荐了三个安装阶段:第一阶段优先安装前端设计类(如 frontend-design)和浏览器验收类 Skill,以实现从“写页面”到“审页面”的闭环;第二阶段安装研究类(如 last30days)和内容类 Skill,用于产出高质量长文;第三阶段按需补全 Figma 和销售类 Skill。此外,作者建议通过自定义 AGENTS.md 来固化工作流程,提升 Agent 的执行稳定性。
这是一份面向新手的 Claude Code 与 Codex 使用路线图,涵盖了从概念辨析、环境搭建到工作流优化的核心问题。文章重点讲解了 Claude Code 的安装配置、斜杠命令(如 /init、/memory、/permissions)的使用方法,以及 CLAUDE.md 的编写技巧,旨在帮助用户建立稳定的编码代理工作流。
本文介绍了一种双 Agent 工作流方案,让 Codex 担任项目经理(主控),通过 CC Switch 代理调度 Claude Code(执行者)与 Ant Ling 的 Ling-2.6-flash 模型协作。文章详细讲解了三层架构原理、本地部署步骤及实战场景,实现了扬长避短的 AI 编程自动化,并具备成本统计和故障转移能力。