我给 Codex / Claude 做了一个有网页审美能力的 Skill ✍ siuser小伟🕐 2026-05-07📦 9.1 KB 🟢 已读 𝕏 文章列表 作者指出 AI 生成网页常缺乏品牌感,单纯“美化”往往无效。作者开发了 Skill “Visual Taste Lab”,通过强制 AI 先进行 VI 审计、判断站点类型和提炼设计语言,再生成代码,从而解决页面风格割裂的问题。 AI编程网页设计UI审美ClaudeCodex设计系统工作流开源工具 # 我给 Codex / Claude 做了一个有网页审美能力的 Skill **作者**: siuser小伟 **日期**: 2026-05-06T11:49:35.000Z **来源**: [https://x.com/_HIT_SZ_/status/2051992769258766463](https://x.com/_HIT_SZ_/status/2051992769258766463) ---  前段时间我一直在用 Codex 和 Claude 做网页,越做越觉得一个问题很明显: > 现在 AI 写页面已经不太难了,难的是让页面看起来像一个真正的品牌。  很多页面功能完整,结构也说得过去,导航、卡片、按钮、表单一个不少,打开之后还是有一种熟悉的 AI 味。 不算难看只是不像被认真设计过。 你很难指出某一处是 bug,因为页面确实能跑,信息也都摆上去了。 > 可字体没有统一气质,颜色像临时挑的,卡片和按钮各有各的脾气,模块之间像是从几个模板里拼出来的。 然后你就想让 AI 再美化一下,它一般就会继续加阴影、加圆角、加渐变、加动效,页面变丰富了,但问题没有解决。  我后来请教大佬发现问题出在任务顺序上。 我们太早让 AI 开始写页面了。 以前我也会对 AI 说做得高级一点、更有设计感一点、参考优秀官网,但这些话其实很难执行。 > 高级到底是字体更大,还是颜色更克制? > 设计感是更多卡片,还是更少模块? > 公司官网、产品页、内容品牌页、后台系统,能不能都用同一套 UI? 如果这些问题没有先回答,AI 只能按平均审美动手,而平均审美通常就是那种看起来完整、但没有品牌感的页面。 所以我做了一个 Skill,叫 Visual Taste Lab。 Skill 链接:[Visual Taste Lab Skill](https://github.com/siuserxiaowei/visual-taste-lab/blob/main/visual-taste-lab/SKILL.md) 在线 Demo:[Visual Taste Lab Preview](https://siuserxiaowei.github.io/visual-taste-lab/) 它要解决的是把审美这件很模糊的事,拆成 AI 可以执行的步骤。 > 先看视觉身份,再看站点类型,再提炼设计语言,页面生成放到最后。  ## 先判断谁在说话 我做这个 Skill 时,第一个想清楚的问题是:页面背后到底是谁在说话。 - 公司官网说的是:我们是谁,我们服务谁,我们为什么值得合作 - 产品页说的是:这个东西解决什么问题,你现在怎么开始用 - 内容品牌页说的是:你要记住我什么气质 - 后台系统更直接,它关心的是信息密度、筛选效率和状态可读性 这些页面看起来都叫网页,但任务完全不同。 如果 AI 没有先判断站点类型,就很容易把公司官网做成产品落地页,把内容品牌做成 SaaS 首页,把后台系统做成营销页面。 页面当然也能跑,只是方向偏了。 Visual Taste Lab 在动手前会先做一个 VI 审计。 > 它会看 Logo 或字标,判断主色、辅色、强调色和中性色,分析字体气质、图片气质、组件形态,再决定这个页面应该更像公司介绍、产品转化、内容展示,还是数据工具。  这里面的关键不在某一个颜色值,重点在于颜色有没有角色。 - 主色承担品牌识别 - 辅色承担分区和柔和状态 - 强调色只在关键 CTA 和重点信息里出现 字体也一样,技术感、商业感、编辑感、机构感,对应的字重、行高和留白都不一样。 AI 如果没有这些限制,就会在每个模块里重新发挥一次。 ## 把好看变成一套设计语言 我不太相信一句你是世界级设计师能稳定解决问题。 它有时候会有效果,但其实更像临场发挥,今天生成得好明天换个项目又散了。 所以我把 Skill 做成了一个小型工作流,里面有核心规则、视觉原型和设计语言模板。 - 核心规则负责告诉 AI 不要一上来改页面 - 视觉原型负责区分公司官网、产品页、交易工具、内容品牌页、后台系统 - 设计语言模板负责把颜色、字体、间距、圆角、卡片、按钮、表格、CTA 这些东西落到具体约束里  这也是我觉得 Skill 比普通提示词好用的地方  > 提示词更像一次性提醒,Skill 更像一套可以重复调用的工作习惯。 你不用每次都从头解释什么叫不要有 AI 味,可以把判断标准、反模式和输出格式沉淀下来,让 AI 每次先走同一个审美流程。 我还给它加了几条很朴素但有用的禁令: - 不要默认上紫蓝渐变 - 不要把所有模块都做成浮动卡片 - 不要忽略已有 Logo 和品牌色 - 不要把公司官网误做成单品落地页 - 不要编造客户、案例和数据 这些听起来像常识,但很多 AI 页面就是在这些地方慢慢变味的。 ## 三个公开 Demo 为了避免这个 Skill 只适用于某一个具体项目,我做了一组公开 Demo,全部用虚构品牌和通用场景。 第一个是 B2B 公司官网,关键词是稳、清楚、有组织感。 > 它的首屏不会急着卖某个功能,而是先建立主体可信度:这家公司是谁,能做什么,合作路径在哪里。视觉上主色更稳,模块更像能力矩阵,信息边界清楚。 第二个是 SaaS 产品页,它会更直接。 > 用户进来更关心产品解决什么问题,多久能上手,下一步怎么试用。所以它的颜色对比更强,CTA 更明确,模块也更贴近产品状态。 第三个是内容品牌页,它更看重编辑感和记忆点。 > 这里不需要每一屏都强转化,字体、留白、图像节奏和标题气质反而更重要。  这三个 Demo 的重点不在评选哪一种最好看。 > 它们想说明的是,同一个 AI 在不同视觉身份下,应该生成不同的页面。真正有用的审美工作流,不应该把所有项目都做成同一种高级模板。 ## 我现在会怎么用它 现在如果我要让 AI 改一个网站,我不会直接说优化 UI。 我会先让它用 Visual Taste Lab 跑一遍审美判断。  它需要先回答几个问题: - 这个品牌的视觉锚点是什么 - 主色和辅色分别承担什么角色 - 这个页面属于哪种站点类型 - 访客进来 5 秒内应该理解什么 - 页面最不应该像什么 等这些问题回答完再让它进入代码和组件层。 这一步会让流程慢一点,但产出的页面稳定很多。 页面不再像每一屏都换了一个设计师。 如果你也经常用 Codex 或 Claude 做网页,我建议下次别急着让它美化页面。 > 先让它判断视觉身份,哪怕只花几分钟。一个页面到底应该像公司官网、产品页、内容品牌页,还是后台工具,这件事想清楚之后,后面的 UI 才会真正收敛。 对我来说Visual Taste Lab 的价值就在这里。 它不要求 AI 模仿某个固定风格,它更像是在写代码之前,先给 AI 立一套审美边界。 能跑的页面已经不稀缺了。 接下来更重要的是,让页面看起来像一个品牌。 ## 可复制 Skill 使用命令 /goal 使用 $visual-taste-lab 优化当前网站 UI/UX。 不要直接开始改页面。先做 VI 审计: 1. 识别 Logo / 字标及其视觉锚点 2. 判断主色、辅色、强调色、中性色和语义色 3. 判断站点类型:公司官网 / 产品页 / 交易工具 / 内容品牌 / 后台系统 / 其他 4. 说明访客 5 秒内应该理解什么、相信什么 5. 提炼 design language:颜色、字体、间距、圆角、按钮、卡片、表格、CTA、图片气质 6. 明确反模式:这个网站最不应该像什么 确认视觉语言后,再修改页面和组件。 要求: - 不套通用模板 - 不编造客户、案例、数据 - 不把公司官网误做成产品页 - 保持移动端无横向溢出 - 修改后运行构建或测试 - 输出改动说明和下一步建议一些 ## 相关链接 - [siuser小伟](https://x.com/_HIT_SZ_) - [@_HIT_SZ_](https://x.com/_HIT_SZ_) - [590](https://x.com/_HIT_SZ_/status/2051992769258766463/analytics) - [https://github.com/siuserxiaowei/visual-taste-lab/blob/main/visual-taste-lab/SKILL.md](https://github.com/siuserxiaowei/visual-taste-lab/blob/main/visual-taste-lab/SKILL.md) - [https://siuserxiaowei.github.io/visual-taste-lab/](https://siuserxiaowei.github.io/visual-taste-lab/) - [$visual](https://x.com/search?q=%24visual&src=cashtag_click) - [Upgrade to Premium](https://x.com/i/premium_sign_up) - [7:49 PM · May 6, 2026](https://x.com/_HIT_SZ_/status/2051992769258766463) - [590 Views](https://x.com/_HIT_SZ_/status/2051992769258766463/analytics) --- *导出时间: 2026/5/7 09:02:02*
别 别再让 AI 硬写网页了!这 5 个设计 Skills 让页面质感直接升级 文章指出使用 AI 直接编写网页往往导致设计模板化、缺乏质感,并介绍了 5 个用于提升网页设计水平的 Skills(taste-design, web-design, emilkowalski, magicslide, Design MD Collection)。文章提供了一个完整的工作流:从确定设计规范和参考,到生成代码及 UI 抛光,帮助独立开发者消除“AI 味”,打造高保真的产品页面。 技术 › Skill ✍ 云析🕐 2026-07-06 AI编程网页设计UI设计Claude CodeCodex工作流设计规范独立开发Landing Page
L LocalSend + Codex:用边界换轻松思维 文章介绍了开源文件传输工具 LocalSend,通过限定同一网络等边界,实现了极简、高效的设备间文件传输。作者进一步引申这种“用边界换轻松”的产品思维,并演示如何利用 Codex 快速构建一个轻量级的活动资料领取页,主张用小工具解决具体问题而非构建复杂系统。 技术 › 工具与效率 ✍ 撸猫不掉毛🕐 2026-07-27 LocalSend文件传输Codex极简主义产品思维开源工具工作流效率提升
生 生财有术亦仁:未来十年最大机会是Agent|新手搭建全景实战教程 本文介绍了生财有术创始人亦仁关于Agent是未来十年最大机会的观点,并提供了从零开始搭建个人AI Agent的全景实战教程。文章对比了Coze等平台工具与自建方案的优劣,详细讲解了如何利用Hermes、飞书CLI和Codex三个核心工具构建具备记忆、执行和进化能力的Agent,帮助企业与个人重构工作流。 技术 › Agent ✍ aix阿乐🕐 2026-07-17 Agent实战教程Hermes飞书CLICodex工作流AI员工开源工具方法论
可 可算找到一个能统一管理所有 Agent 还不用额外订阅的开源项目了! 作者发现并体验了开源项目 Tutti,一个被称为 Agent OS 的统一管理工作台。它整合了 Codex、Claude Code 等多个 Agent,支持实时共享上下文、文件和任务。Tutti 提供 BYO Subscriptions 机制,利用现有订阅无需额外付费,并具备 Goal to Tasks 自动拆解和多 Agent 协作功能,极大提升了使用 Agent 进行创作和开发的效率。 技术 › Agent ✍ 卡尔的AI沃茨🕐 2026-07-11 Agent OSTutti开源工作流效率工具多Agent协作ClaudeCodex
C Claude 官方关于 Loop Engineer 的入门解读 文章介绍了 Claude 官方提出的 Loop Engineer 概念,该概念将现有的 Agent 工作流程进行了系统化梳理。文中详细讲解了四种 Loop 类型:回合制循环、基于目标的循环(GOAL 模式)、基于时间的循环以及主动循环。此外,作者还分享了关于代码库质量维护和 Token 消耗管理的优化建议,并提及了 Codex、Skills 和 Hooks 等相关工具。 技术 › LLM ✍ 歸藏🕐 2026-07-08 Loop EngineerClaudeAgentClaude CodeCodexGOAL 模式工作流自动化Token 管理
别 别再乱装 Codex Skills 了,真正值得先装的是这几类 文章指出,使用 Codex Skills 不应像逛插件商店一样盲目安装,而应围绕核心工作流进行选择。作者推荐了三个安装阶段:第一阶段优先安装前端设计类(如 frontend-design)和浏览器验收类 Skill,以实现从“写页面”到“审页面”的闭环;第二阶段安装研究类(如 last30days)和内容类 Skill,用于产出高质量长文;第三阶段按需补全 Figma 和销售类 Skill。此外,作者建议通过自定义 AGENTS.md 来固化工作流程,提升 Agent 的执行稳定性。 技术 › Codex ✍ MuscleMan🕐 2026-07-06 CodexClaude CodeAgent前端开发工作流AI编程Agent-BrowserResearchContent-Strategy教程
C CODEX 高效工作指南:给小白用户的实用入门课 这是一份面向小用户的 Codex(OpenAI coding agent)入门指南。文章指出 Codex 不是单纯的聊天机器人,而是能读写文件、运行命令的“工作搭档”。作者通过对比 ChatGPT,明确了 Codex 的适用场景,并介绍了 App、CLI、IDE 插件等多种入口。核心内容包含四段式提示词模板、常用工作流(解释项目、修 Bug、加功能、审代码)、配置文件 AGENTS.md 的编写方法,以及 MCP、Skills 和 Automations 的区别与用法。最后强调了安全使用原则及新手从只读理解到自动化的进阶路线。 技术 › Codex ✍ Mr Panda🕐 2026-06-12 AI编程CodexOpenAIAgent教程工作流自动化最佳实践提示词AGENTS.md
一 一个指令,把垃圾素材做成高级 HTML 展示页吊打 PPT 本文指出直接使用 AI 根据 UI 设计稿生成 HTML 往往效果不佳,核心原因在于未能正确拆分任务。作者提出将 UI 还原分为结构、样式和资产三层,并通过 Prompt 指令将复杂的视觉资产(如插画、Logo)与代码逻辑分离。文章详细介绍了从视觉拆解、资产分离、骨架搭建、生成替换到浏览器截图对比修正的六步完整工作流,并分享了通过 Skill 自动化流程及 Codex 内置工具提升效率的技巧。 技术 › Agent ✍ Kyrie🕐 2026-06-02 AI编程UI还原前端开发ClaudeCodexWorkflowHTML自动化LLM
C Claude Code / Codex 新手 50 问 这是一份面向新手的 Claude Code 与 Codex 使用路线图,涵盖了从概念辨析、环境搭建到工作流优化的核心问题。文章重点讲解了 Claude Code 的安装配置、斜杠命令(如 /init、/memory、/permissions)的使用方法,以及 CLAUDE.md 的编写技巧,旨在帮助用户建立稳定的编码代理工作流。 技术 › Claude Code ✍ 老爸的AI联萌🕐 2026-05-14 Claude CodeCodex教程工作流DevOps配置命令行AI编程
T The AI Agent Complexity Ratchet: Why 90% Test Coverage Is Required 文章探讨了 AI 编程代理(Agent)如何改变软件开发的范式。作者通过 GStack 和 GBrain 两个开源项目的经验,指出 AI 使得同时实现高速度和高质量成为可能。核心在于构建“复杂度棘轮”:即 90% 的测试覆盖率。AI 代理能伴随代码编写测试、文档和评估结果,确保每次迭代都建立在质量底线之上,防止退化,从而实现只能变好不能变坏的“单向运动”开发模式。 技术 › Agent ✍ Garry Tan🕐 2026-05-12 AI编程测试覆盖率ClaudeCodex软件工程开发效率代码质量自动化测试
只 只需10分钟,让AI比亲妈都懂你 本文指出AI使用中的痛点:由于AI不认识用户,导致输出内容千篇一律或缺乏针对性。文章提出比学习工作流更优先的事项是构建一份“个人说明书”。作者详细介绍了利用ChatGPT、Claude、豆包等聊天软件的记忆功能和自定义指令,以及Claude Code、Codex等Coding Agent的配置文件(如CLAUDE.md),来让AI“记住”用户身份、偏好和协作规则。通过10分钟的简单配置,AI能写出符合用户风格的文案并提供贴切的生活建议,从而极大提升AI的使用效能。 技术 › 工具与效率 ✍ 金尘马🕐 2026-05-12 AI提示词个人说明书ChatGPTClaudeClaude CodeCodex自定义指令工作流技巧
解 解决 Claude Codex 高 Token 消耗的 Memory 方案调研 文章指出 Claude/Codex 月费高昂的根源在于缺乏持久化记忆,导致大量 Token 浪费在重复上下文上。作者调研了 Agent Memory 层的 4 大派系(协议、框架、协处理器、特定工具),整理了 18 个开源项目,并针对不同使用场景提供了具体的选型建议,旨在通过引入记忆层将 Token 成本降低 50%。 技术 › Agent ✍ Jason Zhu🕐 2026-05-06 ClaudeCodexToken 优化MemoryAgent 开发开源工具mem0Letta开发效率