{"author":{"name":"凌风"},"description":"A personal blog built with GoFrame","feed_url":"https://mircool.cn/feed","home_page_url":"https://mircool.cn","items":[{"id":97,"title":"Codex + 4 个 Skills：审美、动效、工程、测试一条龙","slug":"codex-4-skills-frontend-workflow","content":"Codex + 四大开源 Skills 的组合，让 AI 拥有完整的「审美、动效、工程思维、测试思维」，直接拉满 AI 前端开发的上限。\n\n## 01 Taste Skill（v2 新版）：给 AI 装上审美大脑\n\n绝大多数 AI 生成页面的通病：无设计逻辑、层级混乱、配色杂乱、留白随意、同质化严重，看着永远像「半成品模板」。\n\n![Taste Skill](https://goframe-blog-upyun.mircool.cn/blog/1785478191926189540.png)\n\nTaste Skill 最新 v2 版本彻底重构工作逻辑，从「被动建议」升级为「强制规范」，彻底杜绝廉价 UI 设计。核心能力：\n\n- **需求前置推理**：生成代码前先解读项目定位、受众、品牌风格，定制专属设计语言\n- **三档位精细化调控**：1-10 数值自由调节布局方差、动效强度、页面视觉密度，适配极简/轻奢/工业多种风格\n- **标准化设计体系**：统一排版、间距、配色、层级规则，自带反劣质设计（Anti-Slop）机制\n- **出厂预检机制**：页面交付前自动校验设计规范，杜绝排版瑕疵、视觉漏洞\n\n![Taste Skill 效果](https://goframe-blog-upyun.mircool.cn/blog/1785478200192741756.png)\n\n高级的网页设计，从来不是元素堆砌，而是有章法的视觉秩序。\n\n![Taste Skill 对比](https://goframe-blog-upyun.mircool.cn/blog/1785478212551346256.png)\n\n## 02 GSAP Skill：告别廉价动效\n\n静态页面靠模板，高端页面靠动态。普通 AI 生成的动画，普遍存在卡顿、生硬、逻辑混乱、适配差等问题，一眼就能看出是 AI 半成品。\n\n![GSAP 动效演示](https://goframe-blog-upyun.mircool.cn/blog/1785478221505029298.gif)\n\nGSAP 作为全球顶级网页动画开源库，专属 AI 技能包让 Codex 精准掌握专业动效逻辑，规避所有新手误区。核心能力：\n\n- **专业时间轴动画**：精准控制动画顺序、时长、间隔，告别杂乱动效\n- **滚动联动特效**：页面滚动触发元素入场、展示、渐变、缩放效果\n- **全框架适配**：兼容 React/Vue/Svelte/原生 JS\n- **性能极致优化**：自动规避重排重绘，动画流畅不卡顿\n\n![GSAP 滚动联动](https://goframe-blog-upyun.mircool.cn/blog/1785478233247267751.gif)\n\n静态页面只能传递信息，动态交互才能塑造品牌质感。\n\n## 03 Ponytail Skill：极简工程思维\n\nAI 写代码速度极快，但最大短板从未改变：过度开发、代码臃肿、重复冗余、结构混乱、难以维护。\n\n![Ponytail Skill](https://goframe-blog-upyun.mircool.cn/blog/1785478239407207359.png)\n\nPonytail 主打「极简高效、不做无用功」，在不丢失功能、安全性、兼容性的前提下极致精简代码。核心能力：\n\n- **YAGNI 极简原则**：剔除所有无用代码、多余组件、无效逻辑\n- **原生能力优先**：能用浏览器原生属性，绝不额外引入第三方依赖\n- **项目结构重构**：统一组件化规范，提升代码复用性与可维护性\n- **实测高效提效**：平均减少 54% 代码量，降低 20% 开发成本、27% 耗时\n\n![Ponytail 效果](https://goframe-blog-upyun.mircool.cn/blog/1785478241873601928.png)\n\n优质 AI 代码，不在于写得多，而在于写得精、跑得稳、改得快。\n\n## 04 Playwright MCP：AI 全自动测试\n\n传统 AI 开发的最大漏洞：只管生成，不管校验。AI 写完代码后，错位、失效、适配 bug、点击无响应等问题频发，必须人工逐页测试。\n\n![Playwright MCP](https://goframe-blog-upyun.mircool.cn/blog/1785478243923754448.png)\n\n微软官方 Playwright MCP 补齐最后一环，让 Codex 拥有全自动浏览器测试能力：\n\n- **全自动浏览器操作**：启动、页面跳转、元素点击、表单输入\n- **智能页面快照检测**：精准捕捉样式错位、功能失效、适配异常\n- **全场景兼容**：移动端、桌面端、多浏览器环境\n- **问题自动定位 + 智能修复**：完成「开发-测试-修复」全闭环\n\n## 四大 Skills 完整工作流\n\n四大技能各司其职、层层递进，组成 AI 前端工业化开发流水线：\n\n1. **Taste Skill** 打底：标准化审美设计，产出高颜值页面架构\n2. **GSAP Skill** 赋能：叠加高阶丝滑动效，提升交互体验\n3. **Ponytail Skill** 优化：精简冗余代码，夯实工程质量\n4. **Playwright MCP** 校验：全自动测试修复，保障交付稳定\n\n从设计到动效到代码到测试，全程 AI 自主完成，无需人工反复微调、改错、优化。\n\n真正的核心竞争力，不是「会用 AI 写代码」，而是懂得搭建 AI 工作流——用专业技能包约束 AI、赋能 AI，让工具产出高质量、可落地、可商用的成熟产品。","summary":"Taste Skill（审美）+ GSAP Skill（动效）+ Ponytail Skill（极简工程）+ Playwright MCP（自动测试），四大开源 Skills 组成 AI 前端工业化开发流水线。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1785478186287620118.jpg","categoryId":1,"isDraft":0,"viewCount":21,"createdAt":"2026-07-31 06:11:19","updatedAt":"2026-08-03 20:20:21"},{"id":96,"title":"uniapp 小程序开发规范 Skill：20 条红线 + 8 份详解文档","slug":"uniapp-standard-skill","content":"\u003e 用 AI 写 uniapp 小程序，最怕的就是 10 个页面 10 种写法、变量名乱起、颜色硬编码满天飞。这个 Skill 用 8 份规范文档 + 20 条红线规则，把 AI 约束在一套标准里干活，代码质量和维护效率直接拉满。\n\n什么是规范？简单说就是一套标准流程——一个萝卜一个坑，这里填 A 那里填 B，让维护人员和 AI 一看就懂。规范设计和 UI 设计（主题、组件化、页面模板）本质上是一回事：**一开始就让 AI 在一块制定好的范围里干活，不可越雷池半步**。\n\n因为越到后期，没有规范的项目 AI 维护成本越大、token 消耗越多、效率越低。AI 确实能自主学习，即使项目乱七八糟也能找到关键词修 bug，但代价巨大：幻觉和失忆概率直线上升、修复提示词越来越长、token 烧得飞快。而提前定好规范，AI 会\"嗅到\"你的规范并按它办事。\n\n## 一、为什么需要规范\n\n让 AI 直接开发当然能搞出一套像模像样的 uniapp 项目（比如用骨架生成 Skill），但骨架里的血肉——结构和规范——如果不约束，后期维护会很痛苦：\n\n| 痛点 | 后果 |\n|------|------|\n| 没有统一规范 | 10 个页面 10 种写法 |\n| AI 写代码放飞自我 | 硬编码满天飞，颜色尺寸各不同 |\n| 接别人的项目 | 看完心态崩了 |\n| 代码审查 | 凭感觉，没有标准 |\n\n用 AI 写代码尤其明显，因为 AI 的幻觉和失忆特性：变量名乱起（`aaa`、`temp`、`data1`）、颜色硬编码（`#666`、`#999`）、尺寸不统一（20rpx、24rpx、28rpx 混用）、接口写法各异。这时候就需要一个规范 Skill 来约束 AI。\n\n## 二、8 个维度\n\n这个 Skill 的核心是提供 8 份详细规范文档，覆盖一个 uniapp 项目的整个过程。\n\n![8 个维度规范](https://goframe-blog-upyun.mircool.cn/blog/1785281126071719875.png)\n\n**1. api-architecture.md — 请求封装**：统一请求前缀、统一错误提示、统一 401 跳转、统一管理 user 状态。接好后端的第一步。\n\n**2. store-guide.md — Pinia 状态管理**：用户状态等需要动态管理的数据，用 `defineStore` 声明，`computed` 派生登录态。\n\n**3. router-guide.md — 路由配置与守卫**：封装 `router.push`，路由守卫自动处理登录拦截。\n\n**4. performance.md — 性能优化**：DOM 节点限制（页面 ≤ 1000 个）、setData 限制（单次 ≤ 100KB、频率 ≤ 20 次/秒）、长列表必须分页。\n\n**5. storage-guide.md — 存储 Key 常量**：禁止硬编码 storage key，统一收口到 `STORAGE_KEYS` 常量，退出登录时一并清除。\n\n**6. analytics.md — 埋点规范**：统一的 `analytics.pageView` / `analytics.click` 接口，收集用户行为。\n\n**7. component-communication.md — 组件通信**：props/emit（父→子）、provide/inject（祖先→后代）、EventBus（兄弟组件）三种场景的标准化用法。\n\n**8. 20 条红线规则**：违反任意一条就是不合规（部分示例）：\n\n| 编号 | 规则 | 说明 |\n|------|------|------|\n| R01 | 禁止嵌套 v-for | 单个页面 v-for 层数 ≤ 1 |\n| R04 | DOM 节点数限制 | 页面总节点 ≤ 1000 |\n| R06 | setData 数据量限制 | 单次 ≤ 100KB |\n| R07 | 禁止 eval/new Function | 危险方法 |\n| R08 | 禁止硬编码 | 配置项放 config 目录 |\n| R09 | 请求防抖节流 | 同一接口 1 秒内禁止重复 |\n| R10 | 失败必须弹提示 | 所有失败场景必须暴露错误 |\n\n![20 条红线](https://goframe-blog-upyun.mircool.cn/blog/1785281127014760583.png)\n\n## 三、标准目录结构\n\n这套常用的 uniapp 项目结构，可以用骨架生成 Skill 生成，重要的是上面 8 个维度要在目录里有体现：\n\n```\nsrc/\n├── api/            # 接口封装（request.ts + _mocks_）\n├── components/     # 公共组件\n├── pages/          # 业务页面\n├── stores/         # Pinia 状态管理\n├── utils/          # 工具函数（router.ts/analytics.ts/storage.ts）\n├── config/         # 应用配置\n├── constants/      # 常量（STORAGE_KEYS）\n├── styles/         # SCSS 样式系统\n├── App.vue         # 根组件\n└── pages.json      # 页面路由\n```\n\n## 四、使用方式\n\n仓库地址：https://github.com/jiushiwon/wg-skills/tree/main/uniapp-standard-skill\n\n触发命令：\n\n```\n/uniapp-standard-skill 你能干啥\n```\n\n或者直接描述需求，比如「uniapp 开发规范」「小程序规范」「接口怎么写」。\n\n![触发方式](https://goframe-blog-upyun.mircool.cn/blog/1785281128194401079.png)\n\n实战中可以让它按规范整理项目，比如：\n\n```\n/uniapp-standard-skill 帮我按照 storage 规范来整理项目，所有常量统一管理起来\n```\n\n![实战案例](https://goframe-blog-upyun.mircool.cn/blog/1785281128852746235.png)\n\n![实战效果](https://goframe-blog-upyun.mircool.cn/blog/1785281129851459473.png)\n\n![实战效果](https://goframe-blog-upyun.mircool.cn/blog/1785281131151843060.png)\n\n## 小结\n\nuniapp-standard-skill 解决的问题：10 个页面 10 种写法 → 统一目录结构和编码规范；AI 写代码放飞自我 → 20 条红线约束；接口写法各异 → 8 份文档详细指导；代码审查凭感觉 → 对照红线有理有据。\n\n这就是 VibeCoding 的魅力：**先定规范，再让 AI 干活**。建议项目开始前必看，做到一半也能用。","summary":"用 AI 写 uniapp 小程序最怕 10 个页面 10 种写法、变量乱起、颜色硬编码。这个 Skill 用 8 份规范文档（请求封装/Pinia/路由/性能/存储/埋点/组件通信/红线）+ 20 条红线规则约束 AI，先定规范再让 AI 干活。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1785281124879865103.jpg","categoryId":1,"isDraft":0,"viewCount":26,"createdAt":"2026-07-28 23:26:05","updatedAt":"2026-08-02 13:28:50"},{"id":95,"title":"AI 做 UI 设计必备的 49 个风格关键词","slug":"ui-design-style-keywords","content":"跟 AI 沟通设计风格时，\"简约风\"\"科技感\"\"高端大气\"这些词几乎没有区分度——就像跟设计师说\"帮我做好看点\"，他也不知道你要什么。\n\n但如果用精准的风格词，AI 的反应完全不同。说 **Neumorphism**（新拟态），AI 给出的是柔和光影、微凸按钮、低对比度浅色界面；说 **Brutalism**（粗野主义），AI 给出的是粗黑边框、原始排版、强冲击力视觉。这些英文风格词是 AI 已经\"学过\"的专业设计语言，写在提示词里，输出方向立刻精准。\n\n这 49 个词整理自开源项目 [ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)，原本是给程序员用 AI 写前端代码时做品控用的。按\"做设计时最可能遇到的场景\"分成 7 大类。\n\n---\n\n## 一、商务品牌｜干净专业\n\n适合企业官网、品牌手册、商务仪表盘。\n\n**1. Minimalism \u0026 Swiss Style（极简主义与瑞士风格）**\n网格对齐、无衬线字体、大量留白。视觉克制，信息层次靠字号和间距拉开。企业官网、后台仪表盘、文档工具天然带\"专业感\"。\n\n**2. Flat Design（扁平化设计）**\n去掉阴影、渐变、立体效果，纯色块加简洁图标。移动应用、网页端 MVP 最常用的风格，开发成本低，视觉统一度高。\n\n**3. Swiss Modernism 2.0（瑞士现代主义 2.0）**\n在经典瑞士风格基础上加入现代感——更灵活的网格、更丰富的字体搭配。企业官网、建筑事务所、编辑类页面用这个词，既有传统的严谨，又不会显得死板。\n\n\u003e 提示词：设计一个精品咖啡品牌的官方网站首页，风格采用 Swiss Modernism 2.0，网格布局严谨，字体层次清晰，配色以深棕色和奶白色为主，展示手冲咖啡产品线，high quality, modern, professional\n\n![精品咖啡品牌官网 - Swiss Modernism 2.0](https://goframe-blog-upyun.mircool.cn/blog/1785112908487827556.jpg)\n\n**4. Editorial Grid / Magazine（编辑网格与杂志风格）**\n模拟纸质杂志的排版逻辑——多栏混排、大标题、精致的图文穿插。做新闻资讯类网站、博客、品牌杂志感页面时，能拉开和普通网页的差距。\n\n![杂志风排版 - Editorial Grid](https://goframe-blog-upyun.mircool.cn/blog/1785112910279036719.jpg)\n\n\u003e 提示词：设计一个生活方式品牌的线上杂志首页，风格采用 Editorial Grid / Magazine，页面使用不等宽多栏网格混排，大标题用衬线字体加粗，正文用细体无衬线字体，图片穿插在文字块之间形成杂志级的图文节奏，配色以黑白为主搭配一个品牌强调色，editorial layout, typographic hierarchy, magazine aesthetic\n\n---\n\n## 二、质感高端｜让画面看起来值钱\n\n想让设计看起来\"贵\"，不是堆金色，而是用对视觉语言。\n\n**5. Glassmorphism（玻璃拟态风格）**\n半透明毛玻璃效果加模糊背景、柔和边框。苹果系视觉语言大量使用。金融产品、SaaS 仪表盘、高端电商用它，立刻有科技质感。\n\n\u003e 提示词：设计一个个人记账 App 的首页界面，风格采用 Glassmorphism，背景用深蓝到紫色的渐变，功能卡片呈半透明毛玻璃效果，边框带 1px 白色半透明描边，图标用细线条风格，frosted glass, translucent, modern UI\n\n![玻璃拟态 - Glassmorphism](https://goframe-blog-upyun.mircool.cn/blog/1785112911772798961.jpg)\n\n**6. Liquid Glass（液态玻璃风格）**\n比 Glassmorphism 更进一步——玻璃材质带有流动感、折射效果，像液态水晶。Apple 在 2025 年 WWDC 上发布的新设计语言就是这个方向。高端电商、奢侈品展示效果极好。\n\n\u003e 提示词：设计一个高端护肤品牌的产品详情页，风格采用 Liquid Glass，背景使用柔和的渐变色，产品卡片呈现液态玻璃质感，有光线折射效果，elegant, luxury, refined\n\n![液态玻璃 - Liquid Glass](https://goframe-blog-upyun.mircool.cn/blog/1785112913297382291.jpg)\n\n**7. Neumorphism（新拟态风格）**\n界面元素像是从背景里\"鼓\"出来的，靠柔和的光影制造立体感，整体色调统一。适合健康类应用、冥想平台、需要\"轻柔感\"的工具类产品。\n\n**8. Soft UI Evolution（柔和 UI 进化风格）**\nNeumorphism 的进化版——保留柔和质感，但提升了对比度和可读性。比纯新拟态更实用，适合真正要上线的企业级 SaaS 产品。\n\n**9. Dimensional Layering（维度分层风格）**\n通过阴影、层级、前后景关系制造空间深度。卡片式布局、弹窗系统、仪表盘用这个风格，信息层次一目了然。\n\n---\n\n## 三、潮流年轻｜Z 世代审美\n\n面向年轻用户的品牌、音乐平台、时尚内容，这组关键词最对口。\n\n**10. Y2K Aesthetic（Y2K 美学风格）**\n千禧年回潮——金属质感、未来主义字体、紫色/银色/粉色调。时尚品牌、音乐平台、Z 世代内容天然适配。\n\n\u003e 提示词：设计一个独立音乐厂牌的官网首页，风格采用 Y2K Aesthetic，使用金属银和荧光粉配色，字体带有未来感，融入千禧年复古元素，bold, edgy, nostalgic\n\n![Y2K 美学风格](https://goframe-blog-upyun.mircool.cn/blog/1785112915114897648.jpg)\n\n**11. Memphis Design（孟菲斯设计风格）**\n大胆的几何图形、不协调的色彩碰撞、充满趣味的排版。创意机构、音乐品牌、年轻消费品牌用起来特别跳。\n\n\u003e 提示词：设计一个潮玩盲盒品牌的官网首页，风格采用 Memphis Design，导航栏用不规则几何色块拼接，产品展示区大量使用三角形、波浪线、圆点等装饰元素穿插在卡片之间，配色用明黄、粉红、薄荷绿、亮蓝的高饱和撞色组合，playful, bold, colorful, web layout\n\n![孟菲斯设计风格](https://goframe-blog-upyun.mircool.cn/blog/1785112917503789118.jpg)\n\n**12. Neubrutalism（新粗野主义风格）**\n粗黑边框、纯色背景、故意\"不精致\"的排版，但整体很有结构感。Figma、Notion 的部分界面就是这个风格。Z 世代品牌、创业产品用它，立刻有辨识度。\n\n**13. Gen Z Chaos / Maximalism（Z 世代混乱极繁风格）**\n规则感被打破。文字叠图、拼贴、涂鸦、混搭——故意制造视觉混乱，反而有一种\"我不在乎\"的酷感。音乐艺人网站、Z 世代生活方式品牌常用。\n\n**14. Vaporwave（蒸汽波风格）**\n粉紫渐变、希腊石膏像、像素化元素、80 年代电子音乐氛围。音乐平台、游戏界面、个人作品集氛围感拉满。\n\n**15. Vibrant \u0026 Block-based（鲜艳色块风格）**\n大面积纯色色块拼接，视觉冲击力强。创业公司官网、创意机构、游戏产品喜欢用这种\"一屏抓住眼球\"的处理方式。\n\n![鲜艳色块风格](https://goframe-blog-upyun.mircool.cn/blog/1785112919623924899.jpg)\n\n\u003e 提示词：设计一个创意编程教育平台的课程列表页，风格采用 Vibrant \u0026 Block-based，页面用大面积纯色色块划分不同课程模块（亮橙、电光蓝、柠檬黄、薄荷绿），每个色块内包含课程标题和简介，色块之间无间距直接拼接，vivid, high-contrast, block layout\n\n---\n\n## 四、科技未来｜赛博朋克到太空科技\n\n科技产品、游戏界面、AI 应用，这组关键词把画面拉到\"未来\"。\n\n**16. Cyberpunk UI（赛博朋克界面）**\n霓虹色（青色、品红色）加深色背景、故障效果。游戏、加密货币产品、科技感落地页首选。\n\n\u003e 提示词：设计一个区块链数据分析平台的仪表盘界面，风格采用 Cyberpunk UI，深色背景搭配霓虹青色和品红色，数据图表带有发光效果，futuristic, neon, dark\n\n![赛博朋克界面](https://goframe-blog-upyun.mircool.cn/blog/1785112921676901123.jpg)\n\n**17. HUD / Sci-Fi FUI（HUD 科幻界面）**\n电影里的未来操控面板——半透明数据层、细线条图形、科幻仪表盘。做太空科技、网络安全产品、游戏 UI 时直接用这个词。\n\n\u003e 提示词：设计一个网络安全态势感知平台的监控大屏界面，风格采用 HUD / Sci-Fi FUI，深色背景上叠加半透明的六边形网格和细线条雷达扫描图，数据面板用圆弧形边框，实时威胁地图以全球地图线框形式呈现，sci-fi dashboard, holographic, tactical display\n\n![HUD 科幻界面](https://goframe-blog-upyun.mircool.cn/blog/1785112923244565621.jpg)\n\n**18. AI-Native UI（AI 原生界面）**\n专门为 AI 交互设计的界面语言——对话流、实时生成反馈、模块化输出区域。做 AI 产品、聊天机器人、Copilot 类工具，这个关键词能让 AI 生成符合主流 AI 产品的交互模式。\n\n\u003e 提示词：设计一个 AI 写作助手产品的工作台界面，风格采用 AI-Native UI，左侧为对话输入区，右侧为实时生成的内容输出区，底部有模型参数调节面板，关键交互元素用渐变紫色高亮，clean, functional, AI-first\n\n![AI 原生界面](https://goframe-blog-upyun.mircool.cn/blog/1785112924800702546.jpg)\n\n**19. Retro-Futurism（复古未来主义）**\n用过去想象未来的样子——60 年代太空时代的色彩和造型，加上现代科技元素。游戏、娱乐产品、音乐平台用起来很有味道。\n\n\u003e 提示词：设计一个复古主题电子音乐节的官网首页，风格采用 Retro-Futurism，首屏大图用 60 年代太空竞赛时期的圆润造型和原子时代配色（橘红、青绿、奶油白），导航栏模拟老式仪表盘旋钮，vintage space age, atomic era, retro web design\n\n![复古未来主义](https://goframe-blog-upyun.mircool.cn/blog/1785112928989839489.jpg)\n\n**20. Spatial UI VisionOS（空间界面风格）**\nApple Vision Pro 带火的风格——界面元素悬浮在空间中，半透明材质，三维交互逻辑。VR/AR 应用、空间计算产品直接对齐最新趋势。\n\n**21. Chromatic Aberration / RGB Split（色差与 RGB 分离风格）**\n文字或图形边缘出现红绿蓝的色彩偏移，制造数字故障感。音乐平台、游戏、科技产品拿来做首屏视觉，冲击力很强。\n\n---\n\n## 五、自然有机｜健康与可持续品牌\n\n环保品牌、健康产品、有机食品——这组关键词让画面自带\"天然感\"。\n\n**22. Organic Biophilic（有机亲自然风格）**\n自然材质纹理、植物元素、圆润有机的形状、大地色系。健康应用、可持续品牌用这个词，用户一看就觉得\"干净、安心\"。\n\n**23. Nature Distilled（自然提炼风格）**\n把自然界的色彩和形态提炼成极简的设计元素——不是直接放树叶照片，而是把\"自然\"抽象成配色和曲线。健康品牌、可持续产品用起来比直接放风景图高级。\n\n\u003e 提示词：设计一个有机护肤品牌的产品展示页，风格采用 Nature Distilled，从自然界提取抽象的色彩和曲线元素，配色以温暖大地色为主，排版留白充足，natural, pure, calming\n\n![自然提炼风格](https://goframe-blog-upyun.mircool.cn/blog/1785112931284971866.jpg)\n\n**24. Biomimetic / Organic 2.0（仿生有机 2.0）**\n模仿生物体的结构和运动方式——细胞形态的布局、呼吸感的动效、流体状的界面元素。生物科技、可持续科技、高端健康产品用这个风格。\n\n**25. E-Ink / Paper（电子墨水与纸张风格）**\n模拟电子墨水屏或纸张的质感——高对比度黑白、纸张纹理、极简排版。阅读类应用、数字报纸、强调\"内容至上\"的产品干净到极致。\n\n---\n\n## 六、创意艺术｜作品集与个人品牌\n\n设计师作品集、艺术项目、个人品牌网站——要的就是\"跟别人不一样\"。\n\n**26. Brutalism（粗野主义风格）**\n故意打破常规审美——粗糙的排版、原始的 HTML 质感、刺眼的颜色搭配。设计作品集、艺术项目拿来用，要的就是\"不讨好任何人\"的态度。\n\n**27. Anti-Polish / Raw Aesthetic（反精致原始风格）**\n故意留下粗糙痕迹——手写字体、未经裁剪的图片、不对齐的排版。跟 Brutalism 类似，但更偏向\"真实感\"和\"手工感\"。\n\n**28. Exaggerated Minimalism（夸张极简主义）**\n把极简推到极端——超大字体、极致留白、一屏只放一个信息。时尚品牌、建筑事务所、高端作品集用这个风格，\"少\"本身就是态度。\n\n\u003e 提示词：设计一个平面设计师的个人作品集网站首页，风格采用 Exaggerated Minimalism，超大无衬线标题字体，极致留白，一屏只展示一个作品，配色限制在黑白灰三色，bold typography, dramatic whitespace\n\n![夸张极简主义](https://goframe-blog-upyun.mircool.cn/blog/1785112932708357756.jpg)\n\n**29. Pixel Art（像素艺术风格）**\n8-bit 像素风格的视觉——复古游戏的审美回潮。独立游戏、复古风格工具、创意项目辨识度强烈。\n\n**30. Kinetic Typography（动态字体排版）**\n文字本身成为视觉主角——运动、变形、交互。营销首页、品牌发布会页面用这个词，文字不再只是\"被读的\"，而是\"被看的\"。\n\n**31. Parallax Storytelling（视差叙事风格）**\n随滚动产生层次错位的视差效果，像在讲一个有景深的故事。品牌故事页、产品发布页用这个关键词，页面滚动本身就成了体验。\n\n![视差叙事风格](https://goframe-blog-upyun.mircool.cn/blog/1785112934575215708.jpg)\n\n\u003e 提示词：设计一个精品茶叶品牌的品牌故事长页面，风格采用 Parallax Storytelling，页面分为\"茶山云雾—采摘手作—冲泡品鉴\"三个叙事段落，每段用全幅背景图配前景文字层，滚动时背景和前景以不同速率移动形成景深感，immersive scroll, layered depth, cinematic storytelling\n\n---\n\n## 七、功能导向与新兴形态｜解决具体设计难题\n\n这一组不是纯视觉风格，而是解决特定设计问题的方向。\n\n**32. Bento Box Grid（便当盒网格风格）**\n像日式便当一样的网格布局——大小不一的矩形模块整齐排列。Apple 的产品功能页就是这个风格。仪表盘、产品功能展示信息密度高但不杂乱。\n\n**33. Bento Grids（便当网格风格）**\n跟上面类似，但更强调响应式和灵活排列。产品功能页、数据面板、个人主页都适用。\n\n**34. Claymorphism（黏土拟态风格）**\n界面元素像用黏土捏出来的——圆润、柔和、有一点玩具感。教育类应用、儿童产品、需要\"友好感\"的 SaaS 产品适合。\n\n\u003e 提示词：设计一个少儿英语学习 App 的课程选择页面，风格采用 Claymorphism，所有按钮和卡片呈现黏土捏制的圆润立体感，配色用柔和的粉色、淡蓝、嫩绿等低饱和糖果色，角色图标带有 3D 黏土手办质感，soft 3D, clay texture, rounded, kid-friendly\n\n![黏土拟态风格](https://goframe-blog-upyun.mircool.cn/blog/1785112937417899920.jpg)\n\n**35. Aurora UI（极光界面风格）**\n背景呈现极光般的渐变色彩流动——紫色、青色、粉色交织。现代 SaaS 产品、创意机构官网用这个词，背景立刻有氛围感。\n\n\u003e 提示词：设计一个 AI 写真照片生成工具的官网定价页面，风格采用 Aurora UI，页面背景为深色基底上流动的极光渐变（紫色、青色、粉色交织），三个定价卡片用深色半透明材质悬浮在极光背景上，aurora glow, gradient background, SaaS pricing, modern dark\n\n![极光界面风格](https://goframe-blog-upyun.mircool.cn/blog/1785112939184710446.jpg)\n\n**36. Gradient Mesh / Aurora Evolved（渐变网格与进化极光风格）**\nAurora UI 的进阶版——更复杂的渐变网格、更丰富的色彩过渡。做首页大背景、创意页面的视觉打底，比说\"渐变背景\"精准得多。\n\n**37. Dark Mode OLED（OLED 深色模式）**\n纯黑背景加高对比度内容，专门为 OLED 屏幕优化。夜间模式应用、代码编辑器、需要\"沉浸感\"的产品用这个词，比普通深色模式更极致。\n\n\u003e 提示词：设计一个播客收听 App 的播放界面，风格采用 Dark Mode OLED，背景使用纯黑色（#000000），专辑封面居中悬浮并带有微弱的彩色光晕投射到黑色背景上，播放控制按钮用纯白细线图标，进度条使用单一亮色，true black, OLED optimized, high contrast, minimal glow\n\n![OLED 深色模式](https://goframe-blog-upyun.mircool.cn/blog/1785112941104758170.jpg)\n\n**38. Motion-Driven（动效驱动风格）**\n动效不是点缀，而是核心表达方式——页面逻辑靠动画推进。作品集网站、叙事型平台、需要引导用户注意力的页面适用。\n\n**39. Micro-interactions（微交互风格）**\n按钮点击时的细微反馈、滑动时的弹性动画、加载时的趣味等待——每个小交互都有\"小惊喜\"。移动应用、触屏界面用这个词体验感不同。\n\n**40. Interactive Cursor Design（交互式光标设计）**\n鼠标光标本身成为设计元素——跟随、变形、产生粒子效果。创意作品集、互动型页面的标配。\n\n**41. 3D \u0026 Hyperrealism（3D 与超写实风格）**\n三维渲染、真实材质、物理级光影。游戏界面、产品 3D 展示、沉浸式页面画面直接脱离\"平面\"。\n\n**42. 3D Product Preview（3D 产品预览）**\n产品可旋转、可交互的 3D 展示——电商、家具、时尚产品在网页上让用户\"转着看\"。\n\n**43. Skeuomorphism（拟物化设计）**\n界面元素模仿真实世界物体的质感——皮革纹理的笔记本、金属质感的按钮、木纹桌面。早期 iOS 的经典风格，用在复古类游戏或高端产品展示上别有味道。\n\n**44. Tactile Digital / Deformable UI（触感数字与可变形界面）**\n界面元素像有弹性一样可以被\"按压\"\"拉伸\"。现代移动应用、playful 品牌能让界面有\"手感\"。\n\n**45. Accessible \u0026 Ethical（无障碍与伦理设计）**\n高对比度、大字号、清晰的交互提示——确保所有人都能无障碍使用。政府网站、医疗平台、教育产品的基础要求。\n\n**46. Inclusive Design（包容性设计）**\n比无障碍更广——考虑不同年龄、能力、文化背景的用户需求。公共服务、教育、医疗领域的设计方向。\n\n**47. Zero Interface（零界面设计）**\n极端情况下，最好的界面就是没有界面——语音交互、手势控制、环境感知。语音助手、AI 平台的设计理念。\n\n**48. Voice-First Multimodal（语音优先多模态界面）**\n以语音为主要交互方式，同时支持视觉、触觉等多模态反馈。语音助手、无障碍应用的界面方向。\n\n**49. Vintage Analog / Retro Film（复古胶片与模拟风格）**\n胶片颗粒感、褪色色调、老式排版——一切都在模拟\"模拟时代\"的视觉。摄影品牌、音乐平台、黑胶唱片品牌的视觉语言。\n\n---\n\n## 怎么用：3 步把风格词变成精准出图\n\n**第一步：确定氛围。** 从 7 个大类里找到方向。商务品牌选第一类，年轻潮流选第三类，科技产品选第四类。\n\n**第二步：选 1-2 个风格词放进提示词。** 不要贪多，1 个主风格 + 1 个辅助风格就够。比如：\n\n- 高端咖啡品牌 → Glassmorphism + Minimalism\n- 独立游戏官网 → Pixel Art + Cyberpunk UI\n- 有机食品品牌 → Nature Distilled + Soft UI Evolution\n\n**第三步：英文关键词放在提示词末尾。** 格式模板：\n\n\u003e 设计一个[产品类型]的[页面类型]，风格采用[风格英文词]，[具体视觉描述]，[英文品质关键词如 high quality, professional, modern]\n\n---\n\n## 速查表：49 个风格关键词一览\n\n| 编号 | 中文名 | 英文关键词 | 适合场景 |\n| --- | --- | --- | --- |\n| 1 | 极简主义与瑞士风格 | Minimalism \u0026 Swiss Style | 企业、仪表盘 |\n| 2 | 新拟态风格 | Neumorphism | 健康、冥想 |\n| 3 | 玻璃拟态风格 | Glassmorphism | SaaS、金融 |\n| 4 | 粗野主义风格 | Brutalism | 作品集、艺术 |\n| 5 | 3D 与超写实风格 | 3D \u0026 Hyperrealism | 游戏、产品展示 |\n| 6 | 鲜艳色块风格 | Vibrant \u0026 Block-based | 创业、创意 |\n| 7 | OLED 深色模式 | Dark Mode OLED | 夜间、代码 |\n| 8 | 无障碍与伦理设计 | Accessible \u0026 Ethical | 政府、医疗 |\n| 9 | 黏土拟态风格 | Claymorphism | 教育、儿童 |\n| 10 | 极光界面风格 | Aurora UI | SaaS、创意 |\n| 11 | 复古未来主义 | Retro-Futurism | 游戏、娱乐 |\n| 12 | 扁平化设计 | Flat Design | 网页、移动 |\n| 13 | 拟物化设计 | Skeuomorphism | 复古、高端 |\n| 14 | 液态玻璃风格 | Liquid Glass | 高端 SaaS、电商 |\n| 15 | 动效驱动风格 | Motion-Driven | 作品集、叙事 |\n| 16 | 微交互风格 | Micro-interactions | 移动、触屏 |\n| 17 | 包容性设计 | Inclusive Design | 公共、教育 |\n| 18 | 零界面设计 | Zero Interface | 语音、AI |\n| 19 | 柔和 UI 进化风格 | Soft UI Evolution | 企业、SaaS |\n| 20 | 新粗野主义风格 | Neubrutalism | Z 世代、创业 |\n| 21 | 便当盒网格风格 | Bento Box Grid | 仪表盘、作品集 |\n| 22 | Y2K 美学风格 | Y2K Aesthetic | 时尚、音乐 |\n| 23 | 赛博朋克界面 | Cyberpunk UI | 游戏、加密 |\n| 24 | 有机亲自然风格 | Organic Biophilic | 健康、可持续 |\n| 25 | AI 原生界面 | AI-Native UI | AI 产品、Copilot |\n| 26 | 孟菲斯设计风格 | Memphis Design | 创意、年轻 |\n| 27 | 蒸汽波风格 | Vaporwave | 音乐、游戏 |\n| 28 | 维度分层风格 | Dimensional Layering | 仪表盘、卡片 |\n| 29 | 夸张极简主义 | Exaggerated Minimalism | 时尚、建筑 |\n| 30 | 动态字体排版 | Kinetic Typography | 首屏、营销 |\n| 31 | 视差叙事风格 | Parallax Storytelling | 品牌故事、发布 |\n| 32 | 瑞士现代主义 2.0 | Swiss Modernism 2.0 | 企业、编辑 |\n| 33 | HUD 科幻界面 | HUD / Sci-Fi FUI | 科幻、安全 |\n| 34 | 像素艺术风格 | Pixel Art | 独立游戏、复古 |\n| 35 | 便当网格风格 | Bento Grids | 产品页、主页 |\n| 36 | 空间界面风格 | Spatial UI VisionOS | VR、AR |\n| 37 | 电子墨水与纸张风格 | E-Ink / Paper | 阅读、报纸 |\n| 38 | Z 世代混乱极繁风格 | Gen Z Chaos / Maximalism | Z 世代、音乐 |\n| 39 | 仿生有机 2.0 | Biomimetic / Organic 2.0 | 生物科技、健康 |\n| 40 | 反精致原始风格 | Anti-Polish / Raw Aesthetic | 作品集、艺术 |\n| 41 | 触感数字与可变形界面 | Tactile Digital / Deformable UI | 移动应用 |\n| 42 | 自然提炼风格 | Nature Distilled | 健康、可持续 |\n| 43 | 交互式光标设计 | Interactive Cursor Design | 作品集、互动 |\n| 44 | 语音优先多模态界面 | Voice-First Multimodal | 语音助手 |\n| 45 | 3D 产品预览 | 3D Product Preview | 电商、家具 |\n| 46 | 渐变网格与进化极光 | Gradient Mesh / Aurora Evolved | 首屏、背景 |\n| 47 | 编辑网格与杂志风格 | Editorial Grid / Magazine | 新闻、博客 |\n| 48 | 色差与 RGB 分离风格 | Chromatic Aberration / RGB Split | 音乐、游戏 |\n| 49 | 复古胶片与模拟风格 | Vintage Analog / Retro Film | 摄影、音乐 |\n\n---\n\n下次用 AI 生成设计前，先查一下目标风格对应的英文关键词——一个精准的词，比一百字的中文描述管用。\n","summary":"按商务品牌、质感高端、潮流年轻、科技未来、自然有机、创意艺术、功能导向 7 大类整理的 49 个 UI 设计风格英文关键词，每个标注中文含义、视觉特征和适用场景，附提示词模板。用 AI 生成 UI 时把对应英文词写进提示词，比\"简约风\"\"科技感\"这类模糊描述精准得多。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1785112906336619424.jpg","categoryId":5,"isDraft":0,"viewCount":34,"createdAt":"2026-07-27 00:43:56","updatedAt":"2026-08-03 19:23:51"},{"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":83,"createdAt":"2026-07-10 09:39:48","updatedAt":"2026-08-02 13:04:38"},{"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":102,"createdAt":"2026-07-06 00:05:31","updatedAt":"2026-08-03 19:21:20"},{"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":98,"createdAt":"2026-07-01 07:02:11","updatedAt":"2026-08-03 17:18:55"},{"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":91,"createdAt":"2026-07-01 00:01:33","updatedAt":"2026-08-03 17:29:04"},{"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":116,"createdAt":"2026-06-23 22:59:44","updatedAt":"2026-08-03 02:56: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":116,"createdAt":"2026-06-22 00:04:26","updatedAt":"2026-08-03 20:20:32"},{"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":242,"createdAt":"2026-06-11 23:30:08","updatedAt":"2026-08-03 14:57:20"},{"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":198,"createdAt":"2026-06-02 12:38:46","updatedAt":"2026-08-03 07:17:56"},{"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":191,"createdAt":"2026-06-01 22:48:47","updatedAt":"2026-08-03 19:58:39"},{"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":193,"createdAt":"2026-05-28 00:51:14","updatedAt":"2026-08-03 20:21:47"},{"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":246,"createdAt":"2026-05-22 14:53:27","updatedAt":"2026-08-03 21:17:16"},{"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":187,"createdAt":"2026-05-22 13:14:35","updatedAt":"2026-08-03 20:29:07"},{"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":201,"createdAt":"2026-05-22 04:41:43","updatedAt":"2026-08-03 17:06:33"},{"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":210,"createdAt":"2026-05-19 15:18:44","updatedAt":"2026-08-03 12:59:45"},{"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":269,"createdAt":"2026-05-14 08:40:20","updatedAt":"2026-08-03 16:30:57"},{"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":416,"createdAt":"2026-05-14 04:36:51","updatedAt":"2026-08-03 20:39:06"},{"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":220,"createdAt":"2026-05-13 06:14:51","updatedAt":"2026-08-03 19:50:03"}],"title":"凌风 Blog","version":"https://jsonfeed.org/version/1"}