{"author":{"name":"凌风"},"description":"A personal blog built with GoFrame","feed_url":"https://mircool.cn/feed","home_page_url":"https://mircool.cn","items":[{"id":94,"title":"GPT image2 生成的 UI 效果图，如何高质量做设计还原","slug":"gpt-image2-ui-design-restore","content":"\u003e 用 GPT image2 生成 UI 效果图只是第一步，真正的难题是还原。直接让 AI coding 或者用 Figma 自动绘制，都会卡在同一个点——插画和图标是 SVG 绘制的，没办法还原。这里对比了几种方式，给出一个最省 token 的工作流。\n\n用 AI 做 UI 时，还原设计稿一直有个绕不开的问题：不管直接 AI coding，还是用 AI 绘制还原，图标和插图最终都是 SVG，没法真正还原，最后还得人工替换。\n\n![设计还原的核心痛点](https://goframe-blog-upyun.mircool.cn/blog/1783676263343474173.png)\n\n拿一个启动页举例。先在网上找参考图，给 GPT image2 输入简单关键词，有参考图时只要简单描述就能生成同风格的页面。\n\n![生成效果图](https://goframe-blog-upyun.mircool.cn/blog/1783676270065981999.png)\n\n界面生成好后就要还原成设计稿。这里对比几种方式，看看哪种更省 token 和时间。\n\n## 一、几种还原方式对比\n\n### Figma make\n\n原本想同样是 GPT 模型，应该不会太差，但同样的关键词生成效果太感人了。直接让 Figma 绘制这条路基本走不通。\n\n![Figma make 效果](https://goframe-blog-upyun.mircool.cn/blog/1783676274158585017.png)\n\n### Codex/GPT + Figma MCP\n\n在 Codex 或 GPT 的插件/应用里安装 Figma 的 MCP，点对话框下方的 + 号选中 Figma 插件，把需要绘制的 page 链接发到对话框里再说提示词即可。\n\n整体背景看上去还可以，但插画部分由于是 SVG 绘制，基本没办法用，按钮还原也不行。\n\n![Codex+Figma MCP 还原效果](https://goframe-blog-upyun.mircool.cn/blog/1783676277887184401.png)\n\n## 二、当前最省钱的 AI 工作流\n\n### 1. GPT image2 出图 + 分层\n\n对 UI 设计来说，目前最省钱的方式是用 GPT image2 官网生成设计效果图，不占用 Codex 的额度。平时需求分析、竞品分析、交互自查这些文字工作也能用，一个会员覆盖 UE 体验设计的全部工作流。\n\n出图后让 GPT 把效果图分层，背景指定成绿色便于后续抠图。\n\n![GPT 分层](https://goframe-blog-upyun.mircool.cn/blog/1783676280024557470.png)\n\n### 2. MasterGo AI 抠图\n\n抠图最方便的是 MasterGo。选中图片，右上角有个图标，点开里面有几个选项，选 AI 抠图，等 10 秒左右图就抠好了。\n\n![MasterGo AI 抠图](https://goframe-blog-upyun.mircool.cn/blog/1783676281878774344.png)\n\n像 GPT 分层时忘记指定背景，那种棋盘格看着透明但 PS 都不好抠的，MasterGo 也能轻松抠掉。\n\n![抠复杂背景](https://goframe-blog-upyun.mircool.cn/blog/1783676284336778445.png)\n\n### 3. Figma 合并\n\n最后在 Figma 里把插画替换即可。这一步最省 token——很多同学希望 AI 能一步到位，但让 AI 反复调整的时间，自己手搓不到 10 分钟就搞完了。能省就省，而且效果更可控。\n\n![Figma 合并完成](https://goframe-blog-upyun.mircool.cn/blog/1783676286763156299.png)\n\n虽然举例的页面很简单，但设计流程就是这样。不管用 Pencil、Stitch、lovart 还是 AI coding，都是同一套思路：AI 负责出图和背景，插画这类需要精细控制的元素交给手动合并。\n\n## 三、几个感受\n\n用了 AI 之后，最大的变化不是「画图更快了」，而是开始重新思考设计这件事本身。\n\n以前设计师更多承担执行角色：找素材、搭页面、调细节、改方案。AI 加入后，设计师需要把更多精力放在前面的判断和决策上——怎么定义设计方向、怎么判断 AI 输出是否符合目标、怎么组织 AI 完成不同阶段的任务、怎么把 AI 结果转化成能落地的方案。\n\nAI 时代设计师最重要的能力，不是会不会生成一张漂亮的图，而是能不能理解需求、判断结果，把 AI 的能力融入自己的设计流程。AI 能降低探索成本、提高验证效率，但最终决定设计质量的，还是设计师自己的审美、经验和判断。","summary":"用 GPT image2 生成 UI 效果图后，直接 AI coding 或 Figma make 都会因为插画/图标 SVG 没法还原而翻车。最省钱的工作流：GPT image2 出图并分层 → MasterGo AI 抠图 → Figma 手动合并插画。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1783676261598332334.jpg","categoryId":1,"isDraft":0,"viewCount":73,"createdAt":"2026-07-10 09:39:48","updatedAt":"2026-07-26 17:34:59"},{"id":93,"title":"GSAP 官方 AI Skills：让 Agent 学会正确使用网页动画引擎","slug":"gsap-official-ai-skills","content":"\u003e GSAP 官方发布了一套 8 个 AI Skill，专门教 AI Agent 正确使用这套网页动画引擎——核心 API、Timeline、ScrollTrigger、插件、React/Vue/Svelte、性能优化全覆盖。Webflow 收购后所有原 Club 付费插件（SplitText、MorphSVG 等）已全部免费。\n\nGSAP（GreenSock Animation Platform）是前端动画领域的事实标准，但 AI 写 GSAP 经常翻车：插件没注册、忘记 cleanup、用 layout 属性而非 transform、ScrollTrigger 不 refresh。这套官方 Skill 解决的就是这些问题——让 Agent 按 GSAP 团队认可的正确方式生成代码。\n\n仓库地址：https://github.com/greensock/gsap-skills\n\n## 安装\n\n支持 Claude Code、Cursor、Codex、Copilot、Antigravity 等 40+ Agent，统一用 npx skills CLI：\n\n```\nnpx skills add https://github.com/greensock/gsap-skills\n```\n\nCLI 会自动检测已安装的 Agent。想指定某个（比如 Antigravity）加 `--agent` 参数。Claude Code 也可以用 `/plugin marketplace add greensock/gsap-skills`。\n\n## 8 个 Skill 覆盖范围\n\n| Skill | 解决什么 |\n|-------|----------|\n| **gsap-core** | 核心 API：`gsap.to/from/fromTo`、easing、duration、stagger、defaults、transform 别名、autoAlpha、`gsap.matchMedia()` 响应式与 prefers-reduced-motion |\n| **gsap-timeline** | 时间线：序列、position 参数、labels、嵌套、playback |\n| **gsap-scrolltrigger** | 滚动联动：pin、scrub、trigger、refresh、cleanup |\n| **gsap-plugins** | 插件：ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、Observer、SplitText、ScrambleText、SVG/物理插件、CustomEase 等 |\n| **gsap-utils** | `gsap.utils`：clamp、mapRange、normalize、interpolate、random、snap、toArray、wrap、pipe |\n| **gsap-react** | React：`useGSAP` hook、refs、`gsap.context()`、cleanup、SSR |\n| **gsap-performance** | 性能：transform 优于 layout 属性、will-change、批处理、ScrollTrigger 优化 |\n| **gsap-frameworks** | Vue/Svelte/其他：lifecycle、scoping selector、unmount cleanup |\n\n## 重要变化：Club 插件全免费\n\nWebflow 收购 GSAP 后，原 Club GSAP 付费层取消，**所有原 Club 专属插件（SplitText、MorphSVG、DrawSVG 等）对所有人免费，包括商业用途**。统一从公共 `gsap` npm 包安装，不需要 `.npmrc`、auth token 或私有 registry。\n\n```\nnpm install gsap\n```\n\n## 标准 GSAP 代码范式\n\n这套 Skill 教 Agent 生成的标准模式大致是这样：\n\n```javascript\n// 1. 导入 + 注册插件（每个 app 一次）\nimport { gsap } from \"gsap\";\nimport { ScrollTrigger } from \"gsap/ScrollTrigger\";\ngsap.registerPlugin(ScrollTrigger);\n\n// 2. 单个 tween —— 优先用 transform 别名和 autoAlpha\ngsap.to(\".box\", { x: 100, autoAlpha: 1, duration: 0.6, ease: \"power2.inOut\" });\n\n// 3. Timeline 做序列（优先于链式 delay）\nconst tl = gsap.timeline({ defaults: { duration: 0.5, ease: \"power2\" } });\ntl.to(\".a\", { x: 100 })\n  .to(\".b\", { y: 50 }, \"+=0.2\")\n  .to(\".c\", { opacity: 0 }, \"-=0.1\");\n\n// 4. ScrollTrigger —— 挂到 timeline 或顶层 tween；布局变化后调 refresh\nconst tl2 = gsap.timeline({\n  scrollTrigger: {\n    trigger: \".section\",\n    start: \"top center\",\n    end: \"bottom center\",\n    scrub: true\n  }\n});\ntl2.to(\".panel\", { x: 100 })\n   .to(\".panel\", { rotation: 5, duration: 0.7 });\n```\n\nReact 里用 `useGSAP` + scope + cleanup，避免没有 scope 的 selector：\n\n```javascript\nimport { useGSAP } from \"@gsap/react\";\ngsap.registerPlugin(useGSAP);\nuseGSAP(() =\u003e { gsap.to(ref.current, { x: 100 }); }, { scope: containerRef });\n```\n\n## 小结\n\n这套 Skill 的价值不只是教 GSAP 语法，而是把 GSAP 团队多年积累的最佳实践（cleanup、transform 优先、refresh 时机、插件注册）变成 Agent 能直接执行的规则。对于做动画密集型项目、可视化大屏、产品落地页的工作流，装上之后 AI 生成的 GSAP 代码会明显少踩坑。\n\nMIT 协议，风险等级 LOW。","summary":"GSAP 官方出品的 8 个 AI Skill，教 Agent 正确使用 GSAP——核心 API、Timeline、ScrollTrigger、插件、React/Vue、性能优化。Webflow 收购后所有原 Club 插件（SplitText/MorphSVG 等）全部免费。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1783296312964837969.png","categoryId":1,"isDraft":0,"viewCount":76,"createdAt":"2026-07-06 00:05:31","updatedAt":"2026-07-26 17:35:06"},{"id":92,"title":"design-dna：把任何网站的设计语言提取成可复用的 JSON","slug":"design-dna-skill","content":"\u003e 把主观的「照着那个网站做」变成一份精确、可复现的规格定义——任何智能体都能据此稳定输出一致的设计。\n\n用 AI 做界面时，最难的从来不是生成代码，而是怎么让 AI 真正「理解」一个设计的视觉语言，并在后续生成中保持一致。design-dna 解决的就是这件事：把视觉设计身份提取成机器可读的 JSON，跨项目、跨团队、跨 Agent 复用。\n\n项目地址：https://github.com/zanwei/design-dna\n\n![从参考站点提取视觉 DNA 并应用到自有内容](https://goframe-blog-upyun.mircool.cn/blog/1782889256816010721.png)\n\n## 三个维度定义设计身份\n\ndesign-dna 把视觉设计拆成三个维度，覆盖从可度量到定性的全部属性：\n\n- **设计系统** — 可度量的 token：色彩、字体、间距、版式、形状、层级、动效、组件等\n- **设计风格** — 定性描述：情绪、视觉语言、构图、图像风格、交互气质、品牌语气等\n- **视觉特效** — 超出普通 CSS 的实现：Canvas、WebGL、3D、粒子、着色器、滚动驱动动效、光标效果、SVG 动画、玻璃拟态等\n\n第三维度是它区别于一般设计系统工具的关键——动效、shader、3D 这些难用 token 描述、却决定设计气质的东西，被单独拎出来结构化。\n\n## 三阶段工作流\n\n技能内置三个阶段，可单独用也可串联：\n\n1. **结构** — 展示完整 schema 与各字段含义，让 Agent 知道要提取什么\n2. **分析** — 根据截图、图片或 URL，输出字段齐全的 JSON 画像（无空字段；多参考冲突时注明主方案与变体）\n3. **生成** — 在已有 DNA JSON + 内容的前提下落地实现（默认自包含 HTML/CSS/JS）\n\n典型链路是「分析 → 生成」：第一步把参考素材喂给 Agent，它逐项检视三个维度的每一项视觉属性，输出一份完整且量化的 Design DNA JSON；第二步把这份 JSON 与你自己的内容一起提供，Agent 生成忠实还原原始设计语言、同时适配你素材与文案的实现。\n\n## DNA JSON 是核心产物\n\n一旦提取完成，这份 JSON 可以提交到版本控制、跨团队共享、在多个项目中复用，也可以持续迭代微调。\n\n它把「设计感」这种原本只存在于设计师脑中、难以言传的东西，变成了一份精确的规格定义。任何 Agent 拿到它，都能稳定输出同一套设计——而不是每次「照着这个网站做」都跑偏成不同的样子。\n\n## 安装\n\n符合 Agent Skills 规范，通过 skills CLI 一行安装：\n\n```\nnpx skills add zanwei/design-dna\n```\n\n兼容 40+ 款智能体，包括 Cursor、Claude Code、Codex、GitHub Copilot 等。也可装到指定 Agent：\n\n```\n# 仅 Cursor\nnpx skills add zanwei/design-dna -a cursor -g -y\n# 仅 Claude Code\nnpx skills add zanwei/design-dna -a claude-code -g -y\n```\n\n## 一个精修技巧\n\n若首轮产出相对参考仍显单薄或细节不足，不要从零重做——把同一批参考链接或截图再次提供给 Agent，发起明确的精修轮次，在保留初稿的前提下显著拉近与高保真参照的差距。\n\n对应的 Prompt 思路是：请其对照参考复审界面层级与点缀、字阶与留白、动效与材质及整体 UI，并将结论回填至当前实现。\n\n## 小结\n\nAI 写代码越来越强，但「让 AI 稳定复现某个设计」一直是道坎。design-dna 的思路是把设计语言从感性认知转成可序列化的数据，让「设计一致性」这件事从靠运气变成靠规格。配合配套的 harness-design 仓库（对保真度打分并驱动修正循环），基本能把「AI 做出来的界面像不像参考」这件事工程化。","summary":"一个面向 AI 编程智能体的 Skill：从截图、图片或网址中提取视觉设计的三个维度（设计系统 token、设计风格、视觉特效），输出机器可读的 Design DNA JSON，让任何 Agent 都能据此稳定复现一致的设计。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1782889256816010721.png","categoryId":1,"isDraft":0,"viewCount":81,"createdAt":"2026-07-01 07:02:11","updatedAt":"2026-07-26 17:35:01"},{"id":91,"title":"给 AI 装上审美：同一句需求，三种方法，UI 差了三档","slug":"ai-aesthetic-three-methods","content":"\u003e 功能能跑，结构也完整，但就是不好看——蓝紫渐变、居中标题、圆角卡片、淡淡的阴影，整个页面都带着一股 AI 味。这个系列只解决一个痛点：作为不手敲 CSS 的开发者，怎么让 AI 吐出来的页面脱掉那股廉价的 UI 味。\n\n为控制变量，测试基准很简单：在不同项目路径下，用 Claude Code + DeepSeek V4 Pro，做一个【小满造物】的个人主页。不换工具、不加需求，纯粹测试不同交互策略对最终 UI 的影响。\n\n## 一、零约束\n\n第一轮，只给了那句需求，什么都没加。\n\n![零约束效果](https://goframe-blog-upyun.mircool.cn/blog/1782864015823211583.gif)\n\n页面结构完整，头像、导航、卡片、列表该有的都有，作为原型够用。但问题不在结构，在气质。\n\n它看起来像一个独立开发者博客的默认皮肤，干净、克制、没犯错，也没任何让人记住的东西。首屏扫过去不知道这个人是干什么的，感觉不到这个页面的性格。\n\nAI 在没约束的时候总喜欢走最安全的路：内容摆整齐，套一个高频模板。也说不上丑，但谁看完都记不住。\n\n## 二、设计提示词\n\n第二轮，去 designprompts 挑了一份 SaaS 风格的设计 prompt——500 多行的 MD 文档，写死了页面气质、布局、字体层级、按钮、卡片、动效和禁止项，作为额外上下文丢给 AI。\n\n![设计提示词效果](https://goframe-blog-upyun.mircool.cn/blog/1782864022411300270.gif)\n\n和零约束比，差距一眼可见。\n\n首屏变成了完整的产品型 Hero 区，左侧标题和介绍，右侧抽象视觉元素。标题里的关键词被放大强调，按钮、卡片、标签、文章列表也更接近同一套设计语言。蓝色主色、统一卡片系统、清晰的区块节奏，页面终于有了明确的视觉方向。\n\n虽然不是顶级设计，但至少有方向。代价是方向由别人定——选了 SaaS 风，出来就是 SaaS 味。想调就得自己改 prompt，而大部分人 Vibe Coding 的问题恰恰是不知道怎么用专业术语准确描述自己的需求。\n\n## 三、截图参考\n\n第三轮，没用文字 prompt。直接把 designprompts 里那个 SaaS 风格的预览截图拖给 AI，附一句：参考这个风格。\n\n理论上，直接参考成型图应该比读 500 行 prompt 更直接。但是结果不太对。\n\n![截图参考效果](https://goframe-blog-upyun.mircool.cn/blog/1782864035029429736.gif)\n\nAI 确实学到了 Hero 区、浮动卡片等布局骨架，懂了要做个 Landing Page，但配色却从蓝白色的 B2B SaaS 风跑偏成了橙棕色。\n\n**为什么看图不管用？**\n\n因为单张截图的上下文太薄弱。当前多模态模型的视觉解析，往往偏向于提取语义结构（比如哪里是导航、哪里是栅格），而不是精准还原色值、阴影这些设计变量。在丢失明确约束的情况下，AI 会发生幻觉补偿，习惯性地用训练数据里最高频的默认 UI 库去填补视觉空白。\n\n截图能告诉 AI 大概长什么样，但守不住为什么好看。最终往往是骨架保住了，灵魂却串了味。\n\n## 不同场景怎么选\n\n如果只想快速改善单页，设计提示词性价比最高——挑一个接近目标气质的方向，让 AI 按这个方向走，不用从零解释什么是好看。截图参考可以作为备选，但不能指望一比一复刻，更稳的用法是配合文字约束。\n\n## 工具箱速查\n\n用 AI 写页面时涉及的各种需求，按场景分好了，Vibe Coding 时需要什么直接去挑。\n\n**视觉三件套：配色 + 字体 + 字号**（AI 最常翻车的三个点）\n\n- Realtime Colors — 调好色板直接预览网页真实效果，定好后把 HEX 色值抄给 AI\n- Fontpair — 标题 + 正文字体搭配方案，选一组直接写进约束里\n- TypeScale — 生成字号层级，解决 AI UI 里字都一样大的问题\n\n**现成设计 prompt**（复制粘贴直接用）\n\n- designprompts — 主推，约 30 种风格，极简到赛博朋克，适合快速选型\n- UI Prompt Explorer — 按场景分组，覆盖主题更细致\n- uiprompt — 20 多种高频风格，额外提供移动端 Prompt 参考\n- LandingHero Library — 1000+ UI 区块截图库，挑中某个区块让 AI 照着搭骨架\n- ClaudeKit Frontend Demo — 大量带交互和动效的 Prompt 样本\n\n**截图逆向工程**（把截图反推成设计规范）\n\n- UI Prompt Builder — 上传网页截图自动提取色值、字号、间距，比直接喂 AI 截图漂移小得多\n- AI/UX Playground — 一条专门榨取截图视觉规律的 Prompt，让 AI 先把图解析成完整设计系统\n\n**设计灵感站**（毫无头绪时去逛逛）\n\n- godly — 前卫、极具创意的站点，适合找整体 Vibe 和调性\n- mobbin — 按页面类型和行业筛选，解决具体组件该怎么设计的问题\n- pageflows — 完整的交互流程录像，观察高级页面的操作细节和反馈链路","summary":"用 Claude Code + DeepSeek V4 Pro 做同一个个人主页，零约束、设计提示词、截图参考三种方法测下来，AI 做出的 UI 质感差了三档。截图能告诉 AI 大概长什么样，但守不住为什么好看。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1782864013977960781.jpg","categoryId":1,"isDraft":0,"viewCount":73,"createdAt":"2026-07-01 00:01:33","updatedAt":"2026-07-26 17:35:00"},{"id":90,"title":"110 套 UI 设计 Skills 合集：给 AI 做 UI 装一个设计外挂","slug":"ui-skills-110-collection","content":"\u003e 让 AI 写 UI，功能能跑但界面普通、按钮能点但细节不高级、布局能出来但没设计师的判断——这套 Skills 合集解决的就是最后那层质感问题。\n\n用 AI 写 UI 时常遇到一个尴尬：功能都能跑，但界面一眼就是模板味。AI 会写代码，但它不知道这次该从排版、颜色、动效、信息层级还是可访问性哪个维度下手。\n\nUI Skills 解决的就是这个问题——它把很多 UI 设计经验，拆成了 AI Agent 能理解、能执行、能复用的 Skill。可以理解成一套「AI 做 UI 的设计外挂」。\n\n网站地址：https://www.ui-skills.com/\n\n![AI 做 UI 的设计外挂](https://goframe-blog-upyun.mircool.cn/blog/1782255539971720877.gif)\n\n## 一、使用方法\n\n打开网站首页，它给了一条很直接的命令：\n\n![首页命令](https://goframe-blog-upyun.mircool.cn/blog/1782255552861980162.png)\n\n这条命令的作用，是让 Agent 先选合适的 Skill，再开始改界面。有了 Skills 之后，可以让 Agent 按更具体的方向处理界面：是排版问题？颜色太单调？动效太僵硬？信息层级不清楚？还是可访问性不合格？\n\n![选择设计维度](https://goframe-blog-upyun.mircool.cn/blog/1782255554004782534.png)\n\n## 二、110 套 Skills 覆盖很全\n\n进入 Skills 页面，已经整理了 110 个条目，官方目录里比较明显的分类包括：Accessibility、Motion、Systems、Visual、Interaction、Performance、Craft、Taste。\n\n这几个分类基本覆盖了做 UI 时最容易被 AI 忽略的地方：\n\n- 可访问性：颜色对比度、链接目的、键盘导航、ARIA、表单错误提示\n- 动效：转场、弹簧曲线、Animate Presence、图标变形、动效性能\n- Visual 和 Taste：质感、排版、颜色、层级\n\n![110 套 Skills 目录](https://goframe-blog-upyun.mircool.cn/blog/1782255555930320543.png)\n\n这个集合不只有一个作者的东西，它把社区里已经有人验证过的 Skill 收到一起，比如 frontend-design、baseline-ui、ui-ux-pro-max、shadcn——经常用 AI 做页面的人，这些名字一看就知道有多常用。\n\n## 三、适合谁\n\n- **用 AI 写前端的设计师**：把网站当工具箱，先找合适 Skill，再让 Agent 按方向改\n- **想提升 AI 出图出页面质量的人**：很多人卡在最后 20%，功能都能跑但视觉质量差一点，这些 Skill 专治质感问题\n- **前端开发**：做产品 Demo、SaaS 后台、组件库、设计系统、动效优化时，能帮把设计要求写得更清楚\n- **做作品集的同学**：重点看 Visual、Typography、Interaction、Motion，能把作品集从「能展示」推进到「更像被设计过」\n\n## 小结\n\n这两年 AI 写代码越来越强，但 UI 质量一直是设计师最容易吐槽的地方。页面能生成不代表页面好用，能跑通功能也不代表界面有层级、有节奏、有细节。\n\nUI Skills 这种网站的价值，就是把设计师平时积累的判断，变成 Agent 能执行的规则。以后用 AI 做界面，不用每次从零写提示词——先选 Skill，再让 Agent 动手。","summary":"ui-skills.com 把 UI 设计、前端体验、动效、可访问性、设计系统等能力整理成 110 套可直接给 AI Agent 调用的 Skill，解决了 AI 写 UI 功能能跑但质感不足的问题。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1782255537537405282.jpg","categoryId":1,"isDraft":0,"viewCount":95,"createdAt":"2026-06-23 22:59:44","updatedAt":"2026-07-26 17:35:03"},{"id":88,"title":"先生图，后生站：用 Images 2.0 + Codex 去掉网站的 AI 味","slug":"image-first-website-workflow","content":"\u003e 让最擅长审美的模型管审美，让最擅长写代码的模型管代码。两套模型各司其职，比逼着一个全能选手干所有活，出来的东西好得多。\n\n## AI 味从哪来\n\n让 Codex 直接「做一个好看的网站」，它需要同时处理布局、配色、字体、间距、动画、响应式、组件结构、状态管理……模型同时管审美和写代码，必然顾此失彼。每一项都是六十分，没有一项做到九十分。尤其是审美这件事，当它需要和一堆技术细节抢注意力的时候，永远是第一个被牺牲的。\n\n![正确到无聊的网站](https://goframe-blog-upyun.mircool.cn/blog/1782086556593282956.jpg)\n\n每个版块单独看都没毛病，拼在一起就是正确到无聊，没有一个地方让人「啊哈」一下。这就是 AI 味——不一定是配色丑，而是布局、结构、视觉节奏全都太安全、太可预测。\n\n## 核心思路：先生图，后生站\n\n六个字背后是一个关键认知：**分工**。\n\n先用 ChatGPT Images 2.0 生成图片，它只需要关心一件事——这张图好不好看。不用管设计能不能实现，不用管 React 组件怎么拆，不用管响应式怎么做，可以把全部能力都花在视觉上。\n\n设计行业几十年来一直都是这么干的：设计师出稿，开发实现。只不过现在设计师变成了 Images 2.0，开发变成了 GPT 5.5。如果想用国产平替，生图可以换字节的 Seedream，编码用智谱 GLM，一样能跑通这套流程。\n\n## 第一步：一块一块地生图\n\n注意，不是让 Images 2.0 生成一整张巨长的网页截图。一张大图会让细节丢失，布局决策也会变弱。**要一个版块一张图**。\n\n网站通常可以拆成这几个版块：首页、关于我们、账号特点、案例展示、客户评价、行动号召、页脚。每张图只管一个版块，这样每个版块都有足够的视觉空间和细节。\n\n![网站分版块](https://goframe-blog-upyun.mircool.cn/blog/1782086557352567976.jpg)\n\n生图前，先在 Codex 上安装「Taste Skill」，有网页和 APP 两个版本：\n\n```\n网页设计：https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md\nAPP设计：https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-mobile/SKILL.md\n```\n\n简单来说，这是一本「反 AI 审美」的设计规则书。它告诉文生图模型禁止左文右图、紫蓝渐变、四卡片对称这些 AI 最爱用的套路，强制每个版块用不同的构图和背景方式，要求大量使用真实图片而非纯文字卡片，同时锁定全站配色和字体的一致性。一句话，把资深设计师的审美判断，变成了模型能读懂的规则。\n\n然后把网站分页设计说明和生图 Prompt 一起丢进 Codex 对话框，让它调用 Images 2.0 干活：\n\n```\n使用 imagegen-frontend-web，为我的网站生成设计图。\n这是网站的分页内容：XXXXXX。\n设计需要包含六个版块，每个版块一张图，一共六张独立的图片。\n网站整体要精致干净，偏极简风格，信息量少一些，但视觉效果要有冲击力，布局要有创意。\n主色调要有科技感。所有图片都要是横版的。\n```\n\n然后多抽几次卡，挑最满意的定稿。\n\n![设计图定稿](https://goframe-blog-upyun.mircool.cn/blog/1782086558748022154.png)\n\n## 第二步：把素材抠出来\n\nImages 2.0 生成的设计图，不能直接甩给代码模型说「照着做」。得先把里面的关键视觉元素提出来，做成素材文件。原因很简单：写代码的 AI 不会画画。3D 物件、插画、实拍图这些东西 CSS 写不出来，只能以图片的形式引用。你不给它，它就只能自己瞎编一个，出来的东西跟设计图完全不是一回事。\n\n不用手动抠图。方法还是用 Codex——把设计图传上去，跟它说「提取这张图里的主体元素，高清，透明背景」。直接让它抠，效果已经很不错。\n\n![提取素材](https://goframe-blog-upyun.mircool.cn/blog/1782086570161098632.png)\n\n## 第三步：一块一块地写代码\n\n前端开发继续用 Codex。这里有个细节：**不要把所有设计图全扔进去说「给我全部做完」**，那样出来的东西不会想看第二眼。正确的做法是一张一张生成网页。\n\n把每张设计图和提取好的素材一起给 Codex，告诉它：\n\n```\n我们来搭一个网站。我会提供设计图和素材文件，你照着设计图来还原，不要自己生成或替换素材。\n这是第 N 个版块，照着做。用 React + Next.js。\n```\n\n第一次出来的结果大概率不完美，这是正常的。Codex 里打开网页会出现在右边的预览栏，右上角的批注按钮可以选中页面里的任何元素直接写要求——比如「机器人太大了，缩小 20%」，它就帮你改。\n\n![Codex 批注反馈](https://goframe-blog-upyun.mircool.cn/blog/1782086586226025014.png)\n\n不用截图，不用画圈标箭头，选中就批注，批注就改。一个页面大概来回两三轮就能调到比较满意，然后下一个版块重复这个过程。\n\n## 第四步：整体统一\n\n所有版块全做完之后，还得退一步看整体：颜色有没有跑偏？字体是不是一致？版块之间的间距和谐吗？从头滚到尾顺不顺？\n\n然后加动画——这一步反而简单，直接跟 Codex 说「给每个版块加上滚动进入的动画，要流畅干净，不花哨」就行。动画是标准化技术需求，不太依赖审美判断，模型处理得都不错。\n\n最后是响应式。设计图通常按桌面端生成，但读者大概率在手机上看，手机端的显示效果得单独检查，有问题就截图反馈。\n\n![最终成品](https://goframe-blog-upyun.mircool.cn/blog/1782086600606549385.png)\n\n## 完整流程\n\n```\n1、用 Codex 调用 Images 2.0 + image skill 生成网站设计图，每个版块一张\n2、多跑几次，挑选每个版块最满意的那张\n3、用 Codex 提取设计图中的素材元素，透明底\n4、用 Codex 逐个版块实现代码，一次只做一个版块\n5、用批注反馈给 Codex 打磨细节\n6、加动画、调响应式、检查整体统一性\n```\n\n## 这个方法的代价\n\n它不是零成本的。一个版块来回调两三轮，五六个版块就是十几轮，加上生图选图、提取素材、去背景，整个流程可能要花几个小时。比起直接一句话「帮我做个网站」三分钟出结果，慢太多了。\n\n但得想清楚要的是什么。如果只是要一个能用的页面，一句 Prompt 搞定完全 OK。如果想要一个让人看了不会第一反应觉得「AI 做的」的东西，就得把审美这个环节还给真正擅长做审美的工具。\n\n你不会让守门员去踢前锋，哪怕他是队里跑得最快的人。\n","summary":"让 Images 2.0 管审美，让 Codex 管代码。先生图后生站，两套模型分工，比逼一个全能选手干所有活出来的效果好得多。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1782086555029045323.jpg","categoryId":1,"isDraft":0,"viewCount":98,"createdAt":"2026-06-22 00:04:26","updatedAt":"2026-07-26 17:34:38"},{"id":87,"title":"一句话生成 3D 动态地图：Codex 3D 地图 Skill 实测","slug":"codex-3d-map-skill","content":"\u003e 做可视化大屏、B 端看板时，3D 动态地图几乎是科技感的标配，但传统做法要找 3D 资产、调渲染、做交互，一套下来耗时又不一定出效果。下面记录一个用 Codex 配合现成 Skill，一句话生成可交互 3D 地图的方法。\n\n## 核心思路\n\n借助一个开源的 three-scope-map-skill，让 Codex 直接生成完整的 3D 地图组件。不需要懂代码，也不用打开 3D 软件，输入一句提示词，几秒内就能拿到一个可点击、可下钻、可改色的动态地图。\n\n## 一、一句话生成 3D 动态地图\n\n打开 Codex，发送下面这段提示词：\n\n```\nhttps://github.com/songsummer920-dazzle/three-scope-map-skill 帮我下载这个skill，方便我后续用/斜杠调用\n```\n\n![Codex 下载 Skill](https://goframe-blog-upyun.mircool.cn/blog/1781220429443578334.png)\n\n等它装好之后，可以让它把这个 Skill 命名为「3D地图Skill」，方便后续调用。\n\n![命名 Skill](https://goframe-blog-upyun.mircool.cn/blog/1781220430891992175.png)\n\n调出这个 Skill，先生成一个广东省地图看看效果。\n\n![生成广东省地图](https://goframe-blog-upyun.mircool.cn/blog/1781220432036399224.png)\n\n点击返回的地址就能看到效果。\n\n![地图加载效果](https://goframe-blog-upyun.mircool.cn/blog/1781220433483753074.png)\n\n几分钟就得到一个三维地图，打开时地图加载会慢一点，需要耐心等待。\n\n![三维地图效果](https://goframe-blog-upyun.mircool.cn/blog/1781220435201873949.png)\n\n支持放大和缩小。\n\n![缩放地图](https://goframe-blog-upyun.mircool.cn/blog/1781220439860271628.gif)\n\n也可以拖拽旋转视角。\n\n![旋转视角](https://goframe-blog-upyun.mircool.cn/blog/1781220485170777538.gif)\n\n点选某个城市可以进入下一级，左上角按钮能返回上一级。\n\n![进入城市下一级](https://goframe-blog-upyun.mircool.cn/blog/1781220523835135905.png)\n\n## 二、一句话改地图颜色\n\n改颜色同样简单，几个字就能搞定，比如直接说「地图改成蓝色的」，它就会按指令修改配色。\n\n![改成蓝色](https://goframe-blog-upyun.mircool.cn/blog/1781220527994435885.gif)\n\n如果需要特定颜色，直接输入色值即可。\n\n![输入色值](https://goframe-blog-upyun.mircool.cn/blog/1781220570936489452.png)\n\n地图会按指定色值渲染。\n\n![色值效果](https://goframe-blog-upyun.mircool.cn/blog/1781220572724355710.png)\n\n不只是省份，国家地图也可以。\n\n![国家地图](https://goframe-blog-upyun.mircool.cn/blog/1781220575495101188.png)\n\n![国家地图效果](https://goframe-blog-upyun.mircool.cn/blog/1781220581454969645.png)\n\n## 小结\n\n从一句话生成地图、自带下钻交互，到精准的色值控制，再到省份、国家层级的切换，这个 Skill 把 3D 地图的制作门槛压到了最低。省下来的时间可以真正放在业务逻辑和视觉体验的打磨上。\n\n如果最近在做 B 端看板或可视化大屏，值得直接上手试一试。\n","summary":"用 Codex 装一个 three-scope-map-skill，一句话生成可交互的 3D 动态地图，支持省份下钻和全局改色。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1781220427740679501.jpg","categoryId":1,"isDraft":0,"viewCount":202,"createdAt":"2026-06-11 23:30:08","updatedAt":"2026-07-26 17:35:04"},{"id":86,"title":"rico-design-md：将任意网站转换为设计系统文档","slug":"rico-design-md-skill","content":"看到一个设计漂亮的网站，想借鉴到自己的项目里，手动查询、整理相关数据费时又费力。`rico-design-md` 可以将任意网站转换为设计系统文档，也支持在不同设计令牌格式之间转换。\n\nGitHub：`https://github.com/ricocc/rico-skills`\n\n![rico-design-md](https://goframe-blog-upyun.mircool.cn/blog/1780403889833873686.jpg)\n\n---\n\n## 核心功能\n\n1. **网站转设计系统** - 输入任意网站 URL，自动提取设计令牌、颜色、排版、间距、阴影和组件样式\n2. **多种输出格式** - 生成 DESIGN.md、preview.html、tokens.json（DTCG）、variables.css 和 theme.css（Tailwind v4）\n3. **格式转换** - 在任意支持的格式之间转换（如 DESIGN.md 转 tokens.json、variables.css 转 DESIGN.md）\n4. **可视化预览** - 生成一个独立的 preview.html 页面，展示完整的设计系统\n\n---\n\n## 安装方法\n\n最省事的方式，是直接让 Agent 帮你安装。把下面这句话发给它就行：\n\n```\n安装 rico-design-md skill。\ngithub地址：https://github.com/ricocc/rico-skills/tree/main\n```\n\n---\n\n## 使用方法\n\n`rico-design-md` 支持显式命令，也支持自然语言。\n\n生成默认文档和预览页：\n\n```\nrico DESIGN.md https://linear.app\n```\n\n只提取设计令牌：\n\n```\nrico tokens https://stripe.com\n```\n\n生成 CSS 变量：\n\n```\nrico variables https://vercel.com\n```\n\n生成 Tailwind v4 主题文件：\n\n```\nrico theme.css https://linear.app\n```\n\n全部输出：\n\n```\nrico 全部输出 https://linear.app\n```\n\n也可以换成自然语言：\n\n```\n为 linear.app 创建 DESIGN.md\n提取 stripe.com 的设计令牌\n分析 GitHub 的设计系统\n```\n\n项目文档里还写到，它可以做格式转换，比如把已有 `DESIGN.md` 转成 `tokens.json`，或者在 `tokens.json`、`variables.css`、`theme.css` 之间互转。\n\n```\nrico 把 DESIGN.md 转为 tokens\n```\n\n---\n\n## 适用场景\n\n- 需要为现有网站生成设计系统文档\n- 想要提取设计令牌用于开发实现\n- 需要在不同设计令牌格式之间转换\n- 想要一个品牌设计系统的可视化参考页面\n\n---\n\n`rico-design-md` 比较适合放进\"看网站、拆风格、做前端\"的工作流里。它不会替代设计师判断，但能先把颜色、字体、组件这些基础资料整理出来，后面再改就有抓手。","summary":"rico-design-md 可以将任意网站转换为设计系统文档，支持提取设计令牌、颜色、排版、间距、阴影和组件样式，并生成多种输出格式。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1780403887952670279.jpg","categoryId":1,"isDraft":0,"viewCount":176,"createdAt":"2026-06-02 12:38:46","updatedAt":"2026-07-26 17:35:05"},{"id":85,"title":"一句提示词，GPT 画出 7 套游戏 UI——从界面到组件库","slug":"gpt-game-ui-7-styles-prompt","content":"\u003e 用一句提示词，让 GPT 按指定游戏风格生成一整套中文游戏 APP UI 界面，再进一步拆成组件库。本文来自微信公众号「萤柳设计」，作者萤柳。\r\n\r\n这个玩法很有意思：只用一句提示词，就能让 GPT 按指定游戏风格，生成一整套中文游戏 APP UI 界面。继续往下做，还可以把界面元素拆成组件库，后续延展页面或做灵感参考都方便很多。\r\n\r\n## 一、通用提示词模板\r\n\r\n直接套用，替换【】里的内容：\r\n\r\n```\r\n参考【某款游戏】游戏风格，生成【什么类型的游戏】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n```\r\n\r\n想让结果更可控，可以把\"4 个主要页面\"写得更具体，比如首页、任务页、商城页、个人中心。页面描述越细，生成结果通常越稳定。\r\n\r\n## 二、7 组风格案例\r\n\r\n### 1. 星露谷物语风格\r\n\r\n\u003e 参考【星露谷物语】游戏风格，生成【巧克力工厂经营】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n\r\n![星露谷物语风格](https://goframe-blog-upyun.mircool.cn/blog/1780353975575570492.png)\r\n\r\n### 2. 王者荣耀风格\r\n\r\n\u003e 参考【王者荣耀】游戏风格，生成【跳舞竞技】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n\r\n![王者荣耀风格](https://goframe-blog-upyun.mircool.cn/blog/1780353994194343399.png)\r\n\r\n### 3. 神庙逃亡风格\r\n\r\n\u003e 参考【神庙逃亡】游戏风格，生成【农场经营】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n\r\n![神庙逃亡风格](https://goframe-blog-upyun.mircool.cn/blog/1780354011689472412.jpg)\r\n\r\n### 4. 原神风格\r\n\r\n\u003e 参考【原神】游戏风格，生成【竞技打拳】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n\r\n![原神风格](https://goframe-blog-upyun.mircool.cn/blog/1780354016254140366.png)\r\n\r\n### 5. 胡闹厨房风格\r\n\r\n\u003e 参考【胡闹厨房】游戏风格，生成【动物养成】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n\r\n![胡闹厨房风格](https://goframe-blog-upyun.mircool.cn/blog/1780354033379248163.jpg)\r\n\r\n### 6. 纪念碑谷风格\r\n\r\n\u003e 参考【纪念碑谷】游戏风格，生成【厨房经营】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n\r\n![纪念碑谷风格](https://goframe-blog-upyun.mircool.cn/blog/1780354039622110890.png)\r\n\r\n### 7. 马里奥风格\r\n\r\n\u003e 参考【马里奥】游戏风格，生成【旅行游玩】游戏中文APP UI界面，4个主要页面，尺寸：375×812\r\n\r\n![马里奥风格](https://goframe-blog-upyun.mircool.cn/blog/1780354060996005577.png)\r\n\r\n---\r\n\r\n到这里已经可以快速得到一整套风格明确的 UI 方案了。但更有意思的还在后面。\r\n\r\n## 三、从界面到组件库\r\n\r\n拿到满意的界面后，可以继续把视觉元素拆出来，整理成一张组件总览图。以\"神庙逃亡风格\"为例：\r\n\r\n```\r\n提取图片中的组件，只需要组件，需要分类，并放在一张图中，尺寸:16:9\r\n```\r\n\r\n![组件库总览](https://goframe-blog-upyun.mircool.cn/blog/1780354077912939739.png)\r\n\r\n## 四、组件提取方法\r\n\r\n得到组件库图后，用 Figma 提取单个元素：\r\n\r\n1. 把组件图拖到 Figma 画布\r\n2. 点击【Select area】\r\n3. 圈选一个元素，点击【Isolate】\r\n\r\n![Figma Select area](https://goframe-blog-upyun.mircool.cn/blog/1780354083517447008.png)\r\n\r\n![Figma Isolate](https://goframe-blog-upyun.mircool.cn/blog/1780354086382798132.png)\r\n\r\n这样就能源源不断地提取出单个图层了。\r\n\r\n![提取出的组件](https://goframe-blog-upyun.mircool.cn/blog/1780354091730201767.png)\r\n\r\n---\r\n\r\n这套方法把灵感探索流程串成了一条完整的路径：从一句提示词，到成套界面，到组件库，再到设计资产。做游戏化界面、活动页、IP 风格页，或者想快速尝试不同视觉方向，这个方法都值得试试。\r\n\r\n","summary":"用一句通用提示词模板，让 GPT 按指定游戏风格生成一整套中文游戏 APP UI 界面，实测 7 组不同风格，再进一步拆成可复用的组件库。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1780354096468731744.jpg","categoryId":1,"isDraft":0,"viewCount":175,"createdAt":"2026-06-01 22:48:47","updatedAt":"2026-07-26 17:35:07"},{"id":84,"title":"guizang-social-card-skill：3:4 竖图版式 Skill","slug":"guizang-social-card-skill","content":"\u003e 3:4 竖图是图文卡片的主战场。这个 Skill 把字号层级、版式比例、断行规则全部按手机信息流的真实场景校准，内置 11 个品类适配、28 个版式骨架、两套视觉系统。\n\n## 起因\n\n之前做了 guizang-ppt-skill，后来用它生成网页，单张截图发到图文平台，反响比自己手工排版还好。\n\n![PPT Skill 截图](https://goframe-blog-upyun.mircool.cn/blog/1779929377216359628.png)\n\n市面上 AI 生成图文卡片的工具，几乎都是同一个味道：Tailwind + 大色块 + emoji 堆砌 + 中规中矩的字号层级。它们做的是网页，不是杂志。\n\n图文卡片和 PPT 是完全不同的生物——竖屏、信息流里 1 秒钟决定停不停下、靠图说话而不是靠字。版式不同、节奏不同、读者不同。\n\n于是从 PPT Skill 里拆出来，单独做了 guizang-social-card-skill。\n\n项目地址：github.com/op7418/guizang-social-card-skill\n\n---\n\n## 品类适配：11 个常见图文品类\n\n绝大多数 AI 工具不管你在写什么，都用同一套模板。这个 Skill 内置了 11 个品类的适配规则：\n\n- **旅行/生活方式**：杂志风，暖色板，大图压全屏，衬线大标题\n- **职场/干货/商业洞察**：网格风，深色背景，数据大字报版式\n- **影视/文化**：冷色调杂志风，电影海报式版式\n- **产品测评/数码**：网格风，对比矩阵，设备框美化截图\n- **读书/笔记**：杂志风，衬线字体，引文居中，留白拉满\n- **美食/探店**：高饱和杂志风，俯拍图优先，文字向四角让位\n\n![品类适配示例](https://goframe-blog-upyun.mircool.cn/blog/1779929379478219817.png)\n\n同一段文字，你说这是影评，它给你电影海报式卡片；你说这是产品测评，它给你带设备框的对比图。\n\n![不同品类效果对比](https://goframe-blog-upyun.mircool.cn/blog/1779929382845603262.png)\n\n还有为旅行博主做的地图组件，可以把店铺位置和旅行路线标注在上面。\n\n![地图组件](https://goframe-blog-upyun.mircool.cn/blog/1779929385568492025.png)\n\n---\n\n## 文字压图\n\n文字压图是图文卡片里最难的事，也是最容易暴露\"AI 感\"的地方。压不好会出现：文字盖在人脸或产品中心上、白字压浅色背景读不清、文字横跨整张图毁掉构图。\n\n![文字压图示例](https://goframe-blog-upyun.mircool.cn/blog/1779929389155681325.png)\n\nSkill 用三步处理：\n\n1. **识别主体**：人脸、产品、文字密集区，版式上自动避开\n2. **算落点区域色和明度**：决定字色、是否加蒙版、阴影深度\n3. **字号和断行自适应**：根据落点区域大小动态调整字号和换行位置\n\n![文字压图效果](https://goframe-blog-upyun.mircool.cn/blog/1779929393031903761.png)\n\n---\n\n## 图片来源\n\n默认接入三个免费可商用图库：\n\n- **Pexels**：支持中文搜索，大众场景够用\n- **Unsplash**：摄影质感最强，人物、生活、空间首选\n- **Wallhaven**：游戏、摄影、壁纸类\n\n![图库示例](https://goframe-blog-upyun.mircool.cn/blog/1779929397583552127.png)\n\n根据正文段落语义自动派发搜索词、拿回图、按版式裁切到位。\n\n---\n\n## 截图美化\n\n内置截图美化：加 macOS / iOS 风格的设备外框，用不同材质的背景托住截图（格纸、点阵、暖白或深色），根据视觉风格自动匹配阴影和圆角参数。\n\n![截图美化示例](https://goframe-blog-upyun.mircool.cn/blog/1779929400596692842.png)\n\n随手截的图，过一道，看上去像产品官方宣传图。\n\n---\n\n## AI 生图：克制使用\n\n只有所有找图渠道都拿不到合适素材时，才调用 AI 生图。生图时强制带风格约束词，避免\"一眼 AI 插画\"的平庸视觉。\n\n![AI 生图示例](https://goframe-blog-upyun.mircool.cn/blog/1779929402671302391.png)\n\n---\n\n## 视觉系统：两套风格 + 28 个版式骨架\n\n**两套视觉系统：**\n\n- **杂志风**：大留白，衬线大标题，版式不对称，文字有呼吸感\n- **网格风**：强网格，无衬线，几何感，用色克制但精准\n\n![两套视觉系统](https://goframe-blog-upyun.mircool.cn/blog/1779929404705094091.png)\n\n28 个版式骨架，从过去十年看过的杂志、海报、专辑封面、电影海报里挑出来。给 AI 一个被验证过的骨架，它的任务就从\"设计\"降级成\"填充\"，成品稳定性立刻上来。\n\n![版式骨架](https://goframe-blog-upyun.mircool.cn/blog/1779929410740138973.png)\n\n限制不是阻碍，是底线。给一个内容创作者无限的颜色选择，他更容易做出难看的东西；给他 10 套被验证过的色板，做出能看的东西的概率接近 100%。\n\n---\n\n## 设计理念\n\n图文卡片的本质，和印刷海报、画报、专辑封面是同一种东西——用一张静态图，在 1 秒钟里说服一个陌生人停下来。杂志和海报在过去一百年已经把这件事研究透了。\n\n网页设计语言是为可滚动、可交互的场景做的，搬到静态图上会显得用力过猛、信息平淡。\n\n![杂志感对比](https://goframe-blog-upyun.mircool.cn/blog/1779929416568985399.png)\n\n- 大留白，是杂志告诉你\"重点在这里\"的方式\n- 衬线字体优先，因为衬线在大字号上有印刷品的重量感\n- 版式不对称，制造视觉节奏，让眼睛知道先看哪\n- 用色克制，社交信息流里克制的色板反而比高饱和度更显眼\n\n这些决策听起来很虚，但落到代码里全是具体的常量——字号阶比例、留白比例、网格列数、对比度阈值、断行规则。这些常量才是 Skill 真正的护城河。\n\n---\n\n## Skill 是产品\n\n这个项目有 PRODUCT.md（解决什么问题、给谁用、不做什么）、版本号和 CHANGELOG、HANDOVER.md（交付物长什么样、能力边界在哪）。\n\n作者的观点：Skill 本质上是一个小产品。Prompt 十分钟会被同行复制走，产品不会。如果一个 Skill 连自己的能力边界都说不清，就没资格让别人把工作流交给它。\n\n![Skill 是产品](https://goframe-blog-upyun.mircool.cn/blog/1779929419708393461.png)\n\n项目地址：github.com/op7418/guizang-social-card-skill\n","summary":"从 PPT Skill 拆出来的图文卡片专用工具，内置 11 个品类适配、28 个版式骨架、两套视觉系统，把杂志和海报的设计语言搬到手机信息流里。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1779929375305415532.jpg","categoryId":1,"isDraft":0,"viewCount":183,"createdAt":"2026-05-28 00:51:14","updatedAt":"2026-07-26 17:35:04"},{"id":83,"title":"10 款顶级 UI 设计风格 Skill 合集","slug":"10-ui-design-style-skills-collection","content":"\u003e 从瑞士极简到赛博朋克，从新拟态到新粗野主义——10 款 UI 设计风格 Skill，让你的 AI 生成界面告别模板味。\n\n## 一、Frontend Design Pro Demo\n\n把 11 种不同设计美学做成了可交互的 live demo，从瑞士极简到赛博朋克，每种风格配有 master prompt、招牌视觉效果和 production-ready 代码。\n\nLive demo：claudekit.github.io/frontend-design-pro-demo\n\n项目地址：github.com/claudekit/frontend-design-pro-demo\n\n![Frontend Design Pro Demo](https://goframe-blog-upyun.mircool.cn/blog/1779461473566026729.png)\n\n---\n\n## 二、UI UX Pro Max\n\n39 个真实网站案例，横跨 SaaS、Education、Pet Services、AI/Chatbot、E-commerce、Fintech/Crypto、Healthcare、Creative、Real Estate、Gaming 等 20 个行业分类。支持按 light / dark 模式筛选（26 light + 13 dark）。\n\n地址：ui-ux-pro-max-skill.nextlevelbuilder.io\n\n![UI UX Pro Max](https://goframe-blog-upyun.mircool.cn/blog/1779461477091160605.png)\n\n---\n\n## 三、Awesome Claude Design\n\n把 9 大美学家族的代表品牌截图直接贴在 README 上，一眼就能对比每个风格的视觉差异。\n\n项目地址：github.com/rohitg00/awesome-claude-design\n\n![Awesome Claude Design](https://goframe-blog-upyun.mircool.cn/blog/1779461479253406618.png)\n\n---\n\n## 四、Awesome DESIGN.md\n\n每个 DESIGN.md 配 preview.html + preview-dark.html 两份可视化 HTML，能直接在浏览器打开看色板、字体、按钮、卡片样式。\n\n涵盖品牌：Apple / Tesla / Stripe / Vercel / Linear / Spotify / Airbnb / Notion / Figma / Nike / Ferrari / Lamborghini / BMW / NVIDIA 等 60+ 大厂设计。\n\n项目地址：github.com/VoltAgent/awesome-design-md\n\n![Awesome DESIGN.md](https://goframe-blog-upyun.mircool.cn/blog/1779461481907812447.png)\n\n---\n\n## 五、Anthropic Frontend Design（官方 Skill）\n\nAnthropic 自家美学——暖色编辑风格（Warm Editorial），赤陶橙色 + 米白底 + Tiempos 衬线字。anthropic.com 就是这个 Skill 生成的视觉风格。\n\n项目地址：github.com/anthropics/claude-code\n\n![Anthropic Frontend Design](https://goframe-blog-upyun.mircool.cn/blog/1779461484884737724.png)\n\n---\n\n## 六、Bencium UX Designer Skill\n\n两个版本——Controlled（生产级，强调 WCAG 可访问性）vs Innovative（突破性，鼓励大胆设计）。Bencium 官网本身就是用这个 Skill 生成的。\n\n项目地址：github.com/bencium/bencium-claude-code-design-skill\n\n![Bencium UX Designer](https://goframe-blog-upyun.mircool.cn/blog/1779461488152554942.png)\n\n---\n\n## 七、Taste Skill\n\n可调\"狂野程度\"的旋钮系统——Variance（保守↔实验）、Density（紧凑↔开阔）、Motion（克制↔电影感）。同一份产品需求，用不同旋钮组合产出截然不同的设计稿。\n\n项目地址：github.com/Leonxlnx/taste-skill\n\n![Taste Skill](https://goframe-blog-upyun.mircool.cn/blog/1779461492402034687.png)\n\n---\n\n## 八、SuperDesign\n\n唯一完全开源且跑在 IDE 里的设计 Skill。可以在 VS Code / Cursor 里直接召唤，输出多种风格的 UI 草图供选择。\n\n项目地址：github.com/superdesigndev/superdesign\n\n![SuperDesign](https://goframe-blog-upyun.mircool.cn/blog/1779461497129417772.png)\n\n---\n\n## 九、Neumorphism（新拟态 / Soft UI）\n\n模拟\"浮雕\"与\"内凹\"效果，通过柔和阴影制造塑料质感，整体色彩低对比、柔和高级。适合移动端界面、音乐播放器、轻量级 Dashboard。\n\n项目地址：github.com/sridhar-sp/compose-neumorphism\n\n![Neumorphism](https://goframe-blog-upyun.mircool.cn/blog/1779461499679321887.png)\n\n---\n\n## 十、Brutalism / Neo-Brutalism（新粗野主义）\n\n高对比、粗边框、大字体、结构直接，强调\"反精致\"。适合创意网站、作品集、品牌官网。\n\n项目地址：github.com/dev-snake/brutalist-ui\n\n![Neo-Brutalism](https://goframe-blog-upyun.mircool.cn/blog/1779461506560857725.png)\n","summary":"从瑞士极简到赛博朋克，从新拟态到新粗野主义——10 款开源 UI 设计风格 Skill。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1779461471587647777.jpg","categoryId":1,"isDraft":0,"viewCount":207,"createdAt":"2026-05-22 14:53:27","updatedAt":"2026-07-26 04:41:02"},{"id":78,"title":"rico-design-md：从任意网站提取设计系统规范","slug":"rico-design-md-extract-design-system","content":"\u003e 给你一个网站 URL，它能自动把颜色、排版、间距、圆角、阴影、组件状态拆解成结构化设计规范，同时输出 HTML 预览和多格式文件。这就是 rico-design-md 做的事。\n\n`rico-design-md` 是 Rico 在 rico-skills 系列中开发的一个 Skill，定位是 DESIGN.md 生成器。项目目前在 GitHub 上已有 183 个 Star，地址是 github.com/ricocc/rico-skills。\n\n![rico-skills GitHub 页面](https://goframe-blog-upyun.mircool.cn/blog/1779455619550984772.jpg)\n\n---\n\n## 它解决什么问题\n\n当你看到一个设计不错的网站，想分析它的颜色体系、排版规则、间距系统、圆角阴影、组件状态和整体视觉语言时，常规做法是截图、吸色、主观模仿。rico-design-md 把这些信息拆解成结构化规范，同时输出 HTML 设计系统预览页和开发可用的多格式文件。\n\n简单说：给它一个 URL，它返回一套设计系统文档。\n\n![rico-design-md 工作流](https://goframe-blog-upyun.mircool.cn/blog/1779455621784853809.jpg)\n\n---\n\n## 基本用法\n\n最常用的命令：\n\n    rico DESIGN.md [域名]\n\n执行后默认生成两个文件：\n\n- **DESIGN.md** — 完整样式参考，包含品牌声音、token、组件、Do's 和 Don'ts\n- **preview.html** — 可视化预览页，有色板、字体刻度、间距、阴影、组件示例\n\nMarkdown 适合给开发看，HTML 适合给设计、产品、客户看。一个讲规则，一个给直觉。\n\n![preview.html 预览](https://goframe-blog-upyun.mircool.cn/blog/1779455622936138683.jpg)\n\n---\n\n## 按需提取\n\n除默认输出外，支持按需生成单一格式：\n\n    rico tokens [url]          → tokens.json（DTCG 设计令牌格式）\n    rico variables [url]       → variables.css（可直接导入前端项目）\n    rico theme.css [url]       → Tailwind v4 @theme 格式\n    rico 全部输出 [url]        → 一次生成所有文件\n\n![多种输出格式](https://goframe-blog-upyun.mircool.cn/blog/1779455624236411489.jpg)\n\n---\n\n## 结构化设计信息\n\n重点不只是\"生成文件\"，而是把设计信息结构化：\n\n- **颜色**：整理成语义化 token（canvas、surface-1、ink、accent-blue），命名表达用途而非外观\n- **排版**：记录字体族、字号、字重、行高和字间距，避免只提取字号导致还原不完整\n- **组件**：记录可观察到的状态（hover、focus、active、selected）\n- **阴影和圆角**：保留可执行的 CSS 值，不用\"轻微阴影\"这类模糊描述\n\n还有一个容易被低估的能力——**格式转换**。已有 DESIGN.md 可以转成 tokens.json，有 variables.css 也能反推成文档。它不只是在生成文档，也在帮不同工具之间搬运设计资产。\n\n也可以按主题风格重构 preview 预览页的视觉和排版：\n\n![自定义主题预览](https://goframe-blog-upyun.mircool.cn/blog/1779455625568114141.jpg)\n\n---\n\n## 适合谁用\n\n- **个人开发者**：快速学习成熟网站的视觉语言\n- **团队**：减少设计还原的口头沟通成本\n- **AI 编程用户**：先把参考网站变成明确规格，再让 Agent 按规则写页面——比\"做得像 Linear 一点\"靠谱太多\n\n项目地址：github.com/ricocc/rico-skills\n","summary":"rico-design-md 是一个设计系统提取工具，输入网站 URL 即可自动生成 DESIGN.md、preview.html、tokens.json 等多格式设计资产文件。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1779455616219483900.jpg","categoryId":1,"isDraft":0,"viewCount":166,"createdAt":"2026-05-22 13:14:35","updatedAt":"2026-07-26 13:42:42"},{"id":77,"title":"用 gpt-image-2 把设计图变成真实网页：六步工作流完整指南","slug":"gpt-image-2-img-to-frontend-workflow","content":"\u003e 用 gpt-image-2 把设计草图变成真正能跑的前端代码——一份稳定的六步工作流完整指南。\n\n## 前言\n\nOpenAI 最近发布了顶级图像模型 gpt-image-2，立刻引爆了整个行业。\n\n它不仅能生成惊艳的图片，更厉害的是——**你可以用它把一张设计草图变成真正能跑的前端代码。**\n\n![从图片到真实 UI 的六步工作流](https://goframe-blog-upyun.mircool.cn/blog/1779424837027851657.jpg)\n\n很多人在讨论\"用 AI 从图片生成 UI\"这件事。他们说得没错，确实可以。但没告诉你的是：**如果没有正确的策略，你大概率会失败三四次才能勉强复刻出差不多的东西。**\n\n这篇文章是一份完整的六步工作流，帮你稳定地把任何设计图变成真实的网页 UI。不是魔法公式，但能让你少走弯路、省下大量 token。\n\n---\n\n## 关于 img-to-frontend Skill\n\n作者为这套工作流专门做了一个 Codex Skill，叫 **img-to-frontend**。它封装了从图片到前端代码的完整流程：生成四个设计变体 → 反向拆解提示词 → 构建 UI → 标注微调。\n\n---\n\n## 第一步：明确你的起点提示词\n\n第一步很简单——调用 img-to-frontend skill 启动工作流，然后告诉 AI 你想要什么样的页面。\n\n你已经有明确的想法？那就把细节尽可能写清楚：审美偏好、氛围感、目标受众、网站类型（SaaS、市场、个人主页等）、配色方案、图标文件路径等。\n\n还没想好也没关系，可以模糊一些。但**提前给的方向越明确，最终结果越接近预期。**\n\n如果 Mock 设计图缺少页脚或其他你想添加的元素，直接在提示词里补上。让它用同样的视觉风格扩展页面。\n\n---\n\n## 第二步：头脑风暴，生成四个设计方案\n\n提交提示词后，系统会立即生成**四个风格各异的设计变体**，作为你的参考起点。\n\n![AI 生成的四个健身网站设计变体](https://goframe-blog-upyun.mircool.cn/blog/1779424839651790465.jpg)\n\n上图展示了 AI 生成的四个 Peak Path Fitness 健身网站概念方案。每个方案的标题、布局、配色、功能模块都不同。系统会问你：**\"你想用哪个概念进入构建阶段？1、2、3 还是 4？\"**\n\n几个重要建议：\n\n- 想要更多变体？直接要求更多\n- 四个都不满意？修改提示词再生成一组\n- **不要选择过于复杂的\"花哨\"UI**——元素太多、图表太密的设计很难精确复刻\n\n选中一个你满意的设计，进入下一步。\n\n---\n\n## 第三步：把图片反向拆解成详细提示词\n\n这一步是整个工作流的核心差异化所在。\n\n问题是：**一致性。** 有些 UI 能做得很好，有些就差很多。怎么解决？\n\n答案是：不要直接说\"照着第二张图做\"，而是让 AI **为这张图片写一份极其详细的实现提示词**。\n\n![AI 正在分析设计图并生成详细提示词](https://goframe-blog-upyun.mircool.cn/blog/1779424841029843894.jpg)\n\n为什么要这样做？因为实现模型需要一个强有力的起点提示和一份视觉参考，才能稳定地产出高质量结果。让模型真正思考\"要构建这样一个 UI 需要什么\"，而不是简单地\"复制这张图\"。\n\n上面左侧面板展示了 AI 生成的实现指令，翻译过来是：\n\n**实现要求：**\n- 在构图、间距、配色和整体外观上严格参考目标图片\n- 构建一个真正可用的市场页面作为首页\n- 不要营销式着陆页\n- 不要假数据\n- 不要模拟浏览器外壳\n- 不要使用真实品牌 Logo\n- 保持 UI 干净、高端、有编辑感、视觉沉稳\n\n以及详细的构建指令：\n\n**确保在构建过程中不断对照参考图片，确保所有排版、间距、边距、内边距、图形、颜色和样式都是精确复刻。同时向下扩展页面，添加更多列表项和匹配风格的页脚。循环迭代直到完全匹配。**\n\n如果原始设计图缺少页脚或其他你想添加的元素，在提示词里补上。\n\n**强烈建议整个工作流使用 GPT-5.5。**\n\n---\n\n## 第四步：开始构建\n\n详细提示词生成后，**先花一分钟读一遍你要花大量 token 去执行的内容。** 补充任何遗漏的重要细节。\n\n一个小技巧：把原始设计图的截图直接贴回给 Agent，让它在上下文中明确看到目标。\n\n你可以这样提示：\n\n\u003e 参考这张图片，确保最终实现与它完全匹配。如果发现任何偏差，立即修正。\n\nCodex 用 10 分 16 秒构建了完整的 Shoez 市场页面，生成了 index.html、styles.css 和参考图片。最终通过 Playwright 在桌面端和移动端都验证了没有布局溢出。\n\n---\n\n## 第五步：标注和微调\n\n别指望一次就能完美复刻设计图。但**应该能得到一个相当不错的起点。**\n\n页面上可能会有尺寸不对的元素、字体不匹配、SVG 生成质量差、间距问题。这些都是容易修的小问题。Codex 内置的浏览器标注工具可以一次性处理所有这些。\n\n标注工具的使用方式：你可以在元素上直接输入修改指令，比如：\n\n**\"将这些图标在容器中垂直居中\"**\n\n点击 Codex 完成的 UI，浏览器会自动打开。点击右上角的 \"Annotate\" 开始选择需要修改的元素。有两种选择方式：\n\n- 直接高亮选中一个元素或容器\n- 拖拽鼠标框选任意区域\n\n选中后会弹出一个文本框，列出你想做的修改。你也可以用语音输入。\n\n**把所有修改一次性提交。** 根据 UI 复杂度，可能需要几轮修改，但每次都会明显更接近目标。根据经验，**几乎每次都能在十次以内的后续提示词中达到满意效果。**\n\n---\n\n## 第六步：持续迭代和个性化\n\n到这里，教程基本结束了。虽然只构建了半个着陆页，但**最难的部分已经完成**——你有了一个可用的视觉风格和代码基础。\n\n现在可以用同样的风格生成更多图片、子页面，模型会从现有代码中推断出风格。你有了所有需要的工具来完成剩下的页面。\n\n一个特别酷的地方：**gpt-image-2 可以生成你网站需要的所有图片素材。**\n\n![AI 生成的 ShoeZ Logo](https://goframe-blog-upyun.mircool.cn/blog/1779424845249455621.png)\n\n上面展示了用 gpt-image-2 生成品牌 Logo 的提示词：\n\n**为一家叫 \"Shoez\" 的鞋店创建一个现代、专业的 Logo。包含一个简洁的运动鞋图标和醒目的 \"Shoez\" 文字标识。使用干净的黑、白、红配色方案，背景透明。**\n\n实际上，下面展示的所有图片和 Logo 都是由 gpt-image-2 生成的。\n\n---\n\n## 画廊：完整案例展示\n\n### 案例一：Shoez 球鞋二手市场\n\n**原始设计草图：**\n\n![Shoez 球鞋市场设计草图](https://goframe-blog-upyun.mircool.cn/blog/1779424848342860323.jpg)\n\n**经过 8 次提示词迭代后的最终效果：**\n\n![Shoez 最终页面效果](https://goframe-blog-upyun.mircool.cn/blog/1779424849495065235.jpg)\n\n**AI 生成的品牌 Logo：**\n\n![AI 生成的 ShoeZ Logo](https://goframe-blog-upyun.mircool.cn/blog/1779424845249455621.png)\n\n### 案例二：Peak Path Fitness 健身网站\n\n**最终着陆页效果（6 次提示词迭代）：**\n\n![Peak Path Fitness 着陆页](https://goframe-blog-upyun.mircool.cn/blog/1779424851846466008.jpg)\n\n**AI 生成的独立素材：**\n\n![AI 生成的运动鞋图片](https://goframe-blog-upyun.mircool.cn/blog/1779424852945184855.jpg)\n\n---\n\n## 结语\n\n这个工作流的核心价值在于两件事：\n\n**第一，利用 AI 的非确定性进行视觉头脑风暴。** 你可能还没想好页面长什么样，让 AI 先给你四个方向。\n\n**第二，减少方差。** 有了这套策略，你能更稳定地得到一个靠谱的起点，而不是浪费大量时间和 token 去试错。\n\ngpt-image-2 的能力远不止于此。这份指南只是一个起点——你可以用它构建更复杂、更惊艳的网站。关键是：**先把基础打好，再逐步叠加复杂度。**\n\n---\n\n\u003e 原文来源：@LLMJunky，作者：码间AI楠哥\n","summary":"用 gpt-image-2 把设计草图变成真正能跑的前端代码——一份稳定的六步工作流完整指南，帮你少走弯路、省下大量 token。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1779424837027851657.jpg","categoryId":3,"isDraft":0,"viewCount":183,"createdAt":"2026-05-22 04:41:43","updatedAt":"2026-07-26 16:18:25"},{"id":76,"title":"堆友：Alibaba Design 的 AI 设计工具，10+ 专家 Skill 一站式搞定","slug":"duid-design-alibaba-ai-design-tool","content":"\u003e Alibaba Design 团队推出的堆友（d.design），把多年积累的设计经验打包成了可复用的专家 Skill，覆盖 UI 设计、电商详情页、品牌全案、创意策划、图片分层、换角度、批量编辑等高频场景，一站式搞定。\n\n## 堆友是什么\n\n堆友的定位是「你的 AI 设计部」，内置十多种专家 Skill，包含电商设计、海报设计、UI 设计、长图文、字体设计、品牌全案、Logo 设计、小红书营销、社媒配图等。\n\n每个 Skill 背后是 Alibaba Design 团队多年实战经验的沉淀，把设计方法论提炼成可复用的能力，覆盖大部分高频设计场景。\n\n官网：https://d.design/\n\n![堆友官网](https://goframe-blog-upyun.mircool.cn/blog/1779203783257147679.jpg)\n\n## 专家 Skill 详解\n\n### UI 设计\n\n打开堆友官网，点击左侧菜单栏的 Skills，可以看到多个领域的设计 Skill。\n\n![Skills 列表](https://goframe-blog-upyun.mircool.cn/blog/1779203785983563157.png)\n\n选择产品设计的 Skill，点击「立即体验」。\n\n![产品设计 Skill](https://goframe-blog-upyun.mircool.cn/blog/1779203790493367263.png)\n\n输入一句话描述需求，比如「做一个读书 APP 首页 UI 设计」。\n\n![输入需求](https://goframe-blog-upyun.mircool.cn/blog/1779203791916637923.png)\n\n它会进一步询问想要的风格。不想思考的话，直接点左下角「全部 AI 决策」，后续就不会再追问了。\n\n![AI 决策](https://goframe-blog-upyun.mircool.cn/blog/1779203794067741821.png)\n\n几分钟后，点击 HTML 卡片就能看到设计效果。\n\n![UI 设计效果](https://goframe-blog-upyun.mircool.cn/blog/1779203795412243919.png)\n\n还可以「导入画布编辑」，直接在画布里改字体、颜色、阴影、位置。\n\n![画布编辑](https://goframe-blog-upyun.mircool.cn/blog/1779243839083972496.png)\n\n![编辑细节](https://goframe-blog-upyun.mircool.cn/blog/1779203799259708227.png)\n\n继续追问还能让它分析界面的优化空间，输出一份 UI 评估报告。\n\n![优化评估](https://goframe-blog-upyun.mircool.cn/blog/1779203801909958786.png)\n\n![评估报告](https://goframe-blog-upyun.mircool.cn/blog/1779203803287875794.png)\n\n### 电商详情页设计\n\n新建项目，输入 @ 选择「电商详情页设计专家」，上传产品图片，一句话生成详情页。\n\n![电商 Skill](https://goframe-blog-upyun.mircool.cn/blog/1779203805092116519.png)\n\n![上传产品](https://goframe-blog-upyun.mircool.cn/blog/1779243841257477792.png)\n\n回答几个问题后，点击 HTML 查看生成界面。\n\n![电商详情页生成界面](https://goframe-blog-upyun.mircool.cn/blog/1779203809301794594.png)\n\n![HTML 预览卡片](https://goframe-blog-upyun.mircool.cn/blog/1779203810252094266.png)\n\n一句话生成的完成度已经不错了，完整详情页效果如下。\n\n![详情页最终效果](https://goframe-blog-upyun.mircool.cn/blog/1779203814876508912.jpg)\n\n---\n\n## 其他实用功能\n\n### 自主创意规划\n\n不需要完整的创意指令，一句话描述需求就能自动规划。比如输入「帮我写一个线下展览集市活动的创意方案」。\n\n![创意规划](https://goframe-blog-upyun.mircool.cn/blog/1779243842805792217.png)\n\n回答一些问题后输出方案，可以编辑或确认。\n\n![方案编辑](https://goframe-blog-upyun.mircool.cn/blog/1779203816772245530.png)\n\n一份线下展览集市活动的创意方案就完成了。\n\n![方案效果](https://goframe-blog-upyun.mircool.cn/blog/1779203818927305767.png)\n\n### 图片自动分层\n\n把图片导入项目，点击「编辑元素」，所有元素自动分离。\n\n![分层前](https://goframe-blog-upyun.mircool.cn/blog/1779203823025956489.png)\n\n图片中的所有元素都拆出来了，方便二次编辑。\n\n![分层效果](https://goframe-blog-upyun.mircool.cn/blog/1779203825195187060.png)\n\n### 图片换角度\n\n选中画布上的图片，点击「更多」→「换角度」，提供 9 种角度选择。\n\n![换角度](https://goframe-blog-upyun.mircool.cn/blog/1779203828242084813.png)\n\n选择角度后点击「应用修改」。\n\n![角度选择](https://goframe-blog-upyun.mircool.cn/blog/1779203831298058320.png)\n\n角度瞬间改变，特别适合服装电商的多角度展示。\n\n![换角度效果](https://goframe-blog-upyun.mircool.cn/blog/1779203834989083682.png)\n\n### 多格式文件上传\n\n支持上传图片（jpg/png/webp）、视频（mp4/avi/mkv）、音频（mp3/flac）、文档（word/excel/txt/pdf，10M 以内）。\n\n比如上传一份包含海报内容的文档：\n\n![上传文档](https://goframe-blog-upyun.mircool.cn/blog/1779203838306214689.png)\n\n几秒钟就能生成海报。\n\n![海报生成](https://goframe-blog-upyun.mircool.cn/blog/1779203841050831896.png)\n\n### 批量编辑和设计\n\n支持批量把文本加在图片上、批量修改文字颜色、批量去掉文字、批量调整字号等操作。\n\n把图片和文本全选，输入「把这个文本内容加在 4 张图片上，以标题的形式显示出来」。\n\n![批量操作](https://goframe-blog-upyun.mircool.cn/blog/1779203842603925745.png)\n\n文本批量嵌入图片，速度很快。\n\n![批量效果](https://goframe-blog-upyun.mircool.cn/blog/1779203845035771806.png)\n\n---\n\n\u003e 堆友把原本藏在大厂内部、需要多年积累才能掌握的设计方法论，第一次以 Skill 的形式公开出来。打开堆友，挑一个 Skill，专家就在对面。\n","summary":"Alibaba Design 团队推出的堆友（d.design），内置十多种专家 Skill，覆盖 UI 设计、电商详情页、品牌全案、创意策划、图片分层、换角度、批量编辑等场景。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1779203783257147679.jpg","categoryId":1,"isDraft":0,"viewCount":187,"createdAt":"2026-05-19 15:18:44","updatedAt":"2026-07-26 00:50:29"},{"id":75,"title":"AI 时代软件工程基础比以往更重要：Matt Pocock 演讲精华","slug":"software-fundamentals-matter-more-than-ever","content":"\u003e Matt Pocock 在 AI Engineer 大会上的演讲，核心观点：AI 不会淘汰程序员，只会淘汰不懂工程基础的人。四个经典方法论在 AI 时代的重新解读。\n\n前段时间看了 Matt Pocock 在 AI Engineer 大会上的演讲：Software Fundamentals Matter More Than Ever。\n\n他是前 Vercel 开发者布道师，Total TypeScript 作者，现在搞了一个叫 AI Hero 的平台，专门教人用 AI Coding。\n\n这场演讲发布两周就 60 万播放量，18 分钟，信息密度极高。\n\n他教了 18 个月的 AI Coding 之后，发现了一个规律：那些用 AI 用得好的开发者，不是什么都委托给 AI 的人，也不是什么都自己写的人。\n\n是那些回归工程基础的人。\n\n他还基于自己的 AI Coding 经验搞了几个 Skill，目前开源了。\n\n![Matt Pocock AI Engineer 演讲](https://goframe-blog-upyun.mircool.cn/blog/1778747925750984280.png)\n\n---\n\n## AI Coding 的两个极端都有问题\n\n现在行业里对 AI Coding 有两种极端态度。\n\n一种是 vibe coding。这个词是 Andrej Karpathy 提出来的，说白了就是凭感觉让 AI 写代码，描述个大概，然后祈祷它能跑。\n\n![vibe coding vs specs-to-code](https://goframe-blog-upyun.mircool.cn/blog/1778747927304892229.png)\n\n另一种是 specs-to-code。写一份详细的规格说明书，直接扔给 AI 让它生成。这派的假设是：代码是廉价的，规格才是珍贵的。\n\nMatt 说这两个都有问题。\n\nvibe coding 的问题很明显：失控。你不知道 AI 写了什么，也不知道它为什么这么写，改起来更是灾难。\n\n但 specs-to-code 的问题更隐蔽。它假设代码是廉价的，但实际上，AI 生成的代码和人类写的代码一样，都会腐烂、都会积累技术债、都需要维护。\n\n代码从来就不廉价。AI 只是让你更快地产出代码，但不会替你思考代码该怎么组织。\n\nMatt 的观察是：真正成功的开发者，既不全委托也不全自己写。他们把 AI 当作一个超级实习生——执行力强，但需要你给出清晰的方向和约束。\n\n---\n\n## 先别写代码，先被 AI 拷问一轮\n\nGrill Me 是 Matt 开源的一个 Claude Code Skill。\n\n![Grill Me Skill](https://goframe-blog-upyun.mircool.cn/blog/1778747929899008894.png)\n\n它的逻辑特别简单：在动手写任何代码之前，让 AI 先把你拷问一轮。\n\n不是你问 AI，是 AI 问你。\n\n它会沿着你设计决策树的每一个分支往下走，一条一条地把模糊的想法逼成清晰的方案。依赖关系、边界条件、数据模型，全都不放过。\n\n![Grill Me 工作流程](https://goframe-blog-upyun.mircool.cn/blog/1778747932690951566.png)\n\nMatt 说他每天收到大约 5 条消息，都是开发者说用了 Grill Me 之后大开眼界的。Reddit 上也有人专门发帖说这个 Skill 彻底改变了他用 AI 做规划的方式。\n\n后来 Matt 又进化出了一个升级版，叫 /grill-with-docs。不仅拷问你，还会把拷问过程中达成的共识实时写进一个叫 CONTEXT.md 的文件里。\n\n![grill-with-docs](https://goframe-blog-upyun.mircool.cn/blog/1778747934739381687.png)\n\n如果你要问和 SuperPowers 的 Brainstorming 有啥区别，我用起来的感受是：\n\nBrainstorming：适合任何新功能、新项目、重构启动前的设计阶段。\n\nGrill-with-docs：更适合已有代码库的项目，你需要对一个具体方案做决策、对齐术语、并同步建立文档。\n\n如果你的项目还没有 CONTEXT.md 体系，它也会帮你从头建起来。\n\n这么做的好处是什么？传统开发中，你脑子里对系统的理解和代码之间总有 gap。有了这个文件，AI 在后续所有开发中都有一份共识词典可以参考，不用每次都重新解释一遍。\n\n说白了，Grill Me 强迫你在写代码之前先把设计想清楚。AI 不会帮你做决策，它只会加速你已经做出的决策。如果你自己都没想清楚，AI 加速的只是混乱。\n\n---\n\n## 统一语言：让人、代码和 AI 说同一种话\n\nUbiquitous Language 这个概念来自 Eric Evans 2003 年出版的经典《领域驱动设计》。核心思想是：让代码、开发者和领域专家都说同一套术语。\n\n![Ubiquitous Language](https://goframe-blog-upyun.mircool.cn/blog/1778747936191898326.png)\n\n听起来理所当然，但实际操作中很少有团队做到。产品经理说一个词，开发者理解成另一个意思，代码里的命名又是第三个东西。\n\n在 AI 时代，这个问题被放大了。因为 AI 没有隐含上下文，它不懂你的暗示和惯例。\n\n你说的用户和代码里的 User 是不是一个东西？你说的订单和数据库里的 Order 是不是同一个概念？如果你不说清楚，AI 就会自己猜。猜错了，你就得返工。\n\nMatt 的做法是在项目根目录维护一个 CONTEXT.md 文件，里面记录所有核心术语的精确定义和它们之间的关系。\n\n举一个他自己的真实例子。他在开发课程管理系统时，新功能要加一个 Pitch 的概念（类似视频的包装方案）。AI 当场发现了一个术语矛盾：他已经定义了 Standalone Video 是 lessonId 为 NULL 的视频，但新功能里又让视频关联到 Pitch。那这种视频还算 Standalone Video 吗？\n\n这个问题如果不解决，后续所有的变量命名、文件命名、数据库设计都会乱。AI 给了两个方案：要么重新定义 Standalone Video，要么把 Pitch 看作附加在 Standalone Video 上的独立元数据。最终 Matt 选择了后者。\n\n这个决定会影响整个代码库的命名和组织方式。如果不在一开始就统一清楚，后面越写越乱。\n\n有了统一语言，AI 的输出质量会显著提升。它不再需要冗长地重新解释每个概念，几个词就能精准表达意图。Token 省了，对齐也好了。\n\nMartin Fowler 也在他的博客里专门写过：统一语言的最大价值不是文档，而是它迫使你在沟通中消除歧义。在 AI 时代，这个价值被放大了十倍。\n\n---\n\n## TDD：不是写测试，是控制节奏\n\nTDD 很多人觉得是先写测试再写代码，但 Matt 强调的 TDD 不是这个意思。\n\n在 AI Coding 语境下，TDD 的核心作用是控制每一步的粒度。\n\n![TDD in AI Coding](https://goframe-blog-upyun.mircool.cn/blog/1778747937905766471.jpg)\n\nAI 最大的问题是什么？它太能写了。你让它做一个功能，它能一口气给你生成几百行代码，涵盖各种边界情况。但这几百行代码你能验证吗？你知道哪行有问题吗？\n\nTDD 强制你把工作切成小片。Red 先写个失败的测试，然后 Green 写最少的代码让测试通过，最后 Refactor 重构。每一步都是可验证的。\n\nMatt 的观点是：没有 TDD，AI 生成的代码会迅速变成意大利面条。因为 AI 没有全局观，它只会根据当前上下文尽力而为。如果你不控制每一步的范围，它就会越写越散。\n\n传统开发中，TDD 的角色更多是质量保障。但在 AI Coding 中，TDD 的角色变成了过程控制——确保每一步都在可控范围内。\n\n小步快跑，每一步都有反馈，发现偏差立刻修正。\n\n---\n\n## Deep Modules：藏复杂，露简单\n\nDeep Modules 这个概念来自斯坦福教授 John Ousterhout 的《软件设计的哲学》。\n\n![Deep Modules](https://goframe-blog-upyun.mircool.cn/blog/1778747940235059217.png)\n\nDeep Modules 就是功能丰富但接口简单的模块。反面是功能不多但接口很复杂。\n\n一个典型的 Deep Modules：JavaScript 的垃圾回收器。功能极其复杂，但对外暴露的接口就一个——你不用手动管理内存。\n\n一个典型的反面就是：一个只做参数校验却要求传入 10 个配置项的函数。\n\nMatt 说在 AI Coding 中，Deep Modules 的价值被放大了。因为 AI 的上下文窗口有限，它能同时理解的代码范围是受限的。如果你的模块又浅又碎，AI 就需要在多个文件之间跳来跳去，很容易丢失上下文。\n\n而 Deep Modules 把复杂性藏在背后，只暴露一个简单的接口。AI 只需要理解接口，不需要理解内部实现，认知负担大幅降低。\n\n这也对测试友好。Deep Modules 测试起来更容易，因为你要覆盖的接口面更小。\n\n这和很多人追求的小而美的模块化思路其实是反的。不是越小越好，而是封装得当才好。\n\n---\n\n## 底层逻辑：管理认知负荷\n\n如果你仔细看这四个方法论，会发现它们有一个共同的底层逻辑：管理认知负荷。\n\nGrill Me 让你在写代码前先想清楚，减少返工带来的认知消耗。\n\n统一语言让人、代码和 AI 使用同一套术语，消除歧义带来的认知负担。\n\nTDD 控制每一步的范围，避免一次处理太多信息。\n\nDeep Modules 把复杂性封装起来，让每次交互只需要理解接口而不是全部细节。\n\nMatt 的核心洞察是：在 AI 时代，开发者的角色从写代码的人变成了做战略设计的人。AI 是你的战术执行者，它写代码、跑测试、做重构。但战略层面的决策——怎么组织模块、怎么定义概念、怎么切分任务——这些必须由人来定。\n\n---\n\n## 都不是新东西\n\n而这四个方法论，都不是什么新发明。\n\n统一语言来自 2003 年出版的《领域驱动设计》。\n\nTDD 来自 Kent Beck 在 1999 年提出的极限编程。\n\nDeep Modules 来自 2018 年出版的《软件设计的哲学》。\n\n它们没有过时，也没有失效。在 AI 时代，它们反而变得更重要了。因为当你有一个能一秒钟写 100 行代码的助手时，你需要的不是更多的代码，而是更好的约束。\n\nMatt 在演讲最后说了一句话，大意是：这些原则几十年前就有了，它们没有被打败——它们变得更重要了。\n\n---\n\n## 怎么开始\n\n别急着学新框架新工具，回去重读两本经典。\n\n一本是 Eric Evans 的《领域驱动设计》，一本是 John Ousterhout 的《软件设计的哲学》。\n\n然后试一下 Matt 开源的 Skills 仓库，里面有 Grill Me 和其他实战 Skill，可以直接装到 Claude Code 里用。\n\n开源地址：https://github.com/mattpocock/skills\n\n演讲视频：https://www.youtube.com/watch?v=v4F1gFy-hqg\n\n如果你觉得 18 分钟的演讲还不过瘾，Matt 还录了一个近 1.5 小时的完整工作流视频，手把手演示了怎么用这套方法论从零搭建一个真实项目。在 YouTube 搜 Full Walkthrough: Workflow for AI Coding 就能找到。\n","summary":"Matt Pocock 在 AI Engineer 大会演讲精华：Grill Me、统一语言、TDD、Deep Modules 四个经典方法论在 AI Coding 时代的实践指南。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778747922427479922.jpg","categoryId":1,"isDraft":0,"viewCount":245,"createdAt":"2026-05-14 08:40:20","updatedAt":"2026-07-26 12:45:34"},{"id":74,"title":"GPT-Image-2 生成 12 套可视化大屏：提示词直接拿走用","slug":"gpt-image2-dashboard-design-prompts","content":"\u003e GPT-Image-2 发布半个月，有人用它生成了 12 套可视化大屏概念稿，覆盖 12 个行业。效果出人意料，提示词结构值得参考。\n\n![12 套大屏总览](https://goframe-blog-upyun.mircool.cn/blog/1778733300318119982.jpg)\n\n---\n\n## 一、12 套大屏概念稿\n\n每套都有完整的提示词，可以直接复制使用。\n\n---\n\n### 1. 智慧党建综合管理大屏\n\n![智慧党建大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733302927421044.jpg)\n\n深红+金色，政务科技风，庄重有序。\n\n    生成一张智慧党建综合管理可视化大屏设计稿，\n    整体风格为现代政务科技风，\n    主色调为深红色和金色，辅助色为深蓝色，\n    画面精致、信息层级清晰。\n\n    核心区域展示党建组织架构与区域治理地图（中国地图风格），\n    周围环绕以下关键指标模块：\n    - 左上：党员人数统计、组织架构树状图\n    - 右上：党建活动日历、通知公告栏\n    - 左下：群众满意度评分、服务事项办理进度\n    - 右下：区域治理数据、网格化管理地图\n\n    画面中有党徽元素作为装饰，整体庄重有序，科技感强。\n    画面比例16:9，4K高清，UI设计参考指挥中心大屏风格。\n\n---\n\n### 2. 网络安全态势感知大屏\n\n![网络安全大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733305990446683.jpg)\n\n深蓝+青色，攻击追踪可视化，未来科技感。\n\n    生成一张网络安全态势感知可视化大屏设计稿，\n    整体风格为网络安全科技风，\n    主色调为深蓝色和科技青色，告警信息用红色高亮，\n    画面精致、信息层级清晰。\n\n    核心区域展示全球网络攻击实时追踪地图（光线连接线效果），\n    周围环绕以下关键指标模块：\n    - 左上：当前受攻击IP数量、攻击来源国家排行\n    - 右上：实时威胁等级、安全事件时间轴\n    - 左下：企业资产防护态势、漏洞扫描结果\n    - 右下：网络流量监控曲线、异常行为检测\n\n    画面中有数字盾牌、光线流动效果，整体充满未来科技感。\n    画面比例16:9，4K高清，UI设计参考网络安全运营中心风格。\n\n---\n\n### 3. 港口智慧运营调度大屏\n\n![港口运营大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733309410532556.jpg)\n\n三维数字孪生，实时运营数据，工业科技风。\n\n    生成一张港口智慧运营调度可视化大屏设计稿，\n    整体风格为现代工业科技风，\n    主色调为深蓝色和橙色，辅助色为白色和灰色，\n    画面精致、信息层级清晰。\n\n    核心区域展示港口三维数字孪生模型（俯视角度，含集装箱堆场、船只、起重机），\n    周围环绕以下关键指标模块：\n    - 左上：船只进出港数量、泊位占用率\n    - 右上：集装箱吞吐量实时数据、堆场利用率\n    - 左下：作业效率分析、设备运行状态\n    - 右下：货物运输追踪、调度指令面板\n\n    画面中有港口实景三维渲染效果，光影精致。\n    画面比例16:9，4K高清，UI设计参考港口调度指挥中心风格。\n\n---\n\n### 4. 风力发电能源管理大屏\n\n![风力发电大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733311255448348.jpg)\n\n清洁能源，风电场3D场景，动态光效。\n\n    生成一张风力发电能源管理可视化大屏设计稿，\n    整体风格为清洁能源科技风，\n    主色调为白色、淡蓝色和绿色，辅助色为橙色（强调色），\n    画面精致、信息层级清晰。\n\n    核心区域展示风电场三维场景（丘陵地貌，多台风力发电机，动态光效），\n    周围环绕以下关键指标模块：\n    - 左上：今日发电量、累计发电量、风机在线率\n    - 右上：风场地图、各风机状态分布\n    - 左下：风速风向实时监测、功率曲线\n    - 右下：设备健康度、维护计划提醒\n\n    画面中有风吹动风机叶片的动感效果，阳光照射光影。\n    画面比例16:9，4K高清，UI设计参考新能源监控中心风格。\n\n---\n\n### 5. 智慧工厂运营管理大屏\n\n![智慧工厂大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733313328580960.jpg)\n\n车间3D模型，产线动画，智能制造风。\n\n    生成一张智慧工厂运营管理可视化大屏设计稿，\n    整体风格为智能制造科技风，\n    主色调为深灰色和蓝色，辅助色为橙色和绿色（状态指示），\n    画面精致、信息层级清晰。\n\n    核心区域展示工厂车间三维模型（自动化产线、机械臂、传送带动态光效），\n    周围环绕以下关键指标模块：\n    - 左上：生产进度看板、订单完成率\n    - 右上：设备运行状态（OEE）、产线实时监控\n    - 左下：质量检测结果、不良品率趋势\n    - 右下：能耗监测、人员到岗情况\n\n    画面中有工业机器人运作的动感效果，科技感强。\n    画面比例16:9，4K高清，UI设计参考智能制造指挥中心风格。\n\n---\n\n### 6. 智慧桥梁数字孪生大屏\n\n![智慧桥梁大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733315435056430.jpg)\n\n工程科技，结构安全监测，精密预警。\n\n    生成一张智慧桥梁数字孪生可视化大屏设计稿，\n    整体风格为工程科技风，\n    主色调为深蓝色和银灰色，辅助色为橙色（告警色），\n    画面精致、信息层级清晰。\n\n    核心区域展示特大桥梁3D数字孪生模型（斜拉桥或悬索桥），\n    桥身上分布传感器点位光点，\n    周围环绕以下关键指标模块：\n    - 左上：桥梁健康监测数据、应力应变实时曲线\n    - 右上：交通流量统计、超载车辆预警\n    - 左下：传感器网络状态、振动频率监测\n    - 右下：养护计划提醒、历史病害记录\n\n    画面中有光线流动效果，表现数据实时传输，科技感强。\n    画面比例16:9，4K高清，UI设计参考工程监控中心风格。\n\n---\n\n### 7. 智慧城市运行总览大屏\n\n![智慧城市大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733319040140635.jpg)\n\n城市治理，全域感知，未来指挥中心。\n\n    生成一张智慧城市运行总览可视化大屏设计稿，\n    整体风格为智慧城市科技风，\n    主色调为深蓝色和青色，辅助色为白色和绿色，\n    画面精致、信息层级清晰。\n\n    核心区域展示城市3D数字孪生模型（鸟瞰视角，含地标建筑、道路网、河流），\n    周围环绕以下关键指标模块：\n    - 左上：城市运行指数、GDP实时测算、人口流动热力\n    - 右上：政务服务数据、市民诉求响应率\n    - 左下：交通拥堵指数、公共安全事件统计\n    - 右下：环境监测数据（PM2.5、水质、噪音）\n\n    画面中有城市夜景灯光效果，数据流光线环绕，宏大科技感。\n    画面比例16:9，4K高清，UI设计参考智慧城市指挥中心风格。\n\n---\n\n### 8. 智慧交通指挥调度大屏\n\n![智慧交通大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733321537422274.jpg)\n\n实时路况，拥堵预警，信号调控。\n\n    生成一张智慧交通指挥调度可视化大屏设计稿，\n    整体风格为智慧交通科技风，\n    主色调为深蓝色和绿色，拥堵路段用红色高亮，\n    画面精致、信息层级清晰。\n\n    核心区域展示全市路网流量热力图（地图底色，道路用颜色编码拥堵程度），\n    周围环绕以下关键指标模块：\n    - 左上：实时路况概览、拥堵路段排行\n    - 右上：信号灯实时调控状态、绿波带覆盖率\n    - 左下：公共交通运行数据（公交/地铁客流量）\n    - 右下：交通事故报警、应急处理进度\n\n    画面中有车辆流动动画效果，红黄绿三色道路编码清晰。\n    画面比例16:9，4K高清，UI设计参考交通指挥中心风格。\n\n---\n\n### 9. 智慧农业监测大屏\n\n![智慧农业大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733324446770213.jpg)\n\n无人机巡检，作物生长，异常报警。\n\n    生成一张智慧农业监测可视化大屏设计稿，\n    整体风格为智慧农业科技风，\n    主色调为绿色和棕色，辅助色为蓝色（水系）和黄色（麦田/成熟作物），\n    画面精致、信息层级清晰。\n\n    核心区域展示农田三维俯瞰图（无人机视角，含田块划分、灌溉系统、气象站），\n    上方有无人机巡检路线光迹，\n    周围环绕以下关键指标模块：\n    - 左上：作物生长监测、土壤湿度/温度数据\n    - 右上：气象预警信息、病虫害报警\n    - 左下：无人机巡检进度、高清航拍快照\n    - 右下：灌溉系统状态、肥料/农药使用统计\n\n    画面中有阳光照射效果，农田绿意盎然，科技感与田园感并存。\n    画面比例16:9，4K高清，UI设计参考智慧农业监控中心风格。\n\n---\n\n### 10. 新能源车企运营大屏\n\n![新能源车企大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733327115621356.jpg)\n\n智能制造，绿色能源，未来出行。\n\n    生成一张新能源车企运营可视化大屏设计稿，\n    整体风格为未来科技风，\n    主色调为白色和蓝色，辅助色为绿色（新能源）和橙色（强调色），\n    画面精致、信息层级清晰。\n\n    核心区域展示新能源整车3D结构模型（透明车身，展示电池、电机、电控三大件），\n    周围有能量流动光效连接各部件，\n    周围环绕以下关键指标模块：\n    - 左上：今日产量、订单交付进度、生产线状态\n    - 右上：电池健康监测、充电桩网络分布\n    - 左下：车辆运行数据（续航、能耗、故障报警）\n    - 右下：销售数据大盘、用户满意度评分\n\n    画面中有科技蓝图格效果，光线流动表现能量传递，未来感极强。\n    画面比例16:9，4K高清，UI设计参考车企监控中心风格。\n\n---\n\n### 11. 智慧物流调度大屏\n\n![智慧物流大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733330237731608.jpg)\n\n仓储调度，运输路径，全链路追踪。\n\n    生成一张智慧物流调度可视化大屏设计稿，\n    整体风格为智慧物流科技风，\n    主色调为深蓝色和橙色，辅助色为白色和灰色，\n    画面精致、信息层级清晰。\n\n    核心区域展示物流网络地图（全国或全市，含仓储节点、运输路线、实时车辆位置），\n    周围环绕以下关键指标模块：\n    - 左上：今日订单量、仓储利用率、出入库效率\n    - 右上：运输车辆实时位置、配送进度追踪\n    - 左下：异常订单处理、客户投诉率\n    - 右下：物流成本分析、运力调度建议\n\n    画面中有车辆移动动画、光线连接仓储与目的地，动态感强。\n    画面比例16:9，4K高清，UI设计参考物流调度中心风格。\n\n---\n\n### 12. 智慧安检态势感知大屏\n\n![智慧安检大屏](https://goframe-blog-upyun.mircool.cn/blog/1778733332809247588.jpg)\n\n安全管控，异常预警，实时通行。\n\n    生成一张智慧安检态势感知可视化大屏设计稿，\n    整体风格为公共安防科技风，\n    主色调为深蓝色和灰色，辅助色为绿色（正常）和红色（告警），\n    画面精致、信息层级清晰。\n\n    核心区域展示安检区域布局图或安检通道三维模型（含X光机、安检门、监控摄像头位置），\n    周围环绕以下关键指标模块：\n    - 左上：今日通行人数、安检通过率、排队等待时间\n    - 右上：违禁品检出统计、X光图像异常标记\n    - 左下：安检设备运行状态、故障报警\n    - 右下：历史安检数据趋势、重点人员预警\n\n    画面中有监控画面缩略图嵌入、红色闪烁告警光效，安全感与科技感并存。\n    画面比例16:9，4K高清，UI设计参考公共安防指挥中心风格。\n\n---\n\n## 二、实测结论\n\n### 做得好的\n\n| 能力 | 效果 |\n|------|------|\n| 风格发散 | 5分钟出5套方案，甲方当场挑 |\n| 氛围验证 | \"要科技感？\"——10种科技感任选 |\n| 行业参考 | 不懂某个行业？先来一套看着改 |\n| 沟通成本 | 效果图往甲方面前一放，省去80%无用功 |\n\n### 翻车的地方\n\n- **文字不准**：乱码警告，数据分析师看了会沉默\n- **数据无逻辑**：图表看起来像那么回事，但数字完全不搭\n- **组件不可复用**：一张图，不能拆\n- **信息层级乱**：AI 不懂哪块该大哪块该小\n\n结论：AI 能做 0 到 1，但 1 到 100 得你来。\n\n---\n\n## 三、提示词模板\n\n12 套大屏的提示词结构完全一样：\n\n    生成一张【行业/场景】可视化大屏设计稿\n    → 整体风格\n    → 主色调 + 辅助色\n    → 核心区域展示【核心视觉】\n    → 周围环绕【关键指标模块】\n    → 画面比例16:9，4K高清\n\n越像设计简报，AI 越像设计副手。\n\n---\n\n## 四、正确用法\n\n1. **用 AI 做探索，不做交付**——概念稿用来确认方向，不是交上去的成品\n2. **组件还得手搓**——AI 生成整体效果，组件设计还得靠人\n3. **跟开发对齐**——效果图很好看，但很多特效前端根本做不出来\n","summary":"用 GPT-Image-2 生成了 12 套行业可视化大屏概念稿，覆盖党建、网安、港口、能源、工厂、桥梁、城市、交通、农业、新能源、物流、安检。每套附完整提示词，可直接复用。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778733297321405689.jpg","categoryId":1,"isDraft":0,"viewCount":374,"createdAt":"2026-05-14 04:36:51","updatedAt":"2026-07-26 00:50:29"},{"id":73,"title":"AI 网站克隆模板：一条命令复刻任意前端架构","slug":"ai-website-cloner-template","content":"\u003e 一个开源的 AI 网站克隆模板，用 Claude Code 或 Codex CLI 等 AI Agent，五阶段流水线自动把任意网站拆解、复刻成 Next.js 16 项目。\n\n## 解决什么问题\n\n用 AI 写前端代码时，最烦的不是模型能力不够，而是**不知道怎么组织 prompt**。随手一句\"帮我克隆这个网站\"，结果要么丢三落四，要么结构混乱。\n\n这个项目解决的就是这个\"怎么问\"的问题——它把网站克隆拆成五个阶段，每个阶段有专门的 prompt 模板，AI Agent 按流水线干活，质量稳定得多。\n\n## 五阶段克隆流水线\n\n    阶段 1：侦察（Reconnaissance）\n    → 扫描目标网站的 URL、字体、配色、布局结构\n    → 输出一份结构化的网站分析报告\n\n    阶段 2：组件规格（Component Specifications）\n    → 根据分析报告，拆分出独立的组件清单\n    → 每个组件定义 props、状态、交互行为\n\n    阶段 3：并行构建（Parallel Build）\n    → 多个 AI Agent 同时生成不同组件\n    → 互不依赖，速度翻倍\n\n    阶段 4：集成（Integration）\n    → 把所有组件组装到一起\n    → 处理路由、状态管理、全局样式\n\n    阶段 5：打磨（Polish）\n    → 响应式适配\n    → 动画微调\n    → 细节对齐\n\n![AI 网站克隆模板](https://goframe-blog-upyun.mircool.cn/blog/1778652837572665886.jpg)\n\n## 怎么用\n\n### 1. 准备\n\n先确保装了 Node.js 18+，然后选一个 AI Agent 工具：\n\n- **Claude Code**（推荐）：Anthropic 官方 CLI\n- **Codex CLI**：OpenAI 的命令行工具\n- **Gemini CLI**：Google 的\n- **Cursor / Windsurf**：IDE 内置 Agent 也行\n\n### 2. 一键启动\n\n    git clone https://github.com/JCodesMore/ai-website-cloner-template.git\n    cd ai-website-cloner-template\n    npm install\n\n然后打开你选的 AI Agent，把项目目录喂进去，告诉它：\n\n    我想克隆这个网站：[目标 URL]\n    请按照项目中的流水线阶段依次执行\n\nAgent 会自动读取 prompt 模板，按阶段执行。\n\n### 3. 等结果\n\n整个过程大概 5-15 分钟，取决于目标网站的复杂度。完成后你会得到一个完整的 Next.js 项目，`npm run dev` 直接跑。\n\n## 技术栈\n\n| 技术 | 用途 |\n|------|------|\n| Next.js 16 | 框架 |\n| shadcn/ui | 组件库 |\n| Tailwind CSS v4 | 样式 |\n| Lucide React | 图标 |\n\n## 适合什么场景\n\n**适合：**\n\n- 快速出原型、验证想法\n- 学习别人的前端架构和组件拆分方式\n- 把设计稿转成可运行代码\n- 接手旧项目时快速理解结构\n\n**不适合：**\n\n- 需要像素级还原的生产项目\n- 涉及后端逻辑和数据库的完整克隆\n- 需要处理用户认证、支付等敏感功能\n\n---\n\n开源地址：[github.com/JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)\n\n\u003e 本文转自 [白马号](https://www.baimahao.com/n/185.html)，有删改。\n","summary":"开源项目 ai-website-cloner-template，利用 Claude Code 或 Codex CLI 等 AI 代理，五阶段流水线自动克隆任意网站到 Next.js 16 项目。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778652837572665886.jpg","categoryId":1,"isDraft":0,"viewCount":206,"createdAt":"2026-05-13 06:14:51","updatedAt":"2026-07-26 15:05:42"},{"id":72,"title":"QFluentKit：让 Qt 桌面应用拥有 Fluent Design 风格","slug":"qfluentkit-fluent-design-qt","content":"你还在用 Qt 默认的按钮和输入框吗？Qt 的原生控件功能没问题，但样式确实让人回到 Windows 7 时代。QFluentKit 是一个开源的 Fluent Design Qt 组件库，让桌面应用 UI 现代化。\n\n## 为什么需要 QFluentKit\n\nQt 的原生控件功能上无可挑剔，但样式确实停留在上个时代。QSS 理论上能解决样式问题，但实际开发中调试成本高、跨平台表现不一致、动画支持有限。\n\nQFluentKit 提供了另一种思路：一套开箱即用的 Fluent Design 风格组件，同时保持 Qt 的跨平台能力和原生性能。\n\n![QFluentKit 效果展示](https://goframe-blog-upyun.mircool.cn/blog/1778640146626065591.jpg)\n\n![QFluentKit 组件效果](https://goframe-blog-upyun.mircool.cn/blog/1778640148432994605.jpg)\n\n## 核心亮点\n\n- **248+ 内置 SVG 图标**：覆盖 FluentIcon 全集，开箱即用\n- **亮色/暗色主题**：支持 AUTO/LIGHT/DARK 三种模式，跟随系统或手动切换\n- **动画系统**：内置动画基类，交互体验流畅\n- **路由系统**：配合 StackedWidget 实现页面切换\n- **Fluent Design 风格**：圆角、毛玻璃、亚克力材质效果\n\n![核心功能展示](https://goframe-blog-upyun.mircool.cn/blog/1778640150562538455.jpg)\n\n---\n\n## 组件一览\n\nQFluentKit 提供了完整的组件分类：\n\n| 分类 | 包含组件 |\n|------|----------|\n| BasicInput | 按钮、输入框、复选框、单选框、滑块、开关等 |\n| Display | 标签、进度条、信息条、徽章等 |\n| DateTime | 日期选择器、时间选择器 |\n| Menu | 菜单、右键菜单 |\n| Dialog | 对话框、消息框 |\n| Layout | 布局容器、流式布局 |\n| Progress | 进度条、进度环 |\n| Setting | 设置卡片、设置项 |\n| Material | 材质效果（亚克力、云母等） |\n\n---\n\n## 快速上手\n\n### 环境要求\n\n- Qt 5.12+ 或 Qt 6.x\n- C++17 标准\n- CMake 3.15+\n- 编译器：MinGW 8.0+/MSVC 2017+（Windows）、GCC 7+/Clang 5+（Linux）、Clang/Xcode 10+（macOS）\n\n### 集成方式\n\n提供了四种集成方案：\n\n1. **安装到 Qt 目录（推荐）**：安装后只需 `find_package(QFluent REQUIRED)` + `target_link_libraries`，最简洁\n2. **安装到自定义目录**：适合项目级别的依赖管理\n3. **子目录集成**：`add_subdirectory(QFluentKit)`，适合作为项目子模块\n4. **手动集成**：最灵活，但也最繁琐\n\n### 基本用法\n\n    #include \u003cQWidget\u003e\n    #include \u003cQApplication\u003e\n\n    #include \"QFluent/LineEdit.h\"\n    #include \"QFluent/PushButton.h\"\n\n    int main(int argc, char *argv[])\n    {\n        QApplication app(argc, argv);\n\n        // 创建 Fluent 窗口\n        QWidget window;\n        window.setWindowTitle(\"QFluentKit 示例\");\n        window.resize(800, 600);\n\n        // 创建按钮\n        auto *button = new PrimaryPushButton(\u0026window);\n        button-\u003esetText(\"点击我\");\n        button-\u003emove(350, 280);\n\n        // 创建输入框\n        auto *lineEdit = new LineEdit(\u0026window);\n        lineEdit-\u003esetPlaceholderText(\"请输入内容...\");\n        lineEdit-\u003emove(350, 340);\n\n        window.show();\n        return app.exec();\n    }\n\n---\n\n## 项目结构\n\n![项目结构](https://goframe-blog-upyun.mircool.cn/blog/1778640152900242517.png)\n\n---\n\n## 页面效果\n\nQFluentKit 自带 15 个演示界面，涵盖了所有组件的使用方式，包括登录窗口、导航栏窗口、分栏窗口等常见场景。\n\n---\n\n## 官方地址\n\n**GitHub**：https://github.com/toddming/QFluentKit\n\n---\n\n\u003e 本文转发自微信公众号「晓懂聊科技」，[原文链接](https://mp.weixin.qq.com/s/tKmJMpr1ktA1Y43H3MmB1A)。\n","summary":"QFluentKit 是一个开源的 Fluent Design Qt 组件库，提供 248+ SVG 图标、亮暗主题切换、动画系统、路由系统等功能，让 Qt 桌面应用 UI 焕然一新。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778640144915628461.jpg","categoryId":1,"isDraft":0,"viewCount":206,"createdAt":"2026-05-13 02:43:32","updatedAt":"2026-07-26 16:51:03"},{"id":71,"title":"蒸馏全网 Image2 Prompt：开源 yinyo-image2-prompt Skill","slug":"yinyo-image2-prompt-skill","content":"\u003e 把全网能找到的 Image2 Prompt 经验蒸馏成一个可执行的 Skill，覆盖 35 个子模板、8 大场景，经 33 组交叉盲评验证。\n\n---\n\n最近因为产品设计，总是习惯性先让 GPT-Image-2 生成效果图找找灵感。不过 Image2 生成的图片质量参差不齐，很多时候构图和光线都很普通。\n\nGPT-Image-2 本身能力很强，网上各种酷炫案例层出不穷，但同样的 API 调过去，出来的图却平平无奇。\n\n答案很直接：**Prompt 不行。**\n\n![GPT-Image-2 效果对比](https://goframe-blog-upyun.mircool.cn/blog/1778627698088278072.jpg)\n\n---\n\n## 找 Prompt 的困境\n\n满屏都在展示 GPT-Image-2 的神图，但打开一看，**只有图，没有 Prompt。**\n\nGitHub 上有大佬整理的 awesome 列表，370 多个案例，图片确实惊艳，但大部分是社区成品展示，没有结构化的 Prompt 可以复用。想学？自己逆向拆去。\n\nOpenAI 官方倒是出了个 Cookbook，讲了几条原则，但原则和「我现在马上要出一张产品图」之间，差了十万八千里。\n\n---\n\n## 自己做一个 Prompt 引擎\n\n思路很简单：把全网能找到的 Prompt 经验——OpenAI 官方 Cookbook、GitHub 社区案例、工业级模板库——全部蒸馏一遍，变成一个直接能用的东西。\n\n目标不是又一个 awesome 列表，而是一个 **AI 读了就能用的执行引擎**。识别场景、引导参数、输出 Prompt。不需要你会写 prompt，也不需要懂专业知识。生成写实人像，不需要知道 Kodak Vision3 500T 胶片质感、80mm 镜头这些概念，只需要描述基本诉求，Agent 通过交互引导，逐步挖掘你的想法和目的，生成对应质感的 Prompt。\n\n为了验证有效性，用 Codex + GA 跑了 33 组交叉盲评，共 66 张图，和 GitHub 上 500+ 案例的顶级 Prompt 库正面 PK，整体效果不错。\n\n下面直接看图，全部由 Skill 模板生成的 Prompt 调用 GPT-Image-2 产出，零后期。\n\n---\n\n## 写实摄影\n\n模板 A1，场景人像。35mm 胶片质感，50mm 镜头，窗光 4500K 色温，真实皮肤纹理。\n\n![写实摄影示例](https://goframe-blog-upyun.mircool.cn/blog/1778627699606892121.jpg)\n\n## 电影质感\n\n模板 C，Film Noir 子风格。Kodak Vision3 500T 胶片模拟，高对比黑白，百叶窗阴影，变形宽银幕。\n\n![电影质感示例](https://goframe-blog-upyun.mircool.cn/blog/1778627701300896179.jpg)\n\n## App UI\n\n模板 E，盲评中大胜网上众多 Prompt 的场景。UI 这种东西，结构化描述越精准，生成的效果越好。\n\n![App UI 示例](https://goframe-blog-upyun.mircool.cn/blog/1778627703297580210.jpg)\n\n## 交易卡\n\n模板 I1，全息凤凰。灵感来源于工业级模板的思路，做了重构。\n\n![交易卡示例](https://goframe-blog-upyun.mircool.cn/blog/1778627705575218862.jpg)\n\n---\n\n## 它不只是模板库\n\n上面几个场景，覆盖的只是 35 个子模板里的一部分。写实摄影 5 个、电影质感 6 种子风格、创意概念 10 个、编辑工作流 10 种——风格迁移、虚拟试穿、产品提取、图片翻译，都有。\n\n但最重要的不是数量，是它知道什么时候不该用模板。\n\n在回归测试中发现，有些场景你越认真写结构化 Prompt，出来的图反而越差。创意驱动的场景需要留白，不是所有地方都该填满参数。\n\n所以它有一套 5 步引导流程——先判断复杂度，再确认场景，然后按场景引导参数，输出 Prompt 让你确认，生成后还能循环反馈。\n\n![5 步引导流程](https://goframe-blog-upyun.mircool.cn/blog/1778627708416749653.jpg)\n\n---\n\n## 开源信息\n\nMIT 协议，直接扔给你的 Agent：\n\nGitHub：`xiaoshiyilangzhao1996-droid/yinyo-image2-prompt`\n\n同一个模型，同一个 API，**Prompt 不同，出来的图完全是两个世界。**\n\n---\n\n*原文：[隐曜yinyo杂货铺](https://mp.weixin.qq.com/s/gFhFSqxZdE0Mnz6C-oDuJw)*\n","summary":"把全网 Image2 Prompt 经验蒸馏成一个可执行的 Skill，覆盖 35 个子模板、8 大场景，经 33 组交叉盲评验证。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778627696484594115.jpg","categoryId":1,"isDraft":0,"viewCount":133,"createdAt":"2026-05-12 23:15:39","updatedAt":"2026-07-26 12:52:21"},{"id":70,"title":"Claude Code 自定义 Slash Commands：把工作流存成一条命令","slug":"claude-code-custom-slash-commands","content":"\u003e Claude Code 的自定义 Slash Commands 功能，能把常用的工作流 Prompt 存成文件，一个命令就能触发完整的自动化操作。\n\n---\n\n昨天下午，我盯着一个之前写的项目发呆。\n\n代码风格混乱，测试覆盖率为零，commit message 写的是「fix」「update」「111」。\n\n我需要把它接手过来，加上测试，整理依赖，对接新的 API。\n\n打开 Claude Code，输入了一行命令：\n\n    /test\n\n三十秒后，它开始自动分析项目的测试框架，找到所有未覆盖的模块，然后逐个补测试。\n\n![/test 命令执行效果](https://goframe-blog-upyun.mircool.cn/blog/1778627470962969485.png)\n\n又输入了一行：\n\n    /changelog\n\n它扫了一遍当前分支的所有 commit，按 feat、fix、refactor 分类，自动生成了格式化的更新日志。那些垃圾 commit message 被它读了上下文后重新概括成了可读的描述。\n\n![/changelog 命令执行效果](https://goframe-blog-upyun.mircool.cn/blog/1778627473159255214.png)\n\n再来一个：\n\n    /dep-cleanup\n\n它列出了 package.json 里所有没被源文件引用的依赖，找到了同一功能装了两个库的重复项，还标出了哪些库有已知安全漏洞。\n\n![/dep-cleanup 命令执行效果](https://goframe-blog-upyun.mircool.cn/blog/1778627475284859597.png)\n\n![依赖清理结果](https://goframe-blog-upyun.mircool.cn/blog/1778627477050106674.jpg)\n\n整个项目从零覆盖到 87% 的测试率，加上依赖清理和 changelog，不到半小时。\n\n---\n\n## 这不是普通的 AI 编码\n\n重点不在于 Claude Code 能不能做这些事，重点在于我只需要输入一个词，它就知道我要什么。\n\n这背后是一个被我反复调试过的 prompt 模板。\n\n![prompt 模板示例](https://goframe-blog-upyun.mircool.cn/blog/1778627479165075194.png)\n\n不需要每次都重新描述。这些内容打过一次，存下来，以后永远不用再打。\n\n这个功能叫**自定义 Slash Commands**。\n\nClaude Code 的一个隐藏功能，存在很久了，但很多人并不知道。\n\n![Claude Code 文档中关于自定义命令的说明](https://goframe-blog-upyun.mircool.cn/blog/1778627480846714317.png)\n\n---\n\n## 用法\n\n原理很简单。\n\n在项目根目录下建一个文件夹 `.claude/commands/`，在里面放 markdown 文件。文件名就是命令名，文件内容就是 prompt 模板。\n\n![.claude/commands 目录结构](https://goframe-blog-upyun.mircool.cn/blog/1778627482273505568.png)\n\n比如建了一个 `test.md`，内容大概是这样的：\n\n![test.md 文件内容示例](https://goframe-blog-upyun.mircool.cn/blog/1778627484719257252.png)\n\n以后在 Claude Code 里输入 `/test`，它会自动读取这个文件，按照模板去执行。\n\n---\n\n## 写好自定义命令的关键\n\n很多人第一次用这个功能，会犯一个错误：prompt 写得太泛。\n\n「帮我写测试」这种 prompt 存成文件没什么意义，Claude Code 本来就会这么做。\n\n你需要存的是那些**只有你知道的上下文**——比如项目用 Vitest 而不是 Jest，测试文件放在 `__tests__` 目录下，fixture 从 `./helpers` 引入，mock 的写法要用 `vi.fn()` 而不是 `jest.fn()`。\n\n这些细节，才是自定义命令真正值钱的地方。\n\n想象一下，如果把团队的代码规范、Git 工作流、部署流程全部做成自定义命令，共享到项目仓库里——新同事入职第一天，clone 代码，输入 `/onboard`，Claude Code 就自动帮他配好开发环境、跑通测试、生成项目架构说明。\n\n---\n\n## 几个常用命令示例\n\n    /test          补测试\n\n    /changelog     扫 commit 生成更新日志\n\n    /dep-cleanup   分析 package.json 清理死依赖\n\n    /perf-audit    性能审计，识别瓶颈和优化机会\n\n每一个命令背后都是踩过坑、总结过最佳实践的工作流。存成命令模板后，这些问题不会再出现，因为调教一次，后面就是稳定输出。\n\n---\n\n![vibecoding 总结](https://goframe-blog-upyun.mircool.cn/blog/1778627486487905289.jpg)\n\n自定义 Slash Commands 的门槛极低——不需要会编程，不需要懂 API，只需要会用 Claude Code、会写 Markdown。\n\n编程这件事的抽象层又往上抬了一级。以前觉得写代码是核心能力，现在代码本身正在变成最底层的东西。真正值钱的，是知道该让 AI 干什么、怎么干、按什么标准干。\n\n把经验沉淀成命令，命令变成团队资产，资产变成效率。这个链条跑通了，vibecoding 才真正从偶尔用用的新奇体验，变成日常开发的基础设施。\n\n---\n\n*原文：[快跑啊小卢](https://mp.weixin.qq.com/s/yi_CSE62oNKnMe2jVM1lSg)（若川视野 转发）*\n","summary":"Claude Code 的自定义 Slash Commands 功能，能把常用的工作流 Prompt 存成文件，一个命令就能触发完整的自动化操作。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778627468619508562.jpg","categoryId":1,"isDraft":0,"viewCount":145,"createdAt":"2026-05-12 23:12:02","updatedAt":"2026-07-26 09:31:08"}],"title":"凌风 Blog","version":"https://jsonfeed.org/version/1"}