Wiki 知识库

全部文档 / 作者: rico

19 篇
清除

中文网站的字体选型配置推荐

文章介绍了中文网站 font-family 的最佳实践:遵循“先西后中、兼顾主流操作系统、最后以通用无衬线字体兜底”的原则。作者给出了 --font-sans 和 --font-mono 两个 CSS 变量配置示例,解释了 Apple 生态、Windows、Android 等系统字体入口的作用,并总结了三条避坑指南:西文字体须写在中文字体之前、中文字体尽量使用英文名称避免编码问题、带空格的字体名必须用双引号包裹。此外还提醒不声明字体时浏览器渲染的是默认字体而非系统字体。

技术 › 前端 RicoUI (@ricouii) 2026-10-231.9 KB 75

设计风格指南:复古主义

本文系统介绍了复古主义设计风格,阐述了怀旧情结在设计中的文化心理根源。作者梳理了不同年代的代表性复古风格:20-30年代的装饰艺术风格(Art Deco)以几何与奢华著称,50年代怀旧广告风格温馨亲切,70年代迷幻风格大胆张扬,80年代霓虹复古未来感,90年代复古科技与Y2K美学。文章还介绍了包豪斯、昭和复古等地区性风格,并区分了Vintage(真实老物件)与Retro(现代复古再创造)的概念差异。复古设计通过重现过去的美学符号唤起情感共鸣,在平面、UI和网页设计中被广泛应用。

技术 › 前端 RicoUI 2026-09-2310.9 KB 3.4K 4 61

项目启动前沟通文档目录:AI Agent 开发规范模板

作者宣布启动一个小项目,并分享了正式进入开发阶段前与团队/Agent 沟通完毕的项目文档目录结构。该目录包含 AGENTS.md(协作与代码规范)、README、DESIGN、CHANGELOG、TODO,以及 docs 目录下的项目规格、架构、组件规范、页面结构、开发流程、组件注册分发和 Cloudflare 部署等文档。作者建议读者可以参考这套模板,或直接将其提供给 Agent 梳理使用,为 AI 辅助开发项目提供标准化的文档组织方式。

技术 › Agent RicoUI (@ricouii) 2026-09-221.5 KB 48

Polar: 如何让 LLM 写出的 UI 不偏离设计系统

本文翻译自 Polar 官方博客,介绍其新设计系统 Orbit 背后的思考。随着 LLM 和 Coding Agent 大量参与前端 UI 开发,传统基于 Tailwind 字符串的样式写法导致设计一致性难以保障。Orbit 的核心思路是:将设计规范从文档升级为代码约束——Token 按设计意图命名(如 background-card),通过 StyleX 构建类型安全的 Box 组件作为唯一样式入口,禁止直接使用原始 div,并在 CI 中以 Oxlint 规则强制执行,使偏离设计系统的代码在机制上无法通过。文章强调文档只是概率性建议,CI 才是确定性契约。

技术 › 前端 RicoUI 2026-09-2220.1 KB 19.1K 182 83

一分钟让别人访问你的本地项目:Cloudflare Quick Tunnel 实战

文章介绍了如何使用 Cloudflare 的 Quick Tunnel(cloudflared)在一分钟内将本地运行的项目暴露为公网可访问的 HTTPS 地址。作者讲解了三步流程:安装 cloudflared、本地启动项目、运行一条隧道命令即可获得随机的 *.trycloudflare.com 地址。文章深入剖析了其原理——由本机主动向 Cloudflare 边缘节点发起出站连接,无需开放入站端口或修改防火墙。此外还介绍了面向 AI Agent 的新能力(结构化 JSON 输出、Webhook 就绪、随进程销毁),列出了并发上限、不支持 SSE 等官方限制,并与 Vercel、Netlify、ngrok 等方案做了对比,建议将其定位为本地验证与临时分享工具。

技术 › DevOps RicoUI 2026-09-218.0 KB 2.4K 11 81

Rico MD 更新:新增 7 套公众号排版,接入 gzh-design-skill 主题体系

