关于 aesthetic-guide
为指定的 UI 美学风格生成可直接实施的设计系统指南。技能会查询现有目录或研究细节，再按结构输出包含具体数值的 Markdown 指南。
主要功能
- 01查询已研究风格目录
- 02研究自定义或未收录风格
- 03提供颜色、字体、间距与动效数值
- 04列出 CSS 变量及 Tailwind 对应项
- 05生成 Markdown 指南
适用场景
- 01记录指定的视觉美学风格
- 02为编码 Agent 准备设计实现依据
- 03定义特定框架或混合风格
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/aesthetic-guide确认已加载。
附带文件references/aesthetic-catalog.mdreferences/output-schema.md
详细介绍
美学指南
为指定的 UI 美学编写详尽、可直接用于实现的设计系统文档。输出应是一份参考指南，细致到编码 Agent 几乎无需自行判断，就能忠实地实现这种美学。
工作流
- 识别美学：根据用户的请求确定美学风格
- 查阅目录：阅读 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 曲线、阴影语法
- 交叉参考多个来源，找出定义该美学的共识属性
- 区分必要属性（缺少这些属性，就不再属于该美学）与特征属性（常见但可选）
输出要求
- 每种颜色都必须使用十六进制或 HSL 值，不得使用“深蓝色”等名称
- 每种字体都必须指定具体字体系列，并提供备用字体栈
- 每个间距值都必须使用 px 或 rem
- 每个过渡都必须指定持续时间和时间函数
- 每种交互状态（悬停、激活、聚焦、禁用）都必须提供明确的 CSS
- 每个组件都必须定义所有伪状态
- 在适用时，同时提供 CSS 自定义属性（变量）和 Tailwind 对应写法
自定义
用户可能会要求：
- 指定框架（Tailwind、原生 CSS、CSS-in-JS）——调整输出格式
- 混合风格（“粗野主义搭配柔和阴影”）——融合美学风格，并注明各属性分别来自哪种风格
- 指定变体（“暗色模式赛博朋克”或“亮色模式赛博朋克”）——生成指定变体
- 部分指南（仅颜色、仅排版）——只生成用户要求的部分
评论
支持 Markdown