写了个自用前端设计 Skill，为避免效果单一，会让 AI 调用 Subagent 并行生成四个设计方向。 然后弹出本地服务器预览，选中回传 Codex 或Claude Code。 AI 收到要求继续开发，内置 58 个知名网站设计Design Markdown文档。 根据主题自动抽取知名站的排版、配色等元素，完成设计。 Claude Code和 Zcode 中表现不错，预计本周开源。

给Codex 5.6搭配这四款前端设计工具，写出来的网页不再死板，自带高级质感！ 分享一套我实测效果拉满的Codex前端设计搭配方案： 1️⃣GSAP Skills 补足Codex缺失的专业动效能力，Timeline、ScrollTrigger、Flip、SplitText、SVG各类动画全都全覆盖 🔗地址： 2️⃣Figma（内置插件） 一键读取设计稿、品牌标准与组件素材，能将视觉参考精准复刻为适配多端的响应式代码，不用让Codex凭空脑补设计样式。 3️⃣Taste-Skill 专门管控字体搭配、色彩搭配、留白间距、圆角弧度与组件比例，还能对现有页面做审核重构，消除AI生成页面廉价塑料质感。 🔗地址： 4️⃣Product Design（内置插件） 先敲定产品整体架构与设计调性，再产出多款不同风格的高清设计参考图，敲定视觉风格后再编写代码，摆脱盲目写前端的问题。 搭配GPT-5.6原生更强的布局把控、视觉层次划分与设计判断力，一套完整顺滑的前端工作流直接成型！

GPT 5.6 这次更新了前端设计，在其官网中也放了5个案例 整体感受下来，确实比之前好出不少 但为什么最后一个是韩文网站，提示词也是韩文，完全没看懂 😮‍💨

我找到一个很适合做 AI 前端设计参考的项目：它不是单纯教你写提示词，而是直接用 Claude Code SDK 加 GLM 4.7，一口气生成 100 个 landing page，用来测试一套 Skill 到底能把页面做到什么水平。 github: 现在很多人用 AI 写前端，最大的问题不是「写不出来」，而是写出来的东西太模板、太空、太像默认库。 这个项目的意义是给你一个 benchmark：同样是简单需求，AI 到底能不能做出更完整的视觉系统、响应式布局和动效体验。 主要功能： 1. 用一批结构化 prompt 自动生成 100 个完整页面。 覆盖 SaaS、电商、金融、教育、医疗、地产、旅游、AI、媒体等多种场景。 2. 集成 UI/UX Pro-Max Skill，用来观察 AI 生成页面的设计上限。 3. 支持 GLM 4.7 和 Claude Code SDK 的自动化生成流程。 4. 可选接入 Playwright 截图，方便做批量视觉检查。 5. 支持断点续跑，已经生成过的页面会自动跳过。 你可以看它怎么拆页面、怎么组织视觉层级、怎么把一句需求变成一个完整网站。

对于 GPT Astra 这种 Computer Use 能力很强的模型，“模型的前端设计能力”这个概念需要被改写了。 之前的含义：模型生成网站的前端 UI 是否好看、高级 现在： 1. 提供一个风格参考 2. Astra 遍历全站，识别所有 UI 3. 对所有 UI 按参考风格生图 4. 基于生图重构 UI 5. Astra 走查实际效果，不通过就回到 4 6. 循环结束后全站 UI 都是符合风格的 一句话概括 —— 模型的前端设计能力 的下限是“模型自身前端能力”，上限是“模型生图的审美”，完成度靠 Computer Use 能力保证

这是我让 kimi k3 设计的自我介绍网站，动效设计、页面排版和审美真的太顶了 真不愧是力压 fable 5 的前端设计能力呀 在线游玩地址：

派出 Happycapy 上的 Fable 5，安装现在最流行的几个前端设计 Skill。 设计三个 Prompt，用完全一样的模型，调用 6 个Subagent 并行开发。 看最终哪个胜出，等我的运行结果。

这是你vibe coding的三个必备提示词： 1、前端设计：根据功能需求生成 4 个差异明显的设计方向，分别制作成响应式 HTML。每个方案不能只是换颜色，必须在布局、视觉语言和交互方式上明显不同 2、开发实现：如果GitHub / npm 上有成熟的开源方案，优先复用，不要重复造轮子 （来自yihui大佬 @yihui_indie 的分享，很有效） 3、开发后测试：对整个项目进行一次压力测试，如果发现问题直接修复，直到验证通过