Wiki 知识库

全部文档 / 作者: RicoUI (@ricouii) / 标签: 前端

5 篇
清除

项目启动前沟通文档目录: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

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

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