This document contains comprehensive information about Huazi's professional profile, portfolio, and blog content. It includes personal details, work experience, projects, achievements, certifications, and all published blog posts. This data is formatted for consumption by Large Language Models (LLMs) to provide accurate and up-to-date information about Huazi's background, skills, and expertise as a Design Engineer. # huazi.space > A minimal, pixel-perfect dev portfolio, component registry, and blog to showcase my work as a Design Engineer. ## About 我叫刘梦华，你可以简单称呼我为 **Huazi**。
热衷于发现并分享一切新奇有趣的事情。不想只当「设计师」，更想做一个持续输出的创作者——写周刊、录播客、做课程、写代码，把想法变成现实。
深夜是我创造力的巅峰时刻，家里还有一只16斤的大肥猫。 ### Personal Information - First Name: 梦华 - Last Name: 刘 - Display Name: Huazi - Location: 江苏·南京 - Website: https://huazi.space ### Social Links - [X](https://twitter.com/HeyHuazi) - [即刻](https://okjk.co/JrijGe) - [小红书](https://www.xiaohongshu.com/user/profile/5ca232980000000016009925) - [GitHub](https://github.com/HeyHuazi) ### 常用工具 - [YouMind](https://www.youmind.com/) - [Rive](https://rive.app/) - [闪电说](https://shandianshuo.cn/) - [CraftAgents](https://agents.craft.do/) - [Figma](https://figma.com/) - [Dia](https://thebrowser.company/) - [Raycast](https://www.raycast.com/) - [Trae](https://www.trae.ai/) - [语雀](https://www.yuque.com/) - [新枝](https://xinzhi.zone/) - [Notion](https://www.notion.so/) - [Eagle](https://eagle.cool/) - [1Password](https://1password.com/) - [flomo](https://flomoapp.com/) - [ClashMac](https://clashmac.app/) ## Experience ### Senior Frontend Developer | Simplamo Enterprise JSC Duration: 2022 - Present Skills: TypeScript, Next.js, React Native, MobX, MobX-State-Tree, Tailwind CSS, Dify, Zalo Mini App, Agile, Teamwork, Research, Problem-solving - Develop [AI Chat](https://help.simplamo.com/features/simplamo-ai/ai-chat/guide_simplamo_ai_chat?ref=IN-926722) and [AI Assistant](https://help.simplamo.com/features/simplamo-ai/ai-expert/aiexpert-rockdiscribe?ref=IN-926722) features. - Develop [Whiteboards](https://help.simplamo.com/features/whiteboard/overview?ref=IN-926722) with real-time collaboration. - Build and maintain the [Zalo Mini App](https://zalo.me/s/1736112917405511258/) for Simplamo with seamless integration. - Develop interactive chart and analytics widgets for the [Dashboard](https://help.simplamo.com/features/dashboard/overview) to enhance data visualization. - Develop and maintain core features to enhance functionality and user experience. - Ensure UI/UX consistency and adherence to standards. - Implement robust frontend solutions for web and mobile platforms. - Analyze technical capabilities and provide optimal solutions. ### UI Lead | Simplamo Enterprise JSC Duration: 2022 - Present Skills: Creativity, UI/UX Design, Figma - Ensure UI/UX consistency and high-quality standards. - Design intuitive, user-focused interfaces aligned with business goals. - Define and establish a cohesive UI style for Simplamo. ### Design Engineer | Quaric Co., Ltd. Duration: 2024 - Present Skills: Next.js, Strapi, Auth0, VNPAY-QR, Docker, NGINX, Google Cloud, Docusaurus, Extension, UI/UX Design, UX Writing, Design System, Brand Design, Figma, Research - Created Quaric Brand Identity. - Created the Quaric Design System to standardize design practices and accelerate development. In-house Project: [Quaric Website](https://quaric.com) - Designed the UI/UX for Quaric Website, delivering a seamless experience. - Developed online ordering to streamline purchases. - Integrated VNPAY-QR for secure transactions. - Registered the e-commerce site with [online.gov.vn](http://online.gov.vn/website/chi-tiet-115855) for compliance. In-house Project: [ZaDark](https://zadark.com) - Build and maintain ZaDark.com with Docusaurus, integrating AdSense. - Develop and maintain the ZaDark extension for Zalo Web on Chrome, Safari, Edge, and Firefox — with 20k+ active users via Chrome Web Store (as of Sep 2025). ### Founder & Director | Quaric Co., Ltd. Duration: 2024 - Present Skills: Business Ownership, Business Law, Business Tax - Lead and manage the company's strategy. - Oversee technical teams and product development. - Manage relationships with customers and partners. ### Web Developer | Tung Tung JSC Duration: 2020 - 2022 Skills: React, Redux, Storybook, Lerna, Agile, Teamwork, Research - Built a scalable design system for consistency and efficiency. - Built a complex rich-text editor based on ProseMirror and Slate for customizable content creation. - Integrated APIs with the Backend Team to enhance functionality. ### Mobile Developer | Tung Tung JSC Duration: 2019 - 2019 Skills: React Native, Redux, MoMo Payment API, App Store, Google Play Store, App Center, Agile, Teamwork, Research - Rebuilt the app with React Native for better UX and performance. - Integrated MoMo and in-app purchases for seamless payments. - Optimized deployment for staging and production. - Published on App Store and Google Play, ensuring compliance. ### UI/UX Designer | Tung Tung JSC Duration: 2018 - 2019 Skills: UI/UX Design, Sketch - Designed a Landing Page for enterprise clients. - Redesigned the Online Quiz Platform for a modern look on web and mobile. - Redesigned the Pricing interface for individual customers. - Enhanced UX by improving usability, navigation, and user flow. ### Full-stack Developer | Freelance Duration: 2018 - 2020 Skills: Laravel, React, Express.js, Socket.IO, MongoDB, Firebase, WordPress, Docker, NGINX - Built an order management website with real-time delivery tracking. - Developed an e-commerce site for bird's nest products. - Created a map to display monitoring station data. - Designed a customizable WordPress landing page. ### Graphic & UI/UX Designer | Freelance Duration: 2018 - 2019 Skills: Creativity, UI/UX Design, Graphic Design, Sketch, Adobe Photoshop, Adobe Illustrator Designed logos, posters, ads, and UI. ### University of Science — VNUHCM | Education Duration: 2018 - 2026 Skills: C++, Java, Python, Data Structures, Algorithms, Advanced Databases, Systems Design, Distributed Systems, Software Engineering, Self-learning, Teamwork, Presentation - Currently studying for a Bachelor's degree in Information Systems. - Language Proficiency: B1 English Level. - Achieved several awards, including: - Bronze Medal — 10th Design, Manufacturing, and Application Award 2022 - 2nd Prize — Business Startup Competition 2019 ### Ly Tu Trong High School for the Gifted — Can Tho City | Education Duration: 2015 - 2018 Skills: Algorithms, C++, PHP, MySQL, Laravel, Node.js, Pandoc, Self-learning - Student of the Specialized Computer Science Program. - Granted direct admission to university due to achieving 3rd Prize at the national level. - [Achieved numerous awards](https://baocantho.com.vn/nguyen-chanh-dai-17-tuoi-va-19-giai-thuong-a97348.html) at city and national levels, including: - [3rd Prize](https://muctim.tuoitre.vn/cong-cu-ho-tro-viec-day-va-hoc-55107.htm) — National Science and Engineering Fair 2018 (ViSEF) - 1st Prize — Can Tho City Science and Engineering Fair 2018 - Creativity Award — Binh Duong Hackathon 2017 - Consolation Prize — National Youth and Children's Creativity Contest 2016 - [1st Prize](https://www.youtube.com/watch?v=OYgugvjqU4A) — Can Tho City Youth and Children's Creativity Contest 2016 - 3rd Prize — National Young Informatics Contest 2016 - Achieved the title of Outstanding Student from Grade 10-12. - Selected for the National Excellent Student Contest in Informatics for two consecutive years during high school. - Honored on the school's "Hall of Fame" for academic achievements. - Developed a feature using Node.js and Pandoc to recognize multiple-choice questions from .docx files and upload them to an [online quiz platform](https://youtu.be/QjR99wdmTyo) I created. - Developed websites based on Laravel framework. - Built websites with PHP and MySQL, following the MVC architecture. ### Thuan Hung Secondary School | Education Duration: 2011 - 2015 Skills: Pascal, NukeViet, HTML, CSS, JavaScript, Self-learning - Recognized as the most outstanding student of the district. - Achieved numerous awards at city and national levels: - Consolation Prize — National Young Informatics Contest 2015 - Consolation Prize — National Young Informatics Contest 2014 - 1st Prize — Can Tho City Young Informatics Contest 2014 - Achieved the title of Outstanding Student from Grade 6-9. - Developed websites using the open-source NukeViet CMS. ## Projects ### Rive 预览 Project URL: https://community-cn.eagle.cool/plugin/041323c2-e4b8-433e-a079-160d73deea24 Skills: 发起人, 设计师, 开发者 一款 Eagle 格式扩展插件，为 Rive 动画文件（.riv）提供完整的预览支持。 ### Rive.Cool Project URL: https://rive.cool/ Skills: 发起人, 设计师, 开发者, 策展人 发现 Rive 的无限可能——聚合 X 上创作者分享的优秀互动动画作品与灵感资源 ### Rive 汉化助手 Project URL: https://chromewebstore.google.com/detail/rivecn/nhjgmafflpekbjcoljhjlajabjjdmmfa Skills: 贡献者 Rive 编辑器中文汉化插件，提供丝滑的母语体验并支持自定义字体替换 ### 2025 年度报告收集 Project URL: https://2025app.designstroll.space/ Skills: 开发者, 设计师 一站式收录各大 App 的 2025 年度报告设计，记录属于这一年的数字生活记忆 ### Rive 中文课程 Project URL: https://flowus.cn/rivecn/share/66045888-ac2b-4cc6-bca9-243d0a5e7e0a?code=GV269A Skills: 讲师, 创作者 国内首个 Rive 互动动效中文系列课，从零基础到实战，带你掌握下一代交互动画技能 ### 液态玻璃图标库 Project URL: https://liquidglassicon.designstroll.space/ Skills: 开发者, 设计师, 创作者 用 AI 为 Apple 新系统打造的玻璃质感图标合集，让你的桌面真正「透」起来 ### 设计漫谈播客 Project URL: https://www.xiaoyuzhoufm.com/podcast/64456462c876968c6a1c333d Skills: 发起人, 创作者 一档轻松随意的设计闲聊节目，邀请朋友们聊设计、聊生活，也聊那些一闪而过的好奇心 ### HighlightShare Project URL: https://chromewebstore.google.com/detail/highlightshare-%E5%88%92%E7%BA%BF%E5%88%86%E4%BA%AB/gpcbeaefhhdddieignipnnpjaiejcgik?hl=zh-CN Skills: 开发者, 设计师 划线即分享，一款极简浏览器扩展，选中文字一键生成精美卡片分享到社交平台 ### MagicText Project URL: https://www.figma.com/community/plugin/1427264808426368845/magic-text Skills: 发起人, 设计师 因官方已推出相关 AI 功能，故已下架
Figma 文本智能填充插件——仅需输入案例即可智能填充文本，让设计稿更真实。 ### 小报童排行榜 Project URL: https://xiaobot.osguider.com/ Skills: 设计师, 开发者 为小报童专栏建立发现机制，帮读者从海量付费内容中筛选出真正值得订阅的精品 ### 言意 Project URL: https://yanyi.designstroll.space/ Skills: 发起者, 策展人, 设计师 言所不尽，皆可意达——一个 AI 提示词的探索与分享平台，帮你更高效地驾驭 AI ### 开源服务指南 Project URL: https://osguider.com/blog/ Skills: 贡献者 用中文解读优质开源项目，降低开发者发现和上手好工具的门槛 ### SVGLOGO Project URL: https://www.svglogo.top/ Skills: 开发者, 策展人 国内最全的矢量 LOGO 收集站，已收录大量高校校徽、互联网产品等可商用 SVG 标志 ### 全网漫游指南 Project URL: https://tagly.notion.site/ Skills: 设计师, 贡献者 一份精心策划的数字生活指南，精选各类实用工具、宝藏网站和优质服务 ### 设计漫步周刊 Project URL: https://xiaobot.net/p/DesignStroll Skills: 发起人, 创作者, 策展人 每周精选有趣的设计灵感、实用资源与行业资讯，用设计师的视角为你过滤信息噪音 ## Awards ### 1st Prize | Can Tho City Young Informatics Contest 2014 - Field: Creative Software - Project: Website Hành Trình Khám Phá Miền Tây ### Consolation Prize | National Young Informatics Contest 2014 - Organized in Hanoi, Viet Nam - Field: Creative Software - Project: Website Hành Trình Khám Phá Miền Tây ### 3rd Prize | Can Tho City Young Informatics Contest 2015 - Field: Creative Software - Project: VietnamStudy Learning Application ### 3rd Prize | Can Tho City Young Informatics Contest 2015 - Field: Informatics Knowledge and Skills - Programming Language: Pascal ### Consolation Prize | National Young Informatics Contest 2015 - Organized in Binh Duong, Viet Nam - Field: Informatics Knowledge and Skills - Programming Language: Pascal ### Outstanding Student | Most Outstanding Student of the District Recognized by the District for exceptional academic and personal achievements as the Outstanding Student of the locality. ### 2nd Prize | Can Tho City Youth and Children's Creativity Contest 2015 - Field: Software - Project: VietnamStudy Learning Application ### 3rd Prize | Can Tho City Science and Engineering Fair 2015 - Field: Computer Science - Project: Distance Calculation System for Provinces, Cities, and Districts in the Mekong Delta ### Consolation Prize | Can Tho City Young Informatics Contest 2016 - Field: Creative Software - Project: Study English ### 1st Prize | Can Tho City Youth and Children's Creativity Contest 2016 - Field: Software - Project: Study English ### 3rd Prize | National Young Informatics Contest 2016 - Organized in Quang Binh, Viet Nam - Field: Hardware Programming - Project: IoT Technology Application for Smart Home Control ### Consolation Prize | National Youth and Children's Creativity Contest 2016 - Organized in Hanoi, Viet Nam - Field: Software - Project: Study English ### 2nd Prize | Can Tho City Outstanding Student Selection Exam 2016-2017 - Subject: Informatics (Programming) - Programming Language: C++ ### Consolation Prize | Can Tho City Young Informatics Contest 2017 - Field: Creative Software - Project: Formula - Social network for sharing solutions and problem-solving methods ### 3rd Prize | Can Tho City Young Informatics Contest 2017 - Field: Informatics Knowledge and Skills - Programming Language: C++ ### 2nd Prize | Can Tho City Youth and Children's Creativity Contest 2017 - Field: Software - Project: We Study All — Multi-Platform Learning Support Tool ### Creative Award | Binh Duong Hackathon 2017 - Completed the Binh Duong Smart Map product within 24 hours - Youngest competing team to win an award ### 1st Prize | Can Tho City Science and Engineering Fair 2018 - Field: System Software - Project: [UnlimitedStudy](https://muctim.tuoitre.vn/cong-cu-ho-tro-viec-day-va-hoc-55107.htm) ### 3rd Prize | Can Tho City Outstanding Student Selection Exam 2017-2018 - Subject: Informatics (Programming) - Programming Language: C++ ### 3rd Prize | National Science and Engineering Fair 2018 (ViSEF) - Organized in Lam Dong, Viet Nam - Field: System Software - Project: [UnlimitedStudy](https://muctim.tuoitre.vn/cong-cu-ho-tro-viec-day-va-hoc-55107.htm) ### 3rd Prize | Can Tho City Young Informatics Contest 2018 - Field: Creative Software - Project: [UnlimitedStudy](https://muctim.tuoitre.vn/cong-cu-ho-tro-viec-day-va-hoc-55107.htm) ### 2nd Prize | Can Tho City Youth and Children's Creativity Contest 2018 - Field: Software - Project: [UnlimitedStudy](https://muctim.tuoitre.vn/cong-cu-ho-tro-viec-day-va-hoc-55107.htm) ### 3rd Prize | National Young Informatics Contest 2018 - Organized in Ba Ria - Vung Tau, Viet Nam - Field: Creative Products - Project: [UnlimitedStudy](https://muctim.tuoitre.vn/cong-cu-ho-tro-viec-day-va-hoc-55107.htm) ### 2nd Prize | Business Startup Competition 2019 - Organized by University of Economics and Law — VNUHCM - Project: [Penphy](https://www.youtube.com/watch?v=EdU7rUO-UA4) — Self Development Social Network ### Bronze Medal | 10th Design, Manufacturing, and Application Award 2022 - Organized by Ho Chi Minh City Youth Union - Field: Software - Project: [ZaDark](https://zadark.com) ### Summer 2025 Cohort | ▲Vercel OSS Program - Selected for [▲Vercel OSS Program](https://vercel.com/blog/summer-2025-oss-program#react-wheel-picker) summer 2025 cohort - Received $3,600 in platform credits, OSS Starter Pack, and priority community support - Project: [React Wheel Picker](https://react-wheel-picker.chanhdai.com) ## Certifications - [Gemini Certified Educator](https://edu.google.accredible.com/c05d3bad-3be0-4915-b41c-b8384357093a) - [Animations on the Web](https://animations.dev/certificate/dfb419c8-5ed7-43f2-b60c-446bc50a39b1) - [Certificate of Trademark Registration No. 565092](https://drive.google.com/file/d/1NgRp81ZAAUKEtuI9RefG0e8yni6JkoE8/view?usp=sharing) - [Certificate of Trademark Registration No. 543682](https://drive.google.com/file/d/1x7YzlK1kyz16h28ux9k3KAwnZFAabsvq/view?usp=sharing) - [Next.js SEO Fundamentals](https://nextjs.org/learn/certificate?course=seo&user=47463&certId=seo-47463-1745634751873) - [Next.js App Router Fundamentals](https://nextjs.org/learn/certificate?course=dashboard-app&user=47463&certId=dashboard-app-47463-1745633258744) - [React Foundations for Next.js](https://nextjs.org/learn/certificate?course=react-foundations&user=47463&certId=react-foundations-47463-1745634245158) - [Certificate of Copyright Registration No. 0040/2025/QTG](https://drive.google.com/file/d/1kVBByVLlYPyyUJvxKga670wvVPNmZ2nV/view?usp=sharing) - [Vietnamese Standardized Test of English Proficiency (CEFR B1)](https://vbcc.hcmussh.edu.vn/?type=11&certificateType=7&no=QH58202305187&fullName=Nguy%E1%BB%85n+Ch%C3%A1nh+%C4%90%E1%BA%A1i&dob=2000.08.14) - [Certificate of Copyright Registration No. 7994/2024/QTG](https://drive.google.com/file/d/1otjV4GNOLFj4JD2tHWLuZpUIVyITYNUy/view?usp=sharing) - [Engaging in Persuasive and Credible Communication](https://coursera.org/verify/C6DHB9A5XQHV) - [Introduction to Databases](https://coursera.org/verify/YV5VQ5MXZ5YH) - [Solving Problems with Creative and Critical Thinking](https://coursera.org/verify/4UKZQJGM2932) - [Digital Skills: Social Media](https://www.futurelearn.com/certificates/pc4345i) - [The Fundamentals of Digital Marketing](https://drive.google.com/file/d/14laAMWmVKhCfgKwVEgJyWse7o0sZDD4N/view?usp=sharing) - [Microsoft Office Specialist: Microsoft Office PowerPoint® 2013](https://drive.google.com/file/d/117DE6bMkHvRqXbED2tmSMNkbx9s7OahM/view?usp=sharing) - [Google Code-in 2016](https://drive.google.com/file/d/162RXtAVIZEvfx6LvP3xeBj-cSI9ZpPUX/view?usp=sharing) - [HSGS Olympiad 2016](https://drive.google.com/file/d/1eKv-2ldfw8-hF27sKfKWXL8MmwcSkzPq/view?usp=sharing) - [Microsoft Office Specialist: Microsoft Office Word 2013](https://drive.google.com/file/d/1-NHhjKlQbhlcO7bpRue1XzDgDaudOf2N/view?usp=sharing) ## Blog --- title: "商品规格选择" description: "Rive 中文课程案例 — 商品规格选择交互演示，通过 ViewModel 双向绑定实现实时联动。" last_updated: "June 25, 2026" source: "https://huazi.space/blog/rive-product-selector" --- # 商品规格选择 Rive 中文课程案例 — 商品规格选择交互演示，通过 ViewModel 双向绑定实现实时联动。 这是 [Rive 中文课](https://rivecn.com/courses) 的商品规格选择案例，通过 Rive 的 ViewModel 双向绑定，让网页 UI 和动画内容实时联动。 案例包含两个场景：**灯具数量选择** 和 **盆栽规格切换**。 *** ## 灯具 — 数量选择 选择数量后，Rive 动画中的吊灯会实时响应，同时价格随之联动。动画切换带有 1 秒冷却防抖。 ### 实现要点 数量选择器通过 ViewModel 的 `num` 属性驱动动画状态： ```javascript // 从 ViewModel 获取数值属性 var vmi = r.viewModelInstance; numProp = vmi.number("num"); // 用户点击时更新值 numProp.value = quantity; ``` 数量变化后，动画自动切换到对应状态，价格同步更新。 *** ## 盆栽 — 规格切换 切换金饭碗 / 铁饭碗规格时，Rive 动画中的盆栽造型实时切换，价格同步更新。还可以勾选礼盒加购选项。 ### 实现要点 规格切换通过 ViewModel 的 `style` 数值属性驱动，礼盒选项通过 `gift` 布尔属性控制： ```javascript var vmi = r.viewModelInstance; specProp = vmi.number("style"); // 规格切换 giftProp = vmi.boolean("gift"); // 礼盒勾选 // 切换规格 specProp.value = specs[selectedSpec].value; // 勾选礼盒 giftProp.value = isGiftChecked; ``` 价格计算在网页端完成，基础价格 ± 礼盒费用，实时同步到 UI。 Last updated on June 25, 2026 --- title: "交互按钮预览" description: "在网页中嵌入并预览一个 Rive 交互按钮动画。" last_updated: "April 21, 2026" source: "https://huazi.space/blog/rive-button-preview" --- # 交互按钮预览 在网页中嵌入并预览一个 Rive 交互按钮动画。 这是一个 [Rive 中文课](https://rivecn.com/courses) 的多状态按钮案例，支持悬停和点击交互： 按钮设计来自 [@Designownow](https://x.com/Designownow_) ## 源文件 你可以下载这个 Rive 动画的源文件，用于学习和参考： [社区源文件](https://rive.app/marketplace/27411-51800-62/) [运行时文件](/rive/learnrivebutton.riv) ## 开发实现方式 ### 1. HTML 结构 ```html ``` ### 2. Rive 运行时初始化 ```javascript const r = new rive.Rive({ src: "./learnrivebutton.riv", canvas: canvas, stateMachines: "State Machine 1", autoplay: true, autoBind: true, automaticallyHandleEvents: true, dispatchPointerExit: true, layout: new rive.Layout({ fit: rive.Fit.Contain, alignment: rive.Alignment.Center, }), onLoad: () => { r.resizeDrawingSurfaceToCanvas(); }, }); ``` ### 3. 关键配置说明 | 配置项 | 说明 | | --------------------------- | -------------- | | `src` | Rive 动画文件路径 | | `stateMachines` | 状态机名称，用于驱动交互状态 | | `autoplay` | 页面加载时自动播放 | | `automaticallyHandleEvents` | 自动处理悬停、点击等交互事件 | | `dispatchPointerExit` | 精确检测鼠标离开状态 | | `layout.fit` | 动画在画布中的填充方式 | | `layout.alignment` | 动画对齐方式 | Last updated on April 21, 2026 --- title: "AI工具流：小网站速成记" description: "年前做了一个小网站，专门用来展示各大 APP 的年度报告。今天来复盘一下整个制作流程，顺便分享下我用到的工具链。" last_updated: "March 27, 2026" source: "https://huazi.space/blog/ai-tools-website-workflow" --- # AI工具流：小网站速成记 年前做了一个小网站，专门用来展示各大 APP 的年度报告。今天来复盘一下整个制作流程，顺便分享下我用到的工具链。 俩月过去了，我终于想起来写复盘了。 年前做了一个[小网站](https://2025app.designstroll.space/)，专门用来展示各大 APP 的年度报告。 每到年底年初，各家产品都会推出自己的年度总结，有些做得特别精致，有些创意十足，看到老三分享在语雀上，但是涉及到国外的软件老是被屏蔽，我就想着干脆把这些案例做个网页来展示。 今天来复盘一下整个制作流程，顺便分享下我用到的工具链。 ## 从 YouMind 开始规划 项目的起点是在 YouMind 里完成的。我先把想法和大致的页面结构梳理清楚，然后直接让 AI 帮我生成代码。 YouMind 有一点特别适合做这种小项目——它最终只输出一个 `index.html` 文件。所有的 HTML、CSS、JavaScript 都打包在一起，不需要搭建什么复杂的工程环境，也不用配置打包工具。对于这种展示型的静态页面，一个文件搞定一切，轻便得很。 如果你想在其他编辑器里输出一个 html 文件，可以增加这段提示词 ```plaintext 提供完整可运行的单一HTML文件，包含所有必要的CSS和JavaScript ``` 在 YouMind 里我主要完成了页面的整体框架搭建：布局结构、卡片样式、响应式适配的基础逻辑。AI 生成的代码质量不错，基本能跑起来，但细节上还需要打磨。  ## 用 Trae 微调细节 从 YouMind 导出代码后，我把项目放到了 Trae 里继续开发。Trae 作为一个 AI 原生的 IDE，在处理细节调整和数据处理这块效率很高。  主要做了这几件事：调整一些样式细节让视觉效果更舒服、处理各个 APP 年度报告的数据（标题、描述、截图等）、优化交互体验。有些地方 YouMind 生成的代码不够优雅，在 Trae 里可以快速迭代修正。 这种「YouMind 出框架 + Trae 精修」的组合还挺顺手的，各取所长。 因为有很多截图文件需要处理，我想让他自动获取某个文件夹下的文件，大致描述需求给 AI，他果然可以做到！！！  ## 图片压缩：TinyPNG4Mac 做展示类网站，图片往往是大头。各家 APP 年度报告的截图加起来体积不小，直接用的话页面加载会很慢。 我用的是 TinyPNG4Mac 这个开源工具来批量压缩图片。它基于 TinyPNG 的压缩算法，支持拖拽批量处理，压缩效果很不错——肉眼几乎看不出画质损失，但文件体积能压掉 60-70%。关键是本地运行、免费、不限量，比在线工具方便多了。 如果你也有类似的图片压缩需求，推荐试试这个工具。  ## 部署到 Cloudflare 最后一步是把网站部署上线。我选择了 [Cloudflare Pages](https://www.cloudflare.com/)。 原因很简单：免费、速度快、配置简单。对于这种单页静态网站，Cloudflare Pages 几乎是最省心的选择。把代码放到 Github，Cloudflare 可以自动拉取最新版本构建部署，还自带 CDN 加速和 HTTPS，几分钟就能搞定。  整个流程下来，从想法到上线，工具链非常轻量：YouMind 规划生成 → Trae 微调打磨 → TinyPNG4Mac 压缩图片 → Cloudflare 部署上线。没有复杂的工程配置，没有繁琐的环境搭建，很适合这种「快速做个小东西」的场景。 ## 小结 回顾这次开发，最大的感受是：做小项目不需要大动干戈。选对工具、保持轻量，反而能更专注在内容本身。 YouMind 的单文件输出让我省去了很多工程化的烦恼，Trae 的 AI 能力让细节调整变得高效，TinyPNG4Mac 解决了图片体积问题，Cloudflare 让部署变得无脑简单。这套组合拳打下来，整个项目从 0 到上线可能也就花了一个下午的时间。 如果你也想做类似的小型展示网站，这个工作流可以参考一下。 ## 相关链接 2025年度报告收集：[https://2025app.designstroll.space/](https://2025app.designstroll.space/) YouMind: [https://youmind.com/invite/VXI1JT](https://youmind.com/invite/VXI1JT) Trae: [https://www.trae.cn/](https://www.trae.cn/) TinyPNG4Mac: [https://github.com/kyleduo/tinypng4mac](https://github.com/kyleduo/tinypng4mac) Cloudflare Pages: [https://www.cloudflare.com/](https://www.cloudflare.com/) Last updated on March 27, 2026 --- title: "我和 AI 做 RIVE 预览插件的过程复盘" description: "文章记录了我与 AI 协作完成 Rive 预览插件的过程，希望能给你一些启发。" last_updated: "March 17, 2026" source: "https://huazi.space/blog/rive-preview-plugin-retrospective" --- # 我和 AI 做 RIVE 预览插件的过程复盘 文章记录了我与 AI 协作完成 Rive 预览插件的过程，希望能给你一些启发。 这个想法起源于今年一月。  作为 Eagle 的重度用户，我最近越来越多地使用 Rive 制作动画，但 Eagle 不支持 Rive 文件预览。导致想用 Eagle 管理 .riv 文件的我，只能通过文件名去区分。 于是我产生这个制作格式拓展插件的想法。 这篇文章记录了我与 AI 协作完成 [Rive 预览插件](https://community-cn.eagle.cool/plugin/041323c2-e4b8-433e-a079-160d73deea24) 的过程，希望能给你一些启发。 *** ## 我的开发流程 整个开发过程，我总结为三个阶段：**调研 → 开发 → 打磨**。 ### 第一步：让 AI 帮我做调研 一开始，我打开 YouMind，直接说： > “我想创建一个 Eagle 插件用来预览 Rive 文件，请帮我搜索查找相关的文档和规范。”  AI 给了我很多相关文档，还检索到了相关的开源项目。这一步特别关键——**它帮我省去了大量搜索和筛选的时间**。 它帮我检索到了很多我需要的资料： 1. **Eagle 插件开发文档** — 了解插件的开发规范 2. **Rive 官方 Runtime** — 负责渲染动画 3. **相关开源项目** — 看看别人是怎么做的 有了这些资料，我就有了基础。 ### 第二步：站在巨人肩膀上开发 找到合适的开源项目后，我没有让 AI 从零开始写代码，而是基于开源项目来改。 最终我选用了 [rive-rip](https://github.com/albertcai101/rive-rip) 这个最近更新时间在两年前的开源项目。  将这个开源项目克隆到本地后我先让 AI 帮我理解项目： * “这个项目的核心逻辑在哪里？” * “技术栈是什么？我需要注意什么？” 大致了解之后，就可以让 AI 开始干活了。 然后我告诉 AI：“基于这个开源项目和 Eagle 插件的规范，完善插件功能。” AI 基于开源项目完成插件后，还需要在 Eagle 测试各项功能是否可用，持续与 AI 沟通、反馈、修改一系列问题。  ### 第三步：美化 + 持续打磨 到这里，插件能用了，但不好用。接下来该设计师出场了。  **美化视觉** 看到 [Paper](https://paper.design/) 可以直接复制 TailwindCSS 和 ReactCSS 代码，所以我尝试用 Paper 绘制了界面布局和风格。 然后，直接在 Paper 里复制 TailwindCSS 代码丢给 AI：“在不改变现有按这个样式优化现有改。” 这一步特别爽——**画出来就等于写出来了**。设计师的视觉能力，在这里成了最大的优势。 **持续打磨** 接下来就是漫长的打磨期。不断测试、发现问题、反馈给 AI、再测试。 比如缩放功能，我提出要加，AI 很快实现了。但测试后发现： * 重置按钮的图标显示不对 * 滚轮缩放不能以鼠标位置为中心 * 放大后没法移动画布 我把问题一个个反馈给 AI，它逐一修复。光是重置按钮的图标，就改了三次才搞定。 好在 AI 让试错成本变得很低——你可以试 10 种方案，选最好的那个。  **最后发布** 确保功能正常后，打包、写文档、提交到 Eagle 社区。 当然，打包、写文档这种细活还是让 AI 干。 *** ## 最终成果 聊了这么多过程，来看看做出来的东西。 **Rive 预览**是一款为 Eagle 提供 .riv（Rive 运行时文件）完整预览支持的插件。   ### 主要功能 **缩略图生成** — 自动为 Rive 文件生成缩略图，在 Eagle 资源库中一眼就能识别内容。 **交互式预览** — 完整的动画播放控制、状态机交互、数据绑定编辑。 **画布操作** — 支持放大/缩小、重置视图，可以按住 Space 拖拽平移，或用 Ctrl + 滚轮缩放——操作逻辑和主流设计工具一致。 **状态机与时间线** — 右侧面板可以切换查看动画的状态机和时间线，支持触发器点击、布尔值切换、数值调整、ViewModel 属性编辑。 **背景切换** — 提供透明棋盘格、白色、黑色三种背景，方便在不同场景下检查动画效果。 **性能监控** — 右上角实时显示 FPS，绿色（≥50）、橙色（30-49）、红色（\<30），及时发现性能问题。 **多语言支持** — 界面语言自动跟随 Eagle 应用设置（简体中文 / English）。 **完全离线** — 内置 Rive 运行时，离线也可用。 ### 文件格式支持 | 格式 | 说明 | 预览 | 缩略图 | | ------ | ---------- | ---------- | ------ | | `.riv` | Rive 运行时格式 | ✅ 完整支持 | ✅ 自动生成 | | `.rev` | Rive 编辑器备份 | ℹ️ 提示打开编辑器 | ✅ 占位图 | 插件现已上架 [Eagle 资源社区](https://community-cn.eagle.cool/plugin/041323c2-e4b8-433e-a079-160d73deea24)，免费使用。 *** ## 我的收获 ### 1. 意外学会了一些技术 虽然 AI 写了大部分代码，但在和它对话的过程中，我被迫理解了一些技术概念。 现在我能看懂基础代码结构，原来还能通过 GitHub Action 自动打包。 ### 2. 更懂“设计决策的代价” 亲手实现产品，让我更理解“实现成本”这个词。 比如，我最初想在右侧面板同时显示状态机和时间线，但实现后发现空间太挤。这种“想得很好但跑不通”的体验，以前只能听开发说，现在自己体会到了。 ### 3. AI 协作的体会 **角色变了**：从“画图的”变成了“产品负责人”。AI 负责实现，我负责决策。 **沟通能力更重要**：怎么描述需求、怎么验收 AI 的产出——这些“软技能”变得特别重要。 **判断力是核心**：AI 能给你 10 个方案，但选哪个、为什么选，必须自己判断。 ### 4. 最大的收获 完成这个项目最大的收获，不是插件本身，而是**证明了自己可以**。 从“有问题等开发”到“有问题自己解决”，这种心态的转变，可能比技术能力的提升更珍贵。 *** ## 感谢你看完这篇文章 如果你也是设计师，正在犹豫要不要尝试 AI coding，我的建议是：**不要等“学会编程”再动手，边做边学。** 把 AI 当搭档，而不是万能答案机。我们最大的优势不是写代码，而是**懂用户、会表达、能判断**。 这个时代，技术不再是门槛，想象力才是。 当工具不再限制我们，我们能创造的，远比想象中更多。 *** ## 相关链接 * **Rive 预览插件**：[https://community-cn.eagle.cool/plugin/041323c2-e4b8-433e-a079-160d73deea24](https://community-cn.eagle.cool/plugin/041323c2-e4b8-433e-a079-160d73deea24) * **rive-rip 开源项目**：[https://github.com/albertcai101/rive-rip](https://github.com/albertcai101/rive-rip) * **Paper 设计工具**：[https://paper.design/](https://paper.design/) Last updated on March 17, 2026 --- title: "设计漫步周刊 2025 年度复盘" description: "在持续中生长，致 2025 那 49 个如约而至的周一" last_updated: "January 1, 2026" source: "https://huazi.space/blog/design-stroll-2025-review" --- # 设计漫步周刊 2025 年度复盘 在持续中生长，致 2025 那 49 个如约而至的周一  ## **序：关于坚持这件小事** 自 2021 年 11 月 27 日的[第一篇设计周刊↗](https://www.yuque.com/hhhhuazi/gwyv4u/ksbqit)，算起来已经写 4 年周刊了。 2025年就这么过去了，坐在电脑前思考这停滞的一年。想写个复盘又不知道写啥，不如就从周刊开始吧！ 盘点这一年的周刊，突然有种恍惚感—从第31期到第79期，整整49期内容，每周一准时更新，现在想想我真牛逼啊！ 今年三月底被裁员那会儿，评论区有朋友说"被裁何尝不是一种短暂的解脱呢"，当时走出公司确实有些恍惚。但正是因为有周刊这个"锚点"，让我在gap期间依然保持着节奏。每周一准时和大家漫步设计。 *** ## **进化：内容的变与不变** ### 从"乱炖"到"精炖" 今年最大的变化就是内容结构的调整。 **2月（**[#035期↗](https://xiaobot.net/post/8da7a75b-1b28-4ea4-8070-9cf177c02965)**）** 新增了"言论"板块 一开始是摘录读过的文章里的金句。到了**7月（**[#055期↗](https://xiaobot.net/post/13f0b1e1-35c1-4fa8-8571-6b656c1a53b6)**）**，干脆改成每周推荐一本书的摘抄。  **8月（**[#060期↗](https://xiaobot.net/post/e685852d-bab9-4862-8132-f966571d25f1)**）** 优化了配图展示模板 弱化了那个"烦人的设计漫步周刊水印"（是的，我自己都嫌弃它了）。  **12 月（**[#075↗](https://xiaobot.net/post/2233d842-3fb3-429d-abb6-bb8f307e1930)**至**[#078期↗](https://xiaobot.net/post/50d67753-6a0f-4fc0-82df-c1b7e9d0642e)**）** 短暂新增了 Rive 板块 因为在和朋友一起做Rive课程，特意开了个Rive板块推荐优秀源文件。后来想想还是合并回资源板块了，周刊嘛，保持那种"轻松随意"的调性更重要。  ### 吐槽与思考并存 今年继续保持着"敢说真话"的态度： * 吐槽菜鸟驿站的商业模式（[#068期↗](https://xiaobot.net/post/b371286c-772e-4070-ab54-40445e205808)） * 质疑百度地图的车道级广告（[#047期↗](https://xiaobot.net/post/12456756-2691-4d7f-8ee4-01c5f5da6f91)）  设计不应该只看表面的美，用户体验和商业模式的平衡才是真功夫。 *** ## **回响：读者评论里的温度** 今年收到80+条评论，每一条我都有认真阅读（真的！）。感谢这些参与评论互动的读者。 能和这么多有趣、有品味的人一起分享设计，才是做周刊最大的收获。  *** ## **光：被认可的时刻** ### 11 月份入选小报童精选 [查看原文↗](https://mp.weixin.qq.com/s/GaJEGdINGmNY3nZQ7UJiQw) 看到到官方动态的那天，我在朋友圈自豪地发了句："上小报童精选啦😎" （其实是我主动投稿的哈哈哈，但能被选上还是很开心） ### 读者们的真情推荐 最让我感动的是[@Stella Lin在 10 月的推荐↗](https://x.com/StellaOnChAIn/status/1984114730714513917?s=20) 还有[@Jackywine在7 月↗](https://x.com/Jackywine/status/1949673382875938991?s=20)把周刊形容成"大厂设计的每周灵感私房菜"——这个比喻我爱了。 过了几天，他又发了条推特，宣传我基于历史周刊做的ima AI知识库（对了，你可以点击 [这里↗](https://ima.qq.com/wiki/?shareId=e9214d4d205cb56cf7c975b931b646a9944369dd44958978cad8a67ace0c7e68\&webFrom=10000079) 查看并加入） 你可以在这个知识库智能检索历史周刊的资源。周刊的内容不只是每周一的阅读，还能变成随时可查询的设计知识库——这是我之前没想到的价值延伸。 [@Bear Liu在 7 月的推荐↗](https://x.com/bearliu/status/1950757017876041905?s=20) 让我有点小窃喜——他把设计漫步周刊和DEX周刊并列推荐了。 [丁师的DEX周刊↗](https://quaily.com/dingyi) 是国内设计类newsletter的标杆，能和它并列被提及，我真厉害！  *** ## **复盘：数字里的故事** 翻遍这49期周刊，我自己都有点被这个数据量吓到了。  ### 发现板块：捕捉设计的瞬间 这是每期占比最大的板块，今年大概分享了**200+个设计发现**。 **UI/UX细节（约60个）** 从大厂到独立开发者，从APP到网站，请叫我"名侦探·阿华" * Apple时钟在低电量模式下指针从"转动"变"跳动"（[#069期↗](https://xiaobot.net/post/eb0ba334-d462-412f-abc9-4e38ea241854)） * 微信好友备注的小而美设计（[#045期↗](https://xiaobot.net/post/9e904550-6c12-4db0-8107-34c9cf2e2f26)） * 抖音查看博主机位的功能（[#041期↗](https://xiaobot.net/post/89c1bfa0-51d6-4da0-85f2-39eb99eaa2dc)） * 豆包直接提取抖音视频文案（[#045期↗](https://xiaobot.net/post/9e904550-6c12-4db0-8107-34c9cf2e2f26)）  **创意网站（约50个）** 今年推荐的网站质量自己回看都觉得不错： * 个人网站类：[Ben Issen的涂鸦画布↗](https://benissen.com/)、[Dakshi Goel的工牌交互↗](https://dakshie.xyz/)、[Rene Wang的Kindle阅读器博客↗](https://rene.wang/zh) * 工作室官网：[Orange Studio的复古风↗](https://www.orangestudio.co/#)、[Flim.ai的影像搜索引擎↗](https://flim.ai/) * 实验性项目：[weather.exe的ASCII艺术动画↗](https://weather-pattern.vercel.app/)、[Readymag年度最佳网站↗](https://readymag.com/websites-of-the-year/)  **产品设计（约40个）** 从概念到量产，今年的封面产品尤其让人印象深刻： **硬件产品类：** * [动力学时钟↗](https://www.yankodesign.com/2025/12/05/time-gets-a-remix-with-this-hypnotic-spinning-clock/)（[#079↗](https://xiaobot.net/post/54275cd7-88a4-4fad-99fe-ba1da43fcf15)）：铝环旋转标记时分，没有指针，没有数字，让时间变成冥想体验 * [算法实验室的流光灯↗](https://www.xiaohongshu.com/user/profile/684d45ef000000001b0238cc?xsec_token=ABmwB26pRZPrW6Cl6PGKziNNVJmMkSsxqGyC2IQzZEA24%3D\&xsec_source=pc_note)（[#077↗](https://xiaobot.net/post/258c95eb-ad57-43ec-afee-2dc30c44b852)）：用算法解构自然光的轨迹，把太阳东升西落浓缩进日常空间 * [Wallet Wallet卡包↗](https://www.striiiipes.com/view-all-products/leather-cardholder-collections/wallet-wallet/)（[#073↗](https://xiaobot.net/post/6789106c-3415-457c-8dc4-a5bd825df612)）：直接把iOS「钱包」app的图标做成了实体产品 * [初代造梦机↗](https://dreamrecorder.ai/)（[#055↗](https://xiaobot.net/post/13f0b1e1-35c1-4fa8-8571-6b656c1a53b6)）：MODEM团队的黑科技，早晨说出梦境就能还原成影像  **有趣的交互（约30个）** 这些交互让人看了就想玩： * 巧妙的关闭按钮（打开按钮平滑移动到关闭位置） * 创意取色器（用滑块控制颜色，像调音台一样） * Rive官网的按钮动效（被我家猫完美重现） 还有约**20个"吐槽"**——对，我没忍住，该说还得说： * 菜鸟驿站的"跑腿功能" * 百度地图的车道级广告 * 取餐码设计的反思（用手机尾号到底好不好）  设计的魅力就在于这些细节——它们不起眼，但能让人感受到创作者的用心。 ### 资源板块：设计师的百宝箱 今年推荐了**150+个实用资源**，粗略分类如下： **设计工具（约40个）** 各种AI生图工具、配色生成器、SVG图形库、Mockup生成器、浏览器插件、图标管理工具、字体工具等资源…  **Figma生态（约30个）** 肥姑妈虽然越来越难用了，谁让他是目前相对较好的设计工具了呢？又爱又恨！  **素材资源（约50个）** 图标库、字体资源、插画和3D素材  **开发资源（约30个）** 虽然主要写给设计师看，但开发资源也没落下。一些React组件库、动效库和设计转代码工具  ### 阅读板块：思考的深度 今年推荐了**100+篇文章**，主要集中在： **设计方法论（约30篇）** 从设计思维到设计系统，从微交互到信息架构，这些文章帮我自己也梳理了不少思路。 **行业洞察（约25篇）** AI对设计的影响、设计趋势预测、大厂的设计实践……这个时代变化太快，只能努力跟上。 **工具教程（约20篇）** Figma进阶、Rive动效制作、AI工具使用指南——实用为主。 **设计师访谈（约15篇）** 看别人的成长路径，总能找到一些共鸣或启发。 **思考与随笔（约10篇）** 比如那篇"[好用的 AI 产品，不该是 ChatGPT 的样子↗︎](https://mp.weixin.qq.com/s/9ktLfayUwrCLBWVVlmV_lA)"（[#056期↗](https://xiaobot.net/post/ec51581f-ead8-4c27-b667-712fb28293fd#toc-14)）  ### 资讯板块：跟上时代的脚步 今年追踪了**80+条行业动态**： **大厂动态（约30条）** Apple的各种设计更新（iOS图标、地图设计、时钟细节） Figma的重大更新（Make工具集、变量导入导出、AI功能） 还有一些主流设计工具的更新 **AI前沿（约15条）** 这一年AI工具爆发式增长，几乎每期都会提到。  ### 我的内容偏好 复盘下来，发现自己的口味还挺明显的： **1. 日本设计情结** 封面和内容里经常出现日本设计师的作品。可能是日本设计那种"克制中的巧思"特别对我胃口。 **2. 微交互强迫症** 对动效、过渡、反馈这些细节特别敏感。这算病吗（笑）。 **3. AI工具追踪狂** 今年AI发展太快，每个新工具都想试试。虽然有时候会想"这玩意儿真的有用吗"，但还是忍不住分享给大家。 **4. 实用主义至上** 推荐的工具大多是自己用过或者认真研究过的。不想做那种"收藏=会用"的分享者。 **5. 吐槽不能少** 好的设计值得夸，烂的设计该喷也得喷。 ### 内容的延伸价值 今年还做了个有意思的尝试—把周刊内容接入腾讯ima AI知识库。  最初只是想试试看，没想到效果还不错。读者可以随时问"怎么做好微交互设计"、"推荐一些配色工具"这类问题，AI就能从周刊的往期内容里找到答案并整理出来。Jackywine当时评价说"相当于一个AI设计总监手把手教你做设计"。 这个尝试让我看到了内容的更多可能性： * 周刊不只是"看完就过"的资讯，还能沉淀成知识库 * 往期内容可以通过AI重新被利用，不会"过期" * 读者的学习方式可以从"被动接收"变成"主动查询" 读者们可以加入[这个知识库↗](https://ima.qq.com/wiki/?shareId=e9214d4d205cb56cf7c975b931b646a9944369dd44958978cad8a67ace0c7e68\&webFrom=10000079)，让内容发挥更大的价值。 *** ## **尾声：下个周一见**  2025年，感谢每一位订阅周刊的朋友。你们的每一条评论、每一次点赞、每一次转发，都是我继续更新的动力。 特别感谢那些一路陪伴的老朋友们。 **@Josh **的每期点赞**、@Stellaaaaa、@钻进袋子里的猫、@Sisi、@WatchuwGotInYorPocket** 等朋友的互动反馈。 你们让这个周刊有了温度。 同样感谢那些热心读者们的推荐，让更多人知道了这个小而美的设计周刊。 2026年，我们继续漫步在设计的世界里，继续发现那些让生活变得更美好的细节。 *** **P.S. 写给还没订阅的朋友** 如果你看到这里，还没订阅周刊，不妨考虑加入这趟设计漫步之旅？ 目前订阅价格是 **12元/季度，48元/年**（一杯咖啡钱，换49杯精神咖啡）。 说实话，我最近一直在纠结要不要涨价——毕竟每周花那么多时间整理、筛选、写作，还要保持质量和节奏。但又觉得，保持这个价格也挺好，能让更多设计师看到有价值的内容。 所以...暂时不涨？也许涨？还在想...总之，现在这个价格应该是最友好的时候。 如果你也想每周一收到一份精心准备的设计漫步，可以通过以下方式订阅本刊。 [小报童订阅↗](https://xiaobot.net/p/DesignStroll) [Quaily订阅↗](https://quaily.com/designstroll)（因汇率手续费等原因，价格稍高一点点） 2026，我们每周一再见！ Last updated on January 1, 2026 --- title: "设计漫步周刊自动化工作流分享" description: "不久前在@小柒 的帮助下完善了设计漫步周刊的工作流，其中自动汇总成文章的功能节省了我大量的时间。分享到推上后，好多朋友对此感兴趣，于是有了这篇文章。" last_updated: "August 3, 2025" source: "https://huazi.space/blog/design-stroll-workflow" --- # 设计漫步周刊自动化工作流分享 不久前在@小柒 的帮助下完善了设计漫步周刊的工作流，其中自动汇总成文章的功能节省了我大量的时间。分享到推上后，好多朋友对此感兴趣，于是有了这篇文章。  不久前在@小柒 的帮助下完善了[设计漫步周刊](https://xiaobot.com/p/DesignStroll)的工作流，其中自动汇总成文章的功能节省了我大量的时间。分享到推上后，好多朋友对此感兴趣，于是有了这篇文章。 ## 工作流简要介绍 如下图所示，在浏览器中利用 **save to notion** 插件进行碎片收藏，统一汇总至Notion后，在Notion中进行分类整理，并搭配图床工具处理图片。整理收集好后，使用 pipedream 自动化脚本自动汇总成一篇文章。  使用图床的原因：因Notion官方规则，为了防止爬虫或其他原因，图片地址会定期刷新。所以 **pipedream 脚本只能获取Notion中临时图片地址**，如果直接用Notion的上传图片功能，脚本所获取的图片会过期故而无法显示。 ## 使用工具 ### [Save to Notion](https://www.savetonotion.so/) 利用此插件可以快速将网页剪藏到指定Notion数据库。 更重要的是，当你采集相同链接到同一数据库时，他会提示你之前收藏过。  ### [Notion](https://www.notion.com/zh-cn/product) 无需过多介绍的强大软件，借助他的数据库我们可以高度自定义自己想要的任何模板  ### Figma 主要是为了给图片加水印（正考虑做一个插件来替代这一步骤） 注：图中绿色的图片是为了放进剪映中制作动态配图。（**剪映**导出视频 —— **Gifski** 转换成GIF）  ### [PicList](https://piclist.cn/) 快速上传剪贴板内容至图床 注：图床我用的是 **缤纷云** 实名认证后有免费 50GB 存储+30GB HTTPS 流量 [缤纷云官网](https://www.bitiful.com/)  ### [Pipedream](https://pipedream.com/docs) 一个面向开发者的集成平台，允许用户通过"触发器 → 工作流程 → 操作" 的方式，实现跨平台自动化流程。且免费额度足够日常使用。  ### [小报童](https://xiaobot.net/home.html) 国内相对优质的付费内容服务，支持邮件和微信推送。 其实我更喜欢 [Quaily 平台](https://quaily.com/zh)，它的编辑器和功能更强大（可惜收款方式把我难住了）  ## 使用教程 ### 复制Notion模板  ### 复制 Pipedream 工作流 打开文章底部自动化脚本地址后，注册账号并创建工作区 配置信息默认即可。  ### Pipedream 工作流配置（重要） 在这之前先解释下整个自动化流程，见下图  这一步开始有些复杂了，在来一点耐心，配置完这些就完成 99% 啦！ #### 工作流复制后点击 Save and continue  #### 将URL地址替换到Notion的函数中   #### 替换函数后记得点击一下Notion中 生成周刊 的按钮 这样在Pipedream 中就可以得到一条示例数据，选择最新的一个即可，选择后点击 Continue  #### 继续点击 Test → Continue  #### 连接你的Notion 这里记得要选择在第一步中保存的 Notion 模板位置  #### 完善PageID 在Page ID 中输入 ``` **{{steps.valid_request_and_extract_weekly_id.$return_value.weeklyId}}** ``` 一定不要多复制了空格啥的，粘贴进去后会变成蓝色，继续点击 Test  #### 查询所有待发布的内容 上述 Test 后，继续点击 Continue，然后选择之前添加的 Notion账号，点击后记得选择 漫步碎片的数据库 选择后，继续点击 Test 后 Continue  #### 根据数据生成完整的周刊内容 这一步骤是按要求生成周刊内容，如果你的碎片类型与我的不一样，也可以在这个脚本中修改。 当然也可以描述清楚你的需求，然后让任意 AI 工具在此脚本的基础上修改优化  还是继续点击 Test 然后 Continue  #### 快了，马上就好了 在 Page Block ID 中输入（同步骤 3.6） ``` **{{steps.valid_request_and_extract_weekly_id.$return_value.weeklyId}}** ``` 一定不要多复制了空格啥的，粘贴进去后会变成蓝色，填写后下方的 **Block Type** 和 **Markdown Contents** 会自动更新，无需修改，继续 Test → Continue  #### 真的快了，加油 这一步无需修改任何内容，直接 Test → Continue  #### 最后一步！！！ 选择你之前添加的Notion账号后继续 Test → Deploy  ### 完成啦🎉 我们可真厉害 现在你可以回到Notion的周刊发布中，点击「生成周刊」按钮，等待片刻，即可呈现一篇属于你的周刊  ### 其他 如果你出现了报错，可以回到 Pipedream 中，将设置中的 Memory 加到 512  ## 模板部分 ### [Notion模板](https://designstroll.notion.site/2438b338846a807c824cd78378ff6039?source=copy_link) ### [自动化脚本](https://pipedream.com/new?h=tch_v4fnbo) ## 相关资料 [Save to Notion 官方文档](https://savetonotion.so/docs/articles/get-started) [pipedream 官方文档](https://pipedream.com/docs) [PicList 配置教程](https://piclist.cn/configure.html#%E5%86%85%E7%BD%AEaws-s3) 如果你也使用缤纷云，可参照**内置AWS S3** 部分的文档进行配置 Last updated on August 3, 2025 --- title: "iOS 小组件查看网站访问数据" description: "利用 Scriptable 实现 iOS 小组件实时查看网站访问数据" last_updated: "June 6, 2025" source: "https://huazi.space/blog/ios-widgets-web-statistics" --- # iOS 小组件查看网站访问数据 利用 Scriptable 实现 iOS 小组件实时查看网站访问数据  📊 利用 Scriptable 实现 iOS 小组件实时查看网站访问数据（基于 51LA） 你是否想随时在 iPhone 主屏查看自己网站的访问数据？ 如果你使用的是 [51LA 网站统计](https://www.51.la/)，配合 iOS 上的 [Scriptable](https://scriptable.app/) 工具，只需几十行代码，就能实现一个美观实用的小组件，实时显示网站的访问统计数据。 本文将手把手教你实现这个小工具。 *** ## 🧰 所需工具 ### Scriptable 一个可以通过使用JavaScript来创建我们自己想要的小组件的应用（App Store 免费下载）  ### 51.LA访问统计 [https://www.51.la/](https://www.51.la/) 国内网站访问统计平台  ### 你的网站 可以添加自定义 `