作者介绍了其公众号 Markdown 编辑器 Rico MD 的一次重大更新:接入开源排版 SKILL「gzh-design-skill」的主题体系,新增 7 套公众号排版主题(如摸鱼绿、红白色系、石墨极简风等),支持自定义封面模板字段、文末互动卡、文档与图片打包导出、标题正文行高间距自定义等功能。文章还说明了主题版权与 AGPL-3.0 许可处理方式,以及适配中舍弃的部分。该工具支持左侧 Markdown 编辑、右侧实时预览、一键复制到公众号后台,在线版与开源仓库均已提供。

技术 › 工具与效率 RicoUI 2026-09-195.9 KB 13.6K 172 76

Brand Guidelines 怎么做?推荐 6 个品牌手册灵感库

作者整理了 6 个品牌手册(Brand Guidelines)相关的收藏站点,帮助设计师解决品牌资料查找混乱的痛点。知名品牌案例库包括 Deck Gallery(提案与交付展示)、BrandGuidelines(全球品牌规范 PDF)、Branding Style Guides(可按多维筛选的规范档案库);视觉应用类包括 Branding Website(快速建立视觉方向)、World Brand Design(品牌在包装、空间等真实媒介的应用展示)、Brand Archive(以品牌为单位的资产档案)。作者建议先明确需求再选择网站,并强调这些资产仅供研究学习,不可直接挪用。

技术 › 前端 RicoUI 2026-09-168.3 KB 5.7K 59 81

50+ Hidden Features and Tips for iOS and iPadOS 27

作者Federico Viticci整理了iOS 27和iPadOS 27的50多个隐藏功能和实用技巧,涵盖照片应用(相机胶卷过滤、视频帧保存、证件集合、关键词、星级评分)、主屏幕与锁屏(液态玻璃自定义、超大小组件、迷你时钟)以及Siri AI(全局搜索合并、文字输入、屏幕感知、新语音)等新特性。iOS 27主要聚焦性能改进,但这些细节功能大幅提升了系统体验,完整评测可在MacStories查阅。

技术 › 移动端 Federico Viticci 2026-09-1525.6 KB 151.7K 821 83

Vibe Coding 零基础入门:六步工作流拆解

作者以截图美化工具 RicoScreenshot 为案例,完整拆解了 Vibe Coding 的六步工作流:读懂项目、建立视觉规范、规划功能、开发实现、视觉交互调整、测试上线。文章强调每个环节做正确的事:先用 AGENTS.md 让 AI 理解项目架构,用 DESIGN.md 统一视觉规则,用 TODO.md 管理需求和进度;开发阶段一次只做一个功能,并重视亲自使用后的体验判断。该流程基于开源项目 image-beautifier 二次开发,纯前端实现,适合作为新手的第一次完整项目练习。

技术 › 工具与效率 RicoUI 2026-09-0419.4 KB 18.8K 68 90

我做了一个开源的设计工作台:管理 & 编辑 & 生成 DESIGN.md

作者开源了 RICOUI DESIGN,一个基于 DESIGN.md 的设计系统工作台。DESIGN.md 是一种结构化 Markdown 文档,集中记录品牌的颜色、字体、间距、组件规则与设计约束,人和 AI 都能读取。工作台支持创建、编辑、预览 DESIGN.md,浏览内置品牌设计参考库,可通过 AI 从公开网站生成初稿,并将文档派生为 Design Tokens、CSS 和 ZIP 供前端与 AI 工具使用。文章详细介绍了 DESIGN.md 的结构约定、从品牌参考到自有设计库的使用流程、AI 生成与安全边界、派生检查机制及云端存储方案,强调以 DESIGN.md 作为唯一源文件维护设计规范。

技术 › 前端 RicoUI 2026-09-0318.6 KB 19.3K 161 87

How to Build an AI-Native Company: Hiring, Standards, and Cadence

