界面诊断、四方向预览、实现验收与封面创作

乔木 Design

让设计选择落到真实页面

qiaomu-design 先明确页面要让用户完成什么，再按任务选择诊断、四方向预览、打磨或设计系统整理。选定方向后修改真实项目并检查页面；封面创作走独立的图片流程。

作者 向阳乔木

安装与上手查看 GitHub
作者横评中的 Lumina 会议纪要落地页，左侧标题与试用按钮，右侧产品界面示意。打开作者原图

围绕主标题、试用入口和产品界面组织首屏，用于观察作者案例的内容层级。

查看作者案例出处

原图来自作者仓库的横评展示，不是本站生成或运行。画面中的业务数字属于演示内容；这些历史截图也不证明当前版本每项检查都已通过。 MIT © 向阳乔木。

作者列出的使用环境

  • Claude Code
  • Codex
GitHub Star
663
版本
3.10.0
资料核对
分类
设计与视频产品与项目

先确定任务，再决定是否需要四方向

已有产品先明确是诊断、局部打磨还是重设计。需要换方向时，用同一份真实内容看四个样机，并说清想保留和想调整的部分；选定后再检查真实页面是否完成用户任务。

选一个任务，开始使用

在终端安装后，让客户端确认识别到 qiaomu-design 的根 SKILL.md，再打开目标项目并提供真实材料。示例里的文件名、页面和范围需要换成自己的；第一次可从下面的新设计任务走完整流程。

按这次要交付的东西选择入口

适合从零设计或更换视觉方向。先准备真实文案、素材、目标受众、必须保留的品牌与功能，以及可运行项目。第一阶段得到可比较的缩尺样机，选择后才进入正式页面实现。

  1. 安装到支持 Agent Skills 的客户端

    在终端运行，需 Node.js 与 npx。按安装工具提示选择客户端和安装范围，保留完整 references 与 scripts。安装后在客户端明确说“使用 qiaomu-design”；网页任务的浏览器、项目运行环境和封面任务的生图能力由宿主提供。

    npx skills add joeseesun/qiaomu-design
    查看作者安装说明

    安装后先确认技能目录与项目能运行

    npx 安装工具会按所选客户端安排目录；确认实际安装位置内有根 SKILL.md、references 和 scripts，不要把示例路径当成自己的路径。界面任务先确认项目原有启动方式，提供真实文案与保留项。方向预览由代理调用包内服务，给出当前本地 URL 和 index.html；重启服务后使用新地址。确认后检查代理收到的方向、拨盘和建议确属本轮，再继续正式实现。

    查看安装与环境说明

  2. 把这段话发给 AI

    以下提示词由本站依据固定提交编写，未调用模型执行。它们说明输入、互动与预期交付；实际文件、界面或图片需要在你的环境中生成并检查。

    使用 qiaomu-design 重设计当前项目的中文会议纪要工具首页。先读 brief.md、现有首页代码、DESIGN.md（如有）和我提供的素材；目标是让访客三秒内明白它能把会议内容变成行动项，并找到已有试用入口。保留品牌名称、登录路径和现有组件库。先写清用户任务、保留项和视觉冒险度、动效强度、信息密度；只在关键资料缺失时提问。按协议生成同页 A/B/C/D 四个真实方向样机，使用同一份真实内容，布局与字体等多个维度有实质差异，遮住颜色仍能区分。保存到 design-previews/YYYY-MM-DD-meeting-home/index.html，给出本地预览地址与文件路径，核对桌面和手机展示、选择按钮、拨盘数值及确认弹层。等我确认方向和调整建议，并核实本轮选择已收到后，再更新 DESIGN.md、修改首页及直接依赖文件。由当前代理完成，保留已有改动；最后运行项目检查、实际查看桌面和手机、修复主要问题，交付修改清单与已验证和未验证事项。

  3. 检查你拿到的结果

    • 首次得到四方向预览、简短推荐理由、可调参数和选择方式；正式实现等待你的本轮选择。样机不是四个完整生产页面。
    • 选定后得到项目 DESIGN.md、真实文件改动和验证记录。先检查四方向是否真的不同，再操作试用入口、键盘焦点与手机布局；截图或勾选不能替代功能检查。
    查看这项任务的作者说明
进一步了解这个 Skill

qiaomu-design 是给编程代理使用的一套设计流程，不是独立设计软件。它先说明页面类型、受众和气质，再写清页面存在的理由、用户三秒内应知道什么、必须完成什么动作。视觉冒险度、动效强度和信息密度三个拨盘只调整表现，不替代这些任务要求。当前默认由正在使用的代理执行，不要求改用某个指定模型。

新建或重设计时，“风格试衣间”是中间决策步骤：一个 HTML 页面并列展示 A/B/C/D 四个真实缩尺样机，用实际内容比较布局、字体和色彩，而不是四个风格形容词。点方向或按 1–4 先进入确认弹层，可以附上拨盘值和调整建议；确认选择并被代理读取后，才继续正式实现。它不是四个已经完成的应用。

正式实现先把方向写入项目 DESIGN.md，再改真实文件，补齐焦点、加载、空态、错误等状态。作者要求实际查看桌面和手机，找出关键问题、做第二轮修正并删掉无用装饰。已有页面若方向成立，可直接打磨；只要求审查时，应交付诊断并停止修改，不必把所有任务都送进四方向流程。

这套方法带有鲜明的作者偏好，也提供 58 个站点的设计参考文档、Carbon 组件与流程决策摘要，以及中文排版资料。使用时从少量参考中提取可解释的做法，适配自己的品牌和现有组件。当前用户要求与项目事实优先；参考中的品牌色、字体和禁令不能不加判断地全部搬入项目。

当前版本还含公众号、B站、YouTube、微信图文笔记与小红书封面路径。它们需要真实内容、可用的图像生成能力和逐张检查，交付图片及裁切或小图预览，不要求网页的拨盘、DESIGN.md 或本地选择服务。不同平台应重新构图，平台预设与点击率经验也不能当作永久规格或效果保证。

来源与核验

资料核对

已阅读固定提交的主技能、安装说明、所用参考与回传脚本，并查看作者仓库案例原图。未安装或运行该技能，未调用模型、生成页面或封面，也未验证作者案例的交互及效果。

作者说明技能原文任务路由与交付约定方向样机与确认回传58 站参考目录封面平台资料及证据等级版本变更记录

继续做界面打磨，或进入设计工作台

Impeccable 可进一步处理既有界面的审查与细节；OpenDesign 提供独立工作台来管理设计文件、预览与导出。它们与本 Skill 的安装和使用方式不同。

Impeccable从一个页面或组件开始，分别处理使用体验、技术质量、异常状态和交付细节；让助手理解产品，再选择合适的改进命令。OpenDesign把简报、参考和设计规范交给 AI，在 OpenDesign 应用里生成网页原型或演示稿，边看边改。Baoyu Design五个设计入口：baoyu-design 推进界面方案与交付，claude-design 在画布里改字、调样式和比较。UI UX Pro Max从本地设计资料中选择页面方向、主题规则或组件建议，保留选择依据，再由助手实现和检查。