{"author":{"name":"凌风"},"description":"A personal blog built with GoFrame","feed_url":"https://mircool.cn/feed","home_page_url":"https://mircool.cn","items":[{"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":18,"createdAt":"2026-05-22 14:53:27","updatedAt":"2026-05-27 18:04:42"},{"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":14,"createdAt":"2026-05-22 13:14:35","updatedAt":"2026-05-27 18:04:27"},{"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":17,"createdAt":"2026-05-22 04:41:43","updatedAt":"2026-05-27 18:04:43"},{"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":36,"createdAt":"2026-05-19 15:18:44","updatedAt":"2026-05-27 18:04:42"},{"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":34,"createdAt":"2026-05-14 08:40:20","updatedAt":"2026-05-27 18:04:27"},{"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":75,"createdAt":"2026-05-14 04:36:51","updatedAt":"2026-05-27 18:04:43"},{"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":38,"createdAt":"2026-05-13 06:14:51","updatedAt":"2026-05-27 18:04:29"},{"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":30,"createdAt":"2026-05-13 02:43:32","updatedAt":"2026-05-27 18:04:28"},{"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":30,"createdAt":"2026-05-12 23:15:39","updatedAt":"2026-05-27 18:04:29"},{"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":30,"createdAt":"2026-05-12 23:12:02","updatedAt":"2026-05-27 18:04:05"},{"id":69,"title":"10 个 AI PPT Skill：从排版到动效一站式搞定","slug":"10-ai-ppt-skills","content":"\u003e AI 做 PPT 已经不是简单套模板了。10 个开源 Skill，覆盖网页演示稿、可编辑 PPTX、PDF 报告、手绘解释图，从排版到动效一站式搞定。\n\n做 PPT 最耗时间的是排版、配色、找图、统一风格、调动画。尤其是临时要做工作汇报、课程分享、项目路演，半天都耗在对齐文本框和改版式上。\n\n现在有很多设计师和开发者把 PPT 这件事做成了可复用的 AI Skill——给它一段主题、一个文档，甚至一个现成模板，就能生成网页演示稿、可编辑 PPTX、PDF 报告、手绘解释图，甚至自动加动效。\n\n以下是最近收集的 10 个 AI PPT / 设计排版相关 Skill。\n\n---\n\n## 一、guizang-ppt-skill\n\n链接：https://github.com/op7418/guizang-ppt-skill\n\n藏师傅的 PPT Skill，每个版式都搭配了对应的动效，不只是视觉炫酷，而是为了配合展示。本地动效文件让你断网也能正常演示。\n\n![guizang-ppt-skill 示例1](https://goframe-blog-upyun.mircool.cn/blog/1778510431030006472.png)\n\n![guizang-ppt-skill 动效演示](https://goframe-blog-upyun.mircool.cn/blog/1778510794286483330.gif)\n\n![guizang-ppt-skill 示例2](https://goframe-blog-upyun.mircool.cn/blog/1778510438149477828.png)\n\n---\n\n## 二、frontend-slides\n\n链接：https://github.com/zarazhangrui/frontend-slides\n\n把 PPT 变成网页。动画效果比 PowerPoint 好，生成的是单个 HTML 文件，浏览器直接打开。AI 会生成多个不同风格的预览，字体、配色、动画都不一样。支持浏览器内编辑文字，改完自动保存。如果有现成的 .pptx 文件，也能直接转成网页版。\n\n![frontend-slides 演示](https://goframe-blog-upyun.mircool.cn/blog/1778510441342589567.gif)\n\n---\n\n## 三、huashu-design\n\n链接：https://github.com/op7418/guizang-ppt-skill\n\n花叔的设计 Skill，用一句话生成高质量 HTML 幻灯片，并进一步导出为可编辑 PPTX，而不是只生成截图式幻灯片。\n\n![huashu-design 示例1](https://goframe-blog-upyun.mircool.cn/blog/1778510442767021750.png)\n\n![huashu-design 示例2](https://goframe-blog-upyun.mircool.cn/blog/1778510446351062003.png)\n\n---\n\n## 四、html-ppt-skill\n\n链接：https://github.com/lewislulu/html-ppt-skill\n\n不需要开会员，也不用折腾复杂流程，输入一句需求就能生成一份颜值在线的 PPT。效果偏简洁、高级的 HTML 网页演示稿，内置了科技风、极简风、职场风等多种样式。开源免费、支持商用。\n\n![html-ppt-skill 示例1](https://goframe-blog-upyun.mircool.cn/blog/1778510449046438843.png)\n\n![html-ppt-skill 示例2](https://goframe-blog-upyun.mircool.cn/blog/1778510450612548176.png)\n\n---\n\n## 五、PPT-Design-Prompt\n\n链接：https://github.com/Russell-cell/PPT-Design-Prompt\n\n适合参加比赛、做研究、做演讲。有人已经拿这个 Skill 开始接单 PPT 设计了。\n\n![PPT-Design-Prompt 示例](https://goframe-blog-upyun.mircool.cn/blog/1778510453129072512.png)\n\n---\n\n## 六、Kami\n\n链接：https://github.com/tw93/kami\n\n用于精美排版输出的 Skill，尤其适合生成 PDF、报告、白皮书、PPT、作品集这类需要好看版式的内容。目标是把内容自动做成好看的 PDF、PPT 或报告。\n\n![Kami 示例](https://goframe-blog-upyun.mircool.cn/blog/1778510457972942533.png)\n\n---\n\n## 七、ppt-master\n\n链接：https://github.com/hugohe3/ppt-master\n\n丢进去 PDF、Word 或网页链接，直接生成真正可编辑的 PPT 文件。每个元素都是原生的形状、文本框和图表，点哪改哪。整个过程在本地运行，文件不用上传到别人的服务器。\n\n![ppt-master 演示](https://goframe-blog-upyun.mircool.cn/blog/1778510796119644806.gif)\n\n---\n\n## 八、baoyu-skills\n\n链接：https://github.com/JimLiu/baoyu-skills\n\n给 Claude Code 等用的效率工具集合。把文章、想法、素材快速变成各种可发布内容——PPT、配图、信息图、小红书图片卡片、漫画、封面图，还能发布到 X、微信公众号、微博等平台。\n\n![baoyu-skills 示例](https://goframe-blog-upyun.mircool.cn/blog/1778510465719306727.png)\n\n---\n\n## 九、ian-handdrawn-ppt\n\n链接：https://github.com/helloianneo/ian-handdrawn-ppt\n\n把文章、笔记、提纲变成中文手绘技术解释图。流程：读材料 → 判断主题和受众 → 规划页面叙事和版式 → 锁定手绘视觉 DNA → 每页生成 PNG → 检查文字和风格。适合文章配图、课件、知识卡片。重点不是套模板，是先想清楚再画出来。\n\n![ian-handdrawn-ppt 示例](https://goframe-blog-upyun.mircool.cn/blog/1778510471793533350.png)\n\n---\n\n## 十、gpt-image2-ppt-skills\n\n链接：https://github.com/JuneYaooo/gpt-image2-ppt-skills\n\nAI PPT 设计生成器。可以给它一个现成 PPT 模板让它照着风格生成新 PPT，也可以不传模板直接选一种内置视觉风格快速做出一套可编辑的 PPT。\n\n![gpt-image2-ppt-skills 示例](https://goframe-blog-upyun.mircool.cn/blog/1778510480680779664.png)\n\n---\n\n下次遇到\"明天早上要一份 PPT\"的时候，对着这篇文章拿来即用。\n\n\u003e 本文整理自微信公众号「萤柳设计」文章，[查看原文](https://mp.weixin.qq.com/s/s0t05TsoppQNJbtMpxfHiQ)。\n","summary":"10 个开源 AI PPT Skill，覆盖网页演示稿、可编辑 PPTX、PDF 报告、手绘解释图，从排版到动效一站式搞定。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778510484781378071.jpg","categoryId":1,"isDraft":0,"viewCount":35,"createdAt":"2026-05-11 14:47:23","updatedAt":"2026-05-27 16:32:33"},{"id":68,"title":"gpt-image-2 的 60 个生图案例整理：九大分类附中文提示词","slug":"gpt-image2-60-cases-chinese-prompts","content":"\u003e OpenAI 官方文档里的 60 个 gpt-image-2 生图/改图案例，按九大分类整理到飞书多维表格，每个案例都附带中文提示词，复制即可使用。\n\n学会 gpt-image-2 的基本用法后，如果想对生成结果有更多控制，可以参考 OpenAI 官方提供的 60 个案例。这些案例覆盖了日常生图的绝大多数场景，提示词结构也很有参考价值。\n\n![封面](https://goframe-blog-upyun.mircool.cn/blog/1778503145410941124.jpg)\n\n这 60 个案例来自 OpenAI 的 Image Generation 文档，一共九大分类：UI界面、产品设计、信息图与地图、场景环境、摄影写实、插画与风格化、海报与版式、游戏资产、编辑改图。\n\n![分类总览](https://goframe-blog-upyun.mircool.cn/blog/1778503149004526598.jpg)\n\n原文以瀑布流形式展示图片，用于学习不太方便。作者通过 Codex App 的 Browser Use 功能，将图片、英文提示词、分辨率等信息保存到飞书多维表格，并补充了中文标题和中文提示词，支持筛选和排序。\n\n![飞书表格翻译](https://goframe-blog-upyun.mircool.cn/blog/1778503150253394274.jpg)\n\n中文提示词可以直接使用，gpt-image-2 对中文支持良好。也可以对照中文提示词来学习英文提示词的写法。\n\n多维表格的列表视图：\n\n![列表视图](https://goframe-blog-upyun.mircool.cn/blog/1778503151634373507.jpg)\n\n画册视图：\n\n![画册视图](https://goframe-blog-upyun.mircool.cn/blog/1778503152834191247.jpg)\n\n---\n\n## 一、UI界面\n\n提示词：\n\n    用例：ui 模型。渲染一个合理的笔记本电脑屏幕，显示模块化台灯的密集电子商务产品页面。包括产品照片、色样、评论摘要、运费估算、比较表、配件包和粘性添加到购物车面板。确切的 UI 文本：\"Luma Desk System\"\"暖橡木/哑光黑\"\"添加到购物车\"\"周五发货\"\"4.8 来自 2,341 条评论\"风格：优质商务 UI、高度逼真的浏览器渲染、清晰的版式、可信的产品图像。没有真正的品牌标志，没有水印。\n\n![UI界面示例](https://goframe-blog-upyun.mircool.cn/blog/1778503154371838083.jpg)\n\n---\n\n## 二、产品设计\n\n提示词：\n\n    意图：产品概念艺术。背景：温暖的中性工作室渐变。前景：哑光表面上的柔和阴影。画面主体：由黄铜齿轮和珐琅花瓣制成的机械花束。画面细节：高细节 3D 渲染、清晰的金属反射、无文字、无徽标、无水印。相机：70mm，视线高度，居中取景。\n\n![产品设计示例](https://goframe-blog-upyun.mircool.cn/blog/1778503156069462528.jpg)\n\n还有一类\"模板\"提示词，可以替换其中的变量来生成不同产品：\n\n    根据提示生成图片：白色背景上的{item}照片，受日本简约设计原则的影响。{item}展示了一种极简主义方法，强调简单性和功能性。天然木质饰面凸显纹理，彰显原材料之美。其设计虽然简单，但与座椅舒适的本质产生共鸣。\n\n比如将 `{{item}}` 替换为\"餐桌\"：\n\n![产品设计模板示例](https://goframe-blog-upyun.mircool.cn/blog/1778503157144891920.jpg)\n\n---\n\n## 三、信息图与地图\n\n提示词：\n\n    用例：信息图表。创建精美的社论信息图，解释夏季城市街区的城市热岛。将半真实的等距街道剖面图与标记的叠加层、箭头、温度标注以及树冠前后的小型比较相结合。确切的标题文本：\"为什么城市街区变得更热\"包括可读标签：\"深色沥青\"、\"玻璃反射\"、\"树荫\"、\"凉爽屋顶\"、\"空气流动\"。调色板：温暖的沥青红色和橙色与凉爽的绿色和蓝色相平衡。风格：杂志科学图文，组织严密，空间关系准确，无徽标，无水印。\n\n![信息图示例](https://goframe-blog-upyun.mircool.cn/blog/1778503159090495405.jpg)\n\n---\n\n## 四、场景环境\n\n提示词：\n\n    意图：建筑可视化。背景：黄昏时的城市天际线，有柔和的阴霾。前景：花盆、座椅和灯串。画面主体：带木地板的屋顶花园露台。画面细节：逼真的材质、温暖的环境光、无徽标或商标、无水印。相机：35 毫米，四分之三视角，视线水平。\n\n![场景环境示例](https://goframe-blog-upyun.mircool.cn/blog/1778503161611273494.jpg)\n\n---\n\n## 五、摄影写实\n\n提示词：\n\n    用例：真实感-自然。创建一张在体育馆举行的拥挤的学校科学博览会的 iPhone 照片。两名学生演示桌面风洞，家长俯身在显示屏上，老师检查剪贴板，其他展位则退到背景中。包括可读的手工海报文字：\"风测试\"\"尝试 1\"\"尝试 2\"\"结果\"风格：随意的手机摄影、不均匀的健身房照明、真实的混乱、自然的手势、高空间意识。没有真正的学校名称，没有徽标，没有水印。\n\n![摄影写实示例](https://goframe-blog-upyun.mircool.cn/blog/1778503164118800031.jpg)\n\n---\n\n## 六、插画与风格化\n\n提示词：\n\n    意图：极简主义艺术印刷品。背景：浅米纸纹理。前景：柔和的水墨渐变形成雾气。画面主体：单色画笔风格的遥远寺庙和松树。画面细节：传统水墨外观，无文字、无徽标、无水印。相机：直视、平面构图。\n\n---\n\n## 七、海报与版式\n\n提示词：\n\n    意图：国家公园的旅行海报。背景：日出渐变天空与远处的山剪影。前景：深色松树线构成底部边缘。画面主体：山脊上的孤独徒步旅行者，在风景中显得渺小。画面细节：丝网印刷纹理、柔和的调色板、无徽标或商标、无水印。相机：广角、低视角、三分法构图。\n\n---\n\n## 八、游戏资产\n\n提示词：\n\n    为我的城市模拟游戏生成岛上城市的超逼真 3D 视图。它应该展示一个城市的市中心景观，街道网格纵横交错，汽车和人们忙碌着一天的生活。创建现实的办公楼、警察局、消防局、港口。让它看起来像阳光明媚的中午。确保街道和建筑物的几何形状正确并以等角投影渲染。确保建筑物的纹理和照明真实。添加棕榈树和一些公园。\n\n---\n\n## 九、编辑改图\n\n提示词：\n\n    编辑粘土花园场景，添加两个友好的新粘土角色：一只可爱的刺猬和一只眼睛明亮的松鼠。将它们放在现有兔子附近，就像三只小动物正在共享花园时光的朋友一样。这只刺猬应有柔软的粉红色粘土身体、小小的爪子和温柔的微笑。松鼠应有温暖的棕色粘土身体、卷曲的尾巴，并抱着一颗小小的粘土橡子。匹配定格动画粘土质感、指纹、比例、光照、阴影和柔和的纸张背景。保留原有的兔子、独轮车、鲜花和整体构图；无文字、无徽标或水印。\n\n![编辑改图示例](https://goframe-blog-upyun.mircool.cn/blog/1778503166329614865.jpg)\n\n---\n\n这 60 个案例覆盖了绝大多数日常生图场景，提示词结构也很有参考价值。飞书表格里已经整理好了中文提示词，直接复制就能用。\n\n**飞书多维表格**：https://yueyingspace.feishu.cn/base/DieRb8934aNzmasyyfIcNUFwnto\n\n**参考文档**：https://developers.openai.com/api/docs/guides/image-generation\n\n---\n\n\u003e 本文整理自「西滨AI随想」公众号文章 [我把OpenAI的60个 gpt-image-2 生图案例整理成了一张表，附中文提示词](https://mp.weixin.qq.com/s/kCDYLlOpUMczFWhBCSqOHg)\n","summary":"OpenAI 官方 60 个 gpt-image-2 生图/改图案例，按九大分类整理，每个案例附带中文提示词，可直接复制使用。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1778503145410941124.jpg","categoryId":1,"isDraft":0,"viewCount":31,"createdAt":"2026-05-11 12:40:36","updatedAt":"2026-05-27 16:32:33"},{"id":67,"title":"用Image2复刻任意画面：RTF反编译提示词方法","slug":"image2-rtf-reverse-engineer-prompt","content":"## 引言\n\n\u003e 一套用 RTF 框架复刻任意画面的实用方法论——从参考图到提示词模板，再到高还原度输出。\n\n## 起点：一张干净醒目的封面\n\n看见一个还不错的封面，简单、干净、醒目，准备用 Image2 来套用它。\n\n![封面参考图](https://goframe-blog-upyun.mircool.cn/blog/1777700192600913480.jpg)\n\n## 第一轮：直接让模型反推提示词\n\n最开始我是直接把图片扔进大模型，让它给我反推提示词。没有意外的是它给了我一个版本的提示词，并告诉我怎么做效果更好。\n\n![对话截图](https://goframe-blog-upyun.mircool.cn/blog/1777700194514888209.png)\n\n没出意外的是，出来的图效果很差（就不展示了），连着测试了好几次，最终得到结论：这种大众化的做法没法很好地完成复刻。\n\n## 转折：RTF 反编译框架\n\n于是想到了姚金刚老师之前分享的\"图片反编译\"提示词模板。它的核心是 RTF 框架——通过给定图片，重新定义 Role（角色）、Task（任务）和 Format（格式），然后输出一版提示词。\n\n通过这个模板，我得到了如下版本的提示词（以公众号封面设计为例）：\n\n---\n\n    根据参考图和下列提示词，对用户内容文字进行公众号封面设计\n\n    ## Role\n    你是专业的微信公众号封面设计师，根据用户内容生成完全符合\"中文爆款文章封面\"风格的横版海报。\n\n    ## Task\n    用户内容：{}\n    严格按照以下原图规范执行：\n\n    ### 宽高比约束（不可更改）\n    - 精确比例：2.4221（约 2.42:1）\n    - CSS实现：aspect-ratio: 482 / 199\n    - 兼容方案：padding-top: 41.29%\n\n    ### 字体系统（精确规格）\n    - 主数字标题：font-size: 165px; font-weight: 900; line-height: 0.9; letter-spacing: -0.06em\n    - 次级超大标题：font-size: 160px; font-weight: 900; line-height: 0.9; letter-spacing: -0.05em\n    - 小辅助字：font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -0.02em\n    - 底部结论文案：font-size: 46px; font-weight: 900; line-height: 1; letter-spacing: -0.03em\n    - 角标文字：font-size: 13px; font-weight: 700; line-height: 1\n    - 字体族：font-family: \"Source Han Sans SC\", \"Noto Sans SC\", \"Microsoft YaHei\", sans-serif\n    - 字形要求：极粗、紧凑、块面感强，接近报纸头版标题或压缩黑体\n\n    ### 色彩系统（精确色值）\n    - 主色：#BF1F24，用于大号数字和重点字\n    - 背景：#EBDCC8，带轻微纸张颗粒感\n    - 文字色：#131211，用于大标题黑字与主要结构\n    - 底部黑条：#090908\n    - 标签文字：#FFFFFF\n    - 装饰色：#BD211D，用于底部重点字或小面积强调\n\n    ### 布局系统（精确定位）\n    - 整体为固定定位横版封面，留白极少，冲击力优先\n    - 左侧放一个超大红色数字组，占画面高度约 70%\n    - 中部偏左插入一个黑白老人半身像，头部与手臂压在大字前方\n    - 中部偏右放一个超大红字，右侧放一个超大黑字，组成标题主骨架\n    - 底部设置通栏黑色横条，高度约画面 39%\n    - 左下角放一个小型黑色胶囊标签\n    - 右下角在黑条上放一句强结论型白字标题，最后一个字可用红色强调\n\n    ### 视觉元素系统（完整规格）\n    - 人物元素：中国老人，黑白纪实肖像，开怀大笑，表情夸张但真实，半身出镜\n    - 动作设计：一只手扶着底部黑条边缘，另一只手向镜头举起黑色卡片或手机\n    - 道具设计：黑色卡片/手机，顶部有一个白色符号，局部有少量红字，像\"成果展示\"\n    - 背景系统：纯米白底，轻微印刷颗粒和复古纸张质感\n    - 标签元素：左下角黑色圆角胶囊，白字，像\"文章角标\"\n    - 风格限制：不要科技蓝，不要电商渐变，不要复杂光效，不要真实杂乱环境\n\n    ### 内容模块架构\n    - 模块1：左侧超大数字，负责第一眼抓人\n    - 模块2：中央人物，负责情绪和传播感\n    - 模块3：中右侧超大标题字，负责主题补全\n    - 模块4：底部黑条文案，负责结论输出\n    - 模块5：左下角小标签，负责平台感和封面完成度\n\n    ### 排版系统深度约束\n    - 所有超大标题必须互相贴近，形成高密度标题墙\n    - 人物必须压在大字前面，形成明确前后层次\n    - 底部黑条必须贯穿全宽，成为承载文案和托住人物的结构面\n    - 视觉重心位于画面中部偏左，依靠人物脸部和手中卡片建立焦点\n    - 整体追求\"微信爆文封面\"的直接、粗暴、好传播，不追求精致优雅\n\n    ### 内容处理规则\n    - 主标题：优先拆成\"数字/关键词/结果\"三段式结构\n    - 小辅助字：用来补足时间、单位、语气词\n    - 结论文案：必须像一句口语化判断，如\"你也能行\"\n    - 角标：可固定为同类平台感小标签\n    - 内容适配：字数过多时优先保留数字、结果词、结论句，删掉解释性废话\n\n    ### 输出风格关键词\n    微信公众号封面、中文爆款标题、黑红米白、报纸头版感、复古宣传海报感、纪实老人肖像、夸张情绪、超大黑体字、底部黑条、强传播性、高对比、极简粗暴、社交媒体点击感\n\n    ## 输出格式\n    生成一张横版公众号封面图，要求中文可读、标题巨大、人物表情抓人、底部结论醒目。\n\n---\n\n## 输出效果\n\n输出的图片是这样的：\n\n![输出效果](https://goframe-blog-upyun.mircool.cn/blog/1777700196732166267.png)\n\n对比参考图和输出结果，效果还是令人满意的。\n\n## 关键步骤总结\n\n1. 放入提示词时，自定义用户内容要考虑字数、版面位置等维度。\n2. 不需要的内容可以在提示词中删除，比如左下角的小文字/角标。\n3. 原图最好能和提示词一起用作参考。\n\n---\n\n## 图片反编译 RTF 通用提示词\n\n以下是姚金刚老师的图片反编译 RTF 通用提示词（版本 V0.8），支持海报、卡片、banner 等多种设计类型：\n\n    \u003c!--\n      作者：姚金刚\n      版本：V0.8\n      描述：上传参考图片，精确分析设计参数（宽高比、字体、色彩、布局、视觉元素），自动生成个性化RTF提示词，实现90%+还原度的图片反编译。\n      框架：RTF结构化提示词框架，支持海报、卡片、banner等多种设计类型的像素级精确还原。\n      创建日期：2025-06-23\n    --\u003e\n\n    # 图片反编译 - RTF通用提示词\n\n    ## Role（角色）\n    你是图片反编译专家，能够精确分析图片的设计参数并生成可复用的RTF提示词模板。\n\n    ## Task（任务）\n    当用户上传图片时，你需要：\n\n    ### 第一步：像素级精确分析\n    1. 宽高比测量：识别有效内容边界，计算宽度÷高度，精确到小数点后4位\n    2. 字号测量：测量字符实际高度，然后根据字体类型推算font-size（实际高度通常是font-size的80-90%）\n    3. 色彩提取：使用取色工具精确获取RGB值，转换为16进制色值\n    4. 布局识别：测量元素间距、对齐基准线、网格尺寸的像素值\n    5. 装饰分析：测量边框宽度、阴影偏移、圆角半径的精确数值\n\n    ### 第二步：生成可执行RTF提示词\n    将所有测量数值填入模板，生成可直接复制使用的完整提示词\n\n    ## 分析输出格式\n    ### 分析报告格式（基于实际上传图片）\n\n    **第一步：基础测量**\n    1. 识别图片有效内容区域，测量实际宽度和高度\n    2. 计算精确宽高比：宽度÷高度，保留4位小数\n    3. 判断设计类型：海报/卡片/banner/信息图/其他\n    4. 识别设计风格：现代简约/商务专业/科技未来/复古经典/其他\n\n    **第二步：字体系统分析**\n    1. 识别所有文字层级（主标题/副标题/正文/辅助文字）\n    2. 测量每个层级的字符实际高度（像素值）\n    3. 根据字体类型推算font-size（实际高度通常是font-size的80-90%）\n    4. 测量字重（笔画粗细）、行高、字间距\n    5. 识别字体族（中文/英文字体名称）\n\n    **第三步：色彩系统提取**\n    1. 提取主色：最突出/最重要的颜色，记录RGB和16进制值\n    2. 提取背景色：纯色/渐变，记录完整参数\n    3. 提取文字色：各层级文字的具体颜色\n    4. 提取装饰色：边框/图标/分割线等元素颜色\n    5. 分析色彩层次关系和应用规律\n\n    **第四步：布局结构解析**\n    1. 识别布局类型：网格/流式/固定定位\n    2. 测量网格参数：行数、列数、间距\n    3. 测量对齐基准线位置\n    4. 建立间距体系：找出基础间距单位和倍数关系\n\n    **第五步：视觉元素完整分析**\n    1. 图片/图标识别：位置、尺寸、样式、与文字的关系\n    2. 边框装饰：宽度、样式、颜色、圆角、位置\n    3. 阴影效果：偏移、模糊、扩散、颜色、透明度、层次\n    4. 背景系统：渐变角度、颜色节点、图片、纹理、透明度\n    5. 形状元素：几何图形、分割线、装饰框、标签等\n    6. 特殊符号：图标、bullet点、箭头、星号等的具体参数\n\n    **第六步：内容模块结构分析**\n    1. 模块识别：标题区、内容区、图片区、CTA区、装饰区等\n    2. 模块关系：层次关系、空间关系、视觉权重分配\n    3. 信息架构：主要信息→次要信息→辅助信息的层级\n    4. 视觉流程：用户视线的引导路径和阅读顺序\n    5. 功能区域：logo位置、联系方式、二维码、按钮等\n\n    **第七步：排版系统深度解析**\n    1. 网格系统：主网格、子网格、网格嵌套关系\n    2. 对齐规律：多重对齐基准线、对齐的一致性规则\n    3. 留白策略：内边距、外边距、模块间距的规律\n    4. 比例关系：黄金比例、模块尺寸比例、字号比例关系\n    5. 视觉平衡：重量分布、对称性、视觉重心位置\n\n    **完整分析输出示例**\n\n    基础信息：宽高比[实测值] ([比例])，内容区域[宽]×[高]px，类型[实际类型]，风格[实际风格]\n    字体系统：主标题[实测值]px/字重[实测值]/行高[实测值]，副标题[参数]，正文[参数]，字体族[实际字体]\n    色彩系统：主色#[实测色值]/背景[实际参数]/文字色[实测值]/装饰色[实测值]\n    布局结构：[实际布局类型]，[实测网格参数]，对齐[实测基准线]，间距[实测体系]\n    视觉元素：图片[位置尺寸]/边框[参数]/阴影[参数]/背景[参数]/形状[参数]/符号[参数]\n    内容模块：[模块类型和数量]/[模块关系]/[信息架构]/[视觉流程]/[功能区域分布]\n    排版系统：网格[嵌套关系]/对齐[多重基准]/留白[策略]/比例[关系]/平衡[重心位置]\n\n    ---\n\n    ## RTF提示词生成器（动态模板）\n\n    基于上述分析结果，自动生成个性化RTF提示词：\n\n    ## Role\n    你是专业的[根据分析结果填入：设计类型]设计师，根据用户内容生成完全符合指定风格的设计。\n\n    ## Task\n    用户内容：{}\n    严格按照以下原图规范执行：\n\n    ### 宽高比约束（不可更改）\n    - 精确比例：[填入实测宽高比] ([填入简化比例])\n    - CSS实现：aspect-ratio: [宽] / [高]\n    - 兼容方案：padding-top: [高/宽×100]%\n\n    ### 字体系统（精确规格）\n    - 主标题：font-size: [实测值]px; font-weight: [实测值]; line-height: [实测值]; letter-spacing: [实测值]em\n    - 副标题：font-size: [实测值]px; font-weight: [实测值]; line-height: [实测值]; letter-spacing: [实测值]em\n    - 正文：font-size: [实测值]px; font-weight: [实测值]; line-height: [实测值]; letter-spacing: [实测值]em\n    - 字体族：font-family: [实际识别的字体栈]\n\n    ### 色彩系统（精确色值）\n    - 主色：[实测色值] - 应用于[实际应用场景]\n    - 背景：[实测背景参数：纯色或渐变]\n    - 文字色：[各层级实测色值和说明]\n    - 装饰色：[实测色值] - [实际应用场景]\n\n    ### 布局系统（精确定位）\n    - 网格：display: [实际布局类型]; [实测网格参数]\n    - 容器：max-width: [实测值]px; padding: [实测的上下左右数值]\n    - 间距：[各种间距的实测值和应用场景]\n    - 对齐：[实际的对齐方式和基准线]\n\n    ### 视觉元素系统（完整规格）\n    - 图片元素：[实测位置、尺寸、样式参数及CSS实现]\n    - 边框装饰：border: [实测完整边框参数]; border-radius: [实测值]px\n    - 阴影效果：box-shadow: [实测完整阴影参数]\n    - 背景系统：background: [实测完整背景参数]\n    - 形状元素：[几何图形、分割线的完整CSS实现]\n    - 特殊符号：[图标、符号的完整实现代码]\n\n    ### 内容模块架构（精确还原）\n    - 模块布局：[各模块的位置、尺寸、层级关系]\n    - 信息层级：[主要→次要→辅助信息的视觉权重分配]\n    - 视觉流程：[用户视线引导的具体实现方式]\n    - 功能区域：[logo、CTA、联系方式等的精确定位]\n\n    ### 排版系统深度约束\n    - 网格嵌套：[主网格和子网格的完整定义]\n    - 多重对齐：[所有对齐基准线的精确位置]\n    - 留白策略：[内外边距的完整规律和数值]\n    - 比例系统：[所有尺寸比例关系的数学定义]\n    - 视觉平衡：[重心位置和平衡点的精确控制]\n\n    ### 内容处理规则\n    - 主标题：[根据原图分析的字数范围]，提取核心主题\n    - 副标题：[根据原图分析的字数范围]，补充说明\n    - 正文：按\"[根据原图实际结构分析得出的顺序]\"重组内容\n    - 内容适配：过多时智能截取，过少时保持结构填充装饰\n\n    ### 响应式适配（保持宽高比）\n    - 移动端（小于768px）：字号×0.85，间距×0.8，容器 max-width: [根据原图计算的移动端宽度]px\n    - 桌面端（大于等于768px）：原始尺寸，容器 max-width: [实测容器宽度]px\n\n    ## 输出格式\n    生成包含所有实测参数的完整可运行HTML代码\n\n    ## 质量标准\n    - 宽高比精度：误差\u003c0.01\n    - 字号精度：误差\u003c1px\n    - 色彩精度：色差\u003c3%\n    - 整体还原度：\u003e95%\n\n---\n\n**使用方法**：\n\n1. 上传参考图片，AI 分析核心参数\n2. 获取 RTF 提示词，复制模板使用\n3. 输入内容，生成高还原度设计\n\n如果画面不满意，是可以微调的。\n\n---\n\n*来源：[阳阳ai分享](https://mp.weixin.qq.com/s/NnPONb0j-H5CQyuiP8VPLw)*\n","summary":"一套用 RTF 框架复刻任意画面的实用方法论——从参考图到提示词模板，再到高还原度输出。附姚金刚老师的图片反编译 RTF 通用提示词模板。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777700192600913480.jpg","categoryId":3,"isDraft":0,"viewCount":85,"createdAt":"2026-05-02 05:37:37","updatedAt":"2026-05-27 16:32:33"},{"id":66,"title":"GPT Image-2 提示词实战手册：7 类场景 15 条模板","slug":"gpt-image2-prompt-guide","content":"\u003e GPT Image-2 上线后，大量案例表明：出图质量的差距不在模型，在提示词。本文整理了 7 类共 15 条实测有效的提示词模板，以及写好提示词的 7 条核心规则。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686253780226952.jpg)\n\n## 为什么你生成的图总是差一点\n\n很多人的提示词是这样的：\n\n- 做一张高级海报\n- 生成一个好看的 UI\n- 做一张电影感照片\n\n出来的结果不难看，但也不惊艳。\n\n问题在于：你在描述结果，而不是描述设计。\n\nGPT Image-2 已经不是抽卡模型了，它更像一个能理解结构的设计师。甚至在复杂信息图、排版等场景中，它已经能自己规划视觉结构。\n\n下面按类别整理了实测稳定的提示词模板。\n\n---\n\n## 社交截图类\n\n这一类是目前最容易出效果的，因为它不需要审美判断，直接模拟现实。\n\n### 宋朝朋友圈\n\n适合历史人物与社交媒体混搭，做趣味内容或文化科普。\n\n提示词：\n\n    画一张手机朋友圈截图，但背景是宋朝。头像用宋代文人的画，用户名叫\"苏东坡SuShi_Official\"。发的内容是：\"刚到黄州，被贬了但心情还行。今天自己做了东坡肉，味道绝了，附菜谱：\"配图是工笔画风格的东坡肉。点赞显示：黄庭坚、秦观、佛印等 126 人。评论区有两条：王安石说\"呵呵\"，司马光说\"还是那个味道\"。点赞图标换成宋代花纹。手机状态栏写\"大宋移动 5G\"和\"元丰三年\"。整体深色模式，配上宋朝那种淡雅的颜色。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686255712680890.jpg)\n\n### 抖音直播截图\n\n适合模拟直播界面，做产品演示或虚拟直播效果图。\n\n提示词：\n\n    一张抖音直播截图。一个短发美女在直播，戴青色鸭舌帽，帽子上写着\"TECHCAFE\"，头发右边有一撮粉色头发。她手里举着牌子，上面写着：\"谢谢捌捌的大火箭！\"\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686257323419528.jpg)\n\n这类提示词几乎可以骗过不仔细看的人。\n\n---\n\n## UI 设计类\n\n### AI 音乐 App 界面\n\n适合快速生成 App 概念截图，做产品演示或 PPT 配图。\n\n提示词：\n\n    设计一套完整 AI 音乐创作 App UI 图\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686258748315874.jpg)\n\n### 梦幻电商网站\n\n适合生成高颜值网站概念图，做设计提案或灵感参考。\n\n提示词：\n\n    fairy milk + cosmic milk，dark mode，glassmorphism，极简风\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686260177040277.jpg)\n\n关键点不是内容本身，而是 dark mode、glassmorphism 这些控制画面的核心词。\n\n---\n\n## 海报类\n\n### 新中式海报\n\n适合文化或艺术类海报，S 型构图加撕纸效果，极简留白。\n\n提示词：\n\n    一张极简新中式风格的画。浅灰白色底，像纸做的立体剪影。画面中间有一条 S 形的撕裂口，像把纸撕开了，露出里面彩色的东方山水。裂口里，一条弯弯曲曲的河流从上流下来，蓝色深浅不一，像丝带一样。河两边有青色的山丘和梯田，绿色和红色交错。沿河有古风建筑，飞檐翘角，白墙黑瓦。岸边有树，河中间停着一艘小船。整个画面是 S 形构图。画的边缘像撕开的纸，有浮雕感。下面写着黑色楷体\"东方美学\"，底下还有醒目的\"CHINA\"。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686261600144741.jpg)\n\n### 叙事海报（万能模板）\n\n将【主题：xxx】替换成任意概念即可生成收藏级海报。\n\n提示词：\n\n    【主题：咖啡】，收藏级海报，唯美简约，大面积留白\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686263743514448.png)\n\n这条建议收藏，可以无限复用。\n\n---\n\n## 插画类\n\n### 成都美食地图\n\n适合复杂构图的信息类插画，城市旅游或美食类内容。\n\n提示词：\n\n    手绘成都地图，鸟瞰视角，12 个美食点，手写标注，水彩加彩铅\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686266288098503.jpg)\n\n### 涂鸦人物\n\n将描述替换为任意角色，可生成涂鸦风人物画。\n\n提示词：\n\n    用涂鸦速写风格画一个 AI builder。线条要随手画的感觉，夸张、粗细不匀、有点乱但有节奏感。颜色用粗糙、干刷的效果，能看出涂抹痕迹和刷子留下的纹理。背景留白，整体看起来像没画完的草稿，轻松随性又有设计感。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686268245582757.jpg)\n\n这类适合做小红书封面或内容配图。\n\n---\n\n## 电商类\n\n### 淘宝详情页\n\n电商运营直接出商品详情页，把商品名替换成你自己的就行。\n\n提示词：\n\n    商品华为 Mate X7，生成详情页长图，包含卖点、参数\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686269791702937.jpg)\n\n### 博物馆信息图\n\n将主题替换为任意主题，生成博物馆展板级别信息图。\n\n提示词：\n\n    做一张关于\"瓷器\"的中文信息图，风格像博物馆里的展板或图鉴。画面要有写实的瓷器主体，旁边拆解它的结构，并用中文标出各个部分。还要说明材质、纹样有什么寓意、颜色代表什么，最后总结它的特点。整体背景用米白、浅茶色这类像旧纸张的颜色，看起来高级、专业，像收藏级资料。版式固定：顶部写主标题、副标题和一段导语；左边是结构拆解；右上方讲材质和工艺；右中间讲纹样和色彩寓意；底部画一个流程图说明制作或构成顺序，外加核心特征总结。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686271489618366.jpg)\n\n这类能力是 GPT Image-2 最大突破之一，因为它能处理复杂结构。\n\n---\n\n## 人像类\n\n### 电影剪影\n\n适合氛围感人像，做头像、封面或情绪类配图。\n\n提示词：\n\n    Generate a cinematic minimal portrait of a solitary man standing in an intense orange to red gradient environment, strong silhouette lighting, deep shadow contrast, reflective glossy floor, symmetrical composition, minimal.\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686272666631644.jpg)\n\n### 日系胶片\n\n适合清新文艺风人像，做社交媒体头像或生活方式配图。\n\n提示词：\n\n    Analog 35mm film photography, soft airy Japanese-style aesthetic, gentle diffused natural window light, slight overexposure, pastel tones, low contrast, soft highlights, minimal indoor setting near a window with white curtains, clean light-colored wall, young East Asian woman, natural minimal makeup, soft realistic skin texture, long slightly messy dark hair, oversized white button-up shirt, barefoot, simple and relaxed styling, standing naturally with relaxed posture, gentle soft smile, subtle stillness, soft film grain, dreamy and understated atmosphere.\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686273973085543.jpg)\n\n重点不在人物，而在摄影语言。\n\n---\n\n## 脑洞玩法类\n\n### 名人打工\n\n把名人放到意想不到的场景里，适合做趣味内容或社交传播。\n\n提示词：\n\n    Sam Altman、Donald Trump 和 Elon Musk 三个人，在很忙的肯德基柜台后面一起工作。\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686275357937655.jpg)\n\n### 游戏关卡\n\n用游戏视角包装现实场景，适合做科技或游戏类创意内容。\n\n提示词：\n\n    Hitman 任务，在 OpenAI 总部偷 GPT-6\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686276548404722.jpg)\n\n### 微软整活\n\n用 PPT 截图的形式做幽默内容，适合科技圈段子。\n\n提示词：\n\n    微软发布会，展示 Edge 是下载第一浏览器，Chrome 排第二\n\n![](https://goframe-blog-upyun.mircool.cn/blog/1777686277656154235.jpg)\n\n这类的核心不是画面，而是梗。\n\n---\n\n## 写好提示词的 7 条规则\n\n1. 一定要写\"风格\"——水彩、胶片、UI\n2. 一定要写\"构图\"——对称、S 型、留白\n3. 一定要写\"材质\"——纸张、颗粒、光影\n4. 一定要写\"用途\"——海报、UI、商品\n5. 模板化——用【主题】替换\n6. 用真实视觉词，而不是抽象词\n7. 指定比例——9:16 或 1:1\n\n提示词工程正在变成一项能力。GPT Image-2 拉开的差距不在模型，在用户。同一个模型，有人能做商业级设计，有人只能出\"还行\"的图。原因只有一个：表达能力不同。\n\n\u003e 来源：微信公众号「捌捌探AI」，[原文链接](https://mp.weixin.qq.com/s/7ceV8okdf3aFJpLFVvwnFQ)\n","summary":"GPT Image-2 提示词实战手册，覆盖社交截图、UI 设计、海报、插画、电商、人像、脑洞玩法 7 类场景，共 15 条可直接使用的提示词模板，以及写好提示词的 7 条核心规则。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777686253780226952.jpg","categoryId":3,"isDraft":0,"viewCount":68,"createdAt":"2026-05-02 01:45:53","updatedAt":"2026-05-27 16:32:33"},{"id":65,"title":"用Image2把一人公司品牌设计全面升级","slug":"image2-brand-design-upgrade","content":"\u003e 用 GPT-Image2 跑了四个真实设计场景：多语种海报、仿真直播截图、Y2K 风格年鉴效果包、App 品牌全家桶。从出图到落地，全程在星流平台完成。\n\n![品牌设计升级概览](https://goframe-blog-upyun.mircool.cn/blog/1777654888346784517.png)\n\n前一篇跑通了一人品牌设计全流程，收到不少反馈。两个主要问题：出图需要反复抽卡，以及网络访问不便。\n\n刚好 Image2 正式发布，第一时间测了一圈，这两个痛点基本解决。\n\n指令遵循能力提升明显——你要什么就给什么，不再需要反复抽卡试运气。\n\n![指令遵循能力提升](https://goframe-blog-upyun.mircool.cn/blog/1777654887950901058.png)\n\n文字生成能力也发生了质变。以前 AI 生图最大的问题是中文必乱码，现在中英日韩文字、手写体都能直接渲染进图里。\n\n![萨摩耶科普百科图](https://goframe-blog-upyun.mircool.cn/blog/1777654887305479604.jpg)\n\n一句话提示词也能生成完整的品牌视觉指南。\n\n![咖啡品牌视觉设计指南](https://goframe-blog-upyun.mircool.cn/blog/1777654887992979206.png)\n\n写实感也上了一个台阶。Raw 质感、iPhone 拍摄感，AI 那股塑料味基本消失，放到社交平台里不一定能认出是 AI 做的。\n\n---\n\n## Case 1：多语海报与产品拆解\n\n同一套产品视觉出六个语言版本，是做出海内容的常规需求。之前用其他模型避免不了抽卡，Image2 上线后流程直接压缩了。\n\n通用提示词模板：\n\n为「品牌名」出一套产品宣传海报，同时生成六个语言版本：简体中文、英语、日语、韩语、法语、阿拉伯语。品牌调性：填入品牌调性描述。产品核心卖点：3 条以内。版式要求：9:16 竖版海报，产品图居中，品牌名在顶部，卖点文字在底部，每个语言版本保持相同版式结构。\n\n在星流输入提示词，选择 Image2：\n\n![星流平台输入提示词](https://goframe-blog-upyun.mircool.cn/blog/1777654889170044880.png)\n\n先让它生成中文版看看效果：\n\n![中文版海报](https://goframe-blog-upyun.mircool.cn/blog/1777654889105587171.png)\n\n排版准确、文字无乱码，构图色彩都不错，一版直出。\n\n确认没问题后，用 Agent 一键生成剩余五个语言版本：\n\n![Agent 并行生成多语言海报](https://goframe-blog-upyun.mircool.cn/blog/1777654890192236753.png)\n\n5 个任务并行，30 秒完成，效率直接提升 5 倍。\n\n![多语言海报成品](https://goframe-blog-upyun.mircool.cn/blog/1777654888052736835.png)\n\n没有改原图，而是直接替换文字。中文不乱码，日文假名正确，泰语从右往左排版方向也对。\n\n如果个别文字表达不准，用编辑文字功能精准修改即可：\n\n![编辑文字精准修改](https://goframe-blog-upyun.mircool.cn/blog/1777654887466060726.png)\n\n其他场景也测试了一下。\n\n建筑竞赛图纸一键生成：\n\n![建筑设计竞赛排版展板](https://goframe-blog-upyun.mircool.cn/blog/1777654887884724083.jpg)\n\nOOTD 穿搭拆解：\n\n![穿搭拆解参考图](https://goframe-blog-upyun.mircool.cn/blog/1777654887512376088.png)\n![穿搭拆解成品](https://goframe-blog-upyun.mircool.cn/blog/1777654887590712670.jpg)\n\n账号名片也能生成，直接省了外包设计费用：\n\n![账号名片生成](https://goframe-blog-upyun.mircool.cn/blog/1777654910017555506.png)\n![名片成品](https://goframe-blog-upyun.mircool.cn/blog/1777654910110160270.png)\n\n---\n\n## Case 2：仿真直播截图\n\n做社媒热点内容，直播切片素材需求量大。但真实拍摄一条的成本不低——布置直播间、真人出镜、后期剪辑，出一条成品至少半天。\n\n之前用其他模型出的图一眼假：\n\n![其他模型 vs Image2 对比](https://goframe-blog-upyun.mircool.cn/blog/1777654909742515628.jpg)\n\nImage2 的 UI 还原能力直接解决了这个问题。一句话生成高仿真的 YouTube 直播截图，弹幕、粉丝数、商品卡片、平台 UI 细节全部在正确位置。\n\n![YouTube 直播截图](https://goframe-blog-upyun.mircool.cn/blog/1777654909938306273.png)\n\n这一代 UI 还原能力已经很强，基本不需要大改，最多用编辑功能改几个字。\n\n在星流画布内还可以直接转视频——把截图拖进视频生成器，用一句话提示词让画面动起来：\n\n![直播截图转视频](https://goframe-blog-upyun.mircool.cn/blog/1777654909097641210.png)\n\n大约 1-2 分钟，直播切片视频直接生成。全程不需要离开星流，从静图到视频在一个画布里完成。\n\n不过图越来越像真的，识别信息的能力也要跟着升级。涉及隐私或转账的截图，需要提高警惕。\n\n---\n\n## Case 3：Y2K 年鉴效果包\n\n做系列素材最头疼的不是出一张图，而是出一套图——角色一致性、色调一致性、质感一致性都要保持。\n\nImage2 的 Raw 写实能力配合星流的 Agent，直接解决了这个问题。\n\n做的是 Y2K 风格年鉴效果包：胶片颗粒感、褪色色调、年代感字体，12 种版式，角色全程保持一致。\n\n通用提示词模板：\n\nY2K 胶片年鉴风格照片，拍摄于 2003 年左右。主体：描述人物或产品。风格细节：胶片颗粒感明显有轻微过曝、色调偏暖略微褪色对比度偏低、画面边缘有轻微暗角、时间戳印在右下角格式 2003.08.14、构图自然有随手拍的生活感。画质：真实胶片质感，8K 分辨率。\n\n先用上面的提示词产出基准图，确认颗粒感、色调、时间戳位置：\n\n![Y2K 基准图](https://goframe-blog-upyun.mircool.cn/blog/1777654909717014586.jpg)\n\n基准图确认后，新建对话框防止提示词污染，把基准图作为视觉参考锁进去。\n\n然后在同一个约束下描述 12 种不同的版式需求。产品特征、色调基准、胶片质感全程统一：\n\n![Y2K 12种版式变体](https://goframe-blog-upyun.mircool.cn/blog/1777654909837514528.png)\n\n12 张图全部生成满意后，用「编辑元素」把每张图拆成独立图层：产品层、背景层、时间戳文字层、胶片效果层。拆完后就是 12 套可以独立调用的素材资产。\n\n![编辑元素拆分图层](https://goframe-blog-upyun.mircool.cn/blog/1777654911528654447.png)\n\n---\n\n## Case 4：App 品牌全家桶\n\n完整走一遍 App 品牌设计全流程。\n\n第一步，把初步想法丢给 Agent：\n\n帮我为一款 iOS 睡眠追踪 App 建立完整的品牌视觉规范。产品名称：Lumi。功能定位：通过声音和光线监测睡眠质量，早晨用渐进式唤醒替代闹钟。目标用户：25-35 岁注重睡眠质量的都市人。品牌调性：克制、温柔、有科技感但不冷漠，像深夜里一盏刚好亮度的灯。请生成：色彩系统、字体层级建议、UI 基础组件、一张完整的 Brand Kit 展示图。\n\n不要想太多，先看结果：\n\n![Lumi Brand Kit 生成](https://goframe-blog-upyun.mircool.cn/blog/1777654910504556532.png)\n\n色调和 Logo 设计审美在线：\n\n![Brand Kit 细节](https://goframe-blog-upyun.mircool.cn/blog/1777654930158772319.png)\n\n下一步拆分 Logo、色彩系统、字体、UI、场景预览：\n\n![品牌视觉拆分](https://goframe-blog-upyun.mircool.cn/blog/1777654929060489750.png)\n\n因为是并行任务，很快就产出了一整套设计细则：\n\n![设计细则 1](https://goframe-blog-upyun.mircool.cn/blog/1777654930674640419.png)\n![设计细则 2](https://goframe-blog-upyun.mircool.cn/blog/1777654930151209692.png)\n![设计细则 3](https://goframe-blog-upyun.mircool.cn/blog/1777654929916013434.png)\n![设计细则 4](https://goframe-blog-upyun.mircool.cn/blog/1777654931338646121.png)\n\n完整设计细则有了，接下来实际应用。\n\n基于品牌物料产出 App Store 宣传图：\n\n![App Store 宣传图 1](https://goframe-blog-upyun.mircool.cn/blog/1777654930602803154.png)\n![App Store 宣传图 2](https://goframe-blog-upyun.mircool.cn/blog/1777654930151209692.png)\n\n文字排版有 App Store 的风格了，圆角细节也做了出来。\n\n一键修改四国语言版本：\n\n![多语言版本](https://goframe-blog-upyun.mircool.cn/blog/1777654929185497613.png)\n\n利用 Mockup 一键嵌入真实场景：\n\n![Mockup 场景替换](https://goframe-blog-upyun.mircool.cn/blog/1777654929033917612.png)\n\n---\n\n四个 Case 跑下来的感受：不是出图变好看了，是设计生产的门槛又降低了一个量级。\n\nImage2 的四项核心能力——文字无乱码、UI 逼真、Raw 写实、复杂布局——每一项都在把必须找专业人做的事，变成一个人一句话能搞定的事。\n\n星流解决的是生成之后怎么用的问题。从创意到交付，品牌设计生产链确实跑顺了。\n\n\u003e 本文转自微信公众号「路人甲TM」，[查看原文](https://mp.weixin.qq.com/s/bwK5wTStGhY96o7kdOYJhg)\n","summary":"用 GPT-Image2 跑了四个真实设计场景：多语海报、仿真直播截图、Y2K年鉴效果包、App品牌全家桶，从出图到落地全流程实测。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777654887171301341.jpg","categoryId":3,"isDraft":0,"viewCount":84,"createdAt":"2026-05-01 10:10:39","updatedAt":"2026-05-27 16:32:33"},{"id":64,"title":"GPT Image 2 全场景实测：游戏UI、电商、品牌设计挨个试了一遍","slug":"gpt-image-2-full-scenario-test","content":"GPT Image 2 最近刷屏了。各种评测铺天盖地，说几秒钟能干掉设计师。我花了一周时间，从游戏 UI、电商视觉、品牌全案，到写实照片、3D 渲染、插画创作，全品类测了一遍。\n\n![GPT Image 2 全场景测试概览](https://goframe-blog-upyun.mircool.cn/blog/1777594493931143443.webp)\n\n## 和其他 AI 绘图工具有什么不同\n\nGPT Image 2 不只是画图，它对商业设计的底层规则有理解：\n\n- 能遵循 iOS/Android 设计规范、微信小程序标准、印刷出血位、游戏 UI 层级等行业规则，生成的图尺寸、比例、交互逻辑不会出硬伤\n- 配色色值、圆角数值、信息层级、材质质感、光影参数这些细节可以精确控制\n- 游戏金属磨砂、美妆玻璃通透感、国风鎏金水墨、实景 raw 格式质感，还原度都比较高\n- 可以先让 GPT 梳理需求、优化创意，再一键出图，不满意的地方用自然语言迭代\n\n---\n\n## 1. 游戏 UI 设计\n\n这可能是 GPT Image 2 最有意思的场景。不同风格的游戏 UI、控件、原型、场景人物武器，都能生成。\n\n提示词组合方式：游戏 UI 类型，加上游戏品类、核心风格、核心功能模块、材质质感、设计规范和画质要求，按这个顺序组织。\n\n实际做法是先生成 UI 规范和控件，再基于规范生成完整的游戏界面，这样风格更统一。\n\n![游戏UI规范生成](https://goframe-blog-upyun.mircool.cn/blog/1777594528047391520.webp)\n\n![游戏UI界面生成1](https://goframe-blog-upyun.mircool.cn/blog/1777594557252640091.webp)\n\n![游戏UI界面生成2](https://goframe-blog-upyun.mircool.cn/blog/1777594560758312475.webp)\n\n![游戏UI界面生成3](https://goframe-blog-upyun.mircool.cn/blog/1777594563789235601.webp)\n\n![游戏UI界面生成4](https://goframe-blog-upyun.mircool.cn/blog/1777594565450594998.webp)\n\n![游戏UI场景生成1](https://goframe-blog-upyun.mircool.cn/blog/1777594568017487352.webp)\n\n![游戏UI场景生成2](https://goframe-blog-upyun.mircool.cn/blog/1777594570124074797.webp)\n\n---\n\n## 2. 电商设计\n\n电商是目前 GPT Image 2 使用频率最高的场景。淘宝主图、详情页头图、平台 banner、直通车图、抖音直播间背景、小红书种草图、产品渲染、短视频封面、促销海报，基本一句话生成，不需要复杂提示词。\n\n![电商设计示例](https://goframe-blog-upyun.mircool.cn/blog/1777594498336333882.webp)\n\n---\n\n## 3. 通用 UI 设计\n\n覆盖游戏之外的全品类 UI：数据可视化、APP 界面、B 端后台、品牌官网、H5 活动页、车载系统、智能设备界面等。\n\n提示词组合方式：UI 界面类型，加上适配平台、核心功能模块、设计规范、风格调性、主配色和分辨率。\n\n![通用UI设计规范](https://goframe-blog-upyun.mircool.cn/blog/1777594500754074614.webp)\n\n![APP界面设计](https://goframe-blog-upyun.mircool.cn/blog/1777594502674948200.webp)\n\n![数据可视化设计](https://goframe-blog-upyun.mircool.cn/blog/1777594505923935767.webp)\n\n官网 UI：\n\n![官网UI设计](https://goframe-blog-upyun.mircool.cn/blog/1777594508602875880.webp)\n\n古风文化 app：\n\n![古风文化APP设计](https://goframe-blog-upyun.mircool.cn/blog/1777594512581308076.webp)\n\n---\n\n## 4. 平面设计\n\n海报、长图、宣传单页、企业画册、三折页、邀请函、门票、包装设计、展板、易拉宝，从线上传播到线下印刷都能覆盖。\n\n电影海报：\n\n![电影海报设计](https://goframe-blog-upyun.mircool.cn/blog/1777594515857804414.webp)\n\n三折页：\n\n![三折页设计](https://goframe-blog-upyun.mircool.cn/blog/1777594518193029877.webp)\n\n海报宣传：\n\n![海报设计1](https://goframe-blog-upyun.mircool.cn/blog/1777594520886587714.webp)\n\n![海报设计2](https://goframe-blog-upyun.mircool.cn/blog/1777594524057995557.webp)\n\n运营长图：\n\n![运营长图设计](https://goframe-blog-upyun.mircool.cn/blog/1777594532470959416.webp)\n\n---\n\n## 5. 品牌设计\n\nGPT Image 2 能理解品牌的行业属性、定位和目标人群，生成风格统一的品牌视觉。五台山文旅品牌是个不错的例子。\n\n![品牌设计-五台山文旅](https://goframe-blog-upyun.mircool.cn/blog/1777594535380100155.webp)\n\n![品牌视觉体系](https://goframe-blog-upyun.mircool.cn/blog/1777594538423879763.webp)\n\n---\n\n## 6. 写实照片\n\n生成的生活场景照片，接近真实水平。\n\n![写实照片示例1](https://goframe-blog-upyun.mircool.cn/blog/1777594541916914888.webp)\n\n![写实照片示例2](https://goframe-blog-upyun.mircool.cn/blog/1777594544301996694.webp)\n\n---\n\n## 7. 其他场景\n\n除了上面六个方向，插画创作（国风、二次元、商业插画、儿童绘本）、3D 视觉设计、空间设计（家装效果图、工装设计、建筑外立面）、影视动画创作、文创非遗设计，也在尝试范围内。\n\n![其他场景示例1](https://goframe-blog-upyun.mircool.cn/blog/1777594552915686543.webp)\n\n![其他场景示例2](https://goframe-blog-upyun.mircool.cn/blog/1777594547151530182.webp)\n\n![其他场景示例3](https://goframe-blog-upyun.mircool.cn/blog/1777594550017274460.webp)\n\n---\n\n## 使用建议\n\n1. 先定框架再写提示词。先让 GPT 帮你梳理需求，比如\"我要做一个国风仙侠手游的登录界面，帮我梳理核心设计元素和视觉重点\"，再基于梳理结果写提示词，输出质量会好不少。\n\n2. 规范优先。把行业规范、尺寸要求、核心约束放在提示词最前面，比如\"符合微信小程序设计规范\"\"预留 3mm 印刷出血位\"\"800x800 像素正方形\"，避免生成的图好看但没法用。\n\n3. 分层约束，明确优先级。核心需求放前面，次要需求放后面。电商主图先写\"产品居中，核心卖点在画面顶部\"，再写风格、质感、光影。\n\n4. 迭代优化。不用追求一次完美，第一版出来后直接用自然语言告诉 GPT 修改方向，比如\"按钮改成磨砂玻璃质感，主色调换成 #FF6B6B\"。\n\n---\n\n\u003e 原文：[优设网 - GPT Image 2 全场景深度测试](https://www.uisdc.com/gpt-image-2-5)\n","summary":"花了一周时间把 GPT Image 2 从游戏UI、电商视觉、品牌全案到写实照片全品类测了一遍，记录实际效果和使用建议。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777594493931143443.webp","categoryId":3,"isDraft":0,"viewCount":95,"createdAt":"2026-05-01 00:17:29","updatedAt":"2026-05-27 16:32:33"},{"id":63,"title":"Open Design：Claude Design 的开源平替，30+ 设计 Skills + 71 套设计系统","slug":"open-design-claude-design-alternative","content":"![Open Design](https://goframe-blog-upyun.mircool.cn/blog/1777590392061500251.jpg)\n\n最近发现了一个 Claude Design 的开源替代品——[Open Design](https://github.com/nexu-io/open-design)，GitHub 上 nexu-io 的项目。\n\n用不上 Claude Design 的可以试试这个。工具跑在你自己电脑上，也能发布成网页，用的是你自己的 AI/API 密钥。\n\n简单说就是一个开源 AI 设计生成器：做网页、PPT、App 原型、仪表盘、文档，能预览也能导出。\n\n整个流程是这样的：\n\n1. 输入需求，它会先弹个表单让你确认设计目标、受众、风格、品牌约束\n2. 然后选视觉方向和设计系统\n3. 调用你本地装好的 AI 编程工具，自动读模板、写代码、生成页面\n4. 在网页里预览，导出成 HTML、PDF、PPTX、ZIP、Markdown 都行\n\n## 一、能做什么\n\n内置 19 个 Skills，也就是设计任务模板：\n\n- 网页原型\n- SaaS 落地页\n- 仪表盘\n- 定价页\n- 文档页\n- 博客文章\n- 移动 App 原型\n- 简单演示文稿\n- 杂志风 PPT\n- 产品需求文档\n- 周报\n- 会议纪要\n- 工程运行手册\n- 财务报告\n- 入职计划\n- 发票\n- 看板\n- OKR 表\n\n还内置了 71 套设计系统，每套都是 Markdown 格式的 DESIGN.md，涵盖颜色、字体、间距、布局、组件、动效、品牌语气这些。生成设计时 AI 按你选的设计系统来，不是瞎搞。\n\n## 二、好在哪\n\n这个项目强调\"反 AI 味\"的设计流程。先确认需求，再结合预设设计方向、设计系统、检查清单和自评流程，让结果更准确、更统一。\n\n核心思路四步：\n\n**先问问题再设计。** 新设计 brief 会先让你填表单，确认页面类型、受众、语气、品牌上下文，然后才进生成流程。\n\n**风格不是瞎猜。** 没有品牌规范的话，会让你从 5 个视觉方向里选：编辑杂志风、现代极简、技术工具感、粗野主义、柔和温暖风。\n\n**结果落成本地文件。** 本地生成真实项目文件，方便继续编辑、交付或二次开发。\n\n**技能和设计系统都能自定义。** 新增 SKILL.md 技能文件夹，修改 DESIGN.md 设计系统，适配你自己的工作流。\n\n## 三、怎么用\n\n用 Codex 让它下载项目，或者直接用 Claude Code 也行。\n\n跟 Claude Code 说\"打开这个项目的网页地址\"，等几分钟它会给你一个网址：\n\n![Codex 使用](https://goframe-blog-upyun.mircool.cn/blog/1777590393928610285.png)\n\n![项目页面](https://goframe-blog-upyun.mircool.cn/blog/1777590395798320545.png)\n\n选【本地 CLI】表示用电脑上已有的命令行工具来生成。本地有就直接点【Get started】：\n\n![Get started](https://goframe-blog-upyun.mircool.cn/blog/1777590397708684723.png)\n\n【人类学 API】选项是你自己提供 API 配置：\n\n![API 配置](https://goframe-blog-upyun.mircool.cn/blog/1777590399115505500.png)\n\n### 1. 示例\n\n右边有一堆示例：\n\n![示例列表](https://goframe-blog-upyun.mircool.cn/blog/1777590401085478692.png)\n\n可以【使用此提示】或者【打开预览】看效果：\n\n![预览效果](https://goframe-blog-upyun.mircool.cn/blog/1777590402612253484.png)\n\n打开预览还能看到各种下载方式：\n\n![下载方式](https://goframe-blog-upyun.mircool.cn/blog/1777590404296055679.png)\n\n### 2. 设计系统\n\n示例右边是 71 套设计系统：\n\n![设计系统列表](https://goframe-blog-upyun.mircool.cn/blog/1777590405839523712.png)\n\n看看爱彼迎的设计系统，内容非常全：\n\n![Airbnb 设计系统1](https://goframe-blog-upyun.mircool.cn/blog/1777590407271431018.png)\n\n![Airbnb 设计系统2](https://goframe-blog-upyun.mircool.cn/blog/1777590408468814438.png)\n\n![Airbnb 设计系统3](https://goframe-blog-upyun.mircool.cn/blog/1777590410059309555.jpg)\n\n### 3. 生成 UI 设计页面\n\n填原型名称，比如\"运动健身网站\"，选设计系统（单选多选都行）：\n\n![创建原型](https://goframe-blog-upyun.mircool.cn/blog/1777590411547857031.png)\n\n选【高保真】，点【创建】：\n\n![高保真创建](https://goframe-blog-upyun.mircool.cn/blog/1777590413047212085.png)\n\n输入你要做的页面，比如\"做一个运动健身网站首页\"，点【发送】：\n\n![输入需求](https://goframe-blog-upyun.mircool.cn/blog/1777590414438650698.png)\n\n它会让你选一些信息来辅助设计：\n\n![设计信息](https://goframe-blog-upyun.mircool.cn/blog/1777590416074075017.png)\n\n等一会儿，UI 设计界面就出来了：\n\n![生成结果1](https://goframe-blog-upyun.mircool.cn/blog/1777590417649851120.png)\n\n![生成结果2](https://goframe-blog-upyun.mircool.cn/blog/1777590419589263867.png)\n\n### 4. PPT\n\n做 PPT 也一样，选幻灯片后创建：\n\n![PPT 创建](https://goframe-blog-upyun.mircool.cn/blog/1777590420858300539.png)\n\n随便给它一个主题，它会问你一些问题，包括要不要上传参考资料：\n\n![PPT 需求](https://goframe-blog-upyun.mircool.cn/blog/1777590422513482872.png)\n\n然后选个视觉方向，挑你喜欢的颜色就行：\n\n![视觉方向](https://goframe-blog-upyun.mircool.cn/blog/1777590424247611261.png)\n\n再等一会儿，PPT 就出来了：\n\n![PPT 生成1](https://goframe-blog-upyun.mircool.cn/blog/1777590426032308957.png)\n\n![PPT 生成2](https://goframe-blog-upyun.mircool.cn/blog/1777590427761827041.gif)\n\n---\n\n除了 UI 页面和 PPT，Open Design 里还有很多其他 Skills：产品需求文档、仪表盘、周报、会议纪要、财务报告、OKR 表等等。\n\n对设计师来说，它的价值不只是能生成页面——而是把\"需求确认、风格选择、设计系统约束、文件导出\"这些环节串成了一套完整流程。\n\n如果你经常做网页原型、产品方案、汇报 PPT 或内部文档，可以把它当成本地优先的 AI 设计工作台试试。\n\n\u003e 原文：[萤柳设计](https://mp.weixin.qq.com/s/bOLe_TnLgRARjzwgLcrZuA)\n","summary":"Open Design 是 Claude Design 的开源替代品，内置 19 个设计 Skills 和 71 套设计系统，支持网页、PPT、App 原型等多种设计生成。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777590392061500251.jpg","categoryId":3,"isDraft":0,"viewCount":87,"createdAt":"2026-04-30 23:08:06","updatedAt":"2026-05-27 16:32:33"},{"id":62,"title":"GPT-Image2 生成的 PSD，不是假分层","slug":"gpt-image2-generate-psd-layers","content":"\u003e GPT-Image2 现在可以直接生成分层的 PSD 文件了。不是那种把所有内容压成一张图的假 PSD，而是真正分层、每个元素单独可编辑。下载后直接丢进 Photoshop，图层、分组、顺序全部到位，改换主体、调背景都不用重新抠图。4 步搞定。\n\n---\n\n## 整体思路\n\nGPT-Image2 是 OpenAI 的新一代图像生成模型，生图质量不错。重点在于它有个 **thinking 模式**，能理解复杂的图像拆分指令，把一张完整的图拆成多个独立的图层。\n\n然后再告诉它用 Photoshop 作为导出源，它就会把拆好的图层图片合并成一个真正的、分层的 PSD 文件。\n\n整个链路：\n\n**文字 → AI 生图 → thinking 拆分图层 → Photoshop 合成 PSD → 下载编辑**\n\n---\n\n## 4 步跑通完整流程\n\n### 第 1 步：用 GPT 生成一张海报\n\n直接让 GPT-Image2 生成你想要的图，提示词根据需求写就行。\n\n![生成海报](https://goframe-blog-upyun.mircool.cn/blog/1777542562446034477.jpg)\n\nImage2 的出图效果不错，细节和质感都在线。你也可以上传自己的图片。\n\n### 第 2 步：开启 thinking 模式拆分图层\n\n这一步是关键，**一定要选 thinking 模式**。\n\nthinking 模式下，GPT 会先\"想一遍\"再执行，对复杂的图像拆分指令理解更准。把下面这段 JSON 格式的提示词发给它：\n\n```json\n{\n  \"task\": \"split_image_layers\",\n  \"input\": \"generated_image\",\n  \"output\": {\n    \"type\": \"multiple_images\",\n    \"background\": \"solid_white\",\n    \"avoid\": \"fake_transparency\"\n  },\n  \"requirements\": {\n    \"one_element_per_image\": true,\n    \"canvas_size\": \"same_as_original\",\n    \"preserve_element_size\": true,\n    \"preserve_relative_position\": true,\n    \"photoshop_ready_overlay\": true,\n    \"no_manual_movement_needed\": true\n  }\n}\n```\n\n![开启 thinking 模式](https://goframe-blog-upyun.mircool.cn/blog/1777542564041320410.jpg)\n\n跑完后你会收到一堆拆分好的图层图片。每个元素单独一张，画布大小和原图一样，元素位置和大小都不变，底色是纯白色。\n\n![拆分后的图层图片](https://goframe-blog-upyun.mircool.cn/blog/1777542565716941547.gif)\n\n切图效果取决于提示词写得够不够清楚，目前只能说一般，要做好还得再调。\n\n### 第 3 步：添加源，选择 Photoshop\n\n拿到拆分好的图层图片后，**选 Photoshop 作为添加源**，然后发这段 JSON：\n\n```json\n{\n  \"task\": \"merge_layers_to_psd\",\n  \"input\": \"split_layer_images\",\n  \"output\": {\n    \"type\": \"psd\",\n    \"remove_background\": \"solid_white\",\n    \"layers\": \"independent_editable_layers\"\n  },\n  \"requirements\": {\n    \"canvas_size\": \"same_as_original\",\n    \"preserve_relative_position\": true,\n    \"preserve_z_order\": true,\n    \"photoshop_editable\": true\n  }\n}\n```\n\n![添加 Photoshop 源](https://goframe-blog-upyun.mircool.cn/blog/1777542566644164399.jpg)\n\n它会把这些白底图层图片去除白色背景，转成透明图层，然后按正确的顺序和位置合成到一个 PSD 文件里。\n\n### 第 4 步：下载 PSD，直接在 PS 中编辑\n\n下载生成的 PSD 文件，拖进 Photoshop 打开。\n\n图层面板里每个元素都是独立的，背景、主体、装饰各自分层。改哪个改哪个，不用手动抠图。\n\nAI 也会直接输出所有拆分好的 PNG 图层图片，可以单独下载。\n\n![输出下载界面](https://goframe-blog-upyun.mircool.cn/blog/1777542568382545949.jpg)\n\n![拆分好的多张 PNG 图层](https://goframe-blog-upyun.mircool.cn/blog/1777542569560852394.jpg)\n\n---\n\n## 优点\n\n- **Image2 生图效果好**：细节、质感、构图都在线，生成的图本身质量就高\n- **减少手动工作量**：不用一个个抠元素、不用反复调整图层顺序\n- **门槛低**：4 步搞定，不需要写代码，不需要专业工具，会打字就行\n\n---\n\n## 不足和避坑\n\n**切图不是非常准**，偶尔会翻车：\n\n- 丢失背景，元素位置也变了，拼出来不是原图\n\n- 位置对了，但切的块不完整，像拼图碎裂\n\n不过对于做海报、电商图、自媒体封面这类场景，已经够用了。\n\n**避坑建议**：\n\n1. **提示词用 JSON 格式**：上面两个 bad case 都是用自然语言写的，效果不稳定。结构化指令更精准，AI 不会乱发挥\n2. **把关键条件写进 requirements**：画布大小、元素位置、背景类型，越具体越好。文字效果这块还可以继续优化\n3. **新开窗口**：有问题不要在原窗口调整，新开一个对话窗口重置上下文\n\n---\n\n## 适合谁\n\n**适合**：\n- 做海报、电商图、自媒体封面的设计师和创作者\n- 想提高效率、减少重复劳动的人\n- 需要快速出初稿再精细调整的场景\n\n**不适合**：\n- 对切图精度要求极高的专业场景\n- 需要精细控制每个图层细节的设计师\n- 希望 AI 一步到位、完全不用管的\n\n---\n\n## 总结\n\nGPT-Image2 生图 + thinking 拆分图层 + Photoshop 合成 PSD，一套流程跑下来省下大量手动切图、抠图、排图层的时间。提示词用 JSON 格式效果更稳。\n\n---\n\n*来源：[鳕小堡的AI轻笔记](https://mp.weixin.qq.com/s/OWuolHuKsHaiBSMk8nRmsA)*\n","summary":"GPT-Image2 + thinking 模式 + Photoshop，4 步生成真正分层的 PSD 文件。不是假分层，每个元素独立可编辑。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777542562446034477.jpg","categoryId":3,"isDraft":0,"viewCount":108,"createdAt":"2026-04-30 09:50:38","updatedAt":"2026-05-27 16:32:33"},{"id":61,"title":"GPT Image 2 生成手作感拉满的景区导视设计","slug":"gpt-image2-scenic-signage-design","content":"谁懂啊！GPT Image 2 直接帮我把导视设计卷上天✨\n\n之前还在头疼的景区导视，没想到用 AI 一键生成，直接出了这种「原木雕刻+山水肌理」的神仙方案！从天然木纹的质感，到层叠雕刻的山谷溪流，甚至导览信息和景区氛围的融合度，都完全踩中了我想要的原生态感，细节丰富到我都想直接落地施工了！\n\n现在的 AI 设计也太香了，打工人的灵感库直接被 GPT Image 2 喂饱，效率和质感双在线，这波我直接吹爆！📸\n\n![图1](https://goframe-blog-upyun.mircool.cn/blog/1777451319709393542.jpg)\n\n![图2](https://goframe-blog-upyun.mircool.cn/blog/1777451331945661567.jpg)\n\n![图3](https://goframe-blog-upyun.mircool.cn/blog/1777451336627879100.jpg)\n\n![图4](https://goframe-blog-upyun.mircool.cn/blog/1777451339646246168.jpg)\n\n![图5](https://goframe-blog-upyun.mircool.cn/blog/1777451341873635534.jpg)\n\n![图6](https://goframe-blog-upyun.mircool.cn/blog/1777451343783537063.jpg)\n\n![图7](https://goframe-blog-upyun.mircool.cn/blog/1777451345969884367.jpg)\n\n![图8](https://goframe-blog-upyun.mircool.cn/blog/1777451347909095911.jpg)\n\n![图9](https://goframe-blog-upyun.mircool.cn/blog/1777451350201346597.jpg)\n\n---\n\n*来源：[阿夕爱设计](https://mp.weixin.qq.com/s/z6LXzhbKIdKdOtjcqoiV2A)*","summary":"GPT Image 2 生成原木雕刻+山水肌理风格的景区导视设计，手作感拉满，效率和质感双在线。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777451319709393542.jpg","categoryId":4,"isDraft":0,"viewCount":78,"createdAt":"2026-04-29 08:30:53","updatedAt":"2026-05-27 13:08:28"},{"id":60,"title":"Open Design：Claude Design 的开源替代，19 个 Skills + 71 套设计系统，让你的 AI 编码助手秒变设计师","slug":"open-designclaude-design-的开源替代19-个-skills--71-套设计系统让你的-ai-编码助手秒变设计师","content":"2026 年 4 月 17 日，Anthropic 发布了 Claude Design——当 LLM 不再写散文，而是直接出设计稿。它刷屏了。但它闭源、付费、云端运行，锁定在 Anthropic 的模型和技能体系里，没有自部署选项。\n\n**Open Design（OD）就是开源替代品。** 同样的循环，同样的设计优先思维，但没有任何锁定。它不自带 Agent——最强的编码 Agent 已经在你的电脑上了。它做的是把这些 Agent 接入一个技能驱动的设计工作流，支持 `pnpm dev` 本地运行、Vercel 部署、每层 BYOK。\n\n![Open Design Banner](https://goframe-blog-upyun.mircool.cn/blog/1777434069478050135.jpg)\n\n---\n\n## 它能做什么？\n\n一句话：**让你的 AI 编码助手变成一个高级设计师。**\n\n输入一句 `make me a magazine-style pitch deck for our seed round`，OD 会：\n\n1. 弹出交互式问卷，锁定设计方向（表面、受众、调性、品牌、规模）\n2. 从 5 个策展视觉方向中挑选一个（每个方向附带确定性调色板和字体栈）\n3. 生成实时 TodoWrite 计划，流式展示到 UI\n4. 构建真实的项目文件夹，包含种子模板、布局库和自检清单\n5. Agent 读取模板，执行五维自评，然后输出一个 `\u003cartifact\u003e`，在沙盒 iframe 中秒级渲染\n\n这不是\"AI 试着设计点什么\"，而是一个**被 prompt 栈训练成高级设计师**的 AI——有工作文件系统、确定性调色板库和清单文化。\n\n---\n\n## 核心亮点一览\n\n| 维度 | 内容 |\n|------|------|\n| **支持的编码 Agent** | Claude Code · Codex CLI · Cursor Agent · Gemini CLI · OpenCode · Qwen Code · Anthropic API (BYOK) |\n| **内置设计系统** | **71 套** — Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma 等 |\n| **内置 Skills** | **19 个** — 原型、PPT、移动端、仪表盘、定价页、文档、博客、SaaS 落地页 + 10 个文档模板 |\n| **视觉方向** | 5 大流派（编辑 Monocle · 现代极简 · 技术实用 · 粗野主义 · 柔暖温暖） |\n| **设备框架** | iPhone 15 Pro · Pixel · iPad Pro · MacBook · Chrome 浏览器 |\n| **部署方式** | 本地 (pnpm dev) · Vercel · 单进程生产 (npm start) |\n| **许可证** | Apache-2.0 |\n\n---\n\n## 效果演示\n\n**入口视图** — 选择 Skill、设计系统，输入需求描述：\n\n![Entry View](https://goframe-blog-upyun.mircool.cn/blog/1777434027325290362.png)\n\n**第一轮发现问卷** — 在模型动笔画一个像素之前，锁定需求：\n\n![Discovery Form](https://goframe-blog-upyun.mircool.cn/blog/1777434028463039825.png)\n\n**方向选择器** — 5 个策展视觉方向，一键确定调色板和字体：\n\n![Direction Picker](https://goframe-blog-upyun.mircool.cn/blog/1777434029581786076.png)\n\n**实时 Todo 进度** — Agent 的计划实时流式展示：\n\n![Todo Progress](https://goframe-blog-upyun.mircool.cn/blog/1777434030678233986.png)\n\n**沙盒预览** — 每个作品在干净的 iframe 中渲染，支持 HTML/PDF/ZIP 导出：\n\n![Sandboxed Preview](https://goframe-blog-upyun.mircool.cn/blog/1777434031932155860.png)\n\n**71 套设计系统库** — 每个产品系统展示其四色签名：\n\n![71 Design Systems](https://goframe-blog-upyun.mircool.cn/blog/1777434033053142044.png)\n\n**杂志风 PPT** — 内置 guizang-ppt Skill，杂志排版、WebGL 背景：\n\n![Magazine Deck](https://goframe-blog-upyun.mircool.cn/blog/1777434034214366366.png)\n\n**移动端原型** — 像素级精确的 iPhone 15 Pro 框架：\n\n![Mobile Prototype](https://goframe-blog-upyun.mircool.cn/blog/1777434037392074384.png)\n\n---\n\n## 六个核心理念\n\n### 1. 不自带 Agent——你手上的就够了\n\n守护进程启动时扫描 PATH 中的 claude、codex、cursor-agent、gemini、opencode、qwen。找到哪个就用哪个作为设计引擎。没找到？Anthropic API BYOK 同样能跑。\n\n### 2. Skill 是文件，不是插件\n\n遵循 Claude Code 的 SKILL.md 规范——每个 Skill 就是 SKILL.md + assets/ + references/。往 skills/ 丢一个文件夹，重启守护进程，它就出现在选择器里。\n\n### 3. 设计系统是 Markdown，不是 JSON\n\n9 节 DESIGN.md schema——颜色、排版、间距、布局、组件、动效、语调、品牌、反模式。切换设计系统 → 下一次渲染自动使用新 token。\n\n### 4. 交互式问卷阻止 80% 的返工\n\nOD 的 prompt 栈硬编码了一条规则：每个新设计任务的第一轮必须是问卷表单，而不是代码。30 秒的勾选胜过 30 分钟的返工。\n\n### 5. 守护进程让 Agent 真正活在你的电脑上\n\n守护进程以项目文件夹为 cwd 启动 CLI，Agent 获得 Read、Write、Bash、WebFetch——真实工具、真实文件系统。会话、对话、标签页持久化在本地 SQLite 数据库中。\n\n### 6. Prompt 栈就是产品\n\n发送时组合的不只是\"system + user\"，而是：\n\n- 发现指令（第1轮表单 + 第2轮品牌分支 + TodoWrite + 5维自评）\n- 身份章程（官方设计师 Prompt + 反 AI 味 + 初级设计师流程）\n- 活跃 DESIGN.md（71 套系统可选）\n- 活跃 SKILL.md（19 个 Skill 可选）\n- 项目元数据\n- Skill 侧文件（自动注入：读取模板 + 参考文档）\n\n---\n\n## 19 个内置 Skill\n\n### 展示类 Skill\n\n| Skill | 模式 | 产出 |\n|-------|------|------|\n| web-prototype | 原型 | 单页 HTML — 落地页、营销页 |\n| saas-landing | 原型 | Hero/功能/定价/CTA 营销布局 |\n| dashboard | 原型 | 管理后台/分析仪表盘 |\n| pricing-page | 原型 | 独立定价+对比表 |\n| docs-page | 原型 | 三栏文档布局 |\n| blog-post | 原型 | 编辑式长文 |\n| mobile-app | 原型 | iPhone 15 Pro / Pixel 框架应用 |\n| simple-deck | PPT | 极简横向滑动 |\n| guizang-ppt | PPT | 杂志风 Web PPT（默认 PPT 模式） |\n\n### 文档类 Skill\n\n| Skill | 产出 |\n|-------|------|\n| pm-spec | PM 规格文档 |\n| weekly-update | 团队周报 |\n| meeting-notes | 会议决策记录 |\n| eng-runbook | 故障处理手册 |\n| finance-report | 财务摘要 |\n| hr-onboarding | 入职计划 |\n| invoice | 单页发票 |\n| kanban-board | 看板快照 |\n| team-okrs | OKR 评分表 |\n\n---\n\n## 设计系统库\n\n![71 Design Systems Library](https://goframe-blog-upyun.mircool.cn/blog/1777434024994377834.png)\n\n71 套设计系统开箱即用，涵盖 AI \u0026 LLM、开发者工具、生产力、金融科技、电商、媒体、汽车等多个领域，包括 Linear、Stripe、Vercel、Airbnb、Tesla、Notion、Apple、Cursor、Supabase、Figma 等知名品牌的设计风格。\n\n---\n\n## 快速开始\n\n```bash\ngit clone https://github.com/nexu-io/open-design.git\ncd open-design\npnpm install\npnpm dev:all         # 启动守护进程 (:7456) + Vite (:5173)\nopen http://localhost:5173\n```\n\n首次启动会自动检测 Agent CLI、加载 19 个 Skill 和 71 套设计系统、弹出欢迎对话框让你粘贴 Anthropic API Key。然后就可以开始设计了。\n\n---\n\n## 架构概览\n\n- **前端**：Vite 5 + React 18 + TypeScript\n- **守护进程**：Node 18+ · Express · SSE 流式 · better-sqlite3\n- **Agent 传输**：child_process.spawn，claude-stream-json 解析器 + 行缓冲\n- **存储**：.od/projects/ 文件夹 + SQLite 数据库\n- **预览**：沙盒 iframe (srcdoc) + 每Skill artifact 解析器\n- **导出**：HTML / PDF / PPTX / ZIP / Markdown\n\n---\n\n## 与竞品对比\n\n| 维度 | Claude Design | Open CoDesign | **Open Design** |\n|------|---------------|---------------|-----------------|\n| 许可证 | 闭源 | MIT | **Apache-2.0** |\n| 可部署到 Vercel | ❌ | ❌ | **✅** |\n| Agent 运行时 | 绑定 Opus 4.7 | 绑定 pi-ai | **委托给你已有的 CLI** |\n| 设计系统 | 专有 | 路线图 | **71 套已发布** |\n| 初始问卷 | ❌ | ❌ | **✅ 强制规则** |\n| 5 维自评 | ❌ | ❌ | **✅ 输出前门控** |\n| 文件系统级工作区 | ❌ | 部分 | **✅ 真实 cwd + SQLite** |\n\n---\n\n## 项目地址\n\n**GitHub**：[https://github.com/nexu-io/open-design](https://github.com/nexu-io/open-design)\n\nApache-2.0 开源，欢迎 Star、PR、贡献新 Skill 和设计系统。\n","summary":"2026 年 4 月 17 日，Anthropic 发布了 Claude Design——当 LLM 不再写散文，而是直接出设计稿。它刷屏了。但它闭源、付费、云端运行，锁定在 Anthropic 的模型和技能体系里，没有自部署选项。Open Design（OD）就是开源替代品。同样的循环，同样的设计优先思维，但没有任何锁定。它不自带 Agent——最强的编码 Agent 已经在你的电脑上了。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1777433044521605348.jpg","categoryId":3,"isDraft":0,"viewCount":64,"createdAt":"2026-04-29 03:25:18","updatedAt":"2026-05-27 07:16:06"}],"title":"凌风 Blog","version":"https://jsonfeed.org/version/1"}