Developer Shares a Prototype-First Workflow with Claude Design
A developer describes using Claude Design and Baoyu-Design Skill to validate local UI prototypes before asking an AI coding agent to implement product changes.
The developer says they begin each project by refining a UI prototype with Claude Design, saving it locally, and maintaining it with Baoyu-Design Skill. When a feature is requested, the prototype is updated and approved before implementation begins, allowing design decisions to be tested at relatively low cost.
The workflow was later added to AGENTS.md or CLAUDE.md so the coding agent would treat prototype changes as the default first step. Because the design output includes frontend code and structured data, the developer also uses Git diffs to review design history and provide implementation context.
Baoyu-Design’s public documentation supports its local workflow for generating, previewing, iterating on, and versioning self-contained HTML design deliverables. Claims about the author’s specific project results and complete consistency between the prototype and implementation remain personal testimony rather than independently verified facts.
Source evidence
baoyu-design：在本地AI代理上运行Claude Design的终极指南_侯忱励-AI Agent技术社区agent.csdn.net · supporting所有这些都以独立的HTML文件形式输出，无需网站、额外订阅或上传步骤。 baoyu-design运行界面展示 baoyu-design运行界面展示 ### 为什么选择在本地运行？ #### 🚀 摆脱网站限制 你可以获得claude.ai/design的绝大部分功能，而无需离开编辑器——相同的方法学、相同的工艺标准、相同的输出格式。 #### 💪 与Opus 4.8完美配合 这个技能是一个复杂而要求严格的设计指令；模型越强大，结果就越好。搭配Claude Opus 4.8可获得最佳输出，同时它在其他功能强大的模型上也能很好地工作。 #### 🔄 可视化迭代编辑 由于交付物是通过localhost提供的纯HTML，你可以利用代理内置的浏览器预览和元素注释工具（Cursor Browser/DevTools、Claude Preview或Codex Browser）。只需指向实时预览中的按钮，说出你想要的更改，代理就会编辑底层源代码——这种紧密的可视化二次编辑循环在网站上很难实现。 #### 🛡️ 完全掌控你的成果 输出会以独立HTML的形式保存在`designs/<project>/`目录中，你可以对其进行版本控制、分支、导出或部署。 `designs/<project>/` ### 它能创建什么？ baoyu-design驱动完整的设计流程——从澄清问题→收集设计上下文→生成一个或多个HTML交付物→预览和验证。它提供了丰富的内置技能和一套现成的组件支架。 [...] | 领域 | 内置技能 | --- | | 核心设计 | 高保真设计 · 交互式原型 · 线框图 · 前端美学指导 | | 演示文稿 | 制作演示文稿 · 演讲备注 | | 移动与动画 | 移动原型 · 动画视频 · 音效 | | 设计系统 | 创建设计系统 · 使用设计系统 · 设计系统预览 · 设计组件(.dc.html) · 可调整参数 | | 导入源 | Figma .fig(离线解码) · GitHub仓库 · 现有HTML/CSS | | 导出与交付 | 独立HTML · PDF · PPTX(可编辑) · PPTX(截图) · 发送到Figma · 发送到Canva · 交付给Claude Code | | AI资产与集成 | Gemini图像生成 ·
AGENTS.mdagents.md · supporting``` [...] <footer> <p>Copyright © AGENTS.md a Series of LF Projects, LLC<br></br>For web site terms of use, trademark policy and other project policies please see
为什么我的 Claude Code 老是不按我说的做？如何写出让 Agent 准确执行的「共识协议」-腾讯云开发者社区-腾讯云cloud.tencent.com · supporting验证策略：让 Agent 自证正确 多 Agent 场景下的共识问题 五个常见反模式（以及怎么修） + 反模式 1：厨房水槽式（Kitchen Sink） + 反模式 2：过度指定（Over-Specified） + 反模式 3：反复纠正不记录（Correct-and-Forget） + 反模式 4：信任-验证缺口（Trust-then-Verify Gap） + 反模式 5：无限探索（Infinite Exploration） 一个可以直接抄的模板 常见问题 我的判断 相关产品与服务 微服务引擎 TSE 微服务引擎（Tencent Cloud Service Engine）提供开箱即用的云上全场景微服务解决方案。支持开源增强的云原生注册配置中心（Zookeeper、Nacos 和 Apollo），北极星网格（腾讯自研并开源的 PolarisMesh）、云原生 API 网关（Kong）以及微服务应用托管的弹性微服务平台。微服务引擎完全兼容开源版本的使用方式，在功能、可用性和可运维性等多个方面进行增强。 产品介绍产品文档 2026上云采购 | AI焕新·智启新局 ### 社区 + 技术文章 + 技术问答 + 技术沙龙 + 技术视频 + 学习中心 + 技术百科 + 技术专区 ### 活动 + 自媒体同步曝光计划 + 邀请作者入驻 + 自荐上首页 + 技术竞赛 ### 圈层 + 腾讯云最具价值专家 + 腾讯云架构师技术同盟 + 腾讯云创作之星 + 腾讯云TDP ### 关于 + 社区规范 + 免责声明 + 联系我们 + 友情链接 + MCP广场开源版权声明 ### 腾讯云开发者 扫码关注腾讯云开发者 ### 热门产品 [...] ### 腾讯云开发者 扫码关注腾讯云开发者 ### 热门产品 域名注册 云服务器 区块链服务 消息队列 网络加速 云数据库 域名解析 云存储 视频直播 ### 热门推荐 人脸识别 腾讯会议 企业云 CDN加速 视频通话 图像分析 MySQL 数据库 SSL 证书 语音识别 ### 更多推荐 数据安全 负载均衡 短信 文字识别 云点播
CLAUDE.md 和 AGENTS.md：让 AI 编程智能体真正遵循你规则的配置层tianpan.co · supporting最关键的内容是助手无法仅从代码中推断出的东西： 工具链详情：`yarn` vs. `npm` vs. `pnpm`；为什么项目使用特定的测试运行器；从 `package.json` 中无法一眼看出的构建标志 工作流预期：如何构建 commit、PR 惯例、在完成前是否需要运行类型检查 非显式约束：自动生成的且绝对不能编辑的目录、在构建时从别处复制的文件、运行时需要的环境变量 架构决策：哪一层负责什么、为什么存在特定的抽象、团队已经拒绝的已知反模式 助手在每个会话开始时都会阅读此文件，并以此来校准其整个过程中的决策。你可以将其视为一种能够跨越模型更新、团队更迭和会话边界的集体记忆。 ## CLAUDE.md vs. AGENTS.md：选择合适的格式 这两种格式的用途相同，但在范围和功能上有所不同。 CLAUDE.md 是 Claude Code 的原生格式。在所有助手指令格式中，它的功能集最为丰富： [...] AGENTS.md 是由 Linux 基金会旗下的 Agentic AI Foundation 管理的开放标准。它得到了 60 多种工具的支持：OpenAI Codex、Cursor、GitHub Copilot、Windsurf、Aider、Gemini CLI、Zed、Warp、Devin、JetBrains Junie 等。该格式是纯 Markdown —— 没有必填字段，没有特殊语法。在目录树中，距离被编辑代码最近的文件具有最高优先级。 OpenAI 的 Codex 实现增加了三级层次结构（全局 `~/.codex/AGENTS.md` → 项目根目录 → 子目录 `AGENTS.override.md`）、32 KiB 的大小限制以及可配置的备用文件名。`openai/codex` 仓库本身在其目录结构中分布使用了 88 个 `AGENTS.md` 文件。 实际的问题是该使用哪一个。如果你的团队主要使用 Claude Code，`CLAUDE.md` 通过导入、路径限定和 hooks 为你提供更大的杠杆作用。如果你的团队使用多种工具 —— 或者如果你维护一个开源项目，贡献者可能使用任何助手 —— 那么 `AGENTS.md` 是更有价值的选择，因为一个文件就能让所有人受益。 许多团队两者兼顾：`AGENTS.md` 保存适
我自己用下來，越來越覺得 CLAUDE . md 或 AGENTS . md 沒有什麼特別的用途。 真的必要，我就是在專案裡放一個文字檔，請 Coding Agent 要執行任務的時候先讀進來再往下做，效果還行。 另外，CC 的 Sub Agent 外加 AskUserQuestion tool 有夠好用，直接讓 CLAUDE . md 的存在感更低了。threads.com · supporting# Thread 2.7K views kaochenlong's profile picture kaochenlong A Threads user's profile picture 我自己用下來，越來越覺得 CLAUDE . md 或 AGENTS . md 沒有什麼特別的用途。 真的必要，我就是在專案裡放一個文字檔，請 Coding Agent 要執行任務的時候先讀進來再往下做，效果還行。 另外，CC 的 Sub Agent 外加 AskUserQuestion tool 有夠好用，直接讓 CLAUDE . md 的存在感更低了。 Translate 62 3 2 Log in or sign up for ThreadsSee what people are talking about and join the conversation. Log in with username instead
baoyu-design/README.zh-CN.md at main · JimLiu/baoyu-design · GitHubgithub.com · supporting展开查看共同使用的 Prompt ``` ## 信息采集 信息采集 1. - - - - 2. - - - ## 信息编辑和分类 信息编辑和分类 1. 2. 3. 4. ## AI 辅助 AI 辅助 1. 2. 3. 4. ``` ## 为什么在本地跑 摆脱对网站的依赖。 不必离开编辑器，就能用上 `claude.ai/design` 绝大部分的功能 —— 同一套方法论、同样的工艺标准、同样的产出格式。 搭配 Opus 4.8 效果最佳。 这个技能本身是一份冗长且要求很高的设计指令，模型越强、效果越好。建议搭配 Claude Opus 4.8 获得最佳结果；在其他能力足够的模型上也能良好运行。 用「指」代替「描述」来迭代。 因为产物就是跑在 `localhost` 上的普通 HTML，你可以充分借助 Agent 自带的网页预览与元素标注能力（Cursor Browser / DevTools、Claude Preview 或 Codex Browser）：在实时预览里直接点选某个按钮，说出想改成什么，Agent 就会去改对应的源码 —— 这是一条紧凑、可视化的「二次编辑」回路，在网站上很难做到。 一切都归你所有。 产物会落到 `designs/<项目名>/` 目录下，是可以纳入版本控制、二次分叉、导出或直接上线的自包含 HTML。 ## 它能做什么 这个技能会驱动一套完整的设计流程 —— 先问澄清问题 → 收集设计上下文 → 产出一个或多个 HTML 交付物 → 预览并校验。它内置了一大批子技能，外加一组开箱即用的组件脚手架。 [...] 凡是以设计系统形式导入的内容，都会编译成一个自包含、可交互的 `preview.html`。下图就是社区版 Chakra UI Figma Kit 的 `.fig` 经过一次导入对话后的样子 —— 28 个按语义分组的组件、400 多个整理过的 token、规范卡片，外加一个自行创作的 showcase，全部可以在一个文件里浏览： ## 幻灯片与 PPTX 导出 让它做一套幻灯片，产出方式和别的交付物一样 —— 一个自包含的 HTML 网页，用 `deck-stage` 组件和制作演示文稿子技能搭建。因为幻灯片本身就是一个网页，整个编辑回路都发生在你已经在用的环境里： 用「指」来预览和修改。 在 Agen