{"author":{"name":"凌风"},"description":"A personal blog built with GoFrame","feed_url":"https://mircool.cn/feed","home_page_url":"https://mircool.cn","items":[{"id":102,"title":"让UI界面更好看的秘诀","slug":"让ui界面更好看的秘诀","content":"在 X 上刷到这个，可以避免 AI Slop 并且让 UI 界面更好看的秘诀。\r\n\r\n试了一下挺好用的，在AGENTS.md 里加上 “Avoid unnecessary secondary labels and descriptions. Let the layout do the explaining.”\r\n\r\n大家快去试试！\r\n\r\n![Zihua @luinlee 的 X 帖子](https://goframe-blog-upyun.mircool.cn/blog/1793318255528104133.png)\r\n\r\n![Zihua @luinlee 的补充说明](https://goframe-blog-upyun.mircool.cn/blog/1793318258306559209.png)\r\n\r\n","summary":"在 X 上刷到这个，可以避免 AI Slop 并且让 UI 界面更好看的秘诀。\r \r 试了一下挺好用的，在AGENTS.md 里加上 “Avoid unnecessary secondary labels and descriptions. Let the layout do the explaining.”\r \r 大家快去试试！\r \r Zihua @luinlee 的 X 帖子https://g...","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1793318255528104133.png","categoryId":1,"isDraft":0,"viewCount":26,"createdAt":"2026-10-29 23:58:44","updatedAt":"2026-11-02 12:06:10"},{"id":101,"title":"Finesse UI：拒绝廉价的高级界面","slug":"finesse-ui-skill","content":"AI 做页面最常烂在两头：落地页千篇一律的紫辉玻璃卡，后台仪表盘又一套「默认蓝 + Inter」。[finesse-skill](https://github.com/mouse-lin/finesse-skill)（主 skill 名 **finesse-ui**）专治这个——给 Agent 一套 **绝不廉价** 的高级界面方法论：**品牌惊艳 + 产品精密**，按 **register** 分流，而不是所有页面套同一套模板。\n\n本文是纯 **skill 教学**：怎么安装、怎么开口、Design Read 怎么确认、不满意怎么「指着改」。官方给人看的清单是仓库里的 [USAGE.md](https://github.com/mouse-lin/finesse-skill/blob/main/USAGE.md)；本文把它压缩成可操作的接入笔记。路径示例以 Cursor 为主，同一仓库也支持 Claude Code / Codex / Copilot / Trae 等。\n\n---\n\n## 这是什么（先分清）\n\n| 概念 | 是什么 | 不是什么 |\n|---|---|---|\n| **finesse-ui skill** | Agent 读的 `SKILL.md` + `references/` + `examples/` | 不是一键换主题插件 |\n| **register** | `brand` / `product` / `commerce` 三条设计路线 | 不是「深色模式开关」 |\n| **Design Read** | 写代码前一句方向判断，**要等你确认** | 不是可跳过的客套话 |\n| **PRODUCT.md** | 多页项目的长期 brief（风格/禁区锁定） | 不是必须每个单页都写 |\n\nSkill 教 Agent「先读 brief、分流、再动手」；页面好不好看，仍取决于你是否确认方向、是否用命令做定向修改。\n\n---\n\n## 效果说明\n\n| 项 | 说明 |\n|---|---|\n| 适用 | Cursor / Claude Code / Codex / Copilot / Trae 等（本文以 **Cursor** 为主） |\n| 官方仓库 | [github.com/mouse-lin/finesse-skill](https://github.com/mouse-lin/finesse-skill) |\n| 项目路径 | `.cursor/skills/finesse-ui/`（完整 skill）；可选 `.cursor/rules/finesse-ui.mdc` |\n| 自动触发 | 「用 finesse…」「高端落地页」「仪表盘别廉价」等自然语言 |\n| 主动触发 | 对话里附件 skill，或说「按 finesse-ui」；部分环境也写 `/finesse` |\n| 核心流程 | Design Read → 确认 → 铺 substrate → brand 造 hero 引擎 / product 走组件+数据可视化 → 反廉价 + preflight |\n\n---\n\n## 1. 安装到 Cursor 项目\n\n推荐用跨 Agent 的 skills CLI：\n\n```bash\n# 仓库里的 finesse-ui\nnpx skills add https://github.com/mouse-lin/finesse-skill --skill \"finesse-ui\"\n```\n\n或安装该仓库暴露的全部 skill：\n\nTerminal window\n\n```bash\nnpx skills add https://github.com/mouse-lin/finesse-skill\n```\n\nCLI 可能先写到 `.agents/skills/`。**Cursor 实际扫描的是项目下的 `.cursor/skills/`**。若装完只在 `.agents` 里，拷一份过去即可：\n\nTerminal window\n\n```powershell\nCopy-Item \".\\.agents\\skills\\finesse-ui\" \".\\.cursor\\skills\\finesse-ui\" -Recurse -Force\n```\n\n只用 Cursor 时，可删掉重复的 `.agents` 份，避免两套分叉。\n\n### 1.1 Cursor Rules（可选）\n\n官方还提供精简规则文件，编辑 HTML/CSS/JS/TS/Vue/Svelte 时可自动带上：\n\nTerminal window\n\n```bash\n# 从官方仓库拿到后\ncp .cursor/rules/finesse-ui.mdc your-project/.cursor/rules/\n```\n\nRules 偏「提醒」；**完整深度**在 `SKILL.md` + `references/`。做认真的 brand/product 活，建议 skill 目录完整保留。\n\n### 1.2 装完后\n\n**新开一轮 Agent 对话**，再说「用 finesse 做一个…」，更容易稳定加载。\n\n---\n\n## 2. 三条路线（register）——开口第一句说清\n\n| 类型 | 是什么 | 例子 | 思路 |\n|---|---|---|---|\n| **brand** | 设计本身就是产品 | 落地页、品牌站、发布页、作品集、行业 hero | 惊艳 + 第一印象；一个真正的视觉引擎（Three.js / Canvas / GSAP / CSS） |\n| **product** | 设计服务产品 | 仪表盘、admin、analytics、设置 | 清晰 + 密度；组件系统 + 图表；**不要**把 grain / 巨型标题硬套进后台 |\n| **commerce** | 卖东西 | PDP / PLP / 购物车 / 结算 | 卖单品偏 brand；列表筛选偏 product |\n\n不确定可以说：「说不好是展示型还是工具型」——skill 会反问一句，而不是瞎猜。\n\n配 **1–2 个感觉词**即可（「安静高级」「有冲击力」「克制的编辑感」）。词堆太多会互相打架。\n\n内部会映射到三旋钮：\n\n| 旋钮 | 含义 |\n|---|---|\n| **SOUL** | 风格辨识度 |\n| **SPECTACLE** | 视觉炫技程度（product 默认压低） |\n| **DENSITY** | 信息密度（product 默认拉高） |\n\n---\n\n## 3. Design Read：先确认，再写码\n\n动手前会先出一句判断，例如：\n\n```text\nDesign Read: 深空天文 · 电影感 + 敬畏 · register=brand · SPECTACLE=8 · hero-engine=Three.js 粒子星系\n```\n\n你三种回法：\n\n- **「可以，继续」/ go ahead** → 才开始写代码\n\n- **指错方向**（「太科技了，要更暖」）→ 重出 Design Read，不硬写一整页\n\n- **补充约束**（「主要给老年用户」）→ 纳入后再确认\n\n跳过确认直接「随便你定」也能跑，但方向错了返工成本远高于多花十秒。\n\n---\n\n## 4. 命令式迭代（指着改，别整页重做）\n\n| 你可以说 | 命令感 | 效果 |\n|---|---|---|\n| 「太素了 / 更有冲击力」 | `bolder` | SPECTACLE +2，必要时升引擎 |\n| 「太花哨 / 太吵」 | `quieter` | SPECTACLE −2，减到 GSAP / CSS |\n| 「感觉不对 / 太千篇一律」 | `soul` | 换风格人格 |\n| 「太空了 / 太挤了」 | `densify` | 调信息密度 |\n| 「加个 3D / 悬停质感」 | `depth` | **一个** 3D 时刻（倾斜/翻转/视差等） |\n| 「换个动画」 | `animate` | 只换引擎类型 |\n| 「帮我看看好不好」 | `audit` | **只读**诊断，不改代码 |\n| 「这页升级一下」 | `redesign` | 先审计再改，不是盲目重建 |\n| 「从零做一整页」 | `craft` | 完整流程（默认） |\n| 多页要统一 | `init` / `document` | 写 `PRODUCT.md` 或从现有代码抽 `design-model.yaml` |\n\n自然语言会映射到这些命令；也可以写「`/finesse quieter xxx`」这种明确动词。反馈尽量具体到区域：「hero 标题太小」比「感觉不太好」准一个数量级。\n\n---\n\n## 5. 多页项目：锁住气质\n\n单页可跳过。官网 + 后台 + 落地页，或长期同一产品，开工前说：\n\n\u003e 「这几个页面要保持一致」/「先建项目规范，后面都照这个来」\n\nAgent 可写入：\n\n- **`PRODUCT.md`** — 行业、用户、人格、锁定旋钮、反参考（绝对不要像什么）\n\n- **`design-model.yaml`** — 更具体的色/字/圆角/间距\n\n已有代码库可以说「看看现在是什么设计系统」——走 `document`，从现码反推，而不是另起一套。\n\n---\n\n## 6. 和 UI/UX Pro Max、GSAP 的分工\n\n| Skill | 更擅长 |\n|---|---|\n| **finesse-ui** | register 分流、反廉价、brand hero 引擎、product 组件语法、定向命令（bolder/audit…） |\n| **ui-ux-pro-max** | 大规模风格/配色/字体 CSV 检索、`--design-system` 草稿 |\n| **gsap-*** | 动效 API、ScrollTrigger、Svelte 生命周期写法 |\n\n可同时挂上：finesse 定方向与禁区，ui-ux-pro-max 补材料库，GSAP 管「怎么动得对」。已有品牌令牌时，外部推荐色只能参考，不能无脑盖掉项目规范。\n\n---\n\n## 7. 目录结构（装好后该长什么样）\n\n```text\n.cursor/skills/finesse-ui/\n├── SKILL.md                 # 主流程（方法论 + 命令路由）\n├── USAGE.md                 # 给人看的使用清单（官方）\n├── references/              # 按阶段按需加载，不要一次全塞进上下文\n│   ├── design-dna.md        # brand 物理层\n│   ├── hero-engines.md      # 五类 hero 引擎\n│   ├── 3d-effects.md\n│   ├── style-personas.md\n│   ├── anti-cheap.md\n│   ├── product-ui.md\n│   ├── product-palettes.md\n│   ├── workflow-ui.md\n│   ├── dataviz.md\n│   ├── preflight.md\n│   ├── redesign-mode.md\n│   └── …\n└── examples/                # 正例 HTML（只读参考，抄结构不抄整站）\n```\n\n`references` 是深度材料：brand 铺 substrate 时读 `design-dna`；仪表盘写之前先看 `examples/EXAMPLES.md` 找最近正例，再读 `product-ui` / `product-palettes`。\n\n---\n\n## 8. 三个最短对话范例\n\n**Brand 落地页**\n\n```text\n你：给精品咖啡烘焙做落地页，暖调复古\nAgent：Design Read: … register=brand · SPECTACLE=5 · …\n你：可以，继续 → 出整页\n你：hero 太素 → bolder 只抬炫技\n你：audit 看看 → 只出问题清单，你点名再改\n```\n\n**Product 监控台**\n\n```text\n你：运维基础设施监控仪表盘，深色\nAgent：Design Read: … register=product · SPECTACLE=2 …\n你：可以 → 侧栏 + 图表 + 表\n你：图表太挤 → densify 反向拉开\n你：监控/告警/设置要统一 → init / design-model\n```\n\n**Commerce PDP**\n\n```text\n你：旗舰耳机详情页，要有质感\nAgent：Design Read: … commerce(PDP 偏 brand) …\n你：购买按钮不够醒目 → 只加 CTA 权重\n```\n\n---\n\n## 9. 排障\n\n| 现象 | 处理 |\n|---|---|\n| Agent 当普通写码、不先 Design Read | 新开对话；说「按 finesse-ui，先给 Design Read」或附件该 skill |\n| 装了但 Cursor 不认 | 确认在 `.cursor/skills/finesse-ui/SKILL.md`，不是只在 `.agents` |\n| 仪表盘也做成落地页大 grain | 开口明确 **product / 后台 / dashboard**；SPECTACLE 应偏低 |\n| SPECTACLE≥7 却只有渐变光球 | skill 视为失败；要么真上引擎，要么降 SPECTACLE 走精做静态 |\n| 一改就整页重做 | 用表格里的意图词（太素/太吵/audit），避免「全部重做」 |\n| 多页配色乱跑 | 先 `init`/`document` 锁 `PRODUCT.md` / `design-model.yaml` |\n\n---\n\n## 10. 一页纸速查\n\n| 想要… | 说… |\n|---|---|\n| 新页面 | 页面类型 + 1–2 个感觉词 |\n| 更炫 / 更静 | 「太素了」/「太花哨」 |\n| 换调性 | 「感觉不对」 |\n| 加/减密度 | 「太空了」/「太挤了」 |\n| 加 3D | 「加一个 3D 效果」 |\n| 交付前检查 | 「帮我检查」/`audit` |\n| 多页一致 | 「保持同一套风格」 |\n\n---\n\n## 参考链接\n\n- 仓库：[mouse-lin/finesse-skill](https://github.com/mouse-lin/finesse-skill)\n\n- 给人看：[USAGE.md](https://github.com/mouse-lin/finesse-skill/blob/main/USAGE.md) · [英文 USAGE](https://github.com/mouse-lin/finesse-skill/blob/main/USAGE.en.md)\n\n- 说明：[README.md](https://github.com/mouse-lin/finesse-skill/blob/main/README.md)\n\n---\n\n## 小结\n\n- `npx skills add https://github.com/mouse-lin/finesse-skill --skill \"finesse-ui\"`，落到 **`.cursor/skills/finesse-ui`**\n\n- 开口先说清 **brand / product / commerce** + 少量感觉词\n\n- **确认 Design Read** 再写码；迭代用意图命令，别整页重来\n\n- 多页先锁 **PRODUCT.md**；交付前 **audit** 只读诊断\n\n你不需要通读几千行 `SKILL.md`——那是给 Agent 的；你要的是这份使用节奏与官方 [USAGE.md](https://github.com/mouse-lin/finesse-skill/blob/main/USAGE.md) 同一套。","summary":"finesse-skill 接入笔记：brand / product / commerce 三条路线分流、Design Read 先确认再写码、bolder/quieter/audit 等命令式迭代，以及多页项目锁气质的方法。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1792110217365224476.jpg","categoryId":1,"isDraft":0,"viewCount":98,"createdAt":"2026-10-16 00:23:38","updatedAt":"2026-11-02 01:45:52"},{"id":100,"title":"前端网页设计风格参考 2","slug":"web-design-style-reference-2","content":"包豪斯风格是挺常见的设计手法。如果是做商品的网站设计，P3 那张卡里的几个风格会比较适合。\n\n这一辑是「前端网页设计风格参考」的第二组，接着编号排到 05–08，共 20 种网页风格，每张卡 5 种。\n\n![前端网页设计风格参考 05](https://goframe-blog-upyun.mircool.cn/blog/1790727316822410763.png)\n\n## 参考 05\n\n- **Bauhaus 包豪斯风** — 几何构成、原色块、模块化布局\n- **Memphis 孟菲斯风** — 趣味活泼、大胆配色、图形图案\n- **Material Design 材料设计风** — 简洁清晰、层次分明、组件化系统\n- **Terminal UI 程序员终端风** — 代码氛围、极简专注、强大高效\n- **Dashboard 数据看板风** — 数据分析、数据驱动、清晰洞察\n\n![前端网页设计风格参考 06](https://goframe-blog-upyun.mircool.cn/blog/1790727336331090783.png)\n\n## 参考 06\n\n- **Claymorphism 黏土拟物风** — 柔软质感、立体圆润、亲和友好\n- **Isometric 等距插画风** — 结构清晰、信息有序、场景丰富\n- **Organic Shapes 有机曲线风** — 自然流动、柔和曲线、以人为中心\n- **Gradient Mesh 渐变网格风** — 丰富色彩、沉浸画面、富有表现力\n- **Monoline Illustration 线描插画风** — 简洁线条、清晰易读、亲切友好\n\n![前端网页设计风格参考 07](https://goframe-blog-upyun.mircool.cn/blog/1790727356298806740.png)\n\n## 参考 07\n\n- **Luxury Minimal 奢华极简风**\n- **Japandi 日式侘寂风** — 让生活回归本真\n- **Eco / Nature 自然生态风** — 与自然共生\n- **Monochrome Photography 黑白摄影排版风**\n- **Abstract Geometry 抽象几何风**\n\n![前端网页设计风格参考 08](https://goframe-blog-upyun.mircool.cn/blog/1790727376901109371.png)\n\n## 参考 08\n\n- **Scrollytelling 叙事滚动风** — 去看更大的世界\n- **Split Screen 分屏构成风** — 打破边界的创意\n- **Fashion Editorial 时尚大片风** — 当代女性的多重可能\n- **Low-poly 3D 低多边形 3D 风** — 小小行动，让地球更好\n- **Experimental Typography 实验字体风**\n\n如果有人需要，这套参考也可以整理成一个开源 skill，让大模型去抽卡——说不定你抽出来的比原版还好看。\n","summary":"第二组网页设计风格参考，编号 05–08：包豪斯、孟菲斯、黏土拟物、等距插画、奢华极简、日式侘寂、叙事滚动、时尚大片等 20 种风格。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1790727305035738740.jpg","categoryId":1,"isDraft":0,"viewCount":127,"createdAt":"2026-09-30 00:20:33","updatedAt":"2026-11-02 19:51:54"},{"id":99,"title":"AI时代，你也能画出妙趣横生的成语漫画","slug":"ai-chengyu-ink-comics","content":"画蛇添足、掩耳盗铃、刻舟求剑……中国成语里有一批特别荒诞的故事。如果把它们画成漫画，会是什么样？\n\n给 ChatGPT 一段提示词，大约十分钟就能画出一整套水墨成语漫画。风格介于简笔画、水墨和蔡志忠之间，荒诞，也还耐看。\n\n![成语里的荒诞人生](https://goframe-blog-upyun.mircool.cn/blog/1789176650498272859.jpg)\n\n## 部分成语漫画\n\n![画蛇添足](https://goframe-blog-upyun.mircool.cn/blog/1789176650983208471.jpg)\n\n![掩耳盗铃](https://goframe-blog-upyun.mircool.cn/blog/1789176651720898650.jpg)\n\n![自相矛盾](https://goframe-blog-upyun.mircool.cn/blog/1789176652819213505.jpg)\n\n![买椟还珠](https://goframe-blog-upyun.mircool.cn/blog/1789176653833979794.jpg)\n\n![邯郸学步](https://goframe-blog-upyun.mircool.cn/blog/1789176655292660414.jpg)\n\n![东施效颦](https://goframe-blog-upyun.mircool.cn/blog/1789176656120235087.jpg)\n\n![叶公好龙](https://goframe-blog-upyun.mircool.cn/blog/1789176657307794979.jpg)\n\n![南辕北辙](https://goframe-blog-upyun.mircool.cn/blog/1789176658059957651.jpg)\n\n![对牛弹琴](https://goframe-blog-upyun.mircool.cn/blog/1789176658561730575.jpg)\n\n![揠苗助长](https://goframe-blog-upyun.mircool.cn/blog/1789176659339593016.jpg)\n\n![抱薪救火](https://goframe-blog-upyun.mircool.cn/blog/1789176660543885905.jpg)\n\n![指鹿为马](https://goframe-blog-upyun.mircool.cn/blog/1789176661184024480.jpg)\n\n![一叶障目](https://goframe-blog-upyun.mircool.cn/blog/1789176662243811189.jpg)\n\n![刻舟求剑](https://goframe-blog-upyun.mircool.cn/blog/1789176663647703505.jpg)\n\n![杯弓蛇影](https://goframe-blog-upyun.mircool.cn/blog/1789176664375732298.jpg)\n\n![削足适履](https://goframe-blog-upyun.mircool.cn/blog/1789176665260208992.jpg)\n\n![守株待兔](https://goframe-blog-upyun.mircool.cn/blog/1789176665773559365.jpg)\n\n![滥竽充数](https://goframe-blog-upyun.mircool.cn/blog/1789176666330149952.jpg)\n\n## 提示词\n\n整套漫画用的就是下面这段。换一批成语、换一种风格，也能自己跑一套。\n\n    表现中国古代的各种滑稽和矛盾的成语，生成30张。比例：16:9. 主题：用[极简线条/简笔画 + 水墨 + 蔡志忠漫画 ]风格，配合风趣幽默的方式，解释{成语} ； 负空间的合适位置用行书撰写{成语}，这里的成语包括画蛇添足、掩耳盗铃、刻舟求剑、削足适履、杯弓蛇影、自相矛盾。\n","summary":"一段提示词，十分钟画出一套水墨成语漫画。画蛇添足、掩耳盗铃、刻舟求剑……蔡志忠味道的荒诞图解。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1789176649476082960.jpg","categoryId":1,"isDraft":0,"viewCount":219,"createdAt":"2026-09-12 01:33:09","updatedAt":"2026-11-02 04:00:17"},{"id":98,"title":"img2threejs：扔进去一张图，直接变成可交互的 3D 模型","slug":"img2threejs-skill","content":"前段时间一个叫 img2threejs 的 Skill 很火——扔进去一张图，直接变成可交互的 Three.js 3D 模型。先看看各路大神用它做出来的成品效果，非常惊艳。\n\n![大神作品1](https://goframe-blog-upyun.mircool.cn/blog/1786498105302549421.gif)\n\n![大神作品2](https://goframe-blog-upyun.mircool.cn/blog/1786498137004282922.gif)\n\n来源 @Sac 的这些效果也很棒：\n\n![Sac作品1](https://goframe-blog-upyun.mircool.cn/blog/1786498171993027918.gif)\n\n![Sac作品2](https://goframe-blog-upyun.mircool.cn/blog/1786498206837644781.gif)\n\n来源 @Givros 的自行车也不错：\n\n![Givros自行车](https://goframe-blog-upyun.mircool.cn/blog/1786498265209338902.gif)\n\n下面这些来自官方案例：\n\n![官方案例1](https://goframe-blog-upyun.mircool.cn/blog/1786498292476094598.gif)\n\n![官方案例2](https://goframe-blog-upyun.mircool.cn/blog/1786498325198630755.gif)\n\n## 怎么用\n\n怎么下载这个 Skill？直接发名字让 AI（Codex）下载就行。\n\n测试时发了一张赛车主图和 6 视图给 Codex（图都是 GPT 生成的），调用 Skill 并配合一段详细的提示词，核心要求是：不是制作低精度示意模型，而是尽可能还原参考图中的轮廓、比例、结构层次、材质差异。\n\n![测试输入](https://goframe-blog-upyun.mircool.cn/blog/1786498351973501174.png)\n\n提示词的关键点包括：建模前先判断主体类型、视角和结构复杂度，建立 detail inventory 列出关键细节（倒角、接缝、面板、螺丝、按钮、金属与塑料区域、透明发光部件），复合物体要拆成独立组件，分别设置金属度、粗糙度、透明度和发光通道，还要提供 OrbitControls、自动旋转、重置视角和响应式构图。\n\n![提示词执行](https://goframe-blog-upyun.mircool.cn/blog/1786498355275587310.png)\n\n## 实测效果\n\n![生成效果](https://goframe-blog-upyun.mircool.cn/blog/1786498358809435721.gif)\n\n效果跟原图对比差距还是比较大的，跟大神作品之间差距太大。可能还需要不断打磨，不是能一步到位的。\n\n![最终对比](https://goframe-blog-upyun.mircool.cn/blog/1786498391177746627.png)\n\n## 小结\n\n这个 Skill 挺有意思，适合把一些平面产品图快速转化成更有展示感的 3D 效果。不过目前的还原度和细节表现还有提升空间，想要达到理想效果可能需要多试几次，换一些结构更清晰、细节没那么复杂的图片。","summary":"img2threejs Skill 把一张图直接变成可交互的 Three.js 3D 模型。大神作品惊艳，但实测还原度跟原图差距较大，适合结构清晰的平面产品图转 3D 展示。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1786498102239381125.jpg","categoryId":1,"isDraft":0,"viewCount":271,"createdAt":"2026-08-12 01:34:24","updatedAt":"2026-11-02 07:05:13"},{"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":462,"createdAt":"2026-07-31 06:11:19","updatedAt":"2026-11-02 11:29:13"},{"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":205,"createdAt":"2026-07-28 23:26:05","updatedAt":"2026-11-01 07:55:31"},{"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":388,"createdAt":"2026-07-27 00:43:56","updatedAt":"2026-11-02 11:22:21"},{"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":312,"createdAt":"2026-07-10 09:39:48","updatedAt":"2026-11-02 01:43:01"},{"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":483,"createdAt":"2026-07-06 00:05:31","updatedAt":"2026-11-02 01:56:27"},{"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":357,"createdAt":"2026-07-01 07:02:11","updatedAt":"2026-11-02 17:10:13"},{"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":365,"createdAt":"2026-07-01 00:01:33","updatedAt":"2026-11-02 16:22:44"},{"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":402,"createdAt":"2026-06-23 22:59:44","updatedAt":"2026-11-02 12:20:11"},{"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":251,"createdAt":"2026-06-22 00:04:26","updatedAt":"2026-11-02 06:34:12"},{"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":636,"createdAt":"2026-06-11 23:30:08","updatedAt":"2026-11-02 03:08:10"},{"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":315,"createdAt":"2026-06-02 12:38:46","updatedAt":"2026-11-02 09:32:44"},{"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":395,"createdAt":"2026-06-01 22:48:47","updatedAt":"2026-11-02 08:24:07"},{"id":84,"title":"guizang-social-card-skill：3:4 竖图版式 Skill","slug":"guizang-social-card-skill","content":"\u003e 3:4 竖图是图文卡片的主战场。这个 Skill 把字号层级、版式比例、断行规则全部按手机信息流的真实场景校准，内置 11 个品类适配、28 个版式骨架、两套视觉系统。\n\n## 起因\n\n之前做了 guizang-ppt-skill，后来用它生成网页，单张截图发到图文平台，反响比自己手工排版还好。\n\n![PPT Skill 截图](https://goframe-blog-upyun.mircool.cn/blog/1779929377216359628.png)\n\n市面上 AI 生成图文卡片的工具，几乎都是同一个味道：Tailwind + 大色块 + emoji 堆砌 + 中规中矩的字号层级。它们做的是网页，不是杂志。\n\n图文卡片和 PPT 是完全不同的生物——竖屏、信息流里 1 秒钟决定停不停下、靠图说话而不是靠字。版式不同、节奏不同、读者不同。\n\n于是从 PPT Skill 里拆出来，单独做了 guizang-social-card-skill。\n\n项目地址：github.com/op7418/guizang-social-card-skill\n\n---\n\n## 品类适配：11 个常见图文品类\n\n绝大多数 AI 工具不管你在写什么，都用同一套模板。这个 Skill 内置了 11 个品类的适配规则：\n\n- **旅行/生活方式**：杂志风，暖色板，大图压全屏，衬线大标题\n- **职场/干货/商业洞察**：网格风，深色背景，数据大字报版式\n- **影视/文化**：冷色调杂志风，电影海报式版式\n- **产品测评/数码**：网格风，对比矩阵，设备框美化截图\n- **读书/笔记**：杂志风，衬线字体，引文居中，留白拉满\n- **美食/探店**：高饱和杂志风，俯拍图优先，文字向四角让位\n\n![品类适配示例](https://goframe-blog-upyun.mircool.cn/blog/1779929379478219817.png)\n\n同一段文字，你说这是影评，它给你电影海报式卡片；你说这是产品测评，它给你带设备框的对比图。\n\n![不同品类效果对比](https://goframe-blog-upyun.mircool.cn/blog/1779929382845603262.png)\n\n还有为旅行博主做的地图组件，可以把店铺位置和旅行路线标注在上面。\n\n![地图组件](https://goframe-blog-upyun.mircool.cn/blog/1779929385568492025.png)\n\n---\n\n## 文字压图\n\n文字压图是图文卡片里最难的事，也是最容易暴露\"AI 感\"的地方。压不好会出现：文字盖在人脸或产品中心上、白字压浅色背景读不清、文字横跨整张图毁掉构图。\n\n![文字压图示例](https://goframe-blog-upyun.mircool.cn/blog/1779929389155681325.png)\n\nSkill 用三步处理：\n\n1. **识别主体**：人脸、产品、文字密集区，版式上自动避开\n2. **算落点区域色和明度**：决定字色、是否加蒙版、阴影深度\n3. **字号和断行自适应**：根据落点区域大小动态调整字号和换行位置\n\n![文字压图效果](https://goframe-blog-upyun.mircool.cn/blog/1779929393031903761.png)\n\n---\n\n## 图片来源\n\n默认接入三个免费可商用图库：\n\n- **Pexels**：支持中文搜索，大众场景够用\n- **Unsplash**：摄影质感最强，人物、生活、空间首选\n- **Wallhaven**：游戏、摄影、壁纸类\n\n![图库示例](https://goframe-blog-upyun.mircool.cn/blog/1779929397583552127.png)\n\n根据正文段落语义自动派发搜索词、拿回图、按版式裁切到位。\n\n---\n\n## 截图美化\n\n内置截图美化：加 macOS / iOS 风格的设备外框，用不同材质的背景托住截图（格纸、点阵、暖白或深色），根据视觉风格自动匹配阴影和圆角参数。\n\n![截图美化示例](https://goframe-blog-upyun.mircool.cn/blog/1779929400596692842.png)\n\n随手截的图，过一道，看上去像产品官方宣传图。\n\n---\n\n## AI 生图：克制使用\n\n只有所有找图渠道都拿不到合适素材时，才调用 AI 生图。生图时强制带风格约束词，避免\"一眼 AI 插画\"的平庸视觉。\n\n![AI 生图示例](https://goframe-blog-upyun.mircool.cn/blog/1779929402671302391.png)\n\n---\n\n## 视觉系统：两套风格 + 28 个版式骨架\n\n**两套视觉系统：**\n\n- **杂志风**：大留白，衬线大标题，版式不对称，文字有呼吸感\n- **网格风**：强网格，无衬线，几何感，用色克制但精准\n\n![两套视觉系统](https://goframe-blog-upyun.mircool.cn/blog/1779929404705094091.png)\n\n28 个版式骨架，从过去十年看过的杂志、海报、专辑封面、电影海报里挑出来。给 AI 一个被验证过的骨架，它的任务就从\"设计\"降级成\"填充\"，成品稳定性立刻上来。\n\n![版式骨架](https://goframe-blog-upyun.mircool.cn/blog/1779929410740138973.png)\n\n限制不是阻碍，是底线。给一个内容创作者无限的颜色选择，他更容易做出难看的东西；给他 10 套被验证过的色板，做出能看的东西的概率接近 100%。\n\n---\n\n## 设计理念\n\n图文卡片的本质，和印刷海报、画报、专辑封面是同一种东西——用一张静态图，在 1 秒钟里说服一个陌生人停下来。杂志和海报在过去一百年已经把这件事研究透了。\n\n网页设计语言是为可滚动、可交互的场景做的，搬到静态图上会显得用力过猛、信息平淡。\n\n![杂志感对比](https://goframe-blog-upyun.mircool.cn/blog/1779929416568985399.png)\n\n- 大留白，是杂志告诉你\"重点在这里\"的方式\n- 衬线字体优先，因为衬线在大字号上有印刷品的重量感\n- 版式不对称，制造视觉节奏，让眼睛知道先看哪\n- 用色克制，社交信息流里克制的色板反而比高饱和度更显眼\n\n这些决策听起来很虚，但落到代码里全是具体的常量——字号阶比例、留白比例、网格列数、对比度阈值、断行规则。这些常量才是 Skill 真正的护城河。\n\n---\n\n## Skill 是产品\n\n这个项目有 PRODUCT.md（解决什么问题、给谁用、不做什么）、版本号和 CHANGELOG、HANDOVER.md（交付物长什么样、能力边界在哪）。\n\n作者的观点：Skill 本质上是一个小产品。Prompt 十分钟会被同行复制走，产品不会。如果一个 Skill 连自己的能力边界都说不清，就没资格让别人把工作流交给它。\n\n![Skill 是产品](https://goframe-blog-upyun.mircool.cn/blog/1779929419708393461.png)\n\n项目地址：github.com/op7418/guizang-social-card-skill\n","summary":"从 PPT Skill 拆出来的图文卡片专用工具，内置 11 个品类适配、28 个版式骨架、两套视觉系统，把杂志和海报的设计语言搬到手机信息流里。","coverUrl":"https://goframe-blog-upyun.mircool.cn/blog/1779929375305415532.jpg","categoryId":1,"isDraft":0,"viewCount":332,"createdAt":"2026-05-28 00:51:14","updatedAt":"2026-11-02 16:40:51"},{"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":665,"createdAt":"2026-05-22 14:53:27","updatedAt":"2026-11-02 15:07:21"},{"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":297,"createdAt":"2026-05-22 13:14:35","updatedAt":"2026-11-02 03:33:36"}],"title":"凌风 Blog","version":"https://jsonfeed.org/version/1"}