作者分享了将 Single Grain 打造成 AI 原生公司的一年经验。他认为仅靠黑客马拉松、培训和工具授权不足以改变组织,真正的转变来自提高人才标准并重新定义卓越绩效。文章从三方面展开:招聘上,重视能公开演示工作、深度使用 AI(如 Claude Code、Codex)的候选人,用真实生产作品替代面试表演;标准上,要求所有员工(包括高管)在 30 天内交付可复用的 AI 工作流,并在 60 天内展现可衡量的改进,同时公司也需承诺提供权限、上下文和反馈;节奏上,通过'否定式指挥'和绿黄红风险边界消除等待,并以周、月、季度、年度的例行审查确保标准真正改变决策。

职场 › 管理 ericosiu 2026-08-2910.5 KB 8.8K 77 86

用 SKILL 一句话搞定书签整理,还能导出漂亮的导航站

本文介绍了一款名为 rico-bookmark-manager 的工具,旨在解决浏览器书签过多、难以整理的痛点。用户只需导出书签 HTML,通过 SKILL 简单指令,即可实现自动分类、死链检测及去重。此外,该工具还能利用内置的设计系统主题,一键生成个性化的本地静态导航站,确保数据的本地掌控与安全。

技术 › Skill RicoUI 2026-07-028.1 KB 2.5K 14

构建企业级AI大脑:从数据捕获到智能反馈的5层架构

本文阐述了构建“企业大脑”的核心理念:单纯的信息存储不是智能,关键在于建立连接上下文与工作的智能层。作者提出了一个5层架构体系:捕获、检索、信源分级、权限管理和反馈闭环。通过将散落在Slack、CRM、通话录音中的原始数据转化为可执行的情报,系统能实现自我进化,将人类纠错转化为新规则,从而提升整个组织的执行效率。

技术 › Agent ericosiu 2026-05-3010.7 KB 987.4K 967 88

Build Your First Agent

文章旨在通过简洁易懂的语言,帮助初学者在一下午的时间内构建第一个 AI Agent。作者指出 Agent 本质上是一个包含模型、工具集和循环的简单程序,并提出了“四步构建法”:定义目标、列出工具、选择运行时、编写系统提示。此外,文章还分享了五条实用规则(如展示工作过程、使用计划模式等)以避免常见陷阱,并列举了适合初学者的实践项目,强调构建 Agent 的核心在于理解其循环逻辑。

技术 › Agent rico 2026-05-087.2 KB 7.7K 107 76

Agent-Native 产品设计指南:2026 年设计师的新工作流

文章探讨了 2026 年产品设计师角色的转变,即从传统的像素推动者转变为利用 Agent 进行生产的规划者。作者详细阐述了新的工作流程(80% 规划,20% 执行),并提出了设计师应首先构建的四类核心文件:strategy.md(策略)、design.md(视觉规范)、CLAUDE.md(结构规范)和 product-pulse routine(反馈循环)。文章指出,通过编写这些高质量的文档和规范,设计师可以更有效地指挥 Agent 完成设计与开发,极大地缩短交付周期。

技术 › Agent rico 2026-05-0611.1 KB 27.5K 315 85

design.md:2026年的设计系统新原语

文章指出在2026年,项目中最重要的设计文件不再是 Figma 库,而是位于代码仓库根目录下的 design.md。文章解释了随着 Claude Code、Cursor 等 AI 编程工具的普及,通过 Markdown 文件定义视觉规则(如 Token、布局、组件样式)已成为让 AI 生成符合品牌 UI 的最佳实践。文中提供了 design.md 的标准五段式骨架,并详细说明了如何通过颜色、排版、组件和可访问性规则来约束 AI 生成结果。

技术 › 工具与效率 rico 2026-04-308.7 KB 49.8K 462 85

开源 AI 营销兵器库:6 个新技能与 32K 行生产级代码

作者分享了其开源的 AI 营销技能库,新增了 6 个实战技能(长视频切片、短视频生成、站点克隆、内容评估、线索档案、字幕生成)。这些工具均为经过真实商业环境验证的生产级代码,旨在通过开源建立信任和商业漏斗,而非提供简单的 Demo。

技术 › Agent ericosiu 2026-04-2415.3 KB 85.5K 180 83