小程序怎么排才不乱？15个布局名词看图懂
文章以Punk咖啡馆点单小程序为例，沿着菜单、规格、购物袋、确认订单四个页面，图文讲解15个布局与视觉设计名词，包括信息架构、用户流程、线框图、首屏、视觉层级、栅格、对齐、留白、响应式布局、安全区域、设计变量、语义色、字阶、行高及Padding/Margin。作者还指出固定底栏遮挡内容的常见坑，并给出从定入口、画线框、定边距对齐到小程序内验证的完整排版流程，帮助读者用具体语言描述布局需求，让AI能精准修改页面。
相关文档
小程序如何开通虚拟支付，立刻变现
微信官方开放了个人主体小程序的虚拟支付功能，个人开发者无需等500用户开流量主即可变现。作者以自己的养老金计算器小程序为例，手把手讲解全流程：确认主体符合条件后在微信公众平台开通虚拟支付；借助智能体接入支付接口；创建付费道具（如1元5次计算包）并注意安卓1%与iOS 12%的费率差异及结算周期；配置云函数的7项环境变量；创建保存订单和次数的数据库集合；最后配置消息推送使支付云函数能接收付款通知。全程无需写代码，跟着教程即可完成。
Codex-OpenPencil 快速上手篇
本文是 Codex-OpenPencil 插件的快速上手教程，以设计一个服装购物 APP 为例，完整演示从安装、打开画布、确认风格、扩展页面、选中元素口喷修改，到图片生成与搜索、保存设计资产，再到设计稿转代码的全流程。插件免费开源，提供支持平移缩放的无限画布，Codex 负责理解需求并调用工具，OpenPencil 负责设计展示与编辑，可 100% 还原生成 HTML、Vue、React、SwiftUI 等框架代码。文章还介绍了看板、教程图、对比图、PPT 等其他应用场景及常见问题处理方法。
我把 Muse 接进了微信：从扫码连接到让它执行任务
作者分享了将 Meta 的个人 AI Agent「Muse」接入微信的完整实践教程。通过微信 ClawBot 插件与桥接程序，用户可以直接在微信里给 Muse 交代任务，Muse 执行后把结果回传微信。文章详细讲解了接入流程：启用 ClawBot、向 Muse 发送提示词完成配置、扫码登录、发送第一条消息完成收发测试，以及用真实任务验证执行效果。作者还总结了常见卡点：扫码后需在微信发消息才算完成、聊天记录不会自动同步、收到回复不等于任务执行完成等，并附上了可复制的完整提示词。
用AI做小程序：7步补齐设计规范
本文介绍了用AI开发小程序时如何补齐设计规范，解决多个页面字体、按钮、圆角不统一的问题。文章分7步讲解：确定规范适用范围与存放位置、统一字体与文字层级、按用途分配语义色、统一形状间距与图形元素、把规则封装为可复用组件与变体、统一状态与交互反馈，以及通过Design Token落实到代码并用验收标准逐页检查。最后给出常见坑（规范与代码各改各的）的解决方法、维护流程和一段可直接使用的提示词，帮助AI持续按同一套规则产出页面。
如何把 Grok Bot 接入你的微信？保姆级新手指南
作者 Kin 分享了将 Grok Bot（SpaceXAI 推出的通用 Agent 产品）接入微信的保姆级教程。全文分三步：第一步发送作者总结的「焚决」提示词，让 Grok Bot 自行调研并搭建微信通道（基于微信 ClawBot 插件的 iLink 接口）；第二步在 routine 面板复制 Webhook URL 和 key 填入加密弹框，为微信通道配置专属钥匙；第三步在手机微信启用 ClawBot 插件并扫码绑定，发送第一句话激活对话。文章还包含实测效果展示、二维码有效期等注意事项，并说明该方法使用微信官方接口，不会被封号。
用AI做小程序，先看懂这12个前端名词（附避坑指南）
文章以模拟做一个咖啡馆点单小程序为例，系统讲解微信原生小程序开发的12个核心前端概念。作者从WXML（页面结构）、WXSS（样式布局）、JavaScript/TypeScript（交互逻辑）、JSON（配置文件）四个分工入手，逐一解释Page页面注册、生命周期回调（onLoad/onShow/onHide等）、Component自定义组件、数据绑定（双花括号与wx:for/wx:if）以及事件绑定（bindtap与data-*传参）等名词。通过菜单、饮品规格、购物袋、确认订单四个页面的完整点单流程，让不熟悉前端的读者理解AI生成的小程序代码各自的作用，并提供了常见问题的避坑排查指南。
人人都是 UI 设计师：20 条设计军规讲透 UI 设计
文章基于《Refactoring UI》一书，精选出 20 条实用的 UI 设计黄金军规，配合前后对比图讲解。作者指出在 AI 编码工具（Claude Code、Cursor 等）抹平写代码门槛后，UI 设计美感成为区分玩具与商业产品的关键壁垒。内容涵盖：为设计定好风格基调、先灰度后上色、用字重和颜色而非字号建立视觉层级、通过弱化凸显重点、按钮按主次分级、从过度留白开始做减法、间距的亲疏之别、动态调整行长与行高、以基线而非居中对齐等可工程化落地的设计原则，帮助开发者补齐 UI 设计这块最后拼图。
小程序前端怎么设计？拆解8种类型的页面重点
文章以社群小程序开发为背景，通过分析快递100、国家博物馆、优衣库、小宇宙、星巴克、影视飓风等真实案例，拆解了8种常见小程序类型的页面设计重点。每类小程序用户目标不同，页面布局与交互重点也不同：工具服务型要突出办事入口，预约服务型要说明日期、时段与名额的依赖关系，零售电商型需支持找货与比较，内容消费型要平衡发现与播放控制，餐饮点单型要确认门店与履约方式，教育学习型需区分找课与继续学习。文章还结合功能宫格、空状态、SKU、迷你播放器等概念，总结了视觉顺序、布局方式、状态区分与操作反馈等前端设计要点。
抖音私信点击卡片跳转到微信制作教程
本文介绍了如何在抖音私信中制作点击后自动跳转添加微信好友的卡片的教程。直接在抖音私信发微信号容易被封，而通过外链生成网站创建推广链接并生成抖音私信卡片，用户点击卡片即可跳转微信。教程包括注册外链生成网站、创建推广链接、配置卡片头像标题描述等步骤，并说明需要苹果系统抖音 app 30.3 版本，否则可通过复制无风险链接转发。该网站提供免费试用次数，99 元会员可开三个卡片，也可代做卡片获利。
微信里还没有小微AI，教你几招马上能用
微信自研AI产品小微仍处于灰度测试阶段，不少用户尚无使用权限。作者介绍了三种非灰度用户也能立即启用小微的入口：一是通过扫一扫的拍照AI识别功能；二是朋友圈发布时的AI帮写功能；三是部分公众号文章自带的AI摘要功能。启用后可在会话中发送提示词执行其他任务，如分析文档、修改图片、微信群自动发消息等微信自动化操作。作者同时提醒，小微基于微信自研的WeLM大模型，目前功能尚不成熟，体验不如混元4，但其优势在于深度接入微信生态，入口遍布微信各处。
高密度页面怎么组织：一份信息呈现指南
作者以前端资源缩减为契机，从后端工程师视角亲自承担前端项目，总结了高密度页面的信息组织指南。文章指出 CRUD 页面只解决数据增删改查，却不回答用户先看什么、依据什么做决定。作者提出组织信息架构的三个核心问题：用户最该看到什么、需要哪些关联信息、完成后要做什么。并以 GitHub Projects、Notion 为例，对比表格、看板、日历等'表达骨架'的适用场景，给出卡片网格、看板、日历排期、仪表盘、层级树、状态墙等 19 种信息呈现方式的参考表。指南还可直接交给 Agent 用于检查和改造前端页面，让 AI 辅助但由人把握业务判断。
Hermes+微信，实现远程操控：小白保姆级教程
本文是一篇面向小白的保姆级教程，介绍如何将 Hermes（一个常驻电脑或服务器的 AI 执行助手）安装到 Linux/macOS 上，接入 openai-codex 模型和个人微信，实现通过手机微信远程给家里的机器派任务。文章详细讲解了整条链路：安装 Hermes、登录 Codex 订阅并选择模型、扫码连接微信、审批配对、验收测试等步骤，并提供了常见问题的排查方法。作者还分享了自己的实际用例，如定时读取邮件生成日报、操作远端文件、执行终端任务等，并提醒用户注意安全，避免使用 root 运行、不交出敏感密钥。