非设计背景，如何用Codex做高级感网站？
非设计背景，如何用Codex做高级感网站？
非设计背景，如何用Codex做高级感网站？ 非设计背景，如何用Codex做高级感网站？ Modified July 4 如果你不知道怎么选，可以先记三句： 有参考图，用 image to code。 没有参考图，先用 imagegen frontend web。 普通网页想去 AI 味，用 design taste frontend。 你可以这样写： 请使用 taste skill 的思路来做这个页面。 如果已有参考图，按 image to code 的流程：先分析图片，再提取 DESIGN.md，再实现。 如果没有参考图，先用 imagegen frontend web 的思路生成网页意向图，再提取 DESIGN.md。 实现时用 design taste frontend 的标准，避免常见 AI 味。 生成后不满意，怎么让它改 页面第一次生成出来，不满意很正常。 不要只说： 不好看，重新做。 这样 Codex 还是不知道该改哪里。 更好的方式是让它在内置浏览器里打开页面，对照 DESIGN.md 找问题。 请启动本地服务，在浏览器里打开这个页面。 先不要改代码。 请对照 DESIGN.md 和当前页面截图，列出 5 个最明显的问题。 重点看： 1. 首屏是否有表达 2. 颜色是否跑偏 3. 字体层级是否太弱 4. 卡片是否太模板 5. 图片和素材是否像占位图 6. 移动端是否有溢出 列完问题后，再逐项修改。 如果你在 Codex 桌面版里用，可以直接让它打开本地页面。看到哪里不满意，就直接写评论或注释，把问题点出来： • 首屏太像 SaaS 模板 • 标题没有个人表达 • 这张图太像占位图 • 按钮太普通 • 卡片太多 • 移动端标题挤在一起 越具体越好。 比如这样： 当前页面最大的问题是首屏没有个人表达。 请保留整体结构，但做 3 个修改： 1. H1 改得更像个人站，不要像产品官网 2. 首屏右侧图片替换成更有个人内容感的视觉 3. 删掉无意义的标签和多余卡片 素材不满意，用内置 Imagen 生图能力补 很多页面看着廉价，不是布局问题，而是素材问题。 比如： • 首屏图太像随机图库 • 头像太普通 • 产品 mockup 太假 • 背景图和页面气质不搭 • 图标像占位素材 这时候不要硬让 Codex 改 CSS，可以先生成新素材。 如果你用的是支持内置 Imagen 生图能力的环境，可以让它直接生成素材： 请生成一张适合放在个人站首屏的视觉图。 要求： 风格和 DESIGN.md 一致 不要像商业图库 不要出现真实品牌 logo 画面要适合作为网页右侧主视觉 背景干净，方便放进网页 如果是头像、封面、项目图，也可以分别生成。 请根据 DESIGN.md 生成 3 张项目展示图。 要求： 1. 风格统一 2. 适合放在网页卡片里 3. 不要有乱码文字 4. 不要出现品牌 logo 5. 每张图主题不同，但颜色统一 生成后，再让 Codex 替换项目里的素材。 请把这些新图片替换到页面里。 替换后调整尺寸、裁切和留白，保证和 DESIGN.md 一致。 用 Cowart 无限画布做二次修改 有些素材不是一次生成就能用。 这时可以把页面截图、参考图、生成图放到 Cowart 无限画布里一起看。 我的用法大概是： 1. 把参考网站截图放进去 2. 把 Codex 生成的页面截图放进去 3. 把内置 Imagen 生成的素材放进去 4. 在画布上圈出不满意的地方，写下注释 5. 让 AI 按标注改图 6. 选满意的素材导出 7. 再让 Codex 替换进页面 这个流程很适合处理“感觉不对”的问题。 因为很多 UI 问题光靠文字说不清楚。放在同一张画布里对比，差距会明显很多。 你可以这样跟 Codex 配合： 我已经在 Cowart 里整理了参考图、当前页面截图和要替换的素材。 请根据我标注的位置修改页面： 1. 替换首屏主视觉 2. 调整图片裁切 3. 保持页面颜色和 DESIGN.md 一致 4. 不要改变整体布局 一套完整提示词 我想用 Codex 做一个有高级感的个人站。 这不是一个随便生成的模板页。 我希望它能表达我是谁、我做什么内容、我想给别人留下什么印象。 请不要马上写代码。 第一步：先帮我整理 DESIGN.md。 DESIGN.md 要写清楚： 1. 页面要表达什么 2. 目标读者是谁 3. 主要参考是什么 4. 参考里要学什么 5. 参考里不要学什么 6. 颜色 7. 字体 8. 首屏布局 如果你不知道怎么选，可以先记三句： 有参考图，用 image to code。 没有参考图，先用 imagegen frontend web。 普通网页想去 AI 味，用 design taste frontend。 你可以这样写： 请使用 taste skill 的思路来做这个页面。 如果已有参考图，按 image to code 的流程：先分析图片，再提取 DESIGN.md，再实现。 如果没有参考图，先用 imagegen frontend web 的思路生成网页意向图，再提取 DESIGN.md。 实现时用 design taste frontend 的标准，避免常见 AI 味。 生成后不满意，怎么让它改 页面第一次生成出来，不满意很正常。 不要只说： 不好看，重新做。 这样 Codex 还是不知道该改哪里。 更好的方式是让它在内置浏览器里打开页面，对照 DESIGN.md 找问题。 请启动本地服务，在浏览器里打开这个页面。 先不要改代码。 请对照 DESIGN.md 和当前页面截图，列出 5 个最明显的问题。 重点看： 1. 首屏是否有表达 2. 颜色是否跑偏 3. 字体层级是否太弱 4. 卡片是否太模板 5. 图片和素材是否像占位图 6. 移动端是否有溢出 列完问题后，再逐项修改。 如果你在 Codex 桌面版里用，可以直接让它打开本地页面。看到哪里不满意，就直接写评论或注释，把问题点出来： • 首屏太像 SaaS 模板 • 标题没有个人表达 • 这张图太像占位图 • 按钮太普通 • 卡片太多 • 移动端标题挤在一起 越具体越好。 比如这样： 当前页面最大的问题是首屏没有个人表达。 请保留整体结构，但做 3 个修改： 1. H1 改得更像个人站，不要像产品官网 2. 首屏右侧图片替换成更有个人内容感的视觉 3. 删掉无意义的标签和多余卡片 素材不满意，用内置 Imagen 生图能力补 很多页面看着廉价，不是布局问题，而是素材问题。 比如： • 首屏图太像随机图库 • 头像太普通 • 产品 mockup 太假 • 背景图和页面气质不搭 • 图标像占位素材 这时候不要硬让 Codex 改 CSS，可以先生成新素材。 如果你用的是支持内置 Imagen 生图能力的环境，可以让它直接生成素材： 请生成一张适合放在个人站首屏的视觉图。 要求： 风格和 DESIGN.md 一致 不要像商业图库 不要出现真实品牌 logo 画面要适合作为网页右侧主视觉 背景干净，方便放进网页 如果是头像、封面、项目图，也可以分别生成。 请根据 DESIGN.md 生成 3 张项目展示图。 要求： 1. 风格统一 2. 适合放在网页卡片里 3. 不要有乱码文字 4. 不要出现品牌 logo 5. 每张图主题不同，但颜色统一 生成后，再让 Codex 替换项目里的素材。 请把这些新图片替换到页面里。 替换后调整尺寸、裁切和留白，保证和 DESIGN.md 一致。 用 Cowart 无限画布做二次修改 有些素材不是一次生成就能用。 这时可以把页面截图、参考图、生成图放到 Cowart 无限画布里一起看。 我的用法大概是： 1. 把参考网站截图放进去 2. 把 Codex 生成的页面截图放进去 3. 把内置 Imagen 生成的素材放进去 4. 在画布上圈出不满意的地方，写下注释 5. 让 AI 按标注改图 6. 选满意的素材导出 7. 再让 Codex 替换进页面 这个流程很适合处理“感觉不对”的问题。 因为很多 UI 问题光靠文字说不清楚。放在同一张画布里对比，差距会明显很多。 你可以这样跟 Codex 配合： 我已经在 Cowart 里整理了参考图、当前页面截图和要替换的素材。 请根据我标注的位置修改页面： 1. 替换首屏主视觉 2. 调整图片裁切 3. 保持页面颜色和 DESIGN.md 一致 4. 不要改变整体布局 一套完整提示词 我想用 Codex 做一个有高级感的个人站。 这不是一个随便生成的模板页。 我希望它能表达我是谁、我做什么内容、我想给别人留下什么印象。 请不要马上写代码。 第一步：先帮我整理 DESIGN.md。 DESIGN.md 要写清楚： 1. 页面要表达什么 2. 目标读者是谁 3. 主要参考是什么 4. 参考里要学什么 5. 参考里不要学什么 6. 颜色 7. 字体 8. 首屏布局 9. 按钮和卡片 10. 图片和素材 11. 动效 12. 不要出现的 AI 味 第二步：写完 DESIGN.md 后先停，等我确认。 第三步：我确认后，再按 DESIGN.md 实现页面。 第四步：完成后启动本地服务，在浏览器里打开页面，对照 DESIGN.md 截图检查。 如果页面不满意，不要重写整个项目，先指出问题，再逐项修改。 注意： 参考网站只用来借鉴风格。 不要复制它的 logo、品牌文案、图片素材和完整页面。 我现在的结论 Codex 做 UI 的正确打开方式，不是让它自由发挥。 更稳的是先让它帮你把参考、审美和表达目标整理成 DESIGN.md，确认以后再写代码。 如果没有参考，就先找参考。 如果找不到合适素材，就用内置 Imagen 生图能力生成。 如果生成图还不对，就放进 Cowart 无限画布里对比、标注、修改。 这样做下来，Codex 就不只是“帮你生成一个网页”，而是更像一个可以一起打磨页面的搭档。 🔗 原文链接： https://x.com/Jackywxsz/status/2072... https://x.com/Jackywxsz/status/2072... 最近我在研究给自己做一个“个人站”，但我不想让 AI 随便生成一个模板页， 也不想做看起来很炫但不知道在表达什么的那种，还是想有些表达的 但我不是设计背景出身，花了点时间研究了下用Codex做UI的最佳实践 和大家分享下我的经验，希望对你有所帮助和启发。 大家一定要记住，用 Codex 做 UI，最重要的不是让它立刻写代码 而是先把“你想要什么样”说清楚。 很多人一上来会这样写： 帮我做一个高级感个人网站。 结果通常是这样的。它可能给你一个深色背景、几个紫蓝渐变、三张功能卡，再加一堆看起来很 AI 的小标签。 正确的打开方式是： 先不要写代码。 请先根据我的需求和参考，整理一份 DESIGN.md。 我确认后，再开始实现页面。 这就是我今天想分享的核心经验： 先做设计说明，再做页面 。 DESIGN.md 是什么 DESIGN.md 不用想得很复杂。 你可以把它理解成一份给 Codex 看的设计说明。它不是写给设计师看的专业文档，而是帮 Codex 把“感觉”拆成可执行的规则。 比如： • 这个页面想表达什么 • 给谁看 • 学哪个参考 • 不学哪个参考 • 用什么颜色 • 字体是什么感觉 • 首屏怎么排 • 按钮怎么做 • 卡片多不多 • 动效要轻还是重 • 哪些 AI 味不要出现 你完全不用自己从零写这份文件。更好的方式是让 Codex 帮你写。 但你要知道它应该包含什么。不然它写出来的 DESIGN.md 也会很虚，最后页面还是跑偏。 可以直接复制这段： 我想做一个个人站，不要直接写代码。 请先帮我整理一份 DESIGN.md。 这份 DESIGN.md 要用普通人能看懂的话写，不要堆专业术语。 请写清楚： 1. 这个页面要表达什么 2. 页面给谁看 3. 参考里要学什么 4. 参考里不要学什么 5. 颜色怎么定 6. 字体大概是什么感觉 7. 首屏怎么排 8. 按钮和卡片怎么做 9. 动效做到什么程度 10. 哪些常见 AI 味不要出现 写完 DESIGN.md 后先停，等我确认。 如果你只改一个习惯，就改这个： 不要一上来让 Codex 写页面，先让它写 DESIGN.md 。 先找参考，不要让 Codex 瞎猜 做个人站、作品集、产品页都一样，最好先找参考。 这里的参考分三类。 第一类：可以直接用的风格参考 有些网站已经把风格整理好了，最适合给 Codex 用。 比如 Refero Styles： https://styles.refero.design/ 它的好处是，你不是只能看到截图，还能拿到现成的 DESIGN.md、颜色、字体和样式规则。 这种参考最省事。 你可以找到一个喜欢的风格，然后把它的 DESIGN.md 复制给 Codex，再说： 请读取这份 DESIGN.md。 接下来做我的个人站时，参考这份设计语言。 注意：只借鉴风格，不复制原网站的品牌、文案和素材。 这类参考适合你已经有明确审美方向的时候。 比如你知道自己想要极简、复古、暗色、杂志感、实验排版，直接从里面挑一个接近的，再让 Codex 改成你的内容。 第二类：有喜欢的网站，先提取它的设计规则 如果你看到某个真实网站很好看，想借它的风格，不要只截图丢给 Codex。 可以用 web to design md： https://github.com/Paidax01/web to design md 你不用理解太多技术细节。简单说，它可以把一个网页拆成设计说明。 它会把网页里的颜色、字体、按钮、间距、卡片样式整理出来，变成 Codex 能读的文件。 适合这种情况： • 你看到一个官网很好看 • 你想借它的气质 • 但你不想让 Codex 只看截图乱猜 基本流程是： 1. 找到参考网站链接 2. 用 web to design md 生成 DESIGN.md 3. 删除对方的 logo、文案、图片和品牌元素 4. 把剩下的风格规则交给 Codex 5. 让 Codex 用你的内容重新做 这里要注意边界：参考网站只能拿来借风格，不要复制别人的品牌、图片、文案和完整结构。 第三类：没有参考，先去这些地方找 如果你还不知道自己想要什么，可以先去参考库逛一圈。 我会按用途分开看。 看真实产品界面，可以去这些： • Mobbin：https://mobbin.com/ • Page Flows：https://pageflows.com/ 它们适合看登录页、订阅页、设置页、移动端引导页、仪表盘这类真实产品页面。 找审美和视觉方向，可以去这些： • Recent：https://recent.design/ • Collect UI：https://collectui.com/ • Minimal Gallery：https://minimal.gallery/ • Land book：https://land book.com/ • Lapa Ninja：https://www.lapa.ninja/ 找动效和组件感觉，可以看： • React Bits：https://reactbits.dev/ • GSAP skills：https://github.com/greensock/gsap skills 如果是小白，我建议先不要贪多。 每次只找 3 个参考就够了。一个作为主要参考，另外两个只借局部，比如一个借首屏，一个借字体，一个借动效。 然后把参考丢给 Codex，让它先提炼成 DESIGN.md。 我给你 3 个参考。 请不要写代码。 先分析它们共同的设计感觉，并整理成 DESIGN.md。 请特别注意： 我主要想学哪个参考 每个参考只学哪一部分 哪些品牌元素不要照搬 最后这个页面应该表达什么 找到参考后，再走这套流程 不管你是直接拿了 Refero Styles，还是用 web to design md 提取了网页，或者自己找了几张截图，后面的流程都一样。 第一步，让 Codex 生成 DESIGN.md 请根据这些参考和我的需求，整理一份 DESIGN.md。 这份 DESIGN.md 要具体到： 1. 页面气质 2. 颜色 3. 字体 4. 首屏布局 5. 按钮样式 6. 卡片样式 7. 图片使用方式 8. 动效 9. 不要做什么 写完后先停。 第二步，你先确认 DESIGN.md 这一步不要省。 你可以重点看 5 件事： • 它有没有写清楚页面要表达什么 • 它有没有说清楚主要参考是谁 • 它有没有乱加你不喜欢的颜色 • 它有没有写“不要做什么” • 它有没有把动效说清楚 如果不满意，就让 Codex 先改 DESIGN.md，不要急着写页面。 第三步，再让 Codex 写代码 现在按 DESIGN.md 实现页面。 要求： 1. 严格按 DESIGN.md 来 2. 不要新增主色 3. 不要复制参考网站的 logo、文案和图片 4. 桌面端和移动端都要适配 5. 完成后启动本地服务，并在浏览器里打开检查 这里如果你装了相关 skill，可以直接让它一起用。 taste skill 放在一起说 我这次主要推荐的是 taste skill： https://github.com/Leonxlnx/taste skill 它不是一个单独的工具，而是一组适合做网页审美、参考图还原、视觉生成的 skill。 新手不用全记，先记这几个就够。 你要做什么 用哪个 skill 普通网页想去 AI 味 design taste frontend