用途:针对用户指定的 UI 美学风格,生成详尽、可直接实施的设计系统文档,供编码智能体忠实实现该风格。
主要能力与工作流:先从用户请求中识别美学风格;读取 references/aesthetic-catalog.md 查看是否已有预研数据;若目录中没有或用户需要自定义变体,则进行网络研究,收集实现级细节(精确 CSS 值、字体、颜色、时间函数);读取 references/output-schema.md 获取所需结构;按输出模式逐节填入具体、可复制粘贴的值;最终以 markdown 文件交付,默认路径为 .claude/docs/{aesthetic-name}-design-system.md。
研究协议:搜索“{aesthetic} CSS”“{aesthetic} UI design system”“{aesthetic} web design examples”;查找开源实现、CodePen 示例、设计系统文档;提取十六进制色值、字体名、px/rem 值、cubic-bezier 曲线、阴影语法;交叉比对多个来源,区分本质属性与特征属性。
输出要求:颜色必须为 hex 或 HSL 值;字体须为具体字族并带回退栈;间距用 px 或 rem;过渡须含时长与时间函数;每个交互状态(hover、active、focus、disabled)须有明确 CSS;每个组件须定义全部伪状态;在适用处同时给出 CSS 自定义属性与 Tailwind 等价写法。
定制:可指定框架(Tailwind、原生 CSS、CSS-in-JS)调整输出格式;可混合美学(如“粗野主义加柔和阴影”)并标注属性来源;可生成特定变体(如深色/浅色赛博朋克);也可只生成部分章节(如仅颜色、仅排版)。
限制:资料未提供具体收费、价格、平台支持范围或效果保证;实际研究结果取决于可获取的公开来